Sea.js 初探

  参考:http://chaoskeh.com/blog/why-seajs.html

    https://github.com/seajs/seajs/issues/547

  一个月前,打开博客园想看下小坦克写的文章,发现文章不见了,一个星期前,想看下放在收藏夹的Sea.js的文章,不幸的是这篇文章是发布在百度空间的,百度空间停了,文章也因此无法查看了,由于本人比较笨,又没有什么基础,花了好久时间才把Sea.js的基本用法给琢磨出来,其实以前也琢磨出来过N次,但是苦于没有机会去使用,没过几天又忘了,哪天想到了,又重新开始琢磨。。。想到开头的提到的两件不幸的事情,我想 还是我多敲下键盘,自己把Sea.js的用法给记录下来吧,这样以后忘记了,就可以直接打开我的博文查看了,也不会丢失了。

  做项目的时候,我们经常会把常用的JS方法给封装起来放到util.js里面,这样以后用起来特别方便,直接调用即可,比如:

function add(number1,number2){

}

人家也会因此感激你:太好了,都封装好了,直接调用就可以了,省下了我不少时间。

但是当项目越来越大,就经常会出现方法重名的情况,导致各种各样的冲突,为了解决冲突,不得不修改方法名,最后,你的util.js 会变成这样:

function add1(number1,number2){

}
function add2(number1,number2){

}
function add3(number1,number2){

}

“这是什么鬼?!”本来一个很好的util.js竟然变成这样了,还能开心的撸代码吗?

为了解决这问题,我们会采用另外一种方法来封装JS:

var temp=new Object();
temp={
    sayHello:function say(str) {
        alert(str);
    }
}

这也是常见的一种方式,可以较好的解决命名冲突的问题,但是这也会引发另外一个问题,就是调用的时候比较麻烦,需要这么去调用:

<script>
    temp.sayHello("你好");
</script>

看起来还是挺简单的啊,的确现在看起来确实没什么问题,但是如果这样呢?

var temp = new Object();
temp = {
    sayHello: function say(str) {
        alert(str);
    },
    show:
    {
        showStr: function funName(str) {
            alert(str);
        }
    }
}

嵌套多了一层,那么相应的调用也更复杂了:

temp.show.showStr("你好啊");

这显然不是一个太好的解决方法。

在写JS的时候,还会经常遇到一个问题,就是依赖的问题,请看下面的例子:

A.js:

function say(){
print();
}

B.js:

function print(){
    console.log("你好");
}

A.js的say方法调用了B.js的pirnt方法,如果你的页面没有引用B.js,只引用了A.js,那么恭喜你,脚本报错。

我们在页面中会引用好多JS,打开网页的时候,浏览器会下载页面中引用的所有的JS文件,哪怕这个JS文件是触发了某事件才有效的。

为了解决上面的问题,所以Sea.js诞生了。

只要在页面中引用Sea.js就可以获得Sea.js遵循的CMD环境了:

<script src="sea.js"></script>

既然获得了CMD环境,那么我们的代码也就要遵循CMD规范了:

define(function (require, exports) {
  exports.click=function(){
    alert("点击按钮了");
  };
});

简单的看下代码,发现 只是外面 嵌套了一层

define(function (require, exports) { 

});

其余也没什么不一样的地方,当然还有一个关键的地方:

 exports.click=function(){
    alert("点击按钮了");
  };

这代表我这个js向外暴露的接口就是一个click方法。

那么该怎么调用这个方法呢(假设这个js文件是util)?

<script>
        seajs.use("util",function(a){a.click()});
</script>

在页面中,只要申明 我现在需要使用util这个模块,帮我引用进来吧,这样util模块就乖乖的引用进来了,自然可以调用util向外暴露的click方法了。

这就是sea.js最基本的使用方法了,下面再来看看它是如何解决 JS依赖的 问题的:

define(function (require, exports) {
  var a=require("jquery-2.1.1.min.js");
  exports.run=function(){
    alert("运行吧");
    $("body").text("运行吧");
  };
});

