javascript模块化开发

模块化利弊

利
- 避免命名的冲出
- 更好的分离
- 更高的复用性
- 更高的可维护性

弊
- 多次请求浪费宽带
- 依赖模糊
- 难以维护

模式

全局函数模式

let msg = '1111';
function fo(){
    console.log(msg)
}

命名空间模式

//对象中的数据是可以修改的，不安全
let obj = {
    msg: '5555',
    fo(){
        console.log('fo()', this.msg)
    }
}

HFE模式：闭包模式

(function(window){
    let msg = 'modules';
    function fo() {
        console.log('fo()', msg)
    }；
    //window.module = {fo}
    window.module = {fo: fo}
}）(window)；

IIFE模式：引入依赖

//模块定义
(function(window, $){
    let msg = 'modules';
    function fo() {
        console.log('fo()', msg)
    }；
    window.module = fo;
    $('body').css('backgroung', 'red')
})(window, Jquery)；
//引入依赖

模块化规范

• CommonJs
• AMD
• CMD【阿里开发】
• ES6

CommonJs:
简介
每一个文件就是一个模块，在服务端模块加载运行是同步的，就是会形成阻塞，在浏览器端模块需要提前的打包编译
语法
模块暴露

module.exports = value
exports.xxx = value
暴露的本质就是export这个对象。export对象默认就是一个空的对象

模块引入

require（xxx）
第三方xxx就是包，自定义xxx就是路径
暴露的本质就是export这个对象。export对象默认就是一个空的对象

实现
浏览器端：Browserify,服务器端： Node
Node版实例

module.export = {
    msg: 'modules',
    fo(){
        console.log（this.msg）
    }
}；
module.exports = function(){
    console.log('module2')
}；
exports.fo = function(){
    console.log('fo()' modeules)
}；
let module = require('./')

综合实例

//moduleOne
exports.setModuleName = {
    name: '',
    setModuleName: function(moduleName) {
        if (moduleName.length == 0) {
            this.name = 'this module do not rewrite moduleName!';
        } else {
            this.name = moduleName;
        }
    }
}
//moduleTwo
var moduleOne = require('moduleOne.js')
exports.showModuleName = function() {
    moduleOne.setModuleName.setModuleName('resetModuleThreeName');
    function showModuleName() {
        console.log(moduleOne.setModuleName.name);
        if (moduleOne.name != '') {
            return moduleOne.setModuleName.name;
        } else {
            return 'not name';
        }
    };
    return showModuleName();
}

//moduleRoot
var moduleTwo = require('moduleTwo.js');
console.log(moduleTwo.showModuleName());

Browserify实例
- bixu安装Browserify
- Browserify 源码路径 -o 编译输出路径

AMDJs/Require:
简介
专门做浏览器端的 模块异步加载
语法
模块定义

define（function（）{
return 模块
}）

模块暴露

define（['modeule1','modeule2'],function(m1, m2){
    return 模块
}）

模块引入

require（['modeule1','modeule2'], function(m1,m2){
    使用m1/m2
}）

实现
一般定义方式

//moduleOne
(function(window){
    let name = 'dataService.js';
    fuction() getName() {
        return name；
    }；
    window.dataService = {getName}；
})(window)；

//moduleTwo
(function(window,dataService){
    let name = 'dataService.js';
    fuction() showName() {
        console.log(msg, dataService.getName)
    }；
    window.consoleService = {showName}
})(window,dataService)

//moduleRoot
(function(consoleService){
    consoleService.showName;
})(consoleService)

Require方式:综合案例

//定义一个没有依赖的模块
define（function（）{
    let name  = 'dtaService.js';
    function(){
        return name;
    }
    return {getName}
}）
//定义一个有依赖的模块
defune(['dataService'], function(dataService){
    let msg = 'consoleService.js';
    function showMsg(){
        console.log(msg, dataService.getName)
    }
    return {showName}
})
//主模块
(function(){
    require.config({
        baseUrl: 'js/lib',//基本的路径
        path：{
            app：'../app'
            dataService: 'moduleOne',
            consoleService: 'moduleTwo',
            jquery: './jquery',
            angular: './angular'
        },
        //angular的特殊配置
        shim: {
            angular: {
                exports: 'angular'
            }
        }
    })
    require([consoleService]. function(consoleService){
        consoleService.showName();
        console.log(angular);
        console.log(jquery)
    })
})()
//入口文件
<script data-main = 'js/main.js' src = 'js/require.js'></scrpit>

浏览器端：Require.Js
Require

module.export = {
    msg: 'modules',
    fo(){
        console.log（this.msg）
    }
}
module.exports = function(){
    console.log('module2')
}
exports.fo = function(){
    console.log('fo()' modeules)
}
let module = require('./')

CMDJs:
简介
专门做浏览器端的 模块异步加载，模块使用时才进行异步的加载
ES6