01 2021 档案

浅谈自动化构建之gulp
摘要：一.gulp的基本使用 gulp是目前最流行的前端自动化构建系统,核心特点高效易用。（这块不过多的废话了,直接上干货了，有兴趣的话，可以查下gulp简介） 步骤如下： yarn init -y yarn add gulp --dev //安装开发依赖 根目录创建gulofile.js文件（gulp的 阅读全文

posted @ 2021-01-29 20:50 メSerendipity 阅读(193) 评论(0) 推荐(0)

浅谈自动化构建之grunt
摘要：自动化构建 开发行业的自动化构建 一句话把源代码转化为生产代码，作用是脱离运行环境兼容带来的问题开发阶段使用提高效率的语法,规范 和标准，构建转换那些不被支持的特性转化成能够执行的代码。 一.简单的自动化构建案例 简介:通过scss增强css的编程性,以及通过运行一些简单的命令行命令搭建启动服务，热 阅读全文

posted @ 2021-01-27 20:55 メSerendipity 阅读(140) 评论(0) 推荐(0)

浅谈前端常用脚手架cli工具及案例
摘要：前端常用脚手架工具 前端有很多特定的脚手架工具大多都是为了特定的项目类型服务的，比如react项目中的reate-react-app,vue项目中的vue-cli,angular 项目中的angular-cli根据一些信息创建对应的项目基础结构，只适用于对应的项目，还有一些对应的项目脚手架工具比如Y 阅读全文

posted @ 2021-01-26 20:58 メSerendipity 阅读(995) 评论(2) 推荐(2)

浅谈JavaScript代码性能优化2
摘要：一.减少判断层级 从下图代码中可以明显看出，同样的效果判断层级的减少可以优化性能 二.减少作用域链查找层级 简单解释下,下图中第一个运行foo函数，bar函数内打印name，bar作用域内没有name，所以作用域链往上查找，foo内部有name， 但是这种写法实际上是赋值，还要往上查找，全局作用域中 阅读全文

posted @ 2021-01-23 23:12 メSerendipity 阅读(256) 评论(1) 推荐(0)

浅谈JavaScript中的堆栈执行过程
摘要：执行代码如下： 下面总结下堆栈中的底层执行，如下图所示： 首先,需要执行的代码放在js执行环境栈中 1.创建全局执行上下文AO,首先把a=10,foo的地址放在栈中,并且在创建的时候有自己的作用域,创建对应foo对应的堆地址AB1。 2.在执行栈中开启foo执行栈BO,从伪数组中获取参数2,以及fo 阅读全文

posted @ 2021-01-22 21:32 メSerendipity 阅读(363) 评论(0) 推荐(0)

浅谈JavaScript代码性能优化
摘要：可以通过https://jsbench.me/测试网站完成性能测试。 一.慎用全局变量 1.全局变量定义在全局执行上下文，是所有作用域链的顶端，在局部作用域中没找到的变量都会到全局变量中去查找，所以说查找的 时间消耗比较大。 2.全局执行上下文一直存在于上下文执行栈,直到程序退出。 3.如果某个及局 阅读全文

posted @ 2021-01-21 17:28 メSerendipity 阅读(431) 评论(0) 推荐(1)

浏览器performance工具介绍及内存问题表现与监控内存的几种方式
摘要：一.GC的目的 为了实现内存空间的良性循环，performance提供多种监控方式监控内存 分析内存相关信息 当代码出现问题的时候及时定位到出现问题的代码块， 提高执行效率。 preforcemance使用步骤（以谷歌浏览器为例） 进入开发人员工具面板(F12)->点击preforcemance-> 阅读全文

posted @ 2021-01-19 17:21 メSerendipity 阅读(1356) 评论(0) 推荐(1)

V8引擎新老生代回收机制及对比
摘要：一.什么是V8引擎 目前最主流的JavaScript执行引擎，V8采用即时编译，内存设限极大增加了运行速度，垃圾回收策略采用分代回收的思想 内存分为新生代回收机制，老生代回收机制，针对不同的对象采用不同的算法，如下图所示： 二.V8中常用的GC算法 分代回收 空间复制 标记清除 标记整理 标记增量 阅读全文

posted @ 2021-01-17 20:00 メSerendipity 阅读(589) 评论(0) 推荐(0)

GC算法介绍及工作原理和优缺点
摘要：一.GC定义与作用 GC就是垃圾回收机制的简写 GC可以找到内存中的垃圾，并释放和回收空间，GC里的垃圾是什么 如下图所示： GC算法是什么：GC是一种机制,垃圾回收器完成具体的工作 工作的内容就是查找垃圾释放空间,回收空间算法就是工作时查找和回收 所遵循的规则。常见GC算法有引用计数，标记清除，标 阅读全文

posted @ 2021-01-16 22:41 メSerendipity 阅读(2315) 评论(0) 推荐(0)

JavaScript性能优化之内存管理及垃圾回收
摘要：一.JavaScript性能优化之内存管理 首先要了解几个概念： 内存：由可读写单元组成，表示一片可操作空间 管理：人为的去操作一片空间的申请，使用和释放 内存管理：开发者主动申请空间，使用空间，释放空间 内存管理流程 申请-使用-释放 javaScript没有相应的api去操作空间，所以我们在Ja 阅读全文