一个require函数便搞定了这个问题,它告诉浏览器,现在我需要jquery插件,帮我引用进来吧,然后jquery插件便出现了。

这是Sea.js的魔力,并且这个这个函数是同步执行的。

当我们要让js按需加载,也非常简单,只需用到require.async函数,这样只有在触发body的click事件的时候,浏览器才会去下载util模块

 $("body").click(function(){
   require.async("util",function(a){
       a.click();
   });
 });
时间: 2024-11-09 02:52:07

Sea.js 初探的相关文章

Sea.js学习笔记

Sea.js入门 http://www.cnblogs.com/doseoer/p/4007752.html 前端模块化开发的价值 随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. https://github.com/seajs/seajs/issues/547 Sea.js:简单.极致的模块化Web开发体验 Sea.js 创始人玉伯专访

JavaScript模块加载框架sea.js 学习一

简单总结sea.js 学习 文件目录结构 /sea/sea.js      下载地址  http://seajs.org/docs/#downloads /sea/jquery-sea.js   下载地址 http://jquery.com/download/ /sea/sea_config.js /sea/home.jsdata.js /sea/data.js 1.html页面代码文件 <style> .ch{height:200px;width:200px;background:#ccc;

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必须分为模块加载期和执行期.加载期需要将执行期所有用到的模块从服务端同步过来,在再执行期按照

5 分钟上手 Sea.js

为什么使用 Sea.js ? Sea.js 简单.自然的代码书写和组织方式 兼容性好 技术比较成熟,运用比较普遍. 目录结构: examples/   |-- sea-modules      存放 seajs.jquery 等文件,这也是模块的部署目录   |-- static           存放各个项目的 js.css 文件   |     |-- hello   |     |-- lucky   |     `-- todo   `-- app              存放 ht

sea.js与require.js的区别

随着ES6标准的module出台渐渐会退出历史舞台 首先原理上的区别 sea.js遵循CMD规范.书写方式类似node.js的书写模板代码.依赖的自动加载,配置的简洁清晰.说白了就是懒加载. require.js遵循AMD规范,CMD和AMD基本相同,最大的区别是就CMD是懒加载,AMD是预加载. 简单来说,就是sea.js属于懒加载,require.js属于预加载. 在这里,顺便扩展一下预加载和懒加载的优缺点 预加载:当第一次访问时将所有的文件加载出来 优点:第一次访问完成以后, 再次访问的速

CMD (sea.js)模块定义规范

转自http://www.cnblogs.com/hongchenok/p/3685677.html CMD 模块定义规范 在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范.该规范明确了模块的基本书写格式和基本交互规则. 在 CMD 规范中,一个模块就是一个文件.代码的书写格式如下: define(factory); define Function define 是一个全局函数,用来定义模块. define d

Sea.js学习2——Sea.js的API 快速参考

(7 个接口是最常用的) 一.seajs.config:用来对 Sea.js 进行配置. seajs.config({ // 设置路径,方便跨目录调用 paths: { 'arale': 'https://a.alipayobjects.com/arale', 'jquery': 'https://a.alipayobjects.com/jquery' }, // 设置别名,方便调用 alias: { 'class': 'arale/class/1.0.0/class', 'jquery': '

Sea.js学习3——Sea.js的CMD 模块定义规范

在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范.该规范明确了模块的基本书写格式和基本交互规则. 在 CMD 规范中,一个模块就是一个文件.代码的书写格式如下: define(factory); define Function define 是一个全局函数,用来定义模块. define define(factory) define 接受 factory 参数,factory 可以是一个函数,也可以是一个对象或字

Sea.js

sea.js,具有以下核心特性: 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 node.js 一般书写模块代码. 自然直观的代码组织方式:依赖的自动加载.配置的简洁清晰. Sea.js 还提供常用插件,非常有助于开发调试和性能优化,并具有丰富的可扩展接口. 兼容性 Sea.js 具备完善的测试用例,兼容所有主流浏览器: Chrome 3+ Firefox 2+ Safari 3.2+ Opera 10+ IE 5.5+ 在页面中加载模块 在 hello.html 页尾,通过