随笔分类 - JavaScript
浏览器脚本语言
摘要：前言 众所周知，esmodule导出的值是对应模块导出值的引用，一旦模块内部使该值发生了变化，获得的值也会变化。而commonjs种的require函数，是获取了该模块导出值的拷贝，如果原模块中的值发生了变化，是拿不到最新的值的，那么有没有办法可以获取到最新的值呢。 解决思路 既然正常方法是拿不到对
阅读全文
摘要：前言 Object.create与new都可以用来生成一个对象，那么它们之间有什么区别和联系呢 分析 先看一下用法，很明显可以看出，new是生成一个基于构造函数生成一个新对象，而Object.create是基于某个对象，将这个对象作为原型链实现的一个新的空对象。 function O(a) { th
阅读全文
摘要：前言 之前老是听别人提到WebAssembly这个词，一直对其比较模糊，不能理解是个啥东西，后来自己实践了一下，发现其实就是一种提高代码性能的手段。 简介 WebAssembly 是一种运行在现代网络浏览器中的新型代码，并且提供新的性能特性和效果。它设计的目的不是为了手写代码而是为诸如 C、C++和
阅读全文
摘要：前言 有时候，需要提高一些开发效率，我们通常会使用一些优秀的代码编辑器，比如vscode。在使用vscode的时候，会用到很多插件，有时候也会萌发想要去开发这个插件的念头。既然想到了，那就动手试一下。 开发过程 我感觉最快的上手方式不是讲一些虚头巴脑的概念，先去试一下怎么去实现一个简单的插件，写得多
阅读全文
摘要：有时候，有些功能比较通用，但是又不好加在代码中，就可以考虑做成浏览器插件的形式。下面我以一个最基础的插件来讲一下这个插件的开发、打包、以及发布过程。 代码结构 index.html manifest.json 代码内容 // manifest.json，其它的一些配置可以参照https://deve
阅读全文
摘要：使用过很多次滑块验证码的功能，偶然一次想起来，能不能简单的实现一个呢，于是就尝试了一下，然后记录下来了，图个乐子。 思路 首先是绘制一张图片，自然而然，要用canvas了，就像下面这样，首先加载一张图片，然后去绘制到canvas中。 <div id="validate"> <canvas id="c
阅读全文
摘要：循环引用 使用JSON.stringify()时，遇到循环引用的时候，会抛出错误TypeError: Converting circular structure to JSON，如果需要强行转成字符串的话，需要利用到该方法的第二个参数。 主要思路其实就是将循环引用的部分替换成某个标识，等到解析的时候
阅读全文
摘要：多叉树的深度优先和广度优先遍历 深度优先的思想比较常见，就是使用递归，没什么好说的。 广度优先的思想，主要是需要借助一个队列，不停地将同一层级的子节点放入队列，然后依次从队列中取出执行。 /** * var Node = { * data: null, * children: Array<Node>
阅读全文
摘要：javascript中异步任务的执行顺序 经常会遇到一些异步任务的执行顺序问题，接下来就来看几个常见的例子，答案解析在后面，可以自己先分析一下，看看执行结果，这样比较有利于查漏补缺。 // 微任务，宏任务的场景 setTimeout(() => { console.log(1) Promise.re
阅读全文
摘要：前端图片压缩 需求：最近做项目，要求900k-5M的图片，需要压缩到900K以下 实现：利用canvas.toDataURL(type, encoderOptions)或toBlob(callback, type, encoderOptions)实现 前置知识点 canvas.toDataURL(t
阅读全文
摘要：针对vue组件，编写对应的组件文档 使用vuepress直接通过markdown文件去动态生成对应的组件演示和代码预览以及说明。 准备工作 先安装vuepress，npm i vuepress -D。 接着安装vuepress-plugin-demo-container，npm i vuepress
阅读全文
摘要：源码位置 src/core/instance/events.js 逐行分析 首先看一下它里面用到的另一个文件中暴露的方法，在src/core/vdom/helpers/update-listeners.js中。 // 更新一个组件实例内部的事件的listener的方法 /** * on 一个list
阅读全文
摘要：源码位置 src/components/keep-alive.js。 逐行分析 // 获取组件的name function getComponentName (opts: ?VNodeComponentOptions): ?string { return opts && (opts.Ctor.opt
阅读全文
摘要：源码位置 src/core/observer。 主要源码分析 一个观察者对象。watcher.js。 let uid = 0 // 一个自增的id /** * A watcher parses an expression, collects dependencies, * and fires cal
阅读全文
摘要：代码位置 nextTick的实现在src/core/util/next-tick.js中。 主要代码块 根据当前环境，选择实现nextTick异步回调的途径。 // 首先是看当前环境支不支持Promise，如果支持Promise就使用Promise，添加了一个微任务 if (typeof Promi
阅读全文
摘要：需求 一个H5页面需要实现在ios的浏览器，android的浏览器以及微信中打开时支持打开手机的地图导航。 实现 let url = '' if (myBrowser1() 'android') { // 判断是安卓环境 url = `androidamap://navi?sourceApplica
阅读全文
摘要：前言 微信小程序的云函数真的很方便，对于私人开发者来说节省了一大笔的服务器费用，很舒服。在不考虑大用户量和数据量的情况下，使用起来也很舒服。 常见的用法 获取用户信息以及手机号，之前获取用户信息和手机号还需要自己再后端去做解密处理，现在有了云函数，啥解密都不做，直接传给云函数，到了云函数那边就是解密
阅读全文
摘要：最近把公司的项目里的高德地图api升级到了2.0，发现有一些变动的地方，先记下来 事件绑定 全部采用object.on()的形式去绑定事件，解绑事件是off。 定位 定位不再使用之前的事件绑定的形式，而是直接在方法中传入回调的方式来获取 geolocation.getCurrentPosition(
阅读全文
摘要：问题 最近遇到一个问题，就是项目上有时候部署的时候会用到nginx转发，然后nginx转发与不转发时取的一个ws的地址一个是取当前的ip端口，一个是取配置中的ip端口。这种情况本地调试的时候，由于本地是localhost，导致了ws无法成功建立连接，需要做一些特殊处理，在开发环境，将代理的项目的ip
阅读全文
摘要：前言 对于某个页面中的某个组件，很多时候需要其保持一直激活的状态，之前我的博客里面有一篇提到一种缓存策略，就是利用Route的children方法来display该组件或隐藏该组件。但是这种方式需要借助到Route组件并且只能缓存整个页面，而不是页面中的部分组件。并且这种缓存单纯的只是在页面上把它的
阅读全文
浙公网安备 33010602011771号