山有木兮的博客

核心功能就是把我们写的模块化代码转换成浏览器能够识别运行的代码，话不多说我们一起来了解它

Natives Modules - 当前层内容由JS实现 - 提供应用程序可直接调用库，例如fs、path、http等 - JS语文无法直接操作底层硬件设置 在和硬件交互的的桥梁，通过Builtin Modules(胶水层)底层： - V8：执行JS代码，提供桥梁接口 - Libuv:事件循环、事件队列、异步IO - 第三方模块：zlib、http、c-ares等

marked is not a function问题解决

准备工作数据驱动响应式的核心原理发布订阅模式和观察者模式数据驱动-数据响应式、双向绑定、数据驱动-数据响应式：数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率-双向绑定：1、数据改变，视图改变；视图改变，数据也随之改变。2、 我们可以使用 v-model 在表单元素上创建双向数据绑定数据驱动是 Vue 最独特的特性之一开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图数据响应式的核心

基础回顾使用步骤：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 } ]// 路由对象

本文学习内容的概要：模块化演变过程模块化规范常用的模块化打包工具基于模块化工具构建现代web应用打包工具的优化技巧模块化演变过程早期在没有工具和规范的情况下对模块化的落地方式：stage1-文件划分方式：污染全局作用域，命名冲突问题，无法管理模块依赖关系，早期模块化完全依靠约定stage2-命名空间方式：虽然解决了命名冲突但是其他问题没解决stage3-IIFE(立即执行函数的方法):实现了私有成员的概念模块化规范的出现模块化标准+模块加载器Commonjs规范（nodejs提

大部分的工作原理都比较简单，一般都会询问你一些预设的问题，然后把你回答的结果结合一些模板文件生成一个项目的结构下面是通过nodejs开发一个小型的脚手架工具脚手架工具就是Node-cli应用先初始化一个应用然后在package.json里添加个bin然后创建这个cli.js文件cli的文件必须有一个特定的文件头#!/usr/bin/env node简单的在里面写一个log，然后通过yarn link的方式link到全局，然后通过sample-scaffolding命令可以打印出来，就

V8引擎执行流程V8引擎其实是浏览器渲染引擎里的一个js执行代码的组成部分Scanner是一个扫描器，把javascript代码分割成一个个小的单元(tokens)Parser是一个解析器(全量)，PreParser（预解析）预解析优点跳过未被使用的代码不生成AST，创建无变量引用和声明的scopes依据规范抛出特定错误解析速度更快全量解析解析被使用的代码生成AST构建具体scopes信息，变量引用、声明等抛出所有语法错误函数不要重复嵌套太多，容易多次解析Lgnit

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之前的写法

自动化构建一切重复工作本应自动化，自动化是通过机器代替手工完成一些工作，构建就是转换转换的过程称为自动化构建工作流，作用是脱离运行环境兼容带来的问题，在开发阶段使用提高效率的语法、规范和标准比较典型的应用场景：在开发web应用时比如es6，sass,模板引擎等，这些用法大都不被浏览器直接支持，构建转换那些不被支持的【特性】变成能够直接运行的代码安装sass官方提供的一个sass模块,做为开发依赖安装Yarn add sass –dev安装后找到node_modules下安装的路径，然后需要

工程化的定义和主要解决的问题前端工程化是遵循一定的标准和规范通过工程去提高效率降低成本的一种手段，近些年被广泛的关注和探讨，因为前端要求不断提高，业务逻辑越来越复杂，从传统的网站到现在H5，移动app,桌面应用以及小程序，前端工程化就变成了前端工程师必备的手段之一。技术是为了解决问题而存在的，日常问题举例：想要使用ES6+新特性，但是兼容有问题。想要使用less/sass/postcss增加css的编程性，但是运行环境不能直接支持想要使用模块化的方式提高项目的可维护性，但运行环境不能直接支持部

