[原创] require.js & signals.js 学习笔记
前段时间看到了一个很好看的HTML5网站,原网站地址如下:http://lovelymessag.es/
于是为了学习我就试着将它移植到了我的个人网站上(嘿嘿!请大家不要鄙视啊。为了学习嘛。:)保存的功能已经写完了,现在可以与别人分享自己画的大作了!)。
大家也可以参看移植后的地址:http://ho1ho.com/lovelymessage/
就在移植的过程中,发现了不少的问题。这个网站用到的技术还真不少,移植时着实让我费了好大的劲儿。不过最近经过各种研究,问题还是被我解决了。真是学到了不少东西啊。现将用到的主要技术简要的介绍一下啊:
1.signals.js
官方地址:http://millermedeiros.github.com/js-signals/
简介:signals.js可以理解成是观察者模式的JavaScript版实现。说到这儿,我想大家应该就明白它是干什么的了吧!它的特点是每个事件类型都有它自己的控件器,并且不依赖于观察者。有点类似于在C#中使用委托实现的观察者模式。
PS:有个很不幸的消息必须先告诉你,有关signals.js的中文资料基本没有,所以大家要是想了解更多的细节的话,只能看官方文档了啊。
基本用法:(官方示例)
//custom object that dispatch a `started` signal // myObject 相当于观察者模式中的 Subject var myObject = { started : new signals.Signal() }; // onStarted 相当于观察者模式中的 Observer function onStarted(param1, param2){ alert(param1 + param2); } myObject.started.add(onStarted); //add listener myObject.started.dispatch('foo', 'bar'); //dispatch signal passing custom parameters myObject.started.remove(onStarted); //remove a single listener
怎么样,看起来是不是和经典的观察者模式代码很类似。
2.require.js
官方地址:http://requirejs.org/
简介:RequireJS是一个JavaScript文件和模块加载器。可以用于其它JavaScript环境,例如Rhino或Node。使用像RequireJS这样的模块脚本加载器,可以改进代码的性能和质量。
PS:require.js的中文资料数量比signals.js要稍稍好一些。不过强烈建议看官方的文档。官方文档讲的那个细啊。
基本用法:(官方示例)
前提假设:假设程序目录结构如下:
project-directory/
|-----project.html
|-----scripts/
|-----main.js
|-----require.js
|-----helper/
|-----util.js
<!DOCTYPE html> <html> <head> <title>My Sample Project</title> <!-- data-main attribute tells require.js to load scripts/main.js after require.js loads. --> <script data-main="scripts/main" src="scripts/require.js"></script> </head> <body> <h1>My Sample Project</h1> </body> </html>
require(["helper/util"], function(util) { //This function is called when scripts/helper/util.js is loaded. //If util.js calls define(), then this function is not fired until //util's dependencies have loaded, and the util argument will hold //the module value for "helper/util". });