模块化开发之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对象上,  如:

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

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

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

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

时间: 2024-10-12 09:50:41

模块化开发之sea.js实现原理总结的相关文章

JS中的模块化开发之Sea.JS

模块化开发的好处: 1:减少冲突 2:提高性能 用sea.js为例:sea.js模块库下载地址:http://seajs.org/docs/#downloads 例子:获取非行间样式的模块化开发: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="

Asp.net模块化开发之“部分版本部分模块更新(上线)”

项目开发从来就不是一个简单的问题.更难的问题是维护其他人开发的项目,并且要修改bug.如果原系统有重大问题还需要重构. 怎么重构系统不是本文探讨的问题,但是重构后如何上线部署和本文关系密切.这个大家可能刚兴趣. 言归正传,现在演示一下如果做到部分版本和部分模块更新. Asp.net模块化开发系列目录 1. Asp.net模块化开发之Mvc分区扩展框架(送源码) 2. Asp.net模块化开发之“开启分模块开发简单愉快之旅” 3. Asp.net模块化开发之“逻辑(项目)复用” 3.1. 不同角色

前端模块化开发之seaJs

了解后端语言的童鞋一定听过模块化开发的概念,比如java.python等后端语言都有自己的模块化特性,然而和后端语言相比,javascript还尚未实现模块化的功能,虽然之后的更高版本可能引入模块化开发的概念,但是现阶段我们可以通过第三方控件来实现. 今天我就来给大家介绍下可以帮助我们实现前端模块化的工具——seaJs.如果对seaJs已经有实际使用经验的小伙伴可以直接忽略这篇文章. 如果有小伙伴了解requireJs,那么学习seaJs会相当的容易,因为requireJs也是前端模块化的构建工

Asp.net模块化开发之Mvc分区扩展框架

对于一个企业级项目开发,模块化是非常重要的. 默认Mvc框架的AreaRegistration对模块化开发已经支持比较好了,还有必要扩展吗?还能扩展吗? 本文中的栗子是使用.net4.0.Mvc4.0及Unity2.0(企业库4.0)的,提供完整源码. 本分区扩展集成了IoC和分区DI(依赖注入)及分区过滤器的支持. 本分区扩展框架(Fang.Mvc)在演示栗子源码中包含完整源码,拿到自己的项目直接引用即可使用了. 感兴趣的同学请继续,用AreaRegistration有不爽的看官请拭目以待..

Android开发之IP拨号器原理

IP拨号器,使用了Android的广播接收者(BroadCastReceiver),在广播中把已保存的ip号码放在拨打电话号码的前面(getResultData()),然后把修改后的号码设置到广播中(setResultData()). 项目创建步骤和思路: 1.创建一个java类,继承android的BroadCastReceiver 2.在清单文件中,定义receiver节点,定义name属性,指定广播接收者java类的全类名 3.在intent-filter的节点中,指定action子节点,

【开源专访】Sea.js创始人玉伯的前端开发之路

摘要:玉伯,淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人.本期[开源专访]我们邀请玉伯来为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的. 在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框架.本期[开源专访]我们邀请到了国内前端大牛玉伯(@玉伯也叫射雕),请他为我们分享一些关于前端框

Sea.js创始人玉伯的前端开发之路

玉伯,淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人.本期[开源专访]我们邀请玉伯来为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的. 在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框架.本期[开源专访]我们邀请到了国内前端大牛玉伯(@玉伯也叫射雕),请他为我们分享一些关于前端框架.前

谈谈刚接触sea.js框架得看法

向大神致敬,也是我接触框架得开始. 感谢张鑫旭大神同学得整理,专业!致敬~   sea.js的7个API,都在下面得链接中有详细说明: http://www.zhangxinxu.com/sp/seajs/docs/zh-cn/bootstrapping.html seajs.use   通过 use 方法,可以在页面中加载任意模块 seajs.config  可以使用 config 方法来配置加载器 define  使用全局函数 define 来定义模块 require    函数用来访问其他

Sea.Js的运行原理

1.CMD(Common Module Definition)规范 Sea.js采用了和Node相似的CMD规范,使用require.exports和module来组织模块.但Sea.js比起Node的不同点在于,前者的运行环境是在浏览器中,这就导致A依赖的B模块不能同步地读取过来,所以Sea.js比起Node,除了运行之外,还提供了两个额外的东西: a.模块的管理 b.模块从服务端的同步 即Sea.js必须分为模块加载期和执行期.加载期需要将执行期所有用到的模块从服务端同步过来,在再执行期按照