模块化（学习笔记）

2019独角兽企业重金招聘Python工程师标准>>>

模块化简介

    具有相同属性和行为的事物的集合。在前端中，将一些属性比较类似和行为比较类似的内容放在同一个js文件里面，把这个js文件成为模块，为了每个js文件只关注与自身相关的事情，让每个js文件各执其职。

   模块的几个特点：独立，完整，依赖关系

   在开始阶段，并没有模块机制，后来制定规范，出现了Common.js和AMD

node.js是写后台脚本，用来写服务器的。    

 模块化的实现

•  函数
•  对象写法
•  匿名函数，返回对象
•  依赖传入实参

以上缺点依赖关系不好处理，需要顺序加载，会阻塞页面

1.common.js规范（主要适用于后台，服务器端）

       根据common.js规范，每一个文件就是一个模块化（可以解耦的就分开），其内部定义的变量是属于这个模块的，不会对外暴露，也就是说不会污染全局变量。

     该规范最初是用在服务器端的node的，前端的webpack（内部用了很多node.js的环境，变量）也是对common.js原生支持的。（node.js就是用js写的）

    webpack就是一个工具，帮人可以做功能简单，但比较繁琐的代码。（vue：占市场比例大些，react）

      Common.js的核心思想就是通过require方法同步加载所需要依赖的其他模块，然后通过exports或者module.exports来导出需要暴露的接口。

例：

    // index.js

   var module = require('module.js');   // 同步加载   变量可以是module以外的变量

  module.add('ad');

  // module.js    (common.js规范)

 module.exports = {    // 固定的"module.exports"

    ad ： function(str){

      console.log(str);

   }

 }

浏览器不兼容common.js，原因是浏览器缺少module，exports，require，global（node提供的环境变量）四个环境变量，如要使用，需要工具转换。

common.js采用同步加载不同模块文件，适用于服务器端的，因为模块文件都存放在服务器的各个硬盘上，读取加载时间快，适合服务器端，不适应浏览器。

适用于浏览器规范，并且是异步加载的。便有AMD规范进行开发。

2.AMD规范(模块前置，提前加载)

  common.js为服务器端而生，采用的同步加载方式，因此不适用浏览器。因为浏览器需要到服务器加载文件，请求时间远大于本机读取时间，倘若文件较多，网络迟缓就会导致网页页面瘫痪，所以浏览器更希望能够实现异步加载的方式。

  AMD规范则是异步加载模块，允许指定回调函数，等模块异步加载完成后即可调用回调函数。

  AMD得起的产出的require.js

（这里涉及到了两个概念：

   同步加载：

   异步加载：

 ）

   AMD的核心思想就是通过define来定义一个模块，然后使用require来加载一个模块。

   // main.js

            (模块数组：jquery模块，math模块)

                         ||

   require(['jquery','math'],function($，math){ // .....})   // 加载模块,jquery模块，math模块

  // math.js

  define(function (){  // .....})   // 定义math模块

使用require.js(下载在地址：http://requirejs.org/)，提前加载所有依赖，方可使用

  <!-- index.html -- >

<script src="./js/require.js" data-main="./js/main.js"></script>

// main.js

require.config({

    baseUrl:'./js/tool',     // 基础路径

   path:{  

     "jquery":'jquery',   // 引用是jquery.js(下载路径：http://jquery.com/download/)

    "math":'math'

  }

})

require(['jquery','math'],function($,math){   // []内部的参数为导入的js文件数组参数

   console.log($());

   console.log(math.add(1,2));

} )

// math.js

define(['mylib'],function(mylib){

function add(a,b){

return a+b;

}

return {

add:add

}

})

// mylib.js

define(function(){ return a: 12356})

3.CMD规范 （就近加载，按序加载）

• CMD异步加载，跟AMD的主要区别在于

           AMD依赖前缀，提前加载依赖，而CMD就近加载，按需加载

           产物是sea.js,跟require.js（下载地址：http://www.zhangxinxu.com/sp/seajs/#downloads）使用有些相似。

• CMD的核心思想就是通过define来定义一个模块，然后使用require来加载一个模块。

    <index.html>

<script src="./js/sea.js"></script>

    // main.js

define(function(require,exports,module){

var math = require('math');

console.log(math);

})

// math.js

define(function(require,exports,module) {

function add(a,b){

return a+b;

}

exports.math = add;

})

4.ES6 （重点）

es6自带模块化，看可以使用import关键字引入模块，通过export关键字导出模块，功能较之前的几个方案更为强大。但由于es6目前无法在浏览器中执行，所以，只能通过babel将不被支持的import编译为当前受到广泛支持的require。

例：

import tool from '../js/tool.js';  // 导入

export class show {   // 导出

    constructor(){

      this.age = 18;

   }

   shouName(){

     return this.age;

   }

}

转载于:https://my.oschina.net/korabear/blog/1790492