您的位置：首页 > 产品设计 > UI/UE

require JS入门 及 打包

2016-03-25 13:43 513 查看

require Js 入门

代码库结构示例：



其中部分文件代码及作用解析如下：

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script data-main="js/main.js" src="js/require.js"></script>
</head>
<body>
<p>hi~</p>
</body>
</html>


js/main.js:

js入口文件，其中设置基本参数，调用函数。

require.config({
baseUrl: 'js',  /*相对于根路径的绝对路径，与main.js本身的位置没有关系*/
paths: {
jquery: 'jquery/jquery-1.11.1',  /*不用加后缀.js*/
aaa: 'jquery/jquery-aaa',
values: 'other_js/values',
tourl: 'other_js/tourl'
}
});

// Start the main logic.
require(['jquery', 'aaa', 'values', 'tourl'], function ($, a, v, t) {
$(document).ready(function () {
t;/*注释后一样执行，因为引用的时候相当于调用了。*/
a.al();/*若想手动调用其中函数，可以设置返回值，然后手动调用*/
});
});


js/other_js/tourl.js:

define(["require"], function(require) {
return alert(require.toUrl("./style.css"));
});


js/jquery/jquery.aaa.js:
define (function () {
return {
al: function() {alert('kk');}
};
});


执行index.html代码后，结果如图：
第一次弹框：



第二次弹框：



require Js 利用r.js打包 （以下经验借鉴自他人博客点击打开原文链接）

首先下载r,js，然后保证需要打包以及涉及到的文件处于同一目录下。

代码库结构示例：



其中部分文件代码如下：

index.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航