文末
逆水行舟不进则退，所以大家要有危机意识。
同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。
这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。
内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。
269页《前端大厂面试宝典》
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。
前端面试题汇总
脚手架是帮助我们快速生成一套既定的项目架构、文件、配置，而最常见的做法的就是先写好一套项目框架模版，等到脚手架要生成项目时，则将这套模版拷贝到目标目录下。这里其实会有两个小点需要关注。
第一个是模版内变量的填充。
在模版中的某些文件内容可能会需要生成时动态替换，例如根据用户在终端中输入的内容，动态填充package.json中的name值。而 Yeoman 内置了 ejs 作为模版引擎，可以直接使用。
第二个就是模版的放置位置。
一种是直接放在本地，也就是直接放到 generator 中，跟随 generator 一起下载，每次安装都是本地拷贝，速度很快，但是项目模版自身的更新升级比较困难，需要提示用户升级 generator。
另一种则是将模版文件放到某个服务器上，每次使用脚手架初始化时通过某个地址动态下载，想要更新升级模版会很方便，通常会选择托管在 github 上。
关于第二个模版放置究竟是选择在本地好，还是远端好，其实还是依据你个人的业务场景而定，在不同的场景的限制的需求不同，我之前既写过模版放在本地的脚手架（即和脚手架一起通过 npm 安装），也写过托管在 git 仓库上的这种方式。
回到我们「创建一个最简版的基于 Webpack 的前端项目」的目标，我准备了一个项目模版，之后就会用它来作为脚手架生成的项目内容。
2.2. 创建 generator（yeoman-generator）
创建 Yeoman 的 generator 需要遵循它的规则。
首先是 generator 命名规则。需要以generator打头，横线连接。例如你想创建一个名为 webpack-kickoff 的 generator，包名需要取成 generator-webpack-kickoff。
这样，当你通过
npm i -g yo
安装完 Yeoman 的 CLI 后，就可以通过yo命令来使用 generator 来启动脚手架：
yo webpack-kickoff
这里的 webpack-kickoff 就是包名里generator-后面的内容，Yeoman 会按这个规则去全局找相匹配的包。
其次，依据 Yeoman 的规范，默认情况下你需要在项目（即 generator）的generators/app/目录下创建index.js，在其中写入你的脚手架工作流程。当然，也可以通过修改配置来扩展或改变这个规则。
此外，你创建的 generator 类需要继承 yeoman-generator。所以我们会在generators/app/index.js中写如下代码：
const Generator = require( yeoman-generator );
class WebpackKickoffGenerator extends Generator {
constructor(params, opts) {
super(params, opts);
}
}
module.exports = WebpackKickoffGenerator;
还记得之前提到的“生命周期”方法么？包括 initializing、prompting、default、writing、conflicts、install 和 end。除了default，其他都代表了 Generator 中的一个同名方法，你需要的就是在子类中重写后所需的对应方法。default阶段则会执行用户定义的类方法。
例如，你想在初始化时打印下版本信息，可以这么做：
const Generator = require( yeoman-generator );
class WebpackKickoffGenerator extends Generator {
constructor(params, opts) {
super(params, opts);
}
initializing() {
const version = require( ../../package.json ).version;
this.log(version);
}
}
module.exports = WebpackKickoffGenerator;
可见，剩下的工作就是在 WebpackKickoffGenerator 类中填充各种方法的实现细节了。
2.3. 处理用户交互
脚手架工作中一般都会有一些用户自定义的内容，例如创建的项目目录名，或者是否启用某个配置等。这些交互一般都是通过交互式的终端来实现的，例如下面这个功能。
可以使用 Inquirer.js 来实现。而 Yeoman 已经帮我们集成好了，直接在 generator 里调用 this.prompt 即可。
在用户交互部分的需求也比较简单，只需要询问用户所需创建的项目目录名即可，随后也会作为项目名。按照 Yeoman 的流程规范，我们将该部分代码写在 prompting 方法中：
class WebpackKickoffGenerator extends Generator {
// ……
prompting() {
const done = this.async();
const opts = [{
type: input ,
name: dirName ,
message: Please enter the directory name for your project：,
default: webpack-app ,
validate: dirName => {
if (dirName.length < 1) {
return ⚠️ directory name must not be null！;
}
return true;
}
}];
return this.prompt(opts).then(({dirName}) => {
this.dirName = dirName;
done();
});
}
// ……
}
注意，由于用户交互是一个“异步”的行为，为了让后续生命周期方法在“异步”完成后再继续执行，需要调用this.async()方法来通知方法为异步方法，避免顺序执行完同步代码后直接调用下一阶段的生命周期方法。调用后会返回一个函数，执行函数表明该阶段完成。
2.4. 下载模版
正如2.1.中所述，我们选择将模版托管在 github 上，因此在生成具体项目代码前，需要将相应的文件下载下来。可以使用 download-git-repo 来快速实现。
class WebpackKickoffGenerator extends Generator {
// ……
_downloadTemplate() {
return new Promise((resolve, reject) => {
const dirPath = this.destinationPath(this.dirName, .tmp );
download( alienzhou/webpack-kickoff-template , dirPath, err => {
if (err) {
reject(err);
return;
}
resolve();
});
});
}
// ……
}
这里我们使用了this.destinationPath()方法，该方法主要用于获取路径。不传参时返回当前命令行运行的目录；如果收到多个参数，则会进行路径的拼接。
此外，如果你细心的话，会发现_downloadTemplate()方法带了一个下划线前缀。这是 Yeoman 中的一个约定：Yeoman 执行顺序中有个default阶段，该阶段包含了所有用户自定义的类方法。但是，如果某些方法你不希望被 Yeoman 的脚手架流程直接调用，而是作为工具方法提供给其他类方法，则可以添加一个下划线前缀。对于这种命名的方法，则会在default阶段被忽略。
2.5. 模版文件拷贝
项目模版下载完毕后，下面就可以将相关的目录、文件拷贝到目标文件夹中。这些都可以在writing阶段操作。此时需要遍历模版中的所有目录，将所有文件进行模版填充与拷贝。遍历方式如下：
class WebpackKickoffGenerator extends Generator {
// ……
_walk(filePath, templateRoot) {
if (fs.statSync(filePath).isDirectory()) {
fs.readdirSync(filePath).forEach(name => {
this._walk(path.resolve(filePath, name), templateRoot);
});
return;
}
const relativePath = path.relative(templateRoot, filePath);
const destination = this.destinationPath(this.dirName, relativePath);
this.fs.copyTpl(filePath, destination, {
dirName: this.dirName
});
}
// ……
}
这里使用了this.fs.copyTpl()方法，它支持文件拷贝，同时还可以指定相应的模版参数，此外，如果出现重名覆盖情况会在控制台自动输出相应信息。
最后，把下载与拷贝整合起来即可完成writing阶段。
class WebpackKickoffGenerator extends Generator {
// ……
writing() {
const done = this.async();
this._downloadTemplate()
.then(() => {
const templateRoot = this.destinationPath(this.dirName, .tmp );
this._walk(templateRoot, templateRoot);
fs.removeSync(templateRoot);
done();
})
.catch(err => {
this.env.error(err);
});
}
// ……
}
2.6. 依赖安装
到目前，脚手架已经可以帮我们把项目开发所需的配置、目录结构、依赖清单都准备好了。这时候可以进一步帮开发人员将依赖安装完毕，这样脚手架创建项目完成后，开发人员就可以直接开发了。
Yeoman 也提供了this.npmInstall()来方法来实现 npm 包的安装：
class WebpackKickoffGenerator extends Generator {
// ……
install() {
this.npmInstall( , {}, {
cwd: this.destinationPath(this.dirName)
});
}
// ……
}
到这里，脚手架的核心功能就完成了。已经可以使用咱们的这个 generator 来快速创建项目了。很简单吧~
完整的代码可以参考 generator-webpack-kickoff。
3. 使用脚手架 ????
使用该脚手架会同时需要 Yeoman 与上述咱们刚创建的 yeoman-generator。当然，有一个前提，Yeoman 与这个 generator 都需要全局安装。全局安装 Yeoman 没啥有问题（npm install -g yo），处理 generator-webpack-kickoff 的话可能有几种方式：
-
直接发布到 npm，然后正常全局安装
-
直接手动拷贝到全局 node_modules
-
使用
npm link将某个目录链接到全局
依据 2.2 节的内容，咱们的 generator 名称为 generator-webpack-kickoff。由于我的包已经发到 npm 上了，所以要使用该脚手架可以运行如下指令：
# 安装一次即可
npm i -g yo
npm i -g generator-webpack-kickoff
# 启动脚手架
yo webpack-kickoff
4. 优化
从上文这个例子可以看出，实现一个脚手架非常简单。例子虽小，但也包含了脚手架开发的主要部分。当然，这篇文章为了简化，省略了一些“优化”功能。例如
总结:
-
函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；
-
它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Tips:
其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；
我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。
理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；
所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；