JSBench的使用jsperf已经停止维护了，介绍一个新的www.jsbench.me性能测试网站堆栈中的JS执行过程通过画图的方式走一遍上面代码块的流程当浏览器真正要执行代码的时候肯定有一个执行上下文的环境的ECStack,用于存放执行上下文。Js代码在开始执行之后首先会在堆内存里创建一个执行环境栈，然后用他来存放着不同的执行上下文，代码从上往下执行最先创建的是应该是EC(G全局执行上下文)，在下面把代码都执行了申明和存放，基本数据类型是存放在栈内存里的，而对于引用类型来说是存放在堆区里

代码优化介绍如何精准测试Javascript性能本质上就是采用大量的执行样本进行数学统计和分析使用基于Benchmark.js的https://jsperf.com/完成Jsperf使用流程使用GitHub账号登录填写个人信息（非必须）填写详细的测试用例信息（title、slug）填写准备代码（DOM操作时经常使用）填写必要有setup与teardown代码填写测试代码片段Setup当前的一个前置准备工作，teardown是所有执行代码执行后要做的销毁的动作慎用全局变量为

Performance工具介绍为什么使用PerformanceGC的目的是为了实现内存空间的良性循环良性循环的基石是合理使用时刻关注才能确定是否合理Performance提供多种监控方式通过Performance时刻监控内存内存问题的体现任务管理器监控内存任务管理器监控内存关注这两列的内存，如果javascript内存的小括号里的大小是一直向上走的没有降低是有问题的Timeline记录内存用代码模拟一下内存大量消耗蓝色的线条可以看出内存有涨有降还是比较稳定的，降的时

任何一种可以提高运营效率，降低运行开销的行为都是一种优化操作内存管理内存为什么需要管理？下图是一个典型的内存泄漏内存管理介绍内存：由可读写单元组成，表示一片可操作空间管理：人为的去操作一片空间的申请、使用和释放内存管理：开发者主动申请空间、使用空间、释放空间管理流程：申请-使用-释放javaScript中的内存管理申请内存空间使用内存空间释放内存空间Js中的垃圾回收可达图示GC算法介绍GC定义与作用GC就是垃圾回收机制的简写GC可以找到内存中的垃圾、并释放

TypeScript ——javascript的超集(superset)任何一种javascript运行环境都支持，功能更为强大，生态也更健全，更完善TypeScript_前端领域中的第二语言缺点一：语言本身多了很多概念，如果接口，泛型之类的，但是属于渐进式缺点二：项目初期，typescript会增加一些成本，因为一开始会写很多的申明，对象函数之类的，如果是长期大型的项目可以使用typescript，因为这些声明都是一劳永逸的快速上手yarn init –yesyarn add typesc

TypeScript解决JavaScript类型系统的问题，基于javascript之上的编程语言，解决了javascript自有的类型系统的不足，大大提高代码的可靠程度类型系统——强类型与弱类型强类型与弱类型（类型安全）静态类型与动态类型（类型检查）强类型：语言层面限制函数的实参类型必须与形参类型相同弱类型语言层面不会限制实参的类型 由于这种强弱类型之分根本不是某一个权威机构的定义，强类型有更强的类型约束，而弱类型中几乎没有什么约束，强类型语言中不允许任意的隐式类型转换，而弱类型语言则允许任

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

ECMAScript通常看作javaScript的标准化规范，实际上avascript是ECMAScript的扩展语言，ES只提供了最基本的语法，javascript语言本身指的就是ES,2015年开始ES保持每年一个版本的迭代解决了：解决原有语法上的一些问题或者不足对原有语法进行增强全新的对象、全新的方法、全新的功能全新的数据类型和数据结构ES2015(es6) let与块级作用域作用域——某个成员能够起作用的范围，在此之前，ES中只有两种作用域，全局和函数作用域，es6中增加了块级作用域le

一、promise类核心逻辑实现Promise就是一个类，在执行这个类的时候，需要传递一个执行器进去，执行器会立即执行。Promise中有三种状态，分别为成功(fulfilled)失败(rejected)等待(pending)Pending->fulfilledPending->rejected一量状态确定就不可更改resolve和reject函数是用来更改状态的Resolve:fulfilledReject:rejectedthen方法内部做的事情就判断状态，如果状态是成功