javascript模块化详解

一、模块化的由来

1、最早我们这么写代码

全部方法写在一起,容易命名冲突,并且污染global全局

function foo(){}
function bar(){}

2、简单封装(Namespace模式)

减少了全局的变量,但是仍然可以通过myFunc.foo去操作数据,不安全

var myFunc = {
    _private:'no safe',
    foo: function(){
        console.log(this._private)
    }
}
myFunc._private = 5;
myFunc.foo();

3、匿名闭包(IIFE模式)

函数时javascript中唯一的localScope, 无法操作里面的数据

var module = (function(){
    var _private = 'safe now';
    var foo = function(){
        console.log(_private);
    }
    return {
        foo:foo
    }
})();

或者

(function(){
    var _private = 'safe now';
    var foo = function(){
        console.log(_private);
    }
    window.module = {
        foo:foo
    }
})()

module._private; // undefined 
module.foo();

4、增强,引入依赖

有时候,我们的功能需要依赖模块才能完成,此时需要蒋模块注入进来

// 这就是模块模式的基础
var module = (function($){
    var _private = $('body');
    var foo = function(){
        console.log(_private);
    }
    return {
        foo:foo
    }
})(JQuery);

或者

(function(global){
    var _private = 'safe';
    var foo = function(){
        console.log(_private);
    }
    global.module = {
        foo:foo
    }
})(window)

module.foo();

二、模块化规范

1、commonjs

暴露模块:默认exports是{}, 第一种相当于把exports覆盖了,第二种相当于时往exports中添加属性。

  • module.exports = value;
  • exports.xxx = value;

引入模块:

  • 引入第三方模块: require(包的名称)
  • 引入自定义模块: require(模块的文件路径)

实现:

  • 服务器端:node环境直接使用
  • 浏览器端:使用browserify打包工具 否则浏览器不能识别
    原文作者:lihaixing
    原文地址: https://segmentfault.com/a/1190000020438672
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