前端模块化

1.什么是前端模块化？

什么是模块化？

模块就是把功能代码独立封装成一个文件，按需引入，这个文件就是一个模块。

客户端js本身是没有模块化的，那么它出现模块化编程需要感谢nodejs。nodejs在服务器端根据commonjs标准，实现了模块化编程，这个标准规定了应该如何书写文件，如何引入文件等等。

而在前端（浏览器端），由玉伯根据CMD标准写了一个模块化的管理类库seajs。老外又定义了一个AMD标准，基于这个AMD标准，又开发了requirejs类库。

2. 为什么需要前端模块化？

在前端开发中，会出现冲突问题（函数名冲突、变量名冲突等）、
依赖问题（加载依赖文件的先后问题）、
写很多的script标签，请求过多、
不好维护

3. 前端模块化解决了什么问题？它的作用是什么？好处是什么？

好处是：

更好的分离，按需加载；
提升了可复用性；
提升了可维护性；

4 前端模块化都有哪些标准？

CommonJs

commonjs是服务端模块化标准。

//module/module1.js
var name = 'hubo';
function sayName(){
  console.log('nihao');
  console.log(name);
}
module.exports = {
  'name':name,
  'f1':sayName
};

//main.js
var m1 = require('./modules/module.js');
console.log(m1.name);
m1.f1();

browserify库可以把服务端Commonjs标准转换成浏览器标准。

//可以按照Commonjs标准去写浏览器端,最后只需要把main.js编译下，并且引入即可
var unique = require('uniq');
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log(unique(data));

npm install uniq

browserify main.js -o bundle.js

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

AMD

AMD是专门用于浏览器端的模块化标准，模块的加载是异步的，对于开发者，只需要实现模块加载的规则。

//module/module1.js
define(function(require, factory) {
    var name = 'hubo';
    function sayName(){
        console.log(name);
        console.log('sayname call');
    }
    return {
        'name':name,
        'sayName':sayName
    };
});

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/require.js/2.3.6/require.js" data-main="main.js"></script>
</head>
<body>
    
</body>
</html>

//main.js
requirejs.config({
    paths:{
        'm1':'./modules/m1',
        'jquery':'./modules/jquery'
    }
});

requirejs(['m1','jquery'],function(moduleA,$){
    $("body").css("background","red");
    console.log(moduleA.name);
    moduleA.sayName();
});

CMD

是由淘宝玉伯开发的。

ES6

导出模块：export
引入模块：import

如何实现呢？

用babel将es6转化成es5
用browsertify编译打包js

//module/m1.js--常规暴露
export let name  = 'hubo';
export function add(){
  console.log(123)
}

//module/m2.js--常规暴露
function f1(){
  console.log(123)
}

function f2(){
  console.log(123)
}

export {f1,f2}

//main.js--常规导入
import {name,add} from './module/m1'
import {f1,f2} from './module/m2'
add();
f1();
f2()

//module/m3.js--默认暴露
export default{
   foo(){
    console.log(123);
  },
  mag:'你好'
}

//main.js--默认导入
import module from './module/m3'
module.foo();

最后编辑于：2020.01.07 16:51:03