1. webpack 从 entry 出发，调用loader对模块的原始代码进行编译，接着调用acorn对js进行语法分析、收集其中的依赖关系，每个模块都会记录自己的依赖关系从而形成一颗关系树，最后调用compilation.seal进入render阶段根绝之前收集的依赖决定生成多少文件，每个文件的内容是什么。fis3 扫描项目目录拿到文件并初始化出一个文件对象列表，接着对文件对象中的每一个文件进行单文件编译，然后获取用户设置的package插件，进行打包处理。
   Read more »

Webpack loader的设计原则

所有模块都是js模块，其他类型的模块比如图片、css等都需要通过对应的loader转成js模块。所以，webpack中所有资源本质上都被当成js模块处理。
所有的loader都是一个管道，入口是一个字符串，出口是另一个字符串，多个loader像水管一样串联起来。

Read more »

fis3的工作原理：

fis3是真正地从前端工程化的角度出发，不单单是个打包工具，它基于文件对象进行构建，每个进入fis3的文件都会被实例化为一个file对象，整个构建流程都对这个对象进行操作完成构建任务。fis3没有入口文件的概念，是根据内置打包阶段生成的资源表定义之后的产出规则。

fis3的构建流程：

fis3将构建流程分为了单文件编译和打包两个阶段。单文件编译又分为了lint、parser、preprocessor、standard、postprocessor、optimizer六个阶段。打包分为prepackager、packager、spriter、postpackager四个阶段。

Read more »

webpack和gulp的区别的话，我是这么理解的：

gulp是个自动化构建的工具，gulp所做的工作就是对指定文件的代码进行压缩合并或者资源打包，所以我一般会在自己的个人项目规模不是很大的时候使用gulp来构建，完了在页面中引用就行了，这样子的目的就是单纯的减小文件体积；

而webpack我觉得就拿我们这个SPA项目来看的话：

先上总结吧，后面有代码分析：

总结：webpack的模块化原理是酱紫的——首先我们需要在webpack.config.js中取指定入口文件，完了分析webpack编译后的文件可以看到，整个文件由一个自执行函数包裹，入参是一个数组，这个数组包含了所有的模块，函数体的逻辑就是webpack的模块化逻辑。其中有一个函数叫webpack_require，参数为moduleId，然后在这个函数体的末尾调用了他传入参数为0并返回，这个0指代的模块就是我们的入口模块。也就是说，从入参的modules数组中取第一个函数进行调用，并传入了module，module.exports以及webpack_require这三个参数，然后你可以在入口函数的函数体内看到又调用了webpack_require(1)···等等来调用入口文件中所有后续需要的模块，这样就会引入后续的第二个第三个····函数，从第二个函数开始的入参exports，都是这个模块的module.exports通过对象的引用传参，这个模块中需要的其他模块也都是通过webpack_require来引的，最终会将module.exports return出来。

emmmmm，现在回过头来看腾讯面试题了，哇~ 想想当时的寄己，真的是基础不过关，也就只能现在弥补了！
看题——

1
2
3
4
5

写一个构造方法Point，要求实现以下功能：
let point = new Point(100, 100);
let anotherPoint = point.move(-10, 10);
console.info(anotherPoint.coor); // {x: 90, y:110}
console.info(point.coor); // {x: 100, y: 100}

接着上文，看ES6继承之Class & extends

1.基本语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14

class Point {
}

// ColorPoint 
class ColorPoint extends Point {
    constructor(x, y, color) {
        super(x, y); // 调用父类的constructor(x, y)
        this.color = color;
    }

    toString() {
        return this.color + ' ' + super.toString(); // 调用父类的toString()
    }
}

super方法表示父类构造函数，调用时会新建父类的this对象。只有super方法才可以返回父类实例，所以调用super之后子类才可以使用this关键字。

深拷贝和浅拷贝主要区别是在内存中存储类型（堆栈）不同。

但其实js中没有严格意义上区分堆栈内存，因此可以粗暴的认为所有的数据类型都存储在堆内存，但是有些场景下还是需要利用栈数据结构的思维来实现一些思维，比如，js的执行上下文就采用了栈结构实现环境栈（又名函数调用栈）。

堆栈的区别

栈，先进后出(FILO)的存储方式，按值存放可直接访问。堆，树状结构，按引用访问。

Read more »

好了，记录一下今日的壮举。。。

坐标：百度大厦C座 时间：2018-05-16
事件起因：上次的需求提交多提交了一个不必要的包导师缺陷检测有6个问题不能merge，所以今日在本地删除包之后提交代码，又因为对git操作的不熟悉，对untracked的deleted的文件执行了”git rm -r .”，然后就很尴尬了。。。我就看着我的VSCode的资源管理器那一栏噌噌噌地没了。。。但是还有部分没有删除。emmmmm，立即想到git代码回滚。嗯，解决的过程中，导师问我“你是想报复社会嘛”，emmmmm，其实，，，没想报复社会。。。也没想删库跑路。。。哭唧唧········回归正题——

原型和继承，是学习JS过程中相当重要并且难懂的点，第一次过这块的时候，完全是十脸懵逼的。之后因为准备春招，把这块的整个体系重新拜读了不下三次，才得以勉强面试。最近，也在学习ES6相关，看到Class的extend继承，就想对ES5的继承和ES6的继承做一比对和整理。好啦~正文开始······

首先，ES5继承

整理一下构造函数、原型对象和实例之间的关系：构造函数中有一个prototype的属性指向它自己的原型(prototype)对象，而原型对象中又有一个constructor属性指回构造函数，原型对象中定义实例共享的属性和方法，实例对象也总有一个prototype属性指向自己的默认原型对象。实例对象和原型对象均有prpto属性，它们的proto也都指向它的构造函数的原型对象。

注：JS中所有对象都有自己的proto属性，隐式指针，也就是后文中的[[prototype]]