码迷,mamicode.com
首页 > Web开发 > 详细

添加RequireJS

时间:2014-07-14 22:51:13      阅读:351      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   使用   

添加RequireJS

假定在你的项目中,将所有JavaScript文件放在“scripts”目录中。例如,如果你的项目中有一个project.html页面,并且还有一些脚本,目录布局如下:

project-directory/

  project.html

  scripts/

    main.js

    helper/

      util.js

添加require.js到scripts目录,目录布局如下:

project-directory/

  project.html

  scripts/

    main.js

    require.js

    helper/

      util.js

 

为了充分利用优化工具,在project.html中建议将所有在HTML中<script>标签内嵌的js脚本移除,只引入require.js如下:

bubuko.com,布布扣
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>My Sample Project</title>
 5         <!-- data-main 属性告诉 require.js,在它加载完毕后,加载script目录下的main.js -->
 6         <script data-main="scripts/main" src="scripts/require.js"></script>
 7     </head>
 8     <body>
 9         <h1>My Sample Project</h1>
10     </body>
11 </html>
View Code

在main.js中,使用require()加载其他你需要的脚本文件,这将确保一个单一的入口,因为data-main的脚本是异步加载。

bubuko.com,布布扣
1 require(["helper/util"], function(util) {
2     //当script/helper/util.js加载完毕后,调用这个函数。
3 });
View Code

这样就会加载helper/util.js脚本。

优化

一旦你完成了开发,要部署你的代码给你的最终用户,可以使用RequireJS的optimizer将JavaScript文件结合并压缩。在上面的例子中,可以将main.js和helper/util.js合并成一个文件,并压缩。

 

添加RequireJS,布布扣,bubuko.com

添加RequireJS

标签:style   blog   http   java   color   使用   

原文地址:http://www.cnblogs.com/Sspeed5cm/p/3842422.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!