关于对前端工程结构的思考

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012107143/article/details/82262809

1. js有3个层次

1. 展示层，纯前端样式变换，及用户交互
2. 数据层，纯后端数据交换，及数据对象的处理
3. 业务层，业务逻辑处理

注：组件化应该放在展示层

所以，每个页面应该有3个js文件，发布时可以通过打包工具进行合并压缩。

目录结构如下：

view/                   展示层，纯前端样式变换，及用户交互
    index.html
    index.css
    index.js
service/                业务层，业务逻辑处理
    index-service.js
data/                   数据层，纯后端数据交换，及数据对象的处理
    index-data.js

2. 在每个js文件中

1. 业务逻辑是主体，工具函数一般放在最后

3. 前端常用工具

1. 构建工具：gulp（类似于后端的gradle），可以控制构建的各个环节。
2. 模块化整合工具：webpack（类似于后端的build），只是构建过程中的一个环节，用于把各个模块中的文件整合到一起。

4. 前端常用框架

1. React：组件化
2. Vue：双向数据绑定，可用来实现服务端渲染
3. Bootstrap：组件库

5. 什么是JavaScript

JavaScript由三部分组成：

1. ECMAScript（核心）：作为核心，它规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象

2. DOM（文档对象模型）：DOM把整个页面映射为一个多层节点结果，开发人员可借助DOM提供的API，轻松地删除、添加、替换或修改任何节点。

3. BOM （浏览器对象模型）：支持可以访问和操作浏览器窗口的浏览器对象模型，开发人员可以控制浏览器显示的页面以外的部分。

注：出自《浅谈JavaScript、ES5、ES6》

6. 前端模块化

目前流行的js模块化规范：CommonJS，AMD，CMD，ES6，推荐直接使用ES6。
注：出自《前端模块化：CommonJS,AMD,CMD,ES6》