- 博客(30)
- 收藏
- 关注
RSS订阅原创 webpack打包基本原理——实现webpack打包核心功能
核心功能就是把我们写的模块化代码转换成浏览器能够识别运行的代码，话不多说我们一起来了解它
2023-02-24 14:31:55
2102
2
原创 nodejs大前端从入门到精通一
Natives Modules - 当前层内容由JS实现 - 提供应用程序可直接调用库，例如fs、path、http等 - JS语文无法直接操作底层硬件设置 在和硬件交互的的桥梁，通过Builtin Modules(胶水层)底层： - V8：执行JS代码，提供桥梁接口 - Libuv:事件循环、事件队列、异步IO - 第三方模块：zlib、http、c-ares等
2022-11-28 17:38:02
1095
原创 模拟Vue.js响应式原理一
准备工作数据驱动响应式的核心原理发布订阅模式和观察者模式数据驱动-数据响应式、双向绑定、数据驱动-数据响应式：数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率-双向绑定：1、数据改变，视图改变；视图改变，数据也随之改变。2、 我们可以使用 v-model 在表单元素上创建双向数据绑定数据驱动是 Vue 最独特的特性之一开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图数据响应式的核心
2021-12-10 16:52:50
115
原创 Vue Router实现原理
基础回顾使用步骤：1、创建router对象，router/index.jsimport Vue from 'vue' import VueRouter from 'vue-router' // 路由组件 import index from '@/views/index' // 组成插件 Vue.use(VueRouter) // 路由规则 const routes = [ { name: 'index', path: '/', component: index } ]// 路由对象
2021-12-08 17:14:17
240
原创 模块化开发的学习
本文学习内容的概要：模块化演变过程模块化规范常用的模块化打包工具基于模块化工具构建现代web应用打包工具的优化技巧模块化演变过程早期在没有工具和规范的情况下对模块化的落地方式：stage1-文件划分方式：污染全局作用域，命名冲突问题，无法管理模块依赖关系，早期模块化完全依靠约定stage2-命名空间方式：虽然解决了命名冲突但是其他问题没解决stage3-IIFE(立即执行函数的方法):实现了私有成员的概念模块化规范的出现模块化标准+模块加载器Commonjs规范（nodejs提
2021-11-22 10:18:16
203
原创 脚手架的工作原理--开发一个小型的脚手架工具
大部分的工作原理都比较简单，一般都会询问你一些预设的问题，然后把你回答的结果结合一些模板文件生成一个项目的结构下面是通过nodejs开发一个小型的脚手架工具脚手架工具就是Node-cli应用先初始化一个应用然后在package.json里添加个bin然后创建这个cli.js文件cli的文件必须有一个特定的文件头#!/usr/bin/env node简单的在里面写一个log，然后通过yarn link的方式link到全局，然后通过sample-scaffolding命令可以打印出来，就
2021-11-17 16:59:02
305
原创 V8引擎各种情况下的执行流程
V8引擎执行流程V8引擎其实是浏览器渲染引擎里的一个js执行代码的组成部分Scanner是一个扫描器，把javascript代码分割成一个个小的单元(tokens)Parser是一个解析器(全量)，PreParser（预解析）预解析优点跳过未被使用的代码不生成AST，创建无变量引用和声明的scopes依据规范抛出特定错误解析速度更快全量解析解析被使用的代码生成AST构建具体scopes信息，变量引用、声明等抛出所有语法错误函数不要重复嵌套太多，容易多次解析Lgnit
2021-11-17 14:33:30
306
原创 自动化构建的学习二——Gulp
Gulp的基本使用通过导出函数成员的方式定义任务， 默认执行default 任务yarn add gulp –dev//gulp的入口文件exports.foo = done => { console.log('foo task working~') done() //标识任务完成}exports.default = done => { console.log("default~~~~~"); done()};// gulp4.0之前的写法
2020-12-13 17:15:20
321
1
原创 自动化构建的学习——grunt
自动化构建一切重复工作本应自动化，自动化是通过机器代替手工完成一些工作，构建就是转换转换的过程称为自动化构建工作流，作用是脱离运行环境兼容带来的问题，在开发阶段使用提高效率的语法、规范和标准比较典型的应用场景：在开发web应用时比如es6，sass,模板引擎等，这些用法大都不被浏览器直接支持，构建转换那些不被支持的【特性】变成能够直接运行的代码安装sass官方提供的一个sass模块,做为开发依赖安装Yarn add sass –dev安装后找到node_modules下安装的路径，然后需要
2020-12-03 14:09:00
236
原创 开发脚手架及封装自动化构建工作流——脚手架工具
工程化的定义和主要解决的问题前端工程化是遵循一定的标准和规范通过工程去提高效率降低成本的一种手段，近些年被广泛的关注和探讨，因为前端要求不断提高，业务逻辑越来越复杂，从传统的网站到现在H5，移动app,桌面应用以及小程序，前端工程化就变成了前端工程师必备的手段之一。技术是为了解决问题而存在的，日常问题举例：想要使用ES6+新特性，但是兼容有问题。想要使用less/sass/postcss增加css的编程性，但是运行环境不能直接支持想要使用模块化的方式提高项目的可维护性，但运行环境不能直接支持部
2020-10-30 16:59:05
683
原创 javascript性能优化四 之堆栈中js执行过程等
JSBench的使用jsperf已经停止维护了，介绍一个新的www.jsbench.me性能测试网站堆栈中的JS执行过程通过画图的方式走一遍上面代码块的流程当浏览器真正要执行代码的时候肯定有一个执行上下文的环境的ECStack,用于存放执行上下文。Js代码在开始执行之后首先会在堆内存里创建一个执行环境栈，然后用他来存放着不同的执行上下文，代码从上往下执行最先创建的是应该是EC(G全局执行上下文)，在下面把代码都执行了申明和存放，基本数据类型是存放在栈内存里的，而对于引用类型来说是存放在堆区里
2020-10-14 18:23:42
296
1
原创 javascript性能优化三 之代码优化
代码优化介绍如何精准测试Javascript性能本质上就是采用大量的执行样本进行数学统计和分析使用基于Benchmark.js的https://jsperf.com/完成Jsperf使用流程使用GitHub账号登录填写个人信息（非必须）填写详细的测试用例信息（title、slug）填写准备代码（DOM操作时经常使用）填写必要有setup与teardown代码填写测试代码片段Setup当前的一个前置准备工作，teardown是所有执行代码执行后要做的销毁的动作慎用全局变量为
2020-10-09 17:40:06
191
原创 javascript性能优化二 之Performance
Performance工具介绍为什么使用PerformanceGC的目的是为了实现内存空间的良性循环良性循环的基石是合理使用时刻关注才能确定是否合理Performance提供多种监控方式通过Performance时刻监控内存内存问题的体现任务管理器监控内存任务管理器监控内存关注这两列的内存，如果javascript内存的小括号里的大小是一直向上走的没有降低是有问题的Timeline记录内存用代码模拟一下内存大量消耗蓝色的线条可以看出内存有涨有降还是比较稳定的，降的时
2020-10-04 09:50:17
504
原创 javascript性能优化一 之垃圾回收
任何一种可以提高运营效率，降低运行开销的行为都是一种优化操作内存管理内存为什么需要管理？下图是一个典型的内存泄漏内存管理介绍内存：由可读写单元组成，表示一片可操作空间管理：人为的去操作一片空间的申请、使用和释放内存管理：开发者主动申请空间、使用空间、释放空间管理流程：申请-使用-释放javaScript中的内存管理申请内存空间使用内存空间释放内存空间Js中的垃圾回收可达图示GC算法介绍GC定义与作用GC就是垃圾回收机制的简写GC可以找到内存中的垃圾、并释放
2020-09-22 20:34:57
240
原创 TypeScript的学习二
TypeScript ——javascript的超集(superset)任何一种javascript运行环境都支持，功能更为强大，生态也更健全，更完善TypeScript_前端领域中的第二语言缺点一：语言本身多了很多概念，如果接口，泛型之类的，但是属于渐进式缺点二：项目初期，typescript会增加一些成本，因为一开始会写很多的申明，对象函数之类的，如果是长期大型的项目可以使用typescript，因为这些声明都是一劳永逸的快速上手yarn init –yesyarn add typesc
2020-09-17 12:26:16
120
原创 TypeScript的学习一
TypeScript解决JavaScript类型系统的问题，基于javascript之上的编程语言，解决了javascript自有的类型系统的不足，大大提高代码的可靠程度类型系统——强类型与弱类型强类型与弱类型（类型安全）静态类型与动态类型（类型检查）强类型：语言层面限制函数的实参类型必须与形参类型相同弱类型语言层面不会限制实参的类型 由于这种强弱类型之分根本不是某一个权威机构的定义，强类型有更强的类型约束，而弱类型中几乎没有什么约束，强类型语言中不允许任意的隐式类型转换，而弱类型语言则允许任
2020-09-13 18:23:52
138
1
原创 ECMAScript 新特性(es6)的学习二
Proxy代理对象如果想要监视某个对象中的属性的变化可以使用es5中的Object.defineProperty,在es6中增加了Proxy，专门用来为对象设置访问代理器。const person = { name: 'qsn', age: 20};const personProxy = new Proxy(person, { get(target, property) { return property in target ? target[propert
2020-09-08 21:50:54
195
原创 ECMAScript 新特性(es6)的学习一
ECMAScript通常看作javaScript的标准化规范，实际上avascript是ECMAScript的扩展语言，ES只提供了最基本的语法，javascript语言本身指的就是ES,2015年开始ES保持每年一个版本的迭代解决了：解决原有语法上的一些问题或者不足对原有语法进行增强全新的对象、全新的方法、全新的功能全新的数据类型和数据结构ES2015(es6) let与块级作用域作用域——某个成员能够起作用的范围，在此之前，ES中只有两种作用域，全局和函数作用域，es6中增加了块级作用域le
2020-09-06 18:36:30
150
原创 js异步编程三：手写promise源码分析
一、promise类核心逻辑实现Promise就是一个类，在执行这个类的时候，需要传递一个执行器进去，执行器会立即执行。Promise中有三种状态，分别为成功(fulfilled)失败(rejected)等待(pending)Pending->fulfilledPending->rejected一量状态确定就不可更改resolve和reject函数是用来更改状态的Resolve:fulfilledReject:rejectedthen方法内部做的事情就判断状态，如果状态是成功
2020-08-30 20:08:43
265
原创 js异步编程三、生成器函数、Gennerator、Async/Await语法糖
生成器函数就是在普通函数上多了上*号，当调用这个生成器函数的时候不会立即执行函数，而且得到一个生成器对象，直接手动的调用这个生成器的next方法，这个函数的函数体才会开始执行。在函数的内容可以使用yield的关键词向外返回一个值，在next方法调用的时候可以拿到这个值，在返回的对象中还有个done属性，用来表示这个生成器是否已经全部执行完，而且yield关键词并不会像return一样立即结束函数，只是暂停这个生成器函数，直到下一次调用next方法会继续从yield位置向下执行。如果给next传参数，会做
2020-08-28 21:45:49
359
1
原创 js异步编程二：promise链式调用，异常处理，静态方法，并行和执行时序
相比传统的回调函数的方式，Promise最大的优势是可以链式调用，可以最大程度的避免回调嵌套。Promise对象的then方法返回的是一个全新的Promise对象。后面的then方法就是在为上一个then返回的Promise注册回调。前面then方法中回调函数的返回值会作为后面then方法回调的参数。如果回调中返回的是Promise,那后面then方法的回调会等待它的结束。var promise = ajax("user.json");var promise2 = promise.then(
2020-08-25 23:06:36
1019
原创 js异步编程一：同步异步模式的区别，回调函数和 Promise基本用法
javascript都是采用单线程模式工作的原因与它最早的设计初衷有关，最早javascript这门语言就是运行在浏览器端的脚本语言，目的是为了实现页面上的动态交互，而实现页面交互的核心是DOM操作，所以就决定了必须是单线程模型，否则就会出现很复杂的线程同步问题。如果在javascript中有多个线程同时工作，那其中一个线程修改了某个DOM元素，且另外一个线程同时又删除了这个元素，那DOM就无法确定以哪个线程为准，所以为了避免线程同步的问题，从一开始javascript就被设计成单线程操作。Javasc
2020-08-24 22:29:49
646
原创 函数式编程六：Functor ,MayBe,Either函子的学习
之前文章已经了解了函数式编程的一些基础，但是还没有演示在函数编程中如何把副作用控制在可控的范围内、异常处理、异常操作等。函子是一个普通的对象，这个对象里面应该维护一个值并且要对外公布一个map方法，所以可以通过一个类来描述函子容器：包含值和值的变形关系（这个变形关系就是函数）。函子：是一个特殊的容器，通过一个普通的对象来实现，该对象具有map方法，map方法可以运行一个函数对值进行处理（变形关系）。class Container { constructor(value) { this
2020-08-23 18:19:25
698
1
原创 函数式编程五：lodash中的fp模块，PointFree的理解
在使用函数组合解决问题的时候，会使用到lodash中提供的一些方法，但是这些方法有多个参数的时候，需要对这些方法进行柯里化的处理，需要重新包装这些方法稍微有些麻烦， lodash中fp模块，提供了一些实用的对函数式编程友好的方法。提供的方法是不可变的，如果一个方法的参数是函数的话，会要求函数优先并且数据置后。lodash模块的方法和lodash/fp模块方法的区别//lodash 模块const _ = require("lodash");_.map(["a", "b", "c"], _.toUp
2020-08-23 14:46:15
2146
1
原创 函数式编程四：js函数的组合，调试
纯函数他柯里化很容易写出洋葱代码h(g(f(x)))比如获取数组的最后一个元素再转换成大写字母，.toUpper(.first(_.reverse(array)));函数组合可以让我们把细粒度的函数重新组合生成一个新的函数。管道下面张图表示程序中使用函数处理数据的过程，给fn函数输入参数a,返回结果b.可以想想a数据通过一个管道得到了b数据。当fn函数比较复杂的时候，我们可以把函数fn拆分成多个小函数，此时多了中间运算过程产生的m和n.下面这张图中可以想象成把fn这个管道拆分成3个管道f1,
2020-08-23 12:03:42
304
原创 函数式编程三：js模拟柯里化函数
什么是柯里化当我们的函数有多个参数的时候，我们可以对这个函数进行改造，我们可以调 用一上函数只传递部分的函数，并且让这个函数返回一个新的函数，让这个函数去接受剩余的函数，并且返回相应的结果，这就是函数的柯里化。普通的纯函数和柯里化的对比//普通的纯函数function checkAge(min, age) { return age >= min;}console.log(checkAge(18,20));console.log(checkAge(18,24));console.lo
2020-08-19 00:00:56
217
原创 函数式编程二：js纯函数-模拟记忆函数memoize
在写记忆函数memoize前我们先来了解一下什么是纯函数？纯函数的好处是什么？为什么要使用纯函数？会有哪些副作用？纯函数的概念纯函数：相同的输入永远会得到相同的输出，而且没有任何可观察的副作用纯函数就类似数学中的函数（用来描述输入和输出之间的关系），y-f(x)。lodash是一个纯函数的功能库，提供了对数组、数字、对象、字符串、函数等操作的一些方法 。数组中的slice和splice分别是：纯函数和不纯的函数slice返回数组中的指定部分，不会改变原数组。splice对数组进行操作返回该数
2020-08-16 15:24:13
684
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人