模块化开发之sea.js实现原理总结

seajs官网说：seajs是一个模块加载器，所以学习它并不难。

在我的理解就是：本来我们是需要手动创建 script标签引入 js文件的，但用seajs后，它就自动帮我们完成这些工作。

这里只说实现原理，具体使用请看seajs官网：http://seajs.org/docs/

下面总结一下：

1. sea.js 是怎样解决 模块加载(这里说的模块其实就是js文件加载)，

2. sea.js 是怎样解决 模块依赖

3. sea.js 是怎样解决 命名冲突

1.模块加载

　　其实，原理很简单，和手动引入js文件是一样的。

　　就是当调用有加载功能的函数如 seajs.use 、 require 、require.async 时，

　　其内部代码会创建一个script标签，把src设置成你要引入的js文件，然后append到DOM文档中进行加载，

　　当加载完毕后，再把这个script标签移除掉，所以当我们审查元素时看不到有那个<script>标签，

　　但因为文件已经引入了，即使把这个script移除也不会影响代码使用.

　　我们可以用360卫士限制网速的功能，把网速降低，然后引入jq,是可以看到它就是这样处理的

加载完毕后，sea.js会把这个script标签移除：

总的一句：就是利用 script 标签进行模块加载

2.模块依赖

　　上面的问题清楚了，其实这个依赖也很简单啦，也就是 加载顺序的问题。

　　例如 a.js 依赖于 b.js，那在sea.js内部代码中，就先加载b.js然后再加载a.js，这样就可以解决依赖问题了。

3.命名冲突

　　解决了上面的两个问题，就剩下依赖接口的问题了，就是模块的依赖是搞定了，但是sea.js是用define( fn )函数来定义模块的，里面的变量都是局部的，

　　得给外面一个接口调用才行啊。

　　so, exports对象就出场啦，当你使用sea.js定义一个模块的时候，你可以把你的对外函数接口都放在exports对象上，　　如：

1 define(function (require, exports, module){
2     var arr = [12,3,4,5,56]; 3 var method = function (){ 4 //code... 5  } 6 exports.arr = arr; //对外接口 7 exports.method = method; //对外接口 8 })

当别一个文件要依赖此文件时，调用 require( url )时，返回值就是这个exports对象，所以就解决了接口的问题。

同时也很好的解决了命名冲突的问题，就算几个同事都用一样的名字，也不会有问题。

因为这里返回的exports就相当于一个命名空间了。

转载于:https://www.cnblogs.com/aaa6818162/p/4511692.html

模块化开发之sea.js实现原理总结相关推荐

cok服务器文件,前端开发之Node.js篇——搭建自己的网站服务器文件管理（一）...
这篇文章介绍如何使用Node.js搭建自己网站的服务器. Node.js是啥简单的说,Node.js是可以让JavaScript脱离浏览器运行的环境,也因为脱离浏览器,Node.js就没有JavaS ...
Qt 模块化开发之 pro 子项目开发
在实际开发中发现了将经常会复用到的地方模块化组件化会提高开发效率甚至文档.测试都可以复用,省去了很多麻烦,搭建一个软件就像"搭积木",或者说"将不同零件用电线插销连接起来 ...
【开源专访】Sea.js创始人玉伯的前端开发之路
摘要:玉伯,淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人.本期[开源专访]我们邀请玉伯来为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的 ...
SkeyeWebPlayer.js H5播放器开发之webpack编译flv.js实现基础播放器功能（二）
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP.FLV.HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/U ...
读玉伯之Sea.js、开源与前端之路
下面是CSDN访谈正文: CSDN:先介绍一下自己和目前的工作吧! 玉伯:我叫王保平,阿里花名玉伯.目前在支付宝前端技术部工作,从事前端基础类库.工具等产品的研发.喜欢编码.热爱思考,努力把每一天过得 ...
Sea.js简单使用
什么是Sea.js?有什么作用? Sea.js是一个小巧的模块加载器,它只解决一个问题:前端代码的模块化.通过Sea.js,可以将大量JavaScript代码封装成一个个小模块,然后轻松实现模块的加载 ...
十六.linux开发之Kernel移植——内核的配置和编译原理
有道云笔记地址: 详情看这里链接,记录太多,就不一一排版了. http://note.youdao.com/noteshare?id=d25dbce79566963e3699574a74048154& ...
Sea.Js的运行原理
Sea.Js的运行原理 1.CMD(Common Module Definition)规范 Sea.js采用了和Node相似的CMD规范,使用require.exports和module来组织模块.但 ...
李洪强iOS开发之RunLoop的原理和核心机制
李洪强iOS开发之RunLoop的原理和核心机制搞iOS之后一直没有深入研究过RunLoop,非常的惭愧.刚好前一阵子负责性能优化项目,需要利用RunLoop做性能优化和性能检测,趁着这个机会深入研 ...

模块化开发之sea.js实现原理总结

模块化开发之sea.js实现原理总结相关推荐

最新文章

热门文章