JavaScript模块化解决方案Sea.js(上)

页面导航:首页 > 网络编程 > JavaScript > JavaScript模块化解决方案Sea.js(上)

JavaScript模块化解决方案Sea.js(上)

来源: 作者: 时间:2016-02-02 09:59 【

1 模块化开发的背景当你开发的网站越来越大时候,越来越复杂的时候会经常遇到下面的问题:冲突和依赖moduleOne jsfunction dialog(){} 对话框function drag(){} 拖拽function panel(){} 面板

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 ;
});
 
<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构建工具,构建现实中线下开发和线上开发的过程。

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<