![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 78
2024路在何方
某行业全球top1企业的前端主管
展开
-
JSON.stringify的三个参数你都用过吗?
前段时间勾股有提到stringify是支持三个参数,刷新的了我的认知,后来查到文档才发现还真的是支持三个参数的。参考资料:stringifystringify方法顾名思义,就是把JSON序列换,其语法如下:JSON.stringify(value[, replacer [, space]])注意到它接收三个参数,后面2个参数是可选的。只传一个参数var data = {name:"niuzai",info:{age:18,sex:"male"}};JSON.stringify(data);原创 2021-08-04 16:37:05 · 355 阅读 · 0 评论 -
微信小程序入门(更新中)
2020年将会是小程序井喷式发展的一年。本文带领大家一起入门微信小程序。从基础到进阶到高级再到实战,展现完整的小程序学习体系。其实,小程序只是一套框架,学习小程序就像小程序本身一样,即学即用,方便快捷。原创 2020-03-10 23:51:10 · 1109 阅读 · 0 评论 -
Vue-Router核心原理实现(文末附手写版源码)
VueRouter的核心原理一、VueRouter的核心组成部分主要实现以下几部分:modethis.router/this.router/this.router/this.routerouter-link/router-viewVue.use注册插件1、mode在vueRouter中,主要分为两种模式,一种是hash,一种是history。hash模式是通过监听...原创 2020-01-01 18:24:38 · 829 阅读 · 2 评论 -
一文读懂V8垃圾回收机制——新生代Scavenge、老生代Mark-Sweep和Mark-Compact
1 V8内存管理1.1 V8n内存限制64位系统可用1.4G内存32位系统可用0.7G内存1.2 V8内存管理JS对象都是通过V8进行分配管理内存的process.memoryUsage()返回一个对象,包含了Node进程的内存占用信息 console.log(process.memoryUsage()); //结果如下: { rss:...原创 2019-12-29 22:47:34 · 4298 阅读 · 0 评论 -
25、tapable(1)——介绍
晚上写原创 2019-02-12 18:08:58 · 471 阅读 · 0 评论 -
26、tapable(2)——SyncHook
SyncHook这是同步钩子,能够同步执行注册的监听函数SyncHook使用let {SyncHook} = require('tapable');class Lesson { constructor(){ this.hooks = { arch: new SyncHook(['name']) } } tap(){//注册监听函数 this.hooks.arc...原创 2019-02-12 18:09:56 · 794 阅读 · 0 评论 -
27、tapable(3)——SyncBailHook
SyncBailHookSyncBailHook同步熔断保险钩子,即return一个非undefined的值,则不再继续执行后面的监听函数SyncBailHook使用let {SyncBailHook} = require('tapable');//SyncBailHook同步熔断保险钩子,即return一个非undefined的值,则不再继续执行后面的监听函数class Lesso...原创 2019-02-12 18:10:58 · 1039 阅读 · 0 评论 -
28、tapable(4)——SyncWaterfallHook
SyncWaterfallHookSyncWaterfallHook,同步瀑布钩子,上一个监听函数的返回值会传递给下一个监听函数SyncWaterfallHook的使用let {SyncWaterfallHook} = require('tapable');//SyncWaterfallHook,同步瀑布钩子,上一个监听函数的返回值会传递给下一个监听函数class Lesson{ ...原创 2019-02-12 18:12:44 · 712 阅读 · 0 评论 -
【手写】MVVM原理3
刚写的原理,先放上来再说,后续补充解说compile.js/* 简单手写一把数据的编译,主要支持: 文本编译 输入框model编译 功能可以扩充,重在编译的思想。*/class Compile{ constructor(el,vm){ this.el = this.isElementNode(el) ? el : document.querySelector(el...原创 2019-03-17 21:28:03 · 347 阅读 · 0 评论 -
29、tapable(5)——SyncLoopHook
SyncLoopHookSyncLoopHook,同步遇到某个不返回undefined的监听函数,就重复执行SyncLoopHook的使用let {SyncLoopHook} = require('tapable');//SyncLoopHook,同步遇到某个不返回undefined的监听函数,就重复执行class Lesson{ constructor(){ this.ind...原创 2019-02-12 18:14:04 · 662 阅读 · 1 评论 -
24、webpack优化(9)——热更新
热更新所谓的热更新指的是对数据变化的局部进行更新,而不进行页面刷新。热更新配置在devServer中开启hot配置为true添加两个webpack的内置插件,分别为new webpack.NamedModulesPlugin()和new webpack.HotModuleReplacementPlugin(),前者用于打印更新的模块路径,告诉我们哪个模块热更新了;后者是热更新插件。...原创 2019-02-12 15:05:12 · 592 阅读 · 0 评论 -
23、webpack优化(8)——懒加载(动态加载)
懒加载在这里的懒加载,其实就是按需加载(动态加载)。需要对webpack进行相关配置。懒加载案例案例情景:当我点击按钮的时候,需要动态去加载resource.js,并读取该文件导出的内容//index.js/*在页面上有一个按钮,点击按钮去加载资源resource.js*/let button = document.createElement('button');bu...原创 2019-02-12 15:02:43 · 2794 阅读 · 0 评论 -
22、webpack优化(7)——抽取公共代码
抽取公共代码多页应用一般会重复多次使用部分公共代码,这样每次加载单页的时候,就会重复去加载这些公共代码,会造成以下问题:1. 相同资源重复被加载,浪费用户流量,增加服务器成本。2. 每个页面需要加载的资源太大,导致网页首屏加载缓慢,影响用户体验。那么,如果将这些公共代码抽取出来,并让浏览器缓存起来,用户在请求资源的时候,可以直接读取缓存中的这些代码,这样就能解决以上问题。如何抽...原创 2019-02-11 21:31:35 · 911 阅读 · 0 评论 -
21、webpack优化(6)——生产环境下webpack的2个内置优化:tree-shaking、scope-hosting
webpack自带的优化优化一:Tree-Shaking在生产环境下使用import引入(不是require)会自动去除没用的代码举例://a.jslet add = (a,b) => { return a + b + 'add';}let minus = (a,b) => { return a - b + 'minus';}exports...原创 2019-02-11 15:55:09 · 1626 阅读 · 0 评论 -
20、webpack优化(5)——happyPack多线程打包
happyPack多线程打包如何实现多线程打包?安装happypack npm i happypack改造webpack.config.js,实现多线程打包jslet HappyPack = require('happypack');module.exports = { ... module:{ rules:[ ...原创 2019-02-11 15:22:38 · 4159 阅读 · 0 评论 -
19、webpack优化(4)——DllPlugin动态链接库
DllPlugin场景需求举例我们在打包一个react的项目的时候,会把react和react-dom这两个库打包起来。而这两个库很大且基本不会变,所以如果每次打包都要打包这两个第三方包的话,浪费时间,消耗性能。所以,我们一般会采取如下操作:将react和react-dom单独打包好,然后动态链接引入即可。如果第二次打包,那么发现react和react-dom已经被打包好了,那么就不需...原创 2019-02-11 15:10:38 · 1999 阅读 · 0 评论 -
18、webpack优化(3)——IgnorePlugin
IgnorePlugin这是webpack内置插件这个插件的作用是:忽略第三方包指定目录,让这些指定目录不要被打包进去举例:moment包比如我们要使用moment这个第三方依赖库,该库主要是对时间进行格式化,并且支持多个国家语言。moment包打包的问题假设我们的代码值引入了以下一个APIimport moment from 'moment'//设置语言mome...原创 2019-02-09 23:00:05 · 10546 阅读 · 0 评论 -
17、webpack优化(2)——解析时指定和排除查找目录
loader解析时指定和排除查找目录这个很简单,就是指定loader解析的规则,哪些不需要解析,哪些需要解析。一般两者写其一就行。指定了目录,缩小了解析范围,自然能提升效率,这也算优化方法之一小小小点吧。module:{ noParse:/jquery/,//不去解析jquery中的依赖库 rules:[ { test:/\.js$/, exclude:...原创 2019-02-09 22:23:46 · 2738 阅读 · 0 评论 -
loader0、loader简介和载入方式
什么是loaderwebpack只能处理javaScript模块,如果要处理其他类型的文件,就需要使用loader进行转换。loader是webpack种的一个重要概念,它是指用来将一段代码转换成另一端代码的webpack加载器。配置loaderlet path = require('path');module.exports = { mode:'development',...原创 2019-02-14 08:23:13 · 583 阅读 · 0 评论 -
loader1、loader的配置和执行顺序
loader的配置配置单个loader请见上一个文件配置多个loader数组形式 let path = require('path'); module.exports = { mode:'development', entry:'./src/index.js', output:{ filename:'bundle.js', path:path.resolve...原创 2019-02-14 08:26:22 · 4449 阅读 · 0 评论 -
【手写】MVVM原理1
刚写的原理,先放上来再说,后续补充解说<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>MVVM</title></head><body> &a原创 2019-03-17 21:23:41 · 425 阅读 · 0 评论 -
虚拟DOM与DOMDIFF的原理(二)
关于虚拟DOM请看文章:点击进入任意门什么是DOMDIFF?DOMDIFF是用于比较两个虚拟DOM的区别,本质其实就是比较两个对象的区别(虚拟DOM本质是一个对象).DOMDIFF的作用根据两个虚拟对象创建补丁,这个补丁可以描述改变的内容,也就是可以描述两个虚拟DOM的差异,然后将这个补丁用来更新DOMDOMDIFF的优化策略规则:当节点类型相同时候,去看一下属性是否相同...原创 2019-04-17 23:50:02 · 362 阅读 · 0 评论 -
虚拟DOM与DOMDIFF的原理(一)
虚拟DOMvirtual dom,也就是虚拟节点。它是通过JS的Object对象模拟DOM中的节点,然后再通过特定的render方法将其渲染成真实的DOM节点。创建虚拟DOM本文基于react来写,但是其实跟react也没多大关系通过createElement方法来创建虚拟DOM,这个方法有三个属性type、props、children首先,虚拟DOM本身是一个对象,例如:...原创 2019-04-17 23:46:46 · 921 阅读 · 0 评论 -
【9大跨域解决方案】postMessage解决跨域的原理
postMessage()这是H5引入的一个API,可以实现跨文档、多窗口、跨域消息的传递。postMessage(data,origin)方法data:要传递的数据origin:字符串参数,只目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写如果要传递给所有窗口,值可以为"*"如果传给当前窗口同源的话,值可以为"/"message当使用postM...原创 2019-04-09 23:10:49 · 6293 阅读 · 0 评论 -
【9大跨域解决方案】websocket解决跨域的原理
websocket笔记webSocket本身不存在跨域问题,所以我们可以利用webSocket来进行非同源之间的通信。websocket如何实现跨域通信?原理:利用webSocket的API,可以直接new一个socket实例,然后通过open方法内send要传输到后台的值,也可以利用message方法接收后台传来的数据。后台是通过new WebSocket.Server({port:...原创 2019-04-08 23:29:15 · 35809 阅读 · 0 评论 -
【9大跨域解决方案】document.domain解决跨域的原理
document.domain笔记一级域名与二级域名直接看例子就能明白:一级域名:www.baidu.com二级域名:music.baidu.com显然,这是跨域的本地设置不同域名可以通过配置host文件来设置不同的域名一般host文件的目录为:C:\Windows\System32\drivers\etc 127.0.0.1 www.yuhua....原创 2019-04-08 23:25:16 · 3294 阅读 · 0 评论 -
【9大跨域解决方案】location.hash解决跨域的原理
通过hash实现跨域通信该方法跟window.name类似,有点神奇,有点绕,鲜有人用,但确实能够实现跨域通信。那么,我们下面详细讲解下如何利用hash实现跨域。引例前提准备:a.html,起在localhost:3000上b.html,起在localhost:3000上c.html,起在localhost:4000上可见a和b是同域的,c是独立的需求:在a页面获取...原创 2019-04-08 23:21:39 · 3331 阅读 · 0 评论 -
【9大跨域解决方案】CORS解决跨域的原理
cors笔记(开发中最常用,安全性高,主要靠服务端做手脚)什么是CORS?CORS即“跨域资源共享”,这是一种最常用的跨域实现方式,一般需要后端人员在处理请求数据的时候,添加允许跨域的相关请求头信息。大致思路是这样的:首先获取请求对象的信息,比如Origin字段,通过预先配置的参数判断请求是否合法,然后设置相应对象response的头信息,实现跨域资源请求。响应头设置Access-C...原创 2019-04-02 23:33:48 · 4235 阅读 · 0 评论 -
【9大跨域解决方案】jsonp跨域解决原理
方法一:jsonp1. 概念由于link、img、script等标签的src属性可以实现跨域请求,所以一般前端会使用script来接收后端返回的函数执行。具体步骤如下:后端返回一个函数执行,比如函数名是cb,函数执行的传入参数是一个对象{a:1},即cb({a:1})前端js脚本定义好一个跟函数执行同名的函数cb以及形参params,这个params其实就是我们要得到的数据利用sc...原创 2019-04-02 23:28:32 · 2498 阅读 · 0 评论 -
【9大跨域解决方案】跨域原理
9大跨域解决方案同源策略只要以下三者,有一个不一样,那就叫跨域。协议域名端口注意:子域不同,也叫跨域为什么浏览器不支持跨域cookie localStorage 均不支持跨域DOM元素也有同源策略,比如iframeajax也不支持跨域如果可以直接跨域,可以发送恶意请求,造成伪造的请求,会造成信息窃取等危险。跨域的原理当客户端向服务端发送请求后,服务...原创 2019-04-02 23:22:34 · 501 阅读 · 0 评论 -
【9大跨域解决方案】window.name解决跨域的原理
window.name跨域首先,当我们尝试去查看一个普通页面下,window的属性时候,确实存在name属性,并且值为空。那么,这个window.name存在的意义是什么呢?就如同标题所讲,可以解决跨域问题。那么,我们下面详细讲解下如何利用window.name跨域。引例前提准备:a.html,起在localhost:3000上b.html,起在localhost:3000上c...原创 2019-04-03 23:26:08 · 2830 阅读 · 0 评论 -
【手写】MVVM原理5
刚写的原理,先放上来再说,后续补充解说wather.js//观察者的目的就是给需要变化的那个元素增加一个观察者,当数据变化后,执行对应的方法。//vue的watch方法也是靠这个//用新值和老值进行比较,如果发生变化,就调用更新方法//vm.$data expr class Watcher{ constructor(vm,expr,cb){//cb就是更新方法 this...原创 2019-03-17 21:30:52 · 545 阅读 · 0 评论 -
【手写】MVVM原理4
刚写的原理,先放上来再说,后续补充解说obeserver.js/* 主要是把这个对象变成get和set*/class Observer{ constructor(data){ //专门用于劫持用的 this.observer(data) } observer(data){ //要对这个data数据,将原有的属性改成set和get的形式 //首先,data要...原创 2019-03-17 21:29:21 · 320 阅读 · 0 评论 -
【手写】MVVM原理2
刚写的原理,先放上来再说,后续补充解说MVVM.jsclass MVVM{ constructor(options){ //一上来 先把可用的东西,挂在在实例上 this.$el = options.el; this.$data = options.data; //判断是否存在要编译的模板,如果有,就开始编译 if(this.$el){ //数据劫持 就是...原创 2019-03-17 21:25:41 · 287 阅读 · 0 评论 -
16、webpack优化(1)——noParse
noParse这是module中的一个属性,作用:不去解析属性值代表的库的依赖举例:我们一般引用jquery,可以如下引用:import jq from 'jquery'对于上面的解析规则:当解析jq的时候,会去解析jq这个库是否有依赖其他的包我们对类似jq这类依赖库,一般会认为不会引用其他的包(特殊除外,自行判断)。所以,对于这类不引用其他的包的库,我们在打包的...原创 2019-02-09 22:10:24 · 8744 阅读 · 0 评论 -
15、区分不同环境(生产与开发环境)
区分生产与开发环境我们需要对webpack.config.js分成两个文件,一个用于开发,一个用于生产如何区分新建三个文件项目根目录 | --------webpack.base.js //基本配置 公共配置 (原先我们写的webpack.config.js) | --------webpack.dev.js //开发环境 | ...原创 2019-02-03 18:39:59 · 1038 阅读 · 0 评论 -
14、定义环境变量
定义环境变量当我们在配置的时候,需要区分所配置的属性参数是属于生产环境还是开发环境。每个环境对应的配置都不同。这就是环境变量最重要的意义。当然,要实现上面所说的效果,就需要用到webpack内置插件webpack.DefinePlugin环境变量配置//webpack.config.jslet webpack = require('webpack');plugins:[ ...原创 2019-02-03 15:20:58 · 719 阅读 · 0 评论 -
你以为arr.filter遍历的每一项,真的是arr的每一项吗?
想必大家一定用惯了es6中的各类语法,尤其是数组提供的方法,更是让我们对数组的处理获得了极大的便利。 今天我要讲的其实是一些数组中非常简单的方法,但当你真的研究它的时候,你会发现一些奇妙之处。一、初温数组的filter方法let arr = [1,2,3,4,5,6];let newArr = arr.filter(function(item,index){...原创 2018-08-25 23:49:32 · 1226 阅读 · 0 评论 -
4.ES6-剩余参数、拓展运算符,以及对象合并的方法(含ES7)
剩余参数 语法:…rest 作用:将参数转成数组传入函数 当我传入指定个数参数时:function sum(initVal,a,b,c){ return initVal + a + b + c;}sum(10,9,8,7);//34 当我传入不定个数参数时:function sum(initVal,...rest){ retu...原创 2018-08-22 21:44:37 · 2469 阅读 · 5 评论 -
一个普通函数的冷僻属性(length、caller、arguments、name、[[Scopes]]和[[FunctionLocation]])
函数的属性 一个普通函数具有哪些属性?先看下图: 可见,一个普通的函数具有8大属性——arguments、caller、length、name、prototype、__proto__、[[FunctionLocation]]、[[Scopes]] 上述8大属性中,最为关键的自然是prototype和__proto__两大属性,但笔者必须照顾下标题的感受,讲讲其他...原创 2018-08-21 21:36:27 · 4611 阅读 · 1 评论