这篇文章主要介绍了使用RequireJS优化JavaScript引用代码的方法,RequireJS是一款人气JS库,需要的朋友可以参考下
RequireJS是一个提高你的javascript代码速度和质量的有效方法,同时它还让你的代码更容易阅读和维护。
在本文中,我会为你介绍RequireJS和应该如何使用它。我们讨论引入文件和定义模块,甚至还会接触优化方面的知识。
简单的说,require.js是一个脚本载入程序,允许你把你的javascript代码独立成文件和模块,同时管理每个模块间的依赖关系。
引入文件
在开始使用RequireJS前,我们需要先下载它的库和Asynchronous Module Definition(AMD)文件。然后在文档头部链接到require.js文件,就如:
?
1 2 <script src="require.js" data-main="main"></script>你可能会问data-
在main.js文件里面,需要为RequireJS做配置,载入模块和定义一个base路径,以便在引入文件时使用。
Require函数
RequireJS使用一个简单的require函数去导入脚本,在这个例子里面,RequireJS导入的是JQuery:
?
1 2 3 require(["jquery"], function($) { $(‘#mydiv”).html(‘Hello this is RequireJS talking”); });RequireJS的一个优点就是,它非常容易阅读。在上面的代码中,我们可以看到,首先require函数抓取名字为jquery.js的文件,然后给一个匿名函数传入$作为参数,当这个动作完成后,你就可以任意使用JQuery的代码了。
现在,你的代码中一般不会包含jquery.js文件的jQuery库,就如大多数的插件和框架,我们通常选择从他们的GitHub或者Google CDN中导入进来,这样我们就需要配置他们的真正路径:
?
1 2 3 4 5 require.config({ paths: { "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" } });这就是说你可以通过Google导入jquery(请注意我在这个例子里面使用的是"jquery"名称,你可以使用任何你喜欢的名称)
定义模块
使用AMD模式,意味着我们的代码可以结构化成为模块;这些模块实现应用中的某些功能。你可以在一个模块中只放两行代码或者100行代码,这完全决定于你想通过模块实现什么功能。
定义模块,我们可以这样写:
?
1 2 3 4 5 define(function () { function add (x,y) { return x + y; } });新闻热点
疑难解答