参考: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(); }); });