模块化开发之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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/492261.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【干货】百度联合清华大学发布国内首个基于AI实践的《产业智能化白皮书》(附报告全文)...

来源&#xff1a;百度AI在4月9日举行的“百度大学 Alpha 学院首期学员毕业典礼”上&#xff0c;百度联合清华大学发布国内首个基于 AI 实践的行业重磅报告&#xff0c;《产业智能化白皮书——人工智能产业化发展地形初现端倪》。这是国内首次从产业演进的视角探讨 AI 与产业融合…

全球语种谱系图,看看机器翻译需要跨越的大山

来源&#xff1a;语言春秋编辑 | 北外新闻中心 杨丹蕊摘要&#xff1a;当前机器翻译技术可以分成两类&#xff0c;一种是 Rich Resource NMT&#xff0c;也就是双语语料丰富的语言对&#xff08;比如中文 - 英文&#xff09;&#xff1b;另一种叫 Low Resource NMT&#xff0c…

Big Data Security Part One: Introducing PacketPig

Series Introduction Packetloop CTO Michael Baker (cloudjunky) made a big splash when he presented ‘Finding Needles in Haystacks (the Size of Countries)‘ at Blackhat Europe earlier this year. The paper outlines a toolkit based onApache Pig, Packetpig pack…

美国科学家成功恢复老年人工作记忆,望奠定认知干预疗法基础

来源&#xff1a;科技日报伴随着人体衰老&#xff0c;大脑对信息加工和贮存的能力也必然会下降&#xff0c;但如果这种能力可以被逆转呢&#xff1f;据英国《Nature Neuroscience》杂志8日在线发表的一项研究&#xff0c;美国科学家通过同步脑区节律——按特定节律刺激颞叶和额…

广告机市场和产品

广告机行业分析 前言 关于广告机&#xff0c;不同的人有不同的认识&#xff0c;此部分主要说明文中所指广告机的范围。 在讨论前&#xff0c;先区分几个概念。 1、 广告机与数字标牌 数字标牌是数字标示牌的简称&#xff0c;指代显示任意信息的显示终端&#xff1b;广告机是指…

《工业大数据白皮书》2019版正式发布

来源&#xff1a;悟空智能科技近日&#xff0c;由中国电子技术标准化研究院、全国信息技术标准化技术委员会大数据标准工作组主编&#xff0c;工业大数据产业应用联盟联合主编&#xff0c;联想集团等多家联盟成员企业参编的《工业大数据白皮书&#xff08;2019版&#xff09;》…

产品金字塔

制造业产品大概可以分为三个层次&#xff0c;第一层为实物&#xff0c;第二层为服务&#xff0c;第三层为体验。其中产品为基础&#xff0c;服务为改善&#xff0c;共同给客户美好的体验。三者组成一个产品金字塔。第一层&#xff0c;实物。比如手机&#xff0c;满足通话、上网…

学界 | UC伯克利发布一个低成本家居机器人,会叠衣服、会泡咖啡

BLUE 机器人叠毛巾&#xff0c;实际花费时间约 50 秒来源&#xff1a;AI科技评论加州大学伯克利分校 Pieter Abbeel 教授今天在推特公开宣布了伯克利机器人学习实验室最新开发的机器人 BLUE。这款机器人的特点是低成本&#xff08;不到 5000 美元&#xff09;、基于 AI 控制&am…

JAVA并发编程3_线程同步之synchronized关键字

在上一篇博客里讲解了JAVA的线程的内存模型&#xff0c;见&#xff1a;JAVA并发编程2_线程安全&内存模型&#xff0c;接着上一篇提到的问题解决多线程共享资源的情况下的线程安全问题。 不安全线程分析 public class Test implements Runnable {private int i 0;private i…

深度学习技术发展趋势浅析

来源&#xff1a;中国信息通信研究院CAICT当前&#xff0c;人工智能发展借助深度学习技术突破得到了全面关注和助力推动&#xff0c;各国政府高度重视、资本热潮仍在加码&#xff0c;各界对其成为发展热点也达成了共识。本文旨在分析深度学习技术现状&#xff0c;研判深度学习发…

(含Matlab源码)算术编码(arithmetic coding)的underflow问题

