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,原理,模块化,开发0
加载完毕后,sea.js会把这个script标签移除:
sea.js,原理,模块化,开发1
总的一句 : 就是利用 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就相当于一个命名空间了。
分享到:
相关推荐
除了解决命名冲突和依赖管理,使用 Sea.js 进行模块化开发还可以带来很多好处: 模块的版本管理。通过别名等配置,配合构建工具,可以比较轻松地实现模块的版本管理。 提高可维护性。模块化可以让每个文件的职责...
除了解决命名冲突和依赖管理,使用 Sea.js 进行模块化开发还可以带来很多好处: 模块的版本管理。通过别名等配置,配合构建工具,可以比较轻松地实现模块的版本管理。 提高可维护性。模块化可以让每个文件的职责...
Sea.js的目的是追求简单的代码书写和组织方式,Sea.js并没有过多功能而是主要对前端程序的部署结构作出约束,下面我们就来看一下JavaScript的模块化开发框架Sea.js上手指南:
sea.js的官方实例源码,包含了4个例子。
sea.js遵循CMD规范,用于实现js在浏览器端的模块化开发。 sea.js中只有局部require。
Sea.js模块化官方四个demo Hello Sea.js Lucky Ball Angularjs Todo Todo
模块化开发及AMD、CMD、Require.js、sea.js、common.js、ES6的对比;模块化开发就是封装细节,提供使用接口,彼此之间互不影响,每个模块都是实现某一特定的功能。模块化开发的基础就是函数
sea.js
javascript模块化开发所以使用的 - seajs模块加载框架 Sea.JS 是一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块。 SeaJS 支持的标准模块遵循 Modules/Wrappings 规范的 define ...
JS模块化标准技术.JAVASCRIPT的几种模块化技术 作为前端重要组成部分的javascript语言,其面向对象功能非常差.所以要实现代码的模块化,需要一些标准:AMD,CMD 针对2种模块化也有现成的js模块化库SeaJs,require.js 今天...
是一款现代的用于Web开发的模块加载工具,提供简单、极致的模块化体验。Sea.js 由阿里、腾讯等公司共同维护。 使用 Sea.js的好处: Sea.js 追求简单、自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块...
NULL 博文链接:https://1204363612.iteye.com/blog/1990743
见一个web项目,解压后将两个文件放到web下可直接使用 运行项目后进入index.html看控制台即可
AMD推崇依赖前置,在定义模块的时候就要声明其依赖的模块 CMD推崇就近依赖,只有在用到某个模块的时候再去require
通读本书,你能够了解Sea.js各个细节,甚至整个前端模块化的大框架。本书既是一本参考手册,可以随时查阅;也是对前端模块化的一次剖析,展望。 如果您觉得本书并不是如上一段描述的这样,欢迎讨论、意见,更期待您...
Seajs,一个Web模块加载框架,追求简单、自然的代码书写和组织方式,:Sea.js 遵循 CMD 规范,模块化JS代码。依赖的自动加载、配置的简洁清晰,可以让程序员更多地专注编码。 2.Seajs优缺点 优点: 1).提高可...
极其简单的模块化开发体验。 Sea.js 对简单、自然的编码和组织的追求伴随着一组有用的功能。 模块规范的定义简单友好,Sea.js 遵循 CMD 规范,为 Node.js 模块风格。 自然直观的代码组织,自动加载依赖,配置简单...
需要用到BarTender开发标签列印功能而缺少dll的可以下载使用
NULL 博文链接:https://ch19880311.iteye.com/blog/2184852