add prettier

Author: deepraining

.gitignore

@@ -1,2 +1,6 @@
 .DS_Store
+node_modules
+*.log
 .idea
+.vscode
+package-lock.json

.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  printWidth: 80,
+  singleQuote: true,
+  trailingComma: 'es5',
+};

README.md

@@ -1,6 +1,6 @@
 ## 前端进阶
 
-1. [\[2018-06-15\] 前后端分离、web与static服务器分离](./advanced/1.md)
+1. [\[2018-06-15\] 前后端分离、web 与 static 服务器分离](./advanced/1.md)
 2. [\[2018-06-15\] 本地化接口模拟、前后端并行开发](./advanced/2.md)
 3. [\[2018-06-15\] 前端开发规范](./advanced/3.md)
 4. [\[2018-06-15\] 前端开发文档](./advanced/4.md)
@@ -24,11 +24,6 @@
 22. [\[2018-09-21\] 搭建自己的前端脚手架](./advanced/22.md)
 23. [\[2018-10-23\] 如何提升前端性能和响应速度](./advanced/23.md)
 
-## 前端漫谈
-
-1. [\[2018-00-10\] 前端最受欢迎的 UI 框架](./intro/1.md)
-2. [\[2018-09-26\] github 上有趣又实用的前端项目（持续更新，欢迎补充）](intro/2.md)
-
 ## 前端扩展
 
 1. [\[2018-08-21\] 从 1 到完美，用 js 和 electron 写一个桌面应用](./extend/1.md)
@@ -52,6 +47,11 @@
 19. [\[2019-05-29\] 再谈前端项目的组件化](./extend/19.md)
 20. [\[2019-08-13\] 批量转换 AMD 与 CommonJs 模块到 ES 模块](./extend/20.md)
 
+## 前端漫谈
+
+1. [\[2018-00-10\] 前端最受欢迎的 UI 框架](./intro/1.md)
+2. [\[2018-09-26\] github 上有趣又实用的前端项目（持续更新，欢迎补充）](intro/2.md)
+
 ## JavaScript
 
 1. [\[2018-08-25\] js 中一些意想不到的使用技巧（持续更新，欢迎补充）](./javascript/1.md)

advanced/1.md

@@ -1,26 +1,26 @@
-# 前后端分离、web与static服务器分离
+# 前后端分离、web 与 static 服务器分离
 
-## 1. 为什么需要 “前后端分离、web与static服务器分离”
+## 1. 为什么需要 “前后端分离、web 与 static 服务器分离”
 
