程序博客网 > mac如何设置开机密码

使用RequireJS来加载MooTools Classes

来源：互联网发布：mac如何设置开机密码编辑：程序博客网时间：2024/06/05 22:39

转自：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文件以后，放到服务器上，我们就可以正常使用RequireJS了。

Download RequireJS »

加载JavaScript文件

如果你只是加载一些JavaScript文件的话，只需把下面的语法规则放到网页的 <head>标签里。

12345678

<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>

根据["a.js", "b.js", "some/module"]参数，把它们各自作为独立的<script>标签，放到src属性中加载。

requirejs-test

现在你可以在网页上异步加载JavaScript文件了！

文件默认的后缀是.js ,如果文件名不加.js后缀的话，查找路径算法会找到相关文件，并加上.js 后缀，文件路径为绝对路径，否则为相对路径。

更好的加载方法：

虽然你可以使用<script>标签直接使用 require() ,但是我们还是大力鼓励由RequireJS加载文件来工作。这样更容易通过优化工具，并有一个方便的缩写模式。

把上面的例子结构改为这样：

<script type="text/javascript" data-main="main" src="require.js"></script>

或者是

<script type="text/javascript" data-main="main.js" src="require.js"></script>

这样RequireJS 会自动查找该”data-main”属性对应的文件及调用一个require([]) 。因此，在这种情况下，它会加载scripts/main.js 。

//Inside scripts/main.jsrequire(["a.js", "b.js", "c.js"], function() {//callbacks });

requirejs-test

使用RequireJS来加载MooTools Classes

随着RequireJS可用，接下来，我们就可以使用 require function 了，传递一个文件数组和一个回调函数来执行已加载的所有文件：

//require ScrollSpy and Roarrequire(['scrollspy.1.2.js','Roar.js'],function(){//callbacks});

一旦类被加载，我就可以使用它们了！来看看吧：

12345678910

// require ScrollSpy and Roarrequire(['scrollspy.1.2.js','Roar.js'],function(){//use them!var roar = new Roar();var spy = new ScrollSpy({onEnter: function() {//....}});});

实际使用情况如何？如果一个”lazyload”CSS类存在，我们就load LazyLoad类文件和创建一个实例：

1234567891011121314151617

//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')                });         });     } });

你不仅可以使用RequireJS 来加载单个类，还可以嵌套异步加载需要的文件！
一旦MooTools是准备好了，你可以让你检查和load MooTools classes：

1234567891011121314151617181920

//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')                    });             });         }     }); });

真棒！按需加载我们需要的组件是JavaScript的未来（甚至是整个架构）。

require.ready！

require.ready()是指在 DOM 加载完毕之后执行代码，就像 jQuery 中的 $(document).ready()。

如果你不使用JavaScript框架，RequireJS提供了一个现成的方法来触发DOM is ready！

1234567891011121314

// require ScrollSpyrequire(['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() {//....}});});});

参考文档：RequireJS API

This entry was posted in JavaScript and tagged Tags: JavaScript, RequireJS. Bookmark thepermalink

0 0

mac如何设置开机密码

mac如何设置开机密码

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子传化集团传化传化物流传化洗衣粉传化化工传化股份传化网徐传化 002010传化智联传化智联股吧传化智联股份有限公司传化集团有限公司传化国际新城华光股份路翔股份兴化股份御银股份沪电股份巨轮股份金磊股份大华股份川化股份诚志股份 002010股票 002010 002010股吧奥克股份传单传单病发传单技巧发传单传单设计传单模板凡科微传单传单图片发传单兼职上海发传单兼职传单传单兼职微传单传单制作