seajs的原理以及基本使用

seajs模块化开发

　　模块化开发，把整个文件分割成一个一个小文件。

使用方法

　　使用方法特别简单，首先在官网中下载sea.js，然后在页面中引入。

index.html

// 1.路径
// 2.回调 (在js文件里定义的module.exports里定义的)
seajs.use('./js/part1.js',function (dom) {
    console.log(dom);
    let a = dom('#box');
    console.log(a);
}); 

part1.js

// 1.在js文件里互相引用模块
// 2.暂时不用管
// 3.导出(告诉别的文件可以使用我的xxx东西)
define(function (require,exports,module) {
    //这里是定义模块的地方
    function fn(dom) {
        return document.querySelector(dom);
    }
    module.exports = fn;
});

有一些需要注意的地方

define(function(require,exports,module){
    //这里的require就把他当成一个关键字就可以了，不要去改变他
})

另外这一种判断使用哪个模块的

//条件 这种情况就不推荐使用下面这种方式了，下面的会把两种都编译还是什么的，推荐使用require.async
define(function(require,exports,module){
    if(a){
        require('hello');
    }else{
        require('word');
    }
})

require.async

　　方法用来在模块内部异步加载模块，并在加载完成后执行指定回调。callback 参数可选。

define(function(require, exports, module) {
  // 异步加载一个模块，在加载完成时，执行回调
  require.async('./b', function(b) {
    b.doSomething();
  });
    
  // 异步加载多个模块，在加载完成时，执行回调
  require.async(['./c', './d'], function(c, d) {
    c.doSomething();
    d.doSomething();
  });
});
注意：require 是同步往下执行，require.async 则是异步回调执行。require.async 一般用来加载可延迟异步加载的模块

exports

exports 是一个对象，用来向外提供模块接口。

define(function(require, exports) {
​
  // 对外提供 foo 属性
  exports.foo = 'bar';
​
  // 对外提供 doSomething 方法
  exports.doSomething = function() {};
​
});

除了给 exports 对象增加成员，还可以使用 return 直接向外提供接口。

define(function(require) {
​
  // 通过 return 直接提供接口
  return {
    foo: 'bar',
    doSomething: function() {}
  };
});

如果 return 语句是模块中的唯一代码，还可简化为：

define({
  foo: 'bar',
  doSomething: function() {}
});

上面这种格式特别适合定义 JSONP 模块。

特别注意：下面这种写法是错误的！

define(function(require, exports) {
  // 错误用法！！!
  exports = {
    foo: 'bar',
    doSomething: function() {}
  };
});

正确的写法是用 return 或者给 module.exports 赋值：

define(function(require, exports, module) {
  // 正确写法
  module.exports = {
    foo: 'bar',
    doSomething: function() {}
  };
});

提示：exports 仅仅是 module.exports 的一个引用。在 factory 内部给 exports 重新赋值时，并不会改变 module.exports 的值。因此给 exports 赋值是无效的，不能用来更改模块接口。

 

模拟他的原理

　　步骤如下：

​ 　　1.html文件： seajs.use(1,2)执行

​ 　　2.插件： 模块插件 创建一个script标签 通过script把模块引入进来

​　　 3.插件： 定义一个全局函数define，用来获取模块里面所写的代码

​ 　　4.模块：模块文件里 执行defined（传入一个函数）

​　　5.插件： seajs.use插件 执行上一步的函数 并且传入三个参数

​ 　　6.再执行模块里传入的参数过程中，改变了module

​ 　　7.插件：插件里：执行回调函数，插件的第二个参数

　　​ 8.插件：删除掉上面加入的script标签

sea.js

let seajs = {};
seajs.use = function seajs(url,cb) {
    let oScript = document.createElement('script');
    let s = document.getElementsByTagName('script')[0];
    oScript.src = url;
    s.parentNode.insertBefore(oScript,s);

    /*function fn(dom) {
        return document.querySelector(dom);
    }*/

    let require,
        exports,
        module = {};
    window.define = function (fn) {
        fn(require,exports,module);
        cb(module.exports);
        s.parentNode.removeChild(oScript);
    };
}

index.html

seajs('./a.js',function(fn){
   let a = fn('#box');
   console.log(a);      
})

a.js

define(function (require,exports,module) {
    //这里是定义模块的地方
    function fn(dom) {
        return document.querySelector(dom);
    }
    module.exports = fn;
});

　　上面的代码就是模拟了一下加载模块的原理，其实就是自己新建了一个script标签，将那个引入的模块添加到了当前页面当中，和JSONP差不多的原理，模块中的define函数自己执行，将里面的函数传递到sea.js插件中，然后再去做处理，sea.js将模块中的module.exports = 的东西提取出来，回调函数传递给index中，接受到了这个模块中的module.exports。

　　其实我写的不是很清楚了，哈哈，可以用自己的方式去实现一下，我在这里写的这篇主要是对这两天学的一些东西做一下总结。

　　当然，如果你能从中收获一些我会非常高兴的，如果看到这里感觉什么都没用可以去官网去查看，上面讲的非常清楚。sea.js官网