您现在的位置是:网站首页> 内容页

seajs的原理以及基本使用

  • 海立方线路检查
  • 2019-03-19
  • 2人已阅读
简介seajs模块化开发  模块化开发,把整个文件分割成一个一个小文件。使用方法  使用方法特别简单,首先在官网中下载sea.js,然后在页面中引入。index.html//1.路径//

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.asyncdefine(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官网

文章评论

Top