posted @ 2021-01-16 15:11 メSerendipity 阅读(164) 评论(0) 推荐(0)

TypeScript接口与类的使用
摘要：一.TypeScript接口 Interfaces 可以约定一个对象的结构 一个对象去实现一个接口 就必须拥有这个接口中所有的成员用interface定义接口， 并且定义接口中成员的类型 编译之后会发现typeScript中的接口只是对成员做类型约束的 定义string类型的key值和value值接 阅读全文

posted @ 2021-01-15 16:52 メSerendipity 阅读(199) 评论(0) 推荐(0)

浅谈TypeScript，配置文件以及数据类型
摘要：TypeScript在javaScript基础上多了一些拓展特性，多出来的是一些类型系统以及对ES6新特性的支持最终会编译成原始的javaScript， 文件名以.ts结尾,编译过后.js结尾，在angular和vue源码以及开发过程中的业务代码中也可能会用到。 一.安装TypeScript npm 阅读全文

posted @ 2021-01-14 15:16 メSerendipity 阅读(150) 评论(0) 推荐(0)

JavaScript静态类型检查器FLow的使用,移除及类型
摘要：使用Flow可以弥补JavaScript弱类型问题所带来的弊端，为JavaScript提供了更完善的系统，目前Vue及React项目中都在用，是一个 非常成熟的技术方案，工作原理是给有需要的地方添加一些类型注解（并不要求所有的都加），来标记参数和变量是什么类型，避免 到了运行阶段才发现类型使用上的错 阅读全文

posted @ 2021-01-11 20:57 メSerendipity 阅读(263) 评论(0) 推荐(0)

浅谈编程语言类型的强类型，弱类型，动态类型，静态类型
摘要：在介绍javascript类型系统之前，我们来解释两组区分不同编程语言时，提及的名词分别为强类型和弱类型,静态类型和动态类型， 分别从类型安全和类型检查区分了强弱类型和静动类型 一.通过类型安全区分 分为强类型和弱类型 强类型：语言层面限制了实参类型和形参类型必须相同，如果传入其他类型的值会报错，只 阅读全文

posted @ 2021-01-10 14:09 メSerendipity 阅读(531) 评论(0) 推荐(0)

ES6生成器及应用
摘要：ES6生成器的作用 复杂的代码中避免异步编程中回调嵌套过深，提供更好的异步编程解决方案 一般结果应该先打印zce 然后打印100,但是打印结果为空对象，说明结果还未执行，当打印next方法，才开始执行函数，返回值与迭 代器的返回值结构相同也是一个value,一个done。 但是只是这么使用的话 看不 阅读全文

posted @ 2021-01-07 22:32 メSerendipity 阅读(173) 评论(0) 推荐(0)

ES6 for of循环， 可迭代接口，实现可迭代接口，ES6迭代器模式
摘要：在for of循环出现之前，for循环适合遍历普通的数组，for in循环比较适合遍历键值对，遍历数组对象的foreach方法，但是这些遍历 都有一定的局限性，所以在ES6之后引入了统一的遍历方式 for of循环 举例下图所示： 但是此时如果遍历对象的话 会报错 obj is iterable 对 阅读全文

posted @ 2021-01-07 18:20 メSerendipity 阅读(253) 评论(0) 推荐(0)

ES6 Set.Map.Symbol数据结构
摘要：一.ES6 Set数据结构 ES6新推出了Set数据结构，它与数组很类似,Set内部的成员不允许重复，每一个值在Set中都是唯一的，如果有重复的值出现会自动去重（也可以理解为忽略掉），返回的是集合对象本身，所以可以链式调用，具体用法如下： 上述代码中Set以add的形式链式调用，当遇到重复的add（ 阅读全文

posted @ 2021-01-06 22:20 メSerendipity 阅读(76) 评论(0) 推荐(0)

ES6 class类 静态方法及类的继承
摘要：一.class类 ES6之前都是定义函数以及函数的原型对象实现类型， 如果想要实现共享构造函数成员，可以用prototype来共享实现 ES6出现之后，使用class类的概念来实现原型的继承 二，静态方法 方法一般分为实例方法和静态方法两种： 实例方法：用实例对象去调用，静态方法：直接通过类型本身去 阅读全文

posted @ 2021-01-06 17:13 メSerendipity 阅读(291) 评论(0) 推荐(0)

ES6 浅谈Reflect
摘要：Reflect 属于一个静态类，不能通过new的方法去创建实例，只能调用静态类中的一些静态方法，Reflect内部封装了一系列对对象的底层操作， Reflect 成员方法就是Proxy处理对象的默认实现。具体提供了13个静态方法，以下只列举其中的其中的一个方法。 上述代码中，没有定义get这个方法， 阅读全文

posted @ 2021-01-06 11:58 メSerendipity 阅读(107) 评论(0) 推荐(0)

ES6 proxy代理详解及用法
摘要：proxy官方的详细解释为代理器，个人理解为相当于一个拦截器，外部的所有访问必须先通过这层拦截，监视到对象的读写过程，因此提供了这 种机制对外部的访问进行过滤和修改。 上述例子为proxy new一个实例化对象 第一个参数 目标代理对象 person，第二个参数为处理对象。 get方法用于拦截某个属 阅读全文

posted @ 2021-01-05 22:58 メSerendipity 阅读(640) 评论(1) 推荐(1)

导航