前端模块化

背景：

前端JavaScript模块化，其实已经不是什么新鲜事了。但是很多的项目还没有真正的使用起来，还处于刀耕火种的野蛮生长阶段。

 

JavaScript一直缺乏有效的包管理机制，造成了大量的全局变量，大量的方法冲突。我们多么渴望有天能像Java（import），Python (import)，Ruby(require)那样写代码。在没有包管理机制的年代，我们是怎么避免所谓的全局变量的呢。

 

1. 高端闭包锁死作用域，几乎是标准做法。

(function() {

 

})();

 

和有几种变形

!(function() {

 

})();

 

传参：

(function(self) {

     

})(this); //小伙伴们看懂了this得用意了嘛？ 就是跨越执行环境，做到浏览器和node都可以使用。浏览器的this=>window, node this=>process

 

2. 模仿java的包机制

var com.bee = com.bee || {};

 

com.bee.util = {};

com.bee.common = {};

com.bee.animate = {};

com.bee.ajax = {};

….

 

虽然可以一定程度上减轻全局变量和方法的冲突问题，但是没有解决根本的问题。我们代码写起来不够自然，不够放松，不够cool。

 

于是时间来到了现代，以Gmail，Gmap已经chrome为代表的创新，彻底激活了JavaScript。JavaScript也迎来了自己的荣光，真是十年河东，十年河西。

叽歪下 "物竞天择，适者生存真是自然界大法则。"

 

当然真正的高潮是2010年的nodejs的横空出世，往日不敢想象的一些东西居然成为了现实, 想一想都激动呢。

 

心里历程时间：

10年我刚毕业就职于职业生涯的第一个公司，就是写js。虽然极其的不情愿，但生活还是要继续。一天收到js界前沿资讯，说一个nodejs的东西横空出世，太颠覆。我以为是一个类似于jQuery的库，去了解完全不是那么回事。居然run在server端。当时还没有“小伙伴都惊呆了”, 但我真的惊呆了。写了一些demo。真cool。我想这就是未来吗？是的，今天它的创新终于得到证明。生命中很多事情真是很神奇，你排斥的一些东西，经过沉淀之后，原来没有那么烂。

 

再次叽歪下，做技术要紧跟业界动态啊。

 

是的是的，我知道我跑题了，赶紧回来。

正是由于Node的强势崛起，JavaScript迎来了自己得颠覆时刻。但是由于JavaScript本身的缺陷，在后端必须解决JS的模块化的问题。于是大神们一统努力，伟大的CommonJS规范就这样诞生了。Node实现了CommonJS规范(当然也没有全盘实现)。

 

好了CommonJS怎么玩耍呢？

CommonJS对模块的定义非常简单，主要包括：模块的定义，模块引用，模块的标识。

 

模块的定义：math.js

module.exports ,exports

 

module.exports 定义模块对外暴露的对象

exports是module.exports的引用(exports只能暴露方法，不可以是对象。)

 

//add.js

module.exports = function(a, b) {

     return a + b;

}

//mul.js

exports.add = function(a, b) {

     return a * b;

}

//div.js

module.exports = {

     div: function(a, b) {

          if (b === 0) {

              return new Error(‘除数为0')

          }

          return a / b;

     }

};

这些看上去只是普通的js写法啊，怎么就是一个模块了呢？怎么就没有全局变量了呢？

是因为在编译的时候node会对模块自动的包装：实际上是这样的：

(function(exports, require, module, __filename, __dirname) {

     var math = require(‘./math’);

     

     exports.add = function() {

 

     }

})();

吼吼，秘密都在这了。

 

 

模块的引用：

require(‘./math’);

require(‘http');

 

模块的标识：就是require中引入模块传入的字符串，相对路径，绝对路径，没有文件名后缀js，必须符合小驼峰的规范。(node中没有遵守，如require(‘child_process’));

 

 

对于我们前端的意义呢？

有了更好的包管理，我们就可以把前端按照功能模块去开发，按照组件化的方式去开发。不会再把所有代码放到一个js文件中去。但是这么多得小模块怎么办呢？

通过包管理工具进行打包合成一个大文件。

 

demo

  — index.html             id: num1[  请输入数 ]  id:action [+-x/]  id: num2[请输入一个数] = id: reuslt[ 结果]

  — js

       — math.js

       — calc.js

 — build (将众模块打包放这了)

 — webpack.config.js

 

 

math.js

module.exports = {

     add: function(a, b) {

         return a + b;

     },

     mul: function(a, b) {

          return a * b;

     },

     sub: function(a, b) {

         return a - b;

     },

     div: function(a, b) {

         if (b === 0) {

              return new Error(“...");

          }

          return a / b;

     }

};

 

const.js

module.exports = {

     ADD: ‘+’,

     SUB: ‘-‘,

     DIV: ‘/‘,

     MUL: ‘*'

};

 

calc.js

var math = require(‘./math’);

var const = require(‘./const’);

 

var num1 = parseInt($(“#num1”));

var num2 = parseInt($(“#num2));

var action = $(“#action :selected”).val();

var result;

    

switch (action) {

   case const.Add:

        result = math.add(num1, num2):

         break;

   case const.SUB:

         result = math.sub(num1, num2);

         break;

   case const.MUL:

         result = math.mul(num1, num2);

         break;

   case const.DIV:

        try {

            result = math.div(num1, num2);

         } catch(e) {

            alert(e.message);

        }

};

 

 

webpack.config.js

module.exports = {

     entry: ‘./js/calc.js’,

     output: {

         path: ‘./build’,

         filename: ‘bundle.js'

     }

};

 

开始打包了：

cd demo

webpack

 

or

webpack-dev-server —port 3000 —watch 惊喜啊。

 

 

 

 

 

 

评论

1 楼 simplenico 2015-01-06  

给峰哥点个赞