requirejs按需加载_使用RequireJS按需加载MooTools类-白红宇

requirejs按需加载

RequireJS is a hugely popular JavaScript project right now thanks to what it does: asynchronously load JavaScript files and properly handle their introduction to a namespace flawlessly. Of course, callbacks are provided which allow you to work with the new code one it has been loaded. MooTools is a perfect match for RequireJS because of its modular structure. Let me show you how you can lazy load MooTools classes with the robust RequireJS library.

由于RequireJS的功能，RequireJS现在是一个非常受欢迎JavaScript项目：异步加载JavaScript文件并正确无误地正确处理它们对名称空间的引入。当然，提供了回调，使您可以处理已加载的新代码。 MooTools的模块化结构非常适合RequireJS。让我向您展示如何使用健壮的RequireJS库延迟加载MooTools类。

抓取并使用RequireJS (Grabbing and Using RequireJS)

You'll obviously need to download RequireJS from the RequireJS website. Once the file is in place on your server, place it within the page via the traditional method, a SCRIPT tag:

您显然需要从RequireJS网站下载RequireJS。将文件放置在服务器上后，通过传统方法SCRIPT标签将其放置在页面中：

Now you have the power of async JavaScript loading within the page!

现在，您可以在页面内加载异步JavaScript！

在MooTools中使用RequireJS (Using RequireJS with MooTools)

With RequireJS available, all you need to do is use the require function, passing an array of files and a callback to execute once all of the files have loaded:

在RequireJS可用的情况下，您所需要做的就是使用require函数，传递一个文件数组和一个回调，以在所有文件加载完毕后执行：

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

Once the classes have been loaded, I can use them! Check it out:

一旦加载了类，就可以使用它们了！看看这个：

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

How about a practical usage? If an element with a "lazyload" CSS class exists, load LazyLoad and create an instance:

实际使用情况如何？如果存在带有“ lazyload” CSS类的元素，请加载LazyLoad并创建一个实例：

//when the DOM is readywindow.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')			});		});	}});

Not only do you load individual classes with RequireJS, but you can also nest require calls to load MooTools asynchronously! Once MooTools is ready, you can make your checks and load MooTools classes:

您不仅可以使用RequireJS加载单个类，还可以嵌套require调用以异步加载MooTools！ MooTools准备就绪后，您可以进行检查并加载MooTools类：

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

Awesome! The future of JavaScript is loading components (or even a whole framework) only if you need them!

太棒了！ JavaScript的未来是仅在需要时才加载组件(甚至整个框架)！

准备好！ (require.ready!)

If you aren't using a JavaScript framework, RequireJS provides a ready method to trigger a function when the DOM is ready!

如果您不使用JavaScript框架，则RequireJS提供了一个现成的方法来在DOM准备就绪时触发函数！

// 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() {				//....			}		});		});});

This is much like MooTools' domready event and Dojo and jQuery's ready method.

这很像MooTools的domready事件以及Dojo和jQuery的ready方法。

RequireJS和其他框架 (RequireJS and Other Frameworks)

Dojo currently contains its own asynchronous resource loading system but is looking toward the possibility of implementing RequireJS near its 2.0 release. The RequireJS website also provides detailed instructions on .

Dojo当前包含其自己的异步资源加载系统，但正在展望在其2.0版本附近实现RequireJS的可能性。 RequireJS网站还提供有关在详细说明。

翻译自:

requirejs按需加载