使用RequireJS来加载MooTools Classes
2015-11-05 10:41
609 查看
转自:http://blog.moocss.com/tutorials/javascript-tutorials/1386.html (不错的Blog)
By Rainbow on 2010-10-07 // JavaScript// 2098
Views+ // (2)Comments
RequireJS 是一个根据需要来加载 js 文件的 JavaScript 框架,可避免不必要的js文件加载,提升网页浏览速度。RequireJS 没有依赖任何一个JavaScript框架,它是组织和管理JavaScript文件或JavaScript库的好方法。
这样我们就不用羡慕dojo的dojo.require() 和 YUI的yui-loader了。
成功下载RequireJS文件以后,放到服务器上,我们就可以正常使用RequireJS了。
Download RequireJS »
如果你只是加载一些JavaScript文件的话,只需把下面的语法规则放到网页的 <head>标签里。
根据["a.js", "b.js", "some/module"]参数,把它们各自作为独立的<script>标签,放到src属性中加载。
现在你可以在网页上异步加载JavaScript文件了!
文件默认的后缀是.js ,如果文件名不加.js后缀的话,查找路径算法会找到相关文件,并加上.js 后缀,文件路径为绝对路径,否则为相对路径。
虽然你可以使用<script>标签直接使用 require() ,但是我们还是大力鼓励由RequireJS加载文件来工作。这样更容易通过优化工具,并有一个方便的缩写模式。
把上面的例子结构改为这样:
或者是
这样RequireJS 会自动查找该”data-main”属性对应的文件及调用一个require([]) 。因此,在这种情况下,它会加载scripts/main.js 。
随着RequireJS可用,接下来,我们就可以使用 require function 了,传递一个文件数组和一个回调函数来执行已加载的所有文件:
一旦类被加载,我就可以使用它们了!来看看吧:
实际使用情况如何? 如果一个”lazyload”CSS类存在,我们就load LazyLoad类文件和创建一个实例:
你不仅可以使用RequireJS 来加载单个类,还可以嵌套异步加载需要的文件!
一旦MooTools是准备好了,你可以让你检查和load MooTools classes:
真棒!按需加载我们需要的组件是JavaScript的未来(甚至是整个架构)。
require.ready()是指在 DOM 加载完毕之后执行代码,就像 jQuery 中的 $(document).ready()。
如果你不使用JavaScript框架,RequireJS提供了一个现成的方法来触发DOM is ready!
参考文档:RequireJS API
This entry was posted in JavaScript and tagged Tags: JavaScript, RequireJS.
Bookmark thepermalink
By Rainbow on 2010-10-07 // JavaScript// 2098
Views+ // (2)Comments
RequireJS 是一个根据需要来加载 js 文件的 JavaScript 框架,可避免不必要的js文件加载,提升网页浏览速度。RequireJS 没有依赖任何一个JavaScript框架,它是组织和管理JavaScript文件或JavaScript库的好方法。
这样我们就不用羡慕dojo的dojo.require() 和 YUI的yui-loader了。
获取和使用RequireJS
成功下载RequireJS文件以后,放到服务器上,我们就可以正常使用RequireJS了。Download RequireJS »
加载JavaScript文件
如果你只是加载一些JavaScript文件的话,只需把下面的语法规则放到网页的 <head>标签里。1 2 3 4 5 6 7 8 | <script src="scripts/require.js"></script> <script> require(["a.js", "b.js", "some/module"], function() { //This function will be called when all the dependencies //listed above are loaded. Note that this function could //be called before the page is loaded. This callback is optional. }); </script> |
现在你可以在网页上异步加载JavaScript文件了!
文件默认的后缀是.js ,如果文件名不加.js后缀的话,查找路径算法会找到相关文件,并加上.js 后缀,文件路径为绝对路径,否则为相对路径。
更好的加载方法 :
虽然你可以使用<script>标签直接使用 require() ,但是我们还是大力鼓励由RequireJS加载文件来工作。这样更容易通过优化工具,并有一个方便的缩写模式。把上面的例子结构改为这样:
1 | <script type="text/javascript" data-main="main" src="require.js"></script> |
1 | <script type="text/javascript" data-main="main.js" src="require.js"></script> |
12 | //Inside scripts/main.js require(["a.js", "b.js", "c.js"], function() { //callbacks }); |
使用RequireJS来加载MooTools Classes
随着RequireJS可用,接下来,我们就可以使用 require function 了,传递一个文件数组和一个回调函数来执行已加载的所有文件:12 | //require ScrollSpy and Roar require(['scrollspy.1.2.js','Roar.js'],function(){ //callbacks }); |
1 2 3 4 5 6 7 89 | // require ScrollSpy and Roar require(['scrollspy.1.2.js','Roar.js'],function(){ //use them! var roar = new Roar(); var spy = new ScrollSpy({ onEnter: function() { //.... } }); }); |
1 2 3 4 5 6 7 89 | //when the DOM is ready window.addEvent('domready',function(){ //find image to lazyload var scrollspyElements = $$('.lazyload'); //if there are images to lazyload... if(scrollspyElements.length) { //require the class and when done... require(['lazyload.js'],function(){ //create a LazyLoad instance and use it! new LazyLoad({ range: 200, image: 'Assets/blank.gif', elements: $$('.lazyload') }); }); } }); |
一旦MooTools是准备好了,你可以让你检查和load MooTools classes:
1 2 3 4 5 6 7 89 | //load mootools with RequireJS! require(['mootools-1.2.4.js'],function() { //when the DOM is ready require.ready(function(){ //find image to lazyload var scrollspyElements = $$('.lazyload'); //if there are images to lazyload... if(scrollspyElements.length) { //require the class and when done... require(['lazyload.js'],function(){ //create a LazyLoad instance and use it! new LazyLoad({ range: 200, image: 'Assets/blank.gif', elements: $$('.lazyload') }); }); } }); }); |
require.ready!
require.ready()是指在 DOM 加载完毕之后执行代码,就像 jQuery 中的 $(document).ready()。如果你不使用JavaScript框架,RequireJS提供了一个现成的方法来触发DOM is ready!
1 2 3 4 5 6 7 89 | // require ScrollSpy require(['scrollspy.1.2.js','Roar.js'],function(){ //use it when the dom is ready! require.ready(function(){ //use them! var roar = new Roar(); var spy = new ScrollSpy({ container: document.id('someDiv'), onEnter: function() { //.... } }); }); }); |
This entry was posted in JavaScript and tagged Tags: JavaScript, RequireJS.
Bookmark thepermalink
相关文章推荐
- System.ComponentModel.DataAnnotations 命名空间和RequiredAttribute 类
- UIImageView——IOS显示图片的利器
- 通过UIImageRenderingMode改变工程图片颜色
- IOS疯狂基础之UIImage
- 今天给大家说一个我做UI特效的小技巧,先来看看效果吧(录屏有点渣,所以质量有折扣)
- NGUI__UITexture
- xss ***
- array_unique
- THU2015 fall 2-3 Rebuild
- ios Memory Usage Performance Guidelines
- JAVA笔记系列:字符串操作——string stringbuilder stringbuffer
- THU2015 fall 2-4 Queap
- SoapUI-传递 Respons header 中的值到 Request header
- Android 数据查询query函数参数解析
- UITextField,UITextView ,UILabel,键盘,UIFont
- Tsinghua OJ:真二叉树重构(Proper Rebuild)
- Builder
- 颜色转换 IOS中十六进制的颜色转换为UIColor
- Value Results,Not Just Effort
- easyUI,tree,获取一级子节点