0

从架构入手轻松读懂框架:以jQuery,Zepto,Vue和lodash-es为例

知道有没有朋友有这种经历。雄心勃勃的打开一个开源框架的源码,开始看,一行一行的看下去,看了几行就感觉,“我艹,这什么玩意儿”,然后就看不下去了。如果你有类似的经历,可以看看本文,本文会以几个常见开源库为例讲解几种常见的开源框架的代码架构,从架构出发,帮你轻松读懂框架源码。记住以下两个要点:不要一行一行的读代码先找入口,再理架构,依流程读下去jQuery以jQuery为例,来看看他的基本架构,然后再来一步步看看这个是什么意思,如果大家能够打开代码跟着我一步步走下去,食用效果更佳:找入口我们这里用的版本是3.4.1, 我们用npm将jQuery下载下来,然后去 node_modules 里面找到他...

阅读全文>>

0

Fuse.js——用于JavaScript中数据的模糊搜索

介绍Fuse.js是一个功能强大、轻量级的模糊搜索库,没有依赖关系。一般来说,模糊搜索(更正式地称为近似字符串匹配)是一种寻找近似等于给定模式(而不是精确地)的字符串的技术。Githubhttps://github.com/krisk/fuse使用场景当你需要对小到中等大小的数据集进行客户端模糊搜索时。基本使用// 1. 要搜索的数据列表 const books = [ { title: "Old Man's War", author: { firstName: 'John', lastName: 'Scalzi' } }, { ...

阅读全文>>

0

各种各样加密算法的js库,安全加密不再愁——crypto-js

介绍crypto-js是一个前端Javascript标准加密算法库,CryptoJS (crypto.js) 为 JavaScript 提供了各种各样的加密算法。有时候项目涉及到的敏感数据比较多,为了信息安全,我们常常需要对一些数据进行接口加密处理,如编码、将明文转化为暗文、加密比对,目前已支持的算法包括:MD5、 SHA-1、SHA-256、AES、Rabbit、MARC4、HMAC、HMAC-MD5、HMAC-SHA1、HMAC-SHA256、PBKDF2等Githubhttps://github.com/brix/crypto-js安装使用npm进行安装npm install crypt...

阅读全文>>

0

快速了解JavaScript的BOM模型

ECMAScript是JavaScript的核心,而BOM(浏览器对象模型,Browser Object Model)是在Web中使用JavaScript的核心。在BOM对象中,window对象是最顶层对象,在浏览器环境中它是一个Global全局对象,其它对象是window对象的子对象(属性)。BOM主要用于管理浏览器窗口及窗口之间的通讯。下面是BOM对象的组成结构。window对象window是BOM的核心对象,表示浏览器的一个实例。有双重角色,即是通过JavaScript访问浏览器窗口的一个接口,又是ES规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数,都以windo...

阅读全文>>

0

JavaScript最受欢迎日历组件FullCalendar

简要介绍FullCalendar是一款JavaScript用于展示日历的组件。它在github上有13.1k颗星,足见其受欢迎的程度。它支持100多种的自定义设置,可以设置不同的视图、主题、事件等等。目前支持与主流的React、Vue、Angular框架的集成。最新版本:v5.4.0。我对它的评价是:单品类爆款。Github地址https://github.com/fullcalendar/fullcalendar安装npm install fullcalendar引用import { Calendar } from '@fullcalendar/core';import dayGridPlu...

阅读全文>>

0

Web端非常有用的一个文件上传插件——FilePond

介绍FilePond是一个JavaScript库,它提供流畅的拖放文件上传功能。可以上传任何你扔在它上面的东西,优化图像以便更快地上传,并提供一个非常优雅的、可靠的、平滑的用户体验。Github基于MIT开源协议https://github.com/pqina/filepond适配框架核心库是用普通JavaScript编写的,因此可以在任何地方使用。可以在不同的框架中使用,提供了React、Vue、Svelte、Angular、jQuery。你可以选择和自己项目一致框架的适配库示例实现<input type="file" class="filepond" name="f...

阅读全文>>

0

一款思维导图显示编辑javascript类库jsmind

jsMind 是一个显示/编辑思维导图的纯 javascript 类库,其基于 html5 的 canvas 进行设计。jsmind我们介绍下一个简单示例,本文仅做一个推荐。下载资源1.我们在github上下载该项目,里面包含了jsmind的js和css文件。github地址:https://github.com/hizzgdev/jsmind 。或者自行在github上搜索 hizzgdev/jsmind项目下载Zip文件。hizzgdev/jsmind该项目包含了几个主要目录:example:demo文件存放目录,可以根据该文件学习Jsmind。js:Jsmind的js脚本,我们开发时需要...

阅读全文>>

0

手写 Promise

前言都 2020 年了,Promise 大家肯定都在用了,但是估计很多人对其原理还是一知半解,今天就让我们一起实现一个符合 PromiseA+ 规范的 Promise。附 PromiseA+ 规范地址: https://promisesaplus.com/简单版我们都知道 Promise 的调用方式,new Promise(executor), executor 两个参数,resolve,reject。所以现在我们的代码长这样class Promise { constructor(executor) { const resolve = () => {} ...

阅读全文>>

0

Unable to preventDefault inside passive event listener due to target being treated as passive.

在Chrome下调试时,忽然发现有一个错误日志,日志信息如下: Unable to preventDefault inside passive event listener due to target being treated as passive. 所有的操作好像都是正常的,但为什么还出现这样的错误提示呢。虽然不影响使用,但还是不想放过任何一个问题。 翻译一下:chrome 监听touch类事件报错:无法被动侦听事件preventDefault,是新版本chrome 浏览器报错。 说明:说一下这个 preventDefault()是个什么鬼,这个是取消默认事件的,...

阅读全文>>

0

理解JavaScript中的浅拷贝与深拷贝

浅拷贝在使用JavaScript对数组进行操作的时候,如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问题的发生var arr = ['aa','bb','cc'];var arr2 = arr;arr2[0] = '新来的';console.log(arr);//输出 '新来的','bb','cc'由此可见对数组arr2进行修改时,而arr内数据也会随之改变。这种直接赋值的方式就是浅拷贝现象。那到底是为什么呢?因为JavaScript存储对象都是存地址的,所以浅复制会导致 arr 和 arr2 指向同一块内存地址,大概的示意图如下。所以当修改...

阅读全文>>