![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
文章平均质量分 96
qdmoment
全局掌控,剖析网站终端建设
展开
-
从0实现react框架,React Fiber架构和Fiber Diff算法
react框架是目前最为流行的前端框架之一,尤其在很多大厂,应用更为广泛。相对于一些mvvm框架,react上手需要一定的技术基础,但掌握后,编码体验和性能是很不错的。react整体思想是函数式编程,可以很大程度上减少代码重复,易于并发编程,react内部实现了一套调度机制,给不同执行任务划分优先级,从高到低循环渲染(Fiber),同时引入一套Fiber Diff算法,最大限度的使网页平滑,性能最优。react的源码在不断的迭代后,相对不那么好理解,那么怎么才能快速理解并掌握react底层运行原理呢,近原创 2022-05-19 15:11:25 · 1167 阅读 · 0 评论 -
形象化解读js事件循环以及node事件循环和浏览器事件循环的区别
node和浏览器都是js运行的环境,二者都给js提供了一个很强大的功能,事件循环。那么什么是事件循环呢,简单讲就是在单线程中为了实现程序的高效运行而设定的事件执行机制...原创 2020-04-28 01:12:35 · 2398 阅读 · 0 评论 -
javascript中实例,类,实例的原型,类的原型,以及constructor,prototype的区别和联系
javaScript中实例,类,原型等是js语言的核心概念,在充分理解并掌握的情况下,才能在编程中得心应手。近期进行知识归类总结,对js中的实例,类,类的原型,实例的原型,类的prototype,实例的prototype进行一个总结。核心概念:prototype指的是原型对象, __proto__指的是原型看一个简单的例子:class a{ constructor(optio...原创 2019-11-25 16:54:52 · 1236 阅读 · 0 评论 -
实现一个真正的babel插件(不仅仅是替换字符)及 ast操作原理
babel作为当前源码编译的重要工具,有着很重要的地位。babel编译的核心流程是,先把代码解析为AST语法树,再遍历AST语法树并执行操作,最后根据规则生成代码。流程不复杂,复杂的是如何操作AST语法树,以及如何编写babel的插件。网上有很多帖子在讲如何编写babel插件,但是讲的都比较浅显,看过之后并不能真正意义上去编写babel插件。在实际的项目中,我们需要的插件不仅仅是替换字符串或者...原创 2019-11-15 13:01:40 · 1615 阅读 · 0 评论 -
new,create,class,extends,{}创建对象的原理及原型链查找规则
首发:https://zhuanlan.zhihu.com/p/91439580原型,原型链属于js语言的基础,近期面试了很多同学,发现有很大一部分并不清楚原型,隐式原型,原型链之间的关系,加上自己在业务中分析源码遇到的一些问题,秉着知识回顾和总结的初心,详细总结下js原型相关的知识,有不足之处,还望大家补充。几个概念:原型:prototype隐式原型:__proto__本文将...原创 2019-11-12 22:13:16 · 421 阅读 · 0 评论 -
编程思想系列——使用函数副作用实现程序缓存设计
函数式编程里面有一个重要的概念,纯函数,即怎样的输入有怎样的输出,并且不依赖于外部变量,同时函数也不会产生任何可观察的副作用。那么什么是函数副作用呢?函数副作用是指函数在正常工作任务之外对外部环境所施加的影响。具体地说,函数副作用是指函数被调用,完成了函数既定的计算任务,1,但同时因为访问了外部数据,尤其是因为对外部数据进行了写操作,从而一定程度地改变了系统环境。2,函数的副作用也...原创 2019-11-05 14:37:51 · 226 阅读 · 0 评论 -
shadow dom的作用和用法详解(createShadowRoot, attachShadow)
相信shadow dom很多前端开发工作者都遇到过,它是web component的一部分。不过对于shadow dom很多人并不深入了解,只晓得是影子dom结构,那么到底什么是shadow dom的,本文将从概念,作用,用法三个方面来介绍下shadow dom.介绍shadow dom之前,首先看几个常用的标签,例子1:<video controls autoplay name=...原创 2019-10-28 16:14:38 · 7304 阅读 · 0 评论 -
原生js实现ajax请求和JSONP跨域请求
直接上代码:const ajax = (params = {}) => { const nowJson = params.jsonp ? jsonp(params) : json(params); function jsonp(params){ //创建script标签并加入到页面中 var callbackName = params.jsonp; va...原创 2019-05-23 19:22:59 · 1369 阅读 · 0 评论 -
手动实现commonJs规范
a.jsmodule.exports = '我的第一个webpack'b.jslet fs = require('fs')//common.js规范实现(node中)let a = req('./a.js')function req(moduleName){ let content = fs.readFileSync(moduleName, 'utf-8') //下...原创 2019-05-22 22:11:34 · 392 阅读 · 0 评论 -
es6中new Function()的用法详解以及minifier压缩代码原理
基本语法:let fn = new Function(...arg, content);arg是行数fn的参数content是fn的内容体,即函数运行主体实例:let str = 'return ' + '`Hello ${name}!`';let func = new Function('name', str);func('Jack') // "Hello Jack!"...原创 2019-05-22 21:42:21 · 1556 阅读 · 0 评论 -
js实现订阅发布者模式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-05-21 17:42:04 · 2692 阅读 · 0 评论 -
实现AMD规范
废话不说,直接上代码://由于require依赖程序时要取模块依赖,所以所有的依赖应该有一个共同的载体,也就是对象,可以通过对象访问到这些依赖let factories = {}function define(mod, dependences, factory){ factory.dependences = dependences; factories[mod] = fac...原创 2019-05-15 23:45:08 · 1598 阅读 · 0 评论 -
从0实现react
react当前的火热程度非常高,各种培训课程也是蜂拥而至,然而大多数人并没有真正的学会react,只是停留在使用api的基础上,那么react到底是怎样实现的呢。除了虚拟dom diff算法,很多人对react的概念就没了,比如生命周期是如何实现的,jsx是如何转化的,setState是如何工作的,react内部的设计原理有没有可以优化的地方等等。带着这些问题,我们从0开始封装一个react简易版...原创 2019-05-15 10:25:02 · 165 阅读 · 0 评论 -
javascript事件循环event loop的简单模型解释
js是单线程的,但是event loop的出现,使得js拥有可以处理高并发的性能。那么怎么理解event loop呢?网上百度一堆文章,什么heap,stack,micro queue,macro queue,让初学者直接懵掉。这里采用很通俗的理解方式介绍下event loop.event loop顾名思义是事件循环,既然是循环,那循环的是什么呢?对于一个js文件,1,执行当前执行上下...原创 2019-05-14 17:16:55 · 274 阅读 · 0 评论 -
关于箭头链式函数的抽象逻辑总结和思考
箭头函数的诞生使得js编程在一定程度上得到了简化,代码简洁明了。箭头函数实现了this作用域上和函数外部保持一致,但是在箭头函数简写上有时是相对抽象的。对于一般简写:name => `my name is ${name}`这种可以理解为参数name经过函数后变为my name is name。是相对比较好理解的。还有一种比较复杂的简写,链式调用const chain...原创 2019-04-24 16:24:07 · 420 阅读 · 0 评论 -
apply用法总结和使用场景
apply是绑定this到指定函数或类,也可以说把函数或者类的方法和属性给到当前作用域。1,使用apply实现继承 function A(name, age){ this.name = name; this.age = age; } function B(name, age, time){ A.apply(this,[name]) /...原创 2019-04-29 00:39:58 · 3822 阅读 · 0 评论 -
array 新特性flat()和flatMap()
flat()和flatMap()本质上就是是归纳(reduce) 与 合并(concat)的操作。flat()flat()方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。//flat()方法最基本的作用就是数组降维var arr1 = [1, 2, [3, 4]];arr1.flat(); // [1, 2, 3, 4]...原创 2019-04-03 10:52:29 · 9837 阅读 · 0 评论 -
navigator,Location常用
Navigator对象(即浏览器对象,提供浏览器相关的信息 )打印浏览器相关信息e.g.document.write("<p>浏览器产品名称:");document.write(navigator.appName + "</p>");document.write("<p>浏览器版本号:");document.write(navigator.app...原创 2019-07-02 09:36:09 · 296 阅读 · 0 评论 -
通俗的理解什么是js面向对象编程
刚开始很多人学习编程的时候,大多人使用的是命令式编程或者面向,这种模式易于理解,但是对于一些复杂系统来说,面向对象编程更具有优势。面向对象编程总的来说是建立对象思想,这个对象里面集成了属性,方法,提供了一个作用域this,然后可以通过this拿到对象在某个时刻的属性值或者方法。我们可以理解为是一个有机的组织,组织中的一些改变会影响到组织内部的状态,也就是this。面向对象编程的方式...原创 2019-07-02 10:23:57 · 2618 阅读 · 0 评论 -
关于babel转化后AST语法树的解析
AST语法树 结构:AST语法树每一层都拥有相同的结构,这样的每一层结构也被叫做节点(Node)。一个 AST 可以由单一的节点或是成百上千个节点构成。 它们组合在一起可以描述用于静态分析的程序语法。单层AST节点示例:{ type: "BinaryExpression", operator: ..., left: {...}, right: {...}}...原创 2019-09-29 09:45:46 · 3607 阅读 · 0 评论 -
js点击事件的执行过程分析和实例
js事件对象event包括很多事件类型,这里用onclick事件为例,探讨一下在js事件捕获机制和冒泡机制下的执行过程,以及如何阻止事件的捕获和冒泡。首先看下当我们点击一个元素后,浏览器的执行过程。1,当某个元素绑定的事件被触发时,这时浏览器就会从顶级document元素发出一个事件流2,这个事件流顺着dom层级,一层一层向下找,直到遇到了触发事件的目标元素,这个查找的过程是捕获阶段...原创 2019-08-30 11:06:00 · 1691 阅读 · 0 评论 -
js实现快速排序
const testArr = [3,3,3,3,3]function sort(arr){ if(arr.length <=1) return arr; //获取中间值 const centerIndex = Math.floor(arr.length/2) const centerValue = arr.splice(centerIndex,1)[...原创 2019-08-24 17:49:26 · 133 阅读 · 0 评论 -
关于中间件设计模式的深入探讨
中间件作为一些辅助处理功能,应用非常广泛,例如express中间件,redux中间件,koa中间件,那么中间件的设计模式到底是怎样的呢。结合中间件的使用实例探讨和总结一下中间件的设计思想和一般实现模式。仿照redux中间件实现模式,看如下一个例子:function fn2(next){ console.log('执行2,返回改造的next之前') return actio...原创 2019-08-23 19:40:49 · 907 阅读 · 0 评论 -
js防抖函数和节流函数使用场景和实现区别
开发过程中,都遇到过某个事件被频发触发的场景,比如resize,scroll事件,input事件,而对应的事件处理函数也会被高频率调用,这时会增加浏览器负担,用户体验也不好,这也是防抖函数和节流函数存在的意义和使用场景。函数防抖(debounce):持续触发事件时,在设定时间段内没有被触发,才去调用事件处理函数,在设定时间段内如果事件又被触发,则不调用事件处理函数,并从触发事件时间重新开始...原创 2019-08-07 17:25:18 · 418 阅读 · 0 评论 -
js函数柯里化的方法和作用
函数柯里化的方法:1,利用数组的reduce方法可实现柯里化,具体参见我的另外一篇文章2,代码如下const curry = (fn, ...args) =>{ console.log('args',args) // console.log(fn.length,args.length) return args.length < fn.length...原创 2019-08-13 21:25:10 · 1343 阅读 · 0 评论 -
promiseA+规范详解
promise/A+规范内容:1,不管进行什么操作,都返回一个Promise对象,类似于jquery的链式操作;2,一个 Promise 的当前状态必须为以下三种状态中的一种:等待态(Pending)、执行态(Fulfilled)和拒绝态(Rejected)。等待态(Pending)处于等待态时,promise 需满足以下条件:可以迁移至执行态或拒绝态执行态(Fulfil...原创 2019-08-06 18:24:19 · 1255 阅读 · 0 评论 -
js常见对象的length属性返回值
数组的length属性大家都很清楚了,本文主要其他函数对象的length属性。Function的length属性function的length属性返回函数形参的个数,获取不到非形参function test1(a,b,c) {}console.log(test1.length); // 3function a(){ console.log(arguments.leng...原创 2019-08-04 23:42:59 · 6001 阅读 · 0 评论 -
Blob的三种应用场景及Blob,url,base64之间的转换
Blob是一种Javascript的对象类型,兼容到IE10Blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 file 对象只是 blob 对象的一个更具体的版本,blob 存储着大量的二进制数据,并且 blob 的 s...原创 2019-08-02 18:47:01 · 12744 阅读 · 0 评论 -
HTML5实现图片压缩上传(详解)
HTML5实现图片压缩上传,主要用到FileReader, canvas, Blob,FormData这几个api1,fileReader用来读取文件2,利用canvas.toDataURL('"image/jpeg",quality)中的quality参数进行图片压缩3,将图片base64格式转化为blob对象4,利用formData上传首先介绍下FileReader, c...原创 2019-07-31 23:18:05 · 4538 阅读 · 0 评论 -
基于html5封装实现前端路由控件fnt-router
前端路由框架已经很成熟,vue有vue-router,react有react-router,还有像umi这样集成度高的库,但是前端路由并没有实现统一,这也导致了开发者需要学习多项技术,他们很多都是基于html5封装的,那么有没有可能封装一个前端统一的路由库呢,基于html5,但和所有其他技术无关,而且这个路由希望是轻量级的,只提供页面路由功能。于是就有了fnt-router原型。...原创 2019-03-22 16:23:35 · 445 阅读 · 0 评论 -
函数式编程的几大核心(纯函数,高阶函数,函数柯里化,函数组合,声明式和非声明式命令,point free)
由于函数式编程具有代码质量高且易于维护的特点,其应用也越来越广泛。许多不支持函数式编程的语言也加入了闭包,匿名函数等函数式编程特性。函数式编程(functional programming)定义:将电脑运算视为数学上的函数计算,并且避免使用程序状态和易变对象,又称泛函编程。函数式编程的几个核心概念:纯函数,高阶函数,函数柯里化,函数组合,声明式和非声明式命令,point free(...原创 2019-03-11 18:14:51 · 892 阅读 · 0 评论 -
移动端rem适配代码
rem字体设置是根据font-size相对设置:<script type="text/javascript"> function rems(){ // 获取屏幕宽度(此处是一个兼容的写法) var htmlWidth=document.documentElement.clientWidth||document.body.clientWid...原创 2018-11-15 14:20:51 · 313 阅读 · 1 评论 -
applyMiddleware原理和middleware中间件原理及应用场景
首先看下redux执行流程:redux设计思想:(1)Reducer:纯函数,只承担计算 State 的功能,不合适承担其他功能,也承担不了,因为理论上,纯函数不能进行读写操作。(2)View:与 State 一一对应,可以看作 State 的视觉层,也不合适承担其他功能。(3)Action:存放数据的对象,即消息的载体,只能被别人操作,自己不能进行任何操作。想来想去...原创 2018-11-13 13:43:24 · 3231 阅读 · 0 评论 -
js更新dom后页面及时渲染问题(js线程阻塞和解决办法)
参考:https://blog.csdn.net/qq_39542027/article/details/78893873两个概念:1,js是同步加载的 2,浏览器执行js程序,高于页面渲染于是就出现了js更新dom,页面不能及时渲染的问题代码例子:document.body.html('为什么不先渲染我');//程序$.ajax({...原创 2018-11-02 16:28:12 · 11474 阅读 · 1 评论 -
HTML5中history对象解析及前端路由实现封装流程
HTML5 history新增了两个API:history.pushState和history.replaceState两个Api都接收三个参数:语法:window.history.pushState(state Object, title, URL);window.history.replaceState(state Object, title, URL); ...原创 2018-11-09 18:25:58 · 515 阅读 · 0 评论 -
原生js实现观察者和订阅者模式
观察者模式也叫 发布者-订阅者模式,发布者发布事件,订阅者监听事件并做出反应在传统的前端解耦方面,观察者模式作为比较常见一种设计模式,大量使用在各种框架类库的设计当中。 核心代码:// eventProxy.js'use strict';const eventProxy = { onObj: {}, oneObj: {}, on: function(key, fn...原创 2018-10-31 15:57:46 · 1851 阅读 · 0 评论 -
vue框架的设计思想--渐进、轻量、数据驱动、组件化、自底向上
vue是一套用于构建用户界面的渐进式框架参考:https://blog.csdn.net/tangxiujiang/article/details/79594860https://blog.csdn.net/weixin_41049850/article/details/79431682以下是看过很多渐进式框架的概念,把几个相对全面的进行了总结:渐进式框架:只做自己该做的事情,不去...原创 2018-10-08 11:17:14 · 3438 阅读 · 0 评论 -
babel插件的作用及区别
babel-preset-stage-x类型stage-0” 法力无边呢,因为它包含stage-1, stage-2以及stage-3的所有功能,同时还另外支持如下两个功能插件:transform-do-expressions transform-function-bind参考:https://www.cnblogs.com/chris-oil/p/5717544.html ba...原创 2018-09-28 17:56:40 · 1421 阅读 · 0 评论 -
react标签属性dangerouslySetInnerHTML将字符串转化为html(动态渲染)
根据需求,前端页面有时需要动态展示后端返回的代码,但是此时的代码是字符串类型,直接展示,页面显示的只是字符串,这时就用到了react标签属性dangerouslySetInnerHtml属性;dangerouslySetInnerHtml用法:dangerouslySetInnerHtml = {__html:'这里是后端返回字符串代码'}注:1,dangerouslySetInne...原创 2018-10-02 16:36:21 · 3194 阅读 · 0 评论 -
polyfill的含义
poly 英 [ˈpɒli] 聚酯纤维polyfill本意是聚酯纤维填充,这里用作补丁或者兼容插件讲,用来兼容原本一些不支持的属性和方法比如:有些旧浏览器不支持Number.isNaN方法,Polyfill就可以是这样的:if(!Number.isNaN) { Number.isNaN = function(num) { return(num !== num...原创 2018-09-26 14:10:57 · 3863 阅读 · 0 评论