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官网https://www.cnblogs.com/z937741304/p/9387812.html