哇塞,有好吃的~

随笔分类 -  JavaScript

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