前端组件化开发/模块化开发

转载

mb5fed7287e6183 2017-02-08 23:57:00

文章标签 组件化开发/模块化开发模块化 gulp jquery mvc 文章分类 代码人生

一、什么是模块？

定义：具有相同属性和行为的事物的集合

在前端中：将一些属性比较类似和行为比较类似的内容放在同一个js文件里面，把这个js文件称为模块

目的：为了每个js文件只关注与自身有关的事情，让每个js文件各行其职

二、什么是模块化？CommonJS是什么？AMD和CMD又是什么？

①模块化：指的就是遵守commonjs规范，解决不同js模块之间相互调用问题

②CommonJS：

A.js文件中调用另一个B.js文件，一定要在A.js中引入B.js
require("B.js");

另一个被调用的js，也就是B.js一定要对外提供接口。
module.exports=B;
过程如下：
B.js

var b = "Hello,I'm module B.";
module.exports = b;//暴露一个接口，与b对接。这个接口既可以是函数，也可以是对象，甚至是数组。

A.js

var _b = require("./B.js");//实际过程中应当是B.js相对于A.js的路径，这比使用绝对路径去获取要规范得多
//此时_b获得了B.js的接口，这个接口指向B.js中的变量b
console.log( _b );//"Hello,I'm module B.";

这就实现了一个简单的模块化工作方式，即：
模块间相互调用，协同工作，实现某特定功能。

④AMD规范：Async Module Define 异步模块声明

⑤CMD规范：Common Module Define 公共模块声明

⑥模块化的核心价值：模块化最核心的价值在于解决不同文件之间的分工和调用问题，即依赖关系。

三、模块化的一些工具

gulp + browerify

构建步骤：

安装gulp

npm install gulp --save-dev //要安装全局还是本地依赖根据实际情况来

安装browserify --save--dev
```
npm install browserify --save--dev
```

安装文件输出流工具

npm install vinyl-source-stream --save-dev

在gulpfile里编写任务实现模块化
gulpfile.js

//基本模块引入
var gulp = require('gulp');
var brow = require('browerify');
var source = require('vinyl-source-stream');
//任务编写
gulp.task('bundle', function() {
  //将任务交付给browserify
  //brow读取入口文件后，能自动查找相互之间有依赖的关系的模块
  return brow('./entry.js')
    .bundle()//输出一个文件流变量（gulp的工作机制）
    .pipe(source('bundle.js'))//将文件流变量输出为文件
    .pipe(gulp.dest('js'));//将文件最终输出
}

webpack

参考 webpack的配置及使用

requireJS

模块声明规范：AMD
声明模块
- 参数1：id 是这个模块的名称，它是一个可选参数，默认为require加载此模块时指定的名称，若定义这个参数，那么这个模块名应当为“顶级”的，不允许相对名称。
- 参数2：数组，为这个模块所依赖的其他模块
- 匿名函数参数：为依赖模块在这个模块中的接口，它们是一一对应的，因此即便不需要某个模块的接口，但若是需要它后面模块的接口，那也必须给它增加一个用于占位的参数。
```
define( 'id', [ 'module1', 'module2' ], function( m1, m2 ) {
  return {
    arg1: m1,
    arg2: m2
  }
  //返回值即是module3的接口
});
```

使用步骤

下载requireJS
bower install requirejs//根据个人习惯选择下载方式，只要保证后续引入的路径正确

配置config文件和main.js
config.js

require.config({
  base: '',//引入模块的起始路径
  //paths对象为要引入的模块的名称及路径，且不需.js后缀，require默认会为文件添加.js后缀
  paths: {
    'jquery': './jquery-1.11.0'//这就引入了juery作为一个模块。 PS：jquery自己已经实现了AMD，并且'jquery'是一个顶级模块名。
  }
});

main.js

require(['jquery'], function( $ ) {
  $(document).css("background", "#000");//这就实现了引入使用jquery模块，并用它进行dom操作
});

在页面中引入

<script data-main="./main.js" src="./bower-components/requirejs/dist/require.js></script>
//main即是主逻辑入口文件

SeaJS

模块声明规范：CMD

声明模块

define( function( require, exports, module ) {
  var c = require('./Controller.js');
  c();
})

使用步骤

下载seajs

bower install seajs//这里根据个人习惯下载seajs的包，只要引入时路径正确就行

配置seajs.config

seajs.config({
  base: './', //模块起始路径
})
seajs.use('./main');//使用主逻辑入口文件，相当于requirejs中的data-main文件

**requireJS和SeaJS都是在前端实现模块化，相当于一个前端的js模块化加载器，和webpack不一样，webpack是通过nodejs将文件打包的。

四、模块化案例

前端mvc架构

Vue 组件化&模块化
React 组件化&模块化
node.js 每个文件都是模块

什么是MVC

后端开发的一种概念
即view( html + js + css + img ) + controller( 控制层 ) + model( 数据模型 )
- 前端演变了一套MVC体系：
  - veiw ( html + css + js )
    写静态页面 css、js、img及效果
  - controller ( 专注于实现服务和逻辑控制的层面叫做控制器 )
    监听页面中请求和事件，处理请求和事件；向model请求数据，得到数据后绑定到页面
  - model ( 数据变量 || ajax从服务端取回的数据 )
    对外提供一些数据

体现了一种分层的概念，让每个层面只做自己该做的行为，减少代码耦合和冗余

为什么使用MVC？

低耦合：
MVC将业务分为三层，减少了数据与业务的耦合性，增强了各层次功能的独立性，使得在需求改变时可能只需要改变其中一层就能完成服务；
复用性高：
三层业务功能分明，耦合度低，使各模块可以独立完成自身功能，降低了依赖性，具有很高的复用性。
利于批量生产和扩展：
复用性高使得在批量生产的时候可以根据需求进行模块的重用，加快了生产效率。并且模块化使得扩展也非常方便，模块只需根据规范进行编写，经审核后引入便可以实现扩展。
利于协作开发：
扩展性强使协作开发也变得非常方便，每个人根据自己的分工设计自己的模块，不与他人冲突，引入时也各行其职。
推广普及度高：
由于对协作开发的友好，使得MVC模式大受开发者的欢迎，使用这个模式的产品的推广和普及变得容易得多。