谈谈对前端组件化,模块化，工程化的理解
- 说到前端都觉得入门很简单，上手快，只需要HTML,CSS,JavaScript就可以上手些项目了，或者在找一些特效，粘贴复制到项目，一个页面引入了大量的js效果，css样式，最后越堆越多，维护起来也麻烦。传统的项目已经满足不了需求了，现在前端生态很繁荣，各种框架，组件的出现，让前端发展很迅速，前端组件化，模块化的出现，让代码更加易维护，性能优化程度更高。
前端工程化
- 工程化思想就是结构，样式和动作的分离，把重复的工作交给代码来处理，保证质量，统一标准化
- 确定代码规划，统一代码检查，保证输出的代码标准一致。
- 代码版本管理工具，git,svn.
- 持续化集成/持续交付/自动化部署
- webpack打包集成
- 代码编译和代码质量管理
前端模块化
- 前端模块化就像编写代码时，将功能封装在一个个独立的js模块内，然后相互引用，完成整个功能的搭建
JavaScript模块规范主要有CommonJS，AMD，CMD，以及es6模块化方案等
##### CommonJS- Node 应用由模块组成，采用 CommonJS 模块规范。每个文件就是一个模块，有自己的作用域 1. 基本用法: - 暴露模块：module.exports = value或exports.xxx = value ```js var name = "张三"; var userName = function (value) { return value + name; }; module.exports.name = name; module.exports.userName = userName; ``` - 引入模块：require(xxx),如果是第三方模块，xxx为模块名；如果是自定义模块，xxx为模块文件路径 ```js var example = require('./info.js'); console.log(example.name); // 5 console.log(example.exports('vue')); ```
AMD
- AMD规范则是非同步加载模块，允许指定回调函数
1. 基本用法
- 定义暴露模块:
```js
ddefine(['module1', 'module2'], function(m1, m2){
return 模块
})
```
- 使用模块
```js
require(['module1', 'module2'], function(m1, m2){
使用m1/m2
})
```
CMD
- CMD规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行。CMD规范整合了CommonJS和AMD规范的特点
1. 基本用法
- 定义暴露模块
```js
define(function(require, exports, module){
exports.xxx = value
module.exports = value
})
```
- 引入使用模块
```js
define(function (require) {
var m1 = require('./module1')
m1.show()
})
```
ES6模块化
- ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西
1. 基本用法
- 定义方法
```js
var count = 0;
var add = function (a, b) {
return a + b;
};
export { count, add };
```
- 使用方法
```js
import { count, add } from './index.js';
function test(ele) {
ele.textContent = add(11 + count);
}
```
- 如上例所示，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载总结
- CommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着阻塞加载，浏览器资源是异步加载的
- AMD规范在浏览器环境中异步加载模块，而且可以并行加载多个模块
- CMD规范与AMD规范很相似，都用于浏览器编程，依赖就近，延迟执行，可以很容易在Node.js中运行。
- ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
组件化
- 那什么是组件化呢？我们可以认为组件就是页面里的 UI 组件，一个页面可以由很多组件构成。例如一个后台管理系统页面，可能包含了 Header、Sidebar、Main 等各种组件。
- 组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：
- 一个组件又包含了 template(html)、script、style 三部分，其中 script、style 可以由一个或多个模块组成。这样界面功能复杂时候，组件化抽离，代码可以易扩展。易复用
组件化思维的精髓是独立、完整、自由组合。以此为目标，尽可能把设计和开发中的元素独立化，使其具备完整的功能，通过自由组合来构成整个页面/产品。
##### 定于一个组件
- 参考vue方式
当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)：
<script> export default { data() { return { count: 0 } } } </script> <template> <button @click="count++">You clicked me {{ count }} times.</button> </template>使用组件
<script> import ButtonCounter from './ButtonCounter.vue' export default { components: { ButtonCounter } } </script> <template> <h1>Here is a child component!</h1> <ButtonCounter /> </template>
随着前端技术不断发展，只有不断的学习，巩固基础知识，不断尝试新技术，才能走的更远。
