前端工程化

·前端工程化解决的问题

前端工程化是指准寻一定的标准和规范，通过工具去提高效率降低成本的一种手段。

近些年被广泛关注和探讨，其原因在于现在前端应用要求不断的提高，业务逻辑复杂，作为当下时代，互联网不可或缺的技术。从传统的网站，到现在的H5、移动app、终端应用、小程序等等，前端技术几乎是无所不能的全面覆盖，在这些表象的后面，其实是对我们开发人员的要求发生了天翻地覆的变化。

以往的写demo套模板再去调页面的刀耕火种的方式已经完全不符合当下对开发效率的要求。前端工程化就是在这样的一个背景下被提上台面，成为我们前端工程师必备的手段之一。

技术是为了解决问题而存在的，前端工程化也不例外。

存在的问题：

1. 想要在开发中使用ES6、ES7这些新特性，但是兼容有问题。
2. 想要使用Less/Sass/PostCss增强CSS的编程性，但是运行环境不能直接支持。
3. 想要使用模块化的方式提高项目的可维护性，但运行环境不能直接支持。
4. 部署上线项目之前需要手动压缩资源文件，部署过程中需要手动上传代码到服务器。（重复的工作）
5. 多人协作开发，无法硬性统一大家的代码风格，从仓库中pull回来的代码质量无法保证。
6. 部分功能开发时需要等待后端服务接口提前完成

主要解决的问题：

1. 传统语音或语法的弊端
2. 无法使用模块化、组件化
3. 重复的机械式的工作
4. 代码风格统一、质量保证
5. 依赖后端服务接口支持
6. 整体依赖后端项目

·工程化的表现

一切以提高效率、降低成本、质量保证为目的的手段都属于【工程化】

一切重复的工作都应该被自动化。

具体事项举例：

1. 创建项目：在创建项目的过程当中使用脚手架工具自动的帮助我们完成结构的搭建
   
2. 编码：编码环节我们可以借助工程化的工具自动化的去帮我们做一些代码的格式化以及代码风格的校验，从而确保我们开发人员写出来的代码都是相同风格。借助一些编译工具让我们在开发阶段可直接使用一些新的特性，提高编码效率。
   
3. 预览/测试：传统的web服务无法提供热更新的web服务，可以借助于现代化的web服务提供热更新的体验。（热更新就是在编码完成过后就可以在浏览器直接看到最新的结果，不用自己手动去刷新。）还有像Mock可以解决在后端服务未完成的情况下怎么样去提前开发业务功能（写假接口的方式，这个假接口是和我们真实的接口是以相同的规格存在的）。
   
4. 代码提交：像git hooks可以在提交代码之前去做项目整体的检查，包括对项目质量的检查和项目代码风格的检查确保我们不会把有问题的代码提交到远程仓库当中，也就不会出现像从仓库中pull回来的代码有问题的情况。对提交的日志也可以进行严格的格式限制，这样就可以在日后进行回滚的时候有很大的参考价值。
   
5. 部署：可以用一行命令代替传统的ftp上传，还可以实现在代码提交过后自动化的通过持续集成或者持续部署的方式自动的将代码部署到服务器。也就避免了手动操作产生的一些不稳定因素。
   

·工程化 ≠ 某个工具

认为工程化就是项目中使用了某个工具，其实不然。

工具并不是工程化的核心，工程的核心应该是对项目整体的一种规划或者架构，而工具在这个过程中只是帮助我们落地去实现这种规划或架构的一种手段。

以一个普通项目为例，我们落实工程化的第一件事应该是像图中的一样，去规划一个项目整体的工作流架构，其中包括我们要去规划文件的组织结构、源代码的开发范式（指的是我们在开发中使用什么样的语法什么样的规范什么样的标准去编写我们的代码），在一个就是我们要使用什么的方式去做前后端的分离(是基于Ajax做分离还是基于中间层做分离)，这些都是我们在开始的时候应该做好的规划。有了这些整体的规划之后，我们再具体去考虑应该选择搭配哪些工具，做哪些具体的配置选项来实现我们工程化整体的规划，这才是工程化应该有的过程。

一些成熟的工程化集成工具：

• create-react-app
• vue-cli
• angular-cli
• gatsby-cli

以上工具不是官方给出的脚手架，应该说成是工程化的集成。不同于其他的工具，这里的工具应该属于特定类型的项目，官方给出的集成式工程化方案。例如：vue-cli来举例，vue-cli不仅仅是帮我们创建了一个项目，更多的是约定了我们vue的项目应该是一个什么样的结构（有public目录，有src目录，有一些特定的文件，这些都是vue-cli提供的一些约定），除了这些约定之外还提供了一些工具，让开发者可以有一直更新的开发服务，还有自动的编译模块组件，除此之外还可以做一些代码风格的校验（比如说Eslint）。

在平常的使用当中，浏览器缓存能够加快页面的加载速度，能够保存表单数据类似于填写过的密码，使得用户的体验感大幅的提升。

但对于开发网站页面的前端开发者而言，浏览器的自动缓存功能并不一定惹人喜欢。

它常常会使得页面变成”不可变化的”模式。由于缓存存在的缘故，在更新代码后，通过浏览器去测试页面时页面常常不会显示我更改的代码模块，我就经常受到这样的困扰，但是手动去清空所有的缓存又会影响平常进其他网站时候的体验，就挺难受的。

那么问题来了，有没有一种可以只单独清空一个网站的缓存的办法呢？

闭包（Closure）是JavaScript语言的一个难点，也是它的特色，很多的高级应用都要依靠闭包实现。

下面是我的学习笔记：

一、变量的作用域

要理解闭包，首先必须理解JavaScript特殊的变量作用域。

变量的作用域无非就是两种：全局变量和局部变量。

JavaScript语言的特殊之处，就在于函数内部可以直接读取全局变量。

var n = 10;
function f1() {
    alert(n);
}
f1(); // 返回10

另一方面，在函数外部自然无法读取函数内的局部变量。

function f1() {
    var = 20;
}
alert(n); // error

这里有一个地方需要注意，函数内部声明変量的吋候，一定要使用var命令。如果不用的活，你实际上声明了一个全局変量!

function f1() {
    n = 30;
}
f1();
alert(n) // 返回30

问题：使用微信开发者工具上传小程序代码，提示报错

在微信开发工具的模拟机上可以正常编译，但在真机调试时遇到此错误并且试了很多办法没有解决，最后发现与微信开发者工具的版本有关。

官网主题地址

官网主题示例演示

主题非常的多，下面仅列出一些本人比较喜欢也常用的几个地址：

indigo

git clone https://github.com/yscoder/hexo-theme-indigo.git themes/indigo

next

git clone https://github.com/iissnan/hexo-theme-next themes/next

yelee

git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee

为什么要写博客

自从开始学习IT技术以来，就一直想做一个属于自己的网站。主要是想记录下自己碰到的技术难题和解决办法以便更好地去学习和工作，同时还可以记录下自己的成长经历，以后看看也会有所感触吧。更重要的是还可以拿它来装个逼，哈哈。但是老是控制不住自己的懒癌发作，一直拖到现在才搞出来，不管怎么样也算有个自己的小窝。希望以后能坚持来更新文章。

博客的搭建

现在搭建一个个人博客其实没有多么难，结合各种工具和使用教程噼里啪啦一阵子就完事了。简单来说就是github+hexo。github主要用到的是它的github page；hexo能够快速的搭建起博客框架，然后使用markdown来编写博客。