-web前端的发展历史大致可以分为两个阶段：`node` 之前与 `node` 之后。在 [nodejs](https://github.com/nodejs/node) 出现之前，前端的发展一直比较缓慢，主要是因为：
+web 前端的发展历史大致可以分为两个阶段：`node` 之前与 `node` 之后。在 [nodejs](https://github.com/nodejs/node) 出现之前，前端的发展一直比较缓慢，主要是因为：
 
-* `html/css/js` 从设计之初开始，都只为浏览器服务，并且在整个web程序中，是以后端为主，前端为辅，前端需要配合不同的后端做出调整（如不同后端语言的模板），因此前端程序往往是与后端程序耦合在一起的；
-* 开发、调试、运行都始终摆脱不了浏览器，并且没有多少可选的工具（如 combo，都是由后端语言在服务器端实现的），不能自动化、工程化的构建前端的代码；
-* 由于浏览器的运行方式，前端代码一直不能有效的做到模块化、组件化，项目也无法版本化管理，项目间也不能很好的共享代码；
-* 浏览器运行速度低下，也是早期前端发展的一大障碍，但 [chromium](https://chromium.googlesource.com/) 项目的出现，让前端的运行架上了高铁的速度。
+- `html/css/js` 从设计之初开始，都只为浏览器服务，并且在整个 web 程序中，是以后端为主，前端为辅，前端需要配合不同的后端做出调整（如不同后端语言的模板），因此前端程序往往是与后端程序耦合在一起的；
+- 开发、调试、运行都始终摆脱不了浏览器，并且没有多少可选的工具（如 combo，都是由后端语言在服务器端实现的），不能自动化、工程化的构建前端的代码；
+- 由于浏览器的运行方式，前端代码一直不能有效的做到模块化、组件化，项目也无法版本化管理，项目间也不能很好的共享代码；
+- 浏览器运行速度低下，也是早期前端发展的一大障碍，但 [chromium](https://chromium.googlesource.com/) 项目的出现，让前端的运行架上了高铁的速度。
 
-基于以上的原因，前端一直不能很好的开发大型应用，所以在web程序中，前端一直处于配角的角色。在 [nodejs](https://github.com/nodejs/node) 出现之后，前端的发展迎来了质的飞跃，带来了我们当时无法想象的便利与潜力。
+基于以上的原因，前端一直不能很好的开发大型应用，所以在 web 程序中，前端一直处于配角的角色。在 [nodejs](https://github.com/nodejs/node) 出现之后，前端的发展迎来了质的飞跃，带来了我们当时无法想象的便利与潜力。
 
-* `node` 拓展了 `javascript` 的运行环境，并且能够开发服务器端程序，这让前端的开发和运行摆脱对浏览器和后端语言的依赖，让它们成为了可选项；
-* `node` 使 `javascript` 拥有了操作本地文件、IO等权限，于是前端开发人员便可编写各类工具，前端便可做到自动化和工程化；
-* 再结合 `npm`，前端代码的模块化、组件化，项目版本化，项目间共享代码也就不是问题了。
+- `node` 拓展了 `javascript` 的运行环境，并且能够开发服务器端程序，这让前端的开发和运行摆脱对浏览器和后端语言的依赖，让它们成为了可选项；
+- `node` 使 `javascript` 拥有了操作本地文件、IO 等权限，于是前端开发人员便可编写各类工具，前端便可做到自动化和工程化；
+- 再结合 `npm`，前端代码的模块化、组件化，项目版本化，项目间共享代码也就不是问题了。
 
 [nodejs](https://github.com/nodejs/node) 出现了之后，又陆续出现了扩展前端运行领域的工具，如
 
-* [electron](https://github.com/electron/electron), [nw.js](https://github.com/nwjs/nw.js): 让前端可以开发桌面软件；
-* [react-native](https://github.com/facebook/react-native): 让前端可以开发原生app。
+- [electron](https://github.com/electron/electron), [nw.js](https://github.com/nwjs/nw.js): 让前端可以开发桌面软件；
+- [react-native](https://github.com/facebook/react-native): 让前端可以开发原生 app。
 
-随着 `node` 的出现与前端的发展，工程化自动构建便成了开发人员的一个基本需求，这便是我要说的 “前后端分离、web与static服务器分离”；
+随着 `node` 的出现与前端的发展，工程化自动构建便成了开发人员的一个基本需求，这便是我要说的 “前后端分离、web 与 static 服务器分离”；
 
 ## 2. 前后端分离
 
@@ -96,8 +96,8 @@ web前端的发展历史大致可以分为两个阶段：`node` 之前与 `node`
 
 ### 2.2 数据流分离
 
-* 前后端数据交流使用 `json` 数据格式，并且推荐使用全 `ajax` 的方式获取数据，不用传统的模板交流或渲染数据，如 `java > jsp`、`php > smarty`；
-* 但有时候为了加快前端响应速度，也可以把 `json` 数据通过模板返回，但要避免使用后端模板进行逻辑判断渲染。
+- 前后端数据交流使用 `json` 数据格式，并且推荐使用全 `ajax` 的方式获取数据，不用传统的模板交流或渲染数据，如 `java > jsp`、`php > smarty`；
+- 但有时候为了加快前端响应速度，也可以把 `json` 数据通过模板返回，但要避免使用后端模板进行逻辑判断渲染。
 
 ```
 <script>
@@ -107,26 +107,26 @@ var data = JSON.parse('通过后端模板返回的 json 数据');
 </script>
 ```
 
-## 3. web与static服务器分离
+## 3. web 与 static 服务器分离
 
-* `web 服务器`：存放运行后端 web 应用的程序，以及前端 `html` 文件（入口文件）
-* `static 服务器`：静态资源服务器，存放前端除 `html` 文件之外的其他资源文件，包括 `js`， `css`， `images`...
+- `web 服务器`：存放运行后端 web 应用的程序，以及前端 `html` 文件（入口文件）
+- `static 服务器`：静态资源服务器，存放前端除 `html` 文件之外的其他资源文件，包括 `js`， `css`， `images`...
 
 一般地，还是以 django 框架为例，当前端把代码构建好之后，静态资源传到服务器相应的 `static` 目录，`html` 文件传到相应的 `templates` 目录，启动后端脚本就可运行了。两者不分离主要有以下几个缺点：
 
-* 前端构建过程中会产生大量的冗余文件，这对后端程序来说十分不友好，比如后端打包程序备份的时候，就会导致包很大；
-* 不方便前端开发人员管理线上代码，并且前端人员能够直接接触到后端代码，也不够安全；
-* 静态资源会占用 web 服务器的资源和带宽，当访问量变大的时候，web与static服务器分离是必然的。
+- 前端构建过程中会产生大量的冗余文件，这对后端程序来说十分不友好，比如后端打包程序备份的时候，就会导致包很大；
+- 不方便前端开发人员管理线上代码，并且前端人员能够直接接触到后端代码，也不够安全；
+- 静态资源会占用 web 服务器的资源和带宽，当访问量变大的时候，web 与 static 服务器分离是必然的。
 
-web与static服务器分离之后，前端开发人员便可无顾虑的备份前端代码，清除冗余代码等等。
+web 与 static 服务器分离之后，前端开发人员便可无顾虑的备份前端代码，清除冗余代码等等。
 
-* 大多数情况下，会有多个项目共用同一个 static 服务器，如此便需要在服务器划分多个目录来存放静态资源文件；
-* 构建的过程中，构建工具需要保证 `html` 对 `js/css/images...` 路径的正确引用，以及 `css` 对 `images...` 路径的正确引用，以 [lila](https://github.com/senntyou/lila)为例，需要配置 `staticServerUrl` 为 `http://www.static.com/project1`
+- 大多数情况下，会有多个项目共用同一个 static 服务器，如此便需要在服务器划分多个目录来存放静态资源文件；
+- 构建的过程中，构建工具需要保证 `html` 对 `js/css/images...` 路径的正确引用，以及 `css` 对 `images...` 路径的正确引用，以 [lila](https://github.com/senntyou/lila)为例，需要配置 `staticServerUrl` 为 `http://www.static.com/project1`
 
 ## 4. 后续
 
 更多博客，查看 [https://github.com/senntyou/blogs](https://github.com/senntyou/blogs)
 
 作者：[深予之 (@senntyou)](https://github.com/senntyou)
 
-版权声明：自由转载-非商用-非衍生-保持署名（[创意共享3.0许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
+版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）

advanced/10.md

@@ -23,26 +23,26 @@ CSS(Cascading Style Sheets)，从诞生之初就决定了它无法编程，甚
         |-- section2.css 区域2 css
     |-- page2/ 单页面2
     |-- ...
-    
+
 # common.css 文件
 .c-el-1 {
     ...
 }
 .c-el-2 {
     ...
-}    
-...    
-    
+}
+...
+
 # page1/section1.css 文件
 .page1-section1 {
     ...
 }
 .page1-section1 .el-1 {
     ...
-}    
+}
 .page1-section1 .el-2 {
     ...
-}    
+}
 ...
 
 # page1/section2.css 文件
@@ -51,10 +51,10 @@ CSS(Cascading Style Sheets)，从诞生之初就决定了它无法编程，甚
 }
 .page1-section2 .el-1 {
     ...
-}    
+}
 .page1-section2 .el-2 {
     ...
-}    
+}
 ...
 ```
 
@@ -68,9 +68,9 @@ css 命名分组实践的时间很长，从 css 诞生之初就有了，所以
 
 ##### 补充：
 
-* 一个 css 文件不宜过大，可以使用 `@import` 进行文件分块；
-* 样式渲染尽量不要使用 `#id` `[attr]`，应尽量使用 `.class`；
-* 使用 js 库操作 dom 时，尽量不要用 `.class`，应尽量用 `#id` `data-set`，如 `$('#main'), $('[data-tab="1"]')`。
+- 一个 css 文件不宜过大，可以使用 `@import` 进行文件分块；
+- 样式渲染尽量不要使用 `#id` `[attr]`，应尽量使用 `.class`；
+- 使用 js 库操作 dom 时，尽量不要用 `.class`，应尽量用 `#id` `data-set`，如 `$('#main'), $('[data-tab="1"]')`。
 
 ```
 <ul>
@@ -87,28 +87,28 @@ css 命名分组实践的时间很长，从 css 诞生之初就有了，所以
 
 为了解决这个问题，社区在探索中主要衍生出了两种拓展语言 [less](http://lesscss.org/) 与 [sass](http://sass-lang.com/)，它们兼容 css，并且拓展了编程的功能，主要是带来了以下的特性：
 
-* 可以声明变量、函数，可以进行一些简单的计算、判断、循环；
-* 可以嵌套选择器，这样节省了书写的内容，也更具阅读性；
+- 可以声明变量、函数，可以进行一些简单的计算、判断、循环；
+- 可以嵌套选择器，这样节省了书写的内容，也更具阅读性；
 
 ```
 .page1-section1 {
     ...
-    
+
     .el-1 {
         ...
-        
+
         .el-1-1 {
             ...
         }
     }
-        
+
     .el-2 {
         ...
-    }   
-} 
+    }
+}
 ```
 
-* `@import` 避免重复导入问题，因此可以放心大胆的导入其他文件。
+- `@import` 避免重复导入问题，因此可以放心大胆的导入其他文件。
 
 从模块化的角度来讲，[less](http://lesscss.org/) 与 [sass](http://sass-lang.com/) 只是扩充了 css 的功能，但并没有在语言的层面做模块化，因为全局命名冲突的问题依然还在。
 
@@ -120,7 +120,7 @@ css 命名分组实践的时间很长，从 css 诞生之初就有了，所以
 
 比如：
 
-***源文件***
+**_源文件_**
 
 ```
 # style.css 文件
@@ -134,7 +134,7 @@ import styles from "./style.css";
 element.innerHTML = '<div class="' + styles.className + '">Hello!</div>';
 ```
 
-***实际效果***
+**_实际效果_**
 
 ```
 # style.css 文件
@@ -158,19 +158,19 @@ element.innerHTML = '<div class="' + styles.className + '">Hello!</div>';
 }
 .el2 {
     ...
-}    
-...    
-    
+}
+...
+
 # page1/section1.css 文件
 .container {
     ...
 }
 .title {
     ...
-}    
+}
 .content {
     ...
-}    
+}
 ...
 
 # page2/section1.css 文件
@@ -179,7 +179,7 @@ element.innerHTML = '<div class="' + styles.className + '">Hello!</div>';
 }
 .title {
     ...
-}    
+}
 .content {
     ...
 }
@@ -215,7 +215,7 @@ import styles from './welcome.css';
 import image1 from './images/1.jpg';
 ```
 
-***其实，还有另外一种思路，就是将 css 内置 js 中，成为 js 的一部分。***
+**_其实，还有另外一种思路，就是将 css 内置 js 中，成为 js 的一部分。_**
 
 这样做的目的，一是 css 的模块化，二是直接绑定到组件上。
 
@@ -326,4 +326,4 @@ p.jsx-234963469:first-child{
 
 作者：[深予之 (@senntyou)](https://github.com/senntyou)
 
-版权声明：自由转载-非商用-非衍生-保持署名（[创意共享3.0许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
+版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）