0、文章结构 文章的行文逻辑如下&#xff0c;看官可以根据需要跳读&#xff0c;节省时间。 1、介绍underflow和overflow. 2、underflow问题起源 3、underflow问起探索 4、underflow和overflow的常见情形 5、处理一些溢出问题的小技巧 6、对其中的两种小技巧的优缺点比较…

人类与AI结合的最佳形态是什么样?|A16Z内部万字报告

来源&#xff1a;A16Z合伙人Frank Chen2017年7月&#xff0c;我发布了一个关于人工智能、机器学习和深度学习的入门视频。从那以后&#xff0c;我一直痴迷于阅读关于机器学习的报道。一般来说&#xff0c;你会在媒体的头版上看到两类报道。一类报道的标题是“机器人来抢你的工作…

(Matlab源码)Matlab实现算术编码(Arithmetic coding)超级详解(每一段代码都可以看懂)

1、代码功能 输入&#xff1a;一个字符串输出&#xff1a; codeword&#xff08;码值&#xff09; codeword所占的位数 2、代码框图 3、代码超详解 统计字符串中的字符种类&#xff0c;调用函数&#xff0c;放入数组b中。 bunique(str1); 统计每种字符的个数&#xff0c;放入…

(含Python源码)Python实现K阶多项式的5种回归算法(regression)

0、文章结构 为了方便客官根据需要取阅&#xff0c;节约时间&#xff0c;文章目录结构如下&#xff1a; 问题描述理论部分&#xff1a;五种回归算法两种Python读取文件的方法Python实现五种回归算法使用的工具箱总结 1、问题描述 K阶多项式表达式 其中&#xff0c; 现有数据…

首张人类黑洞照片的背后

摘要&#xff1a;沈海军&#xff1a;今天&#xff08;2019年4月10日&#xff09;下午接受广东卫视采访&#xff0c;就晚上21:00即将发布的人类首张黑洞照片发表了评论。提笔撰稿时&#xff0c;尚未到照片官方的发布时间&#xff0c;故不能一睹黑洞照片的芳容&#xff0c;但鉴于…

一场“交通进化”将至: 5G带给车联网与自动驾驶哪些升级?

来源 &#xff1a;腾讯科技作者&#xff1a;李俨 美国高通公司技术标准高级总监5G时代已经来临&#xff0c;走向商用的步伐也在逐渐加快。腾讯科技联合优质科技CP以及行业专家推出“5G局中局”系列文章&#xff0c;为你解读5G在通讯、物联网、车联网、工业联网、边缘计算、云服…

特斯拉发布Q1无人驾驶安全报告:事故增多 但还是比人类少

来源&#xff1a;聚焦AI的近日&#xff0c;电动汽车制造商特斯拉发布了2019年第一季度自动驾驶仪&#xff08;Autopilot&#xff09;安全性报告&#xff0c;这是特斯拉发布的第三份类似报告&#xff0c;此前该公司认为媒体对特斯拉车辆事故的报道有失公允&#xff0c;因此他们开…

log4net 小记

突然想到想测试一下log4net&#xff0c;结果折腾了两天&#xff0c;才弄出来.....记录下来以备以后查看 背景&#xff1a;vs2013 mvc项目中想体验下log4net的功能&#xff08;主要是文件记录&#xff09; 翻看了log4net的相关资料&#xff0c;才发现其实它是有很多功能的&#…

关于找工作和选专业的思考

个人的成长离不开国家的发展&#xff0c;国家的发展离不开国际的大气候。 国家之间的竞争主要归于经济竞争&#xff0c;经济的核心在于产业&#xff0c;产业的核心则在于科学和技术。 无论是找工作还是选专业&#xff0c;赌的都是对未来趋势的预测&#xff0c;没有人会希望自己…

DARPA 2020财年研发预算 人工智能应用研究投资急剧增长

来源&#xff1a;美国国防部等摘要&#xff1a;2019年3月&#xff0c;特朗普政府公布2020财年预算申请。根据预算法案&#xff0c;2020财年美国国家安全预算总额增加340亿美元&#xff0c;达到7500亿美元&#xff0c;比上年增加5%。美国防部分得的经费为7180亿美元&#xff0c;…