J.chong

最簡單的示例：

目錄結構：

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>

call: 调用一个对象的一个方法，以另一个对象替换当前对象。

call([thisObj[, arg1[, arg2[, [,.argN]]]]])

參數：thisObj,

arg1, arg2, , argN :可选项。将被传递方法参数序列。

說明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

说明白一点其实就是更改对象的内部指针，即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。

    function Obj(){this.value="对象！";}
    var value="global 变量";
    function Fun1(){alert(this.value);}

    window.Fun1();   //global 变量
    Fun1.call(window);  //global 变量
    Fun1.call(document.getElementById('myText'));  //input text
    Fun1.call(new Obj());   //对象！

window.Fun1()默認對象；Fun1.call(window)執行Fun1的對象為window; 以此類推

call函数和apply方法的第一个参数都是要传入给当前对象的对象，及函数内部的this。后面的参数都是传递给当前对象的参数。

    var func=new function(){this.a="func"}
    var myfunc=function(x){
        var a="myfunc";
        alert(this.a);  //func
        alert(x);  //var
    }
    myfunc.call(func,"var");

对于第一个参数意义都一样，但对第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。

func.call(func1,var1,var2,var3)  ==  func.apply(func1,[var1,var2,var3])

同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入 区别在于 call 的第二个参数可以是任意类型，而apply的第二个参数必须是数组，也可以是arguments

apply ：應用某一對象的一個方法，用另一對象替換當前對象；

apply([thisObj[,argArray]]) 

1、如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
2、如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

實例a

function add(a,b){alert(a+b)}function sub(a,b){alert(a-b)}add.call(sub,3,1);

這個例子其實沒什麼用，一定要找理由：不涉及到this,所以call什麼的相當於白寫；alert(4)

實例b

    function Animal(){
        this.name = "Animal";
        this.showName = function(){
            alert(this.name);
        }
    }

    function Cat(){
        this.name = "Cat";
    }

    var animal = new Animal();
    var cat = new Cat();

    //通过call或apply方法，将原本属于Animal对象的showName()方法交给对象cat来使用了。
    //输入结果为"Cat"
    animal.showName.call(cat,",");
    //animal.showName.apply(cat,[]);

animal.showName.call(cat,","); 將原本的this對象指向cat，cat獲得屬性，this.name==cat.name,所以输出是Cat

實例c

 function Animal(name){    
     this.name = name;    
     this.showName = function(){    
         alert(this.name);    
     }    
 }    
   
 function Cat(name){  
     Animal.call(this, name);  
 }    
   
 var cat = new Cat("Black Cat");   
 cat.showName();

Animal.call(this, name); this為cat對象，再執行 Animal(); 裏面的this變為cat對象，所以獲得屬性與方法；最後彈出 'Black Cat'