JavaScript模块化解决方案Sea.js（上）

1.模块化开发的背景

当你开发的网站越来越大时候，越来越复杂的时候会经常遇到下面的问题：冲突和依赖

moduleOne.js

function dialog(){}//对话框function drag(){}//拖拽function panel(){}//面板

<!-- 同事一自定义的库 --><script type="text/javascript" src="moduleOne.js"></script><!-- 同事二自定义的库 --><script type="text/javascript">   /*      第一个问题：冲突      这个里面的方法有可能和同事一库中的方法重名，进行覆盖    */   function panel(){}   /*       怎样解决这个问题呢？可以在同事一的库中添加模块名称类似于       moduleOne.panel = function(){}       同事二可以这样自定义自己的方法    */   moduleTwo.panel = function(){}   /*       虽然上述的冲突解决了，但是如果同事多了，项目大了更复杂了       模块的命名增加多了，可能是很多层模块如下所示：       moduleOne.xxx.yyy.zzz = function(){}       还有如果有规范还行，如果没有规范这个问题完全无法想象？       第二个问题：依赖问题           这个问题简直是太让人崩溃了，亲身体验过才知道....呜呜...           项目我们会约定一些添加约束的规则，但是这些规则有的时候           还不是很健全。下面是我的组件的顺序下面的模块会依赖上面的           模块，但是加入某天需要在panel里面添加一个新功能，发现           下面的模块依赖出问题了，你需要去各个页面里面去修改依赖           文件的顺序，很无语啊......    */</script><script src="dialog.js"></script><script src="panel.js"></script><script src="drag.js"></script>

通过上面的代码我们就可以发现业务复杂了，代码多了，就需要模块化的框架来管理我们的代码。Sea.js是一个非常好的解决方案。
moduleTwo.js

var needStr = 'Sea js need load this module!!!';

moduleOne.js

/**   Sea.js中define方法中的三个参数是不允许修改的   这个请注意       require:模块加载函数，用于加载依赖模块       exports:对外接口，将模块内的数据向外提供访问的入口       module:模块的元函数*/define(function(require,exports,module){   /*       假如现在moduleOne需要依赖moduleTwo模块，如何加载呢?           可以使用require方法进行加载moduleTwo模块，其中require           方法加载模块后返回的就是exports向外界暴露的接口    */   var exInterface = require('./moduleTwo.js');   //自定义函数   function panel(){       alert('This is a Panel!!!');       //需要访问moduleTwo中的数据，两者之间产生依赖关系       alert(needStr);   }   //将方法向外提供接口，以供外部访问   exports.panel = panel ;});

<!-- 导入Sea.js的类库--><script src="script/sea.js"></script><script type="text/javascript">    /*        在模块中用define方法定义了函数，如何在外部使用呢？        其中use方法中的回调函数中的ex参数表示define方法中        向外提供的访问接口     */    seajs.use('./script/moduleOne.js',function(ex){        alert("Callback Runnning!!!");        ex.panel();    });    function panel(){        alert("Define Panel!");    }    panel();</script>

上面讲了模块化开发的背景和常见的两种问题种类，抛出了问题。然后用Sea.js解决这个简单的模块化问题。后面还会降到如何用Sea.js结合Grunt JS构建工具，构建现实中线下开发和线上开发的过程。