前台代码模块化 seajs

GhostStories 2015-07-07

   随着程序的增加,前台代码变的越来越复杂,重复的js 模块会变多,文件间的依赖也会变复杂,会经常出现引用了一个文件就忘了它所依赖的文件是哪个。seajs 很好的解决了这个问题,它属于模块级管理,能搞让我们引用文件时减少文件间的依赖。

    如果用过nodejs 的话,会发现seajs的用法和nodejs的模块语法相似,使用简单

1.下载seajs 文件,下载地址http://seajs.org/docs/#downloads

2.将文件放到工程文件里,并在页面上引用

<script type="text/javascript" src="/javascripts/libs/seajs/2.2.0/sea.js"></script>

 3.定义自己的模块

   创建文件a.js

define( 'myModule', function(require, exports, module ){
    module.exports ={
       init:function(){}
    };
})

4.页面调用

    

<script type="text/javascript">

    seajs.use('myMoudle', function(practiceStarter) {
        practiceStarter.init('first');
    });

</script>

这个就完成的了页面调用,但是这个只是单一的文件加载没有看到页面的模块化,seajs 最大的好处就是把文件间的依赖写在文件中,前台不需要关心

例如 a.js的运行需要b.js

b.js

define(function(require, exports, module ){
    var Other = function(){
    }
    module.exports = Other;
})

在a.js中引入b.js

define( 'myModule', function(require, exports, module ){
    module.exports ={
       init:function(){
          var Other = require('b_path')
       }
    };
})

如果页面上要引入多个模块可以

<script type="text/javascript">

    seajs.use(["/javascripts/editor_layout.js", "/javascripts/paper_practice_starter.js"], function(editor_layout, practiceStarter) {
       
    });

</script>

  也可以在页面上在seajs.use 前加入

seajs.config({
    base: '/'  //或者 . 
});

 指定加载文件的其实位置,如果不设置,默认为当前页面的上级目录

相关推荐

GhostStories / 0评论 2017-09-26
GhostStories / 0评论 2017-09-26
binglingnew / 0评论 2017-08-29

binglingnew / 0评论 2017-07-29