seajs入門

最簡單的示例：

目錄結構：

seajs+
    
    js+
        sea.js
        m.js
        show.js
        hide.js
   
     index.html

注意路徑：
index.html

<script src="js/sea.js"></script>

<script>
    seajs.use('./js/m')
</script>

seajs.use(url,function(ex){
    ex代表js文件里的exports; 
}) 

define(function(require,exports,module){ 
        //require,exports,module 名字不能改，也不能改为var r = require等形式；
        //require 模块之间依赖的接口
        //exports对外提供接口
        // 当引入的是sea下面的模块时，那么require执行完的结果就是exports;
        //一个模块 ，只能省略后面，不能省略前面；
})

m.js

define(function (require,exports,module){
var _box = document.getElementById('box')
    var _on = 1;
    document.onclick = function(){
        if(_on){
            require('./show').hide(_box)
        }
        else{
            require('./hide').show(_box)
        }
        _on = !_on;
    }
})

show.js

define(function (require,exports,module){
    exports.show = function(obj){
        obj.style.display = 'block'
    }
})

hide.js

define(function (require,exports,module){
    exports.hide = function(obj){
        obj.style.display = 'none'
    }
})

模塊代碼：遵循统一的写法

// 所有模块都通过 define 来定义
define(function(require, exports, module) {

  // 通过 require 引入依赖
  var $ = require('jquery');
  var Spinning = require('./spinning');

  // 通过 exports 对外提供接口
  exports.doSomething = ...

  // 或者通过 module.exports 提供整个接口
  module.exports = ...

});

1、关键字define, 以及匿名函数的参数一个都不能少， 注意: require, exports, module 参数名称也不能改.

2、exports: 用于声明该模块的对外接口

3、module: 用于表示当前模块的信息，具有如下属性:

id:         模块的唯一表示， require方法需要用到他<br />

exports: 当前模块开放的接口, Object, main.js中是 sum

dependencies: 当前模块的依赖列表

---

seajs配合grunt打包压缩；需解决ID与路径问题；[仅适用于seajs1.3.1版本，seajs2.0以后不支持模块依赖，方法见更新]

package.json

{
  "name": "js2",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-cmd-concat":"~0.2.8",
    "grunt-cmd-transport":"~0.3.0",
    "grunt-contrib-uglify":"~0.11.0"
  }
}

切換至項目根目錄運行

npm install

Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        transport:{
            js2:{
                files:{
                    '.build' :['1.js','2.js','3.js','4.js']
                }
            }
        },
         concat:{
         js2:{
         files:{
         'dist/m.js' : ['.build/1.js','.build/2.js','.build/3.js','.build/4.js']
         }
         }
         },
         uglify:{
         js:{
         files:{
         'dist/m.min.js': [ 'dist/m.js']
         }
         }
         }

    });
    grunt.loadNpmTasks('grunt-cmd-transport');
    grunt.loadNpmTasks('grunt-cmd-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerInitTask('default',['transport','concat','uglify']);
}

運行

grunt

seajs1.3.1

---

常用API
非官方整理

---

<h3>Module</h3>
id:模块唯一标识；

uri:模块绝对路径；

dependencies：当前模块依赖;
m.js

define(function (require, exports, module) {
    console.log(module.id); //弹出路径
    console.log(module.uri); //弹出路径
    console.log(module.dependencies);  // 当前模块依赖
})

exports：当前模块对外接口；

m.js

define(function (require, exports, module) {
  console.log(module.exports == exports);  //true                module.exports 对象  //exports一个引用
})

//提供对外接口时：

//这种是无法访问到的；
exports = {
        a:a
    }

//可访问：
exports.a = a;
//可访问：
module.exports = {
    a:a
}

index.html

    seajs.use('m3',function(ex){  
    //ex-->调用的是module.exports这个对象
     console.log(ex.a);
})

require.async：异步加载模块

//默认是同步的
require('m3.js'); 

//可改为异步
require.async('m3.js',func
 console.log('模块加载完成');
})        //此步未加载完成，下面的代码也能运行；

<h3>插件</h3>

安装

---

<h3>引入多模块</h3>

seajs.use(['m2.js','m3.js'],function(ex2,ex3){
    ex2.drag();
    ex3.pic();  
})
<h3>seajs加ID有利于提取</h3>
index.html

<script src="sea.js" id='seajs'></script>

<h3>如何改造为cmd模块</h3>

//普通
var a = 1;

//seajs下，套个define，再对外提供接口即可

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

<h3>调试接口cache<h3>