js模块加载问题（requireJs）
0
悬赏园豆：100
[待解决问题]
后端用的.net 有一个核心的common的js文件 目标是去掉这个大的合成的js文件 改为N个根据功能分为小JS文件 采用模块加载的方法 分小模块已经完成 接下来 main.js里面应该怎么去写 怎么引用jqery 及先后顺序 等（已经看过网上所有的技术博客 requirejs官网）
所有回答(4)
0
按编程执行的顺序排列，也就是你的程序需要先执行什么就排列在前面，最后执行什么就排列在最后。
怎么一个代码都没呢 很急 看理论看不懂 所有的博文和官网都看过了 就是要具体应用在项目里 就变得毫无头绪 那个main文件里到底要怎么样去写 才能实现它的模块加载功能 这个是重点 谢谢 麻烦你了 再给讲解一下 实战性的那种 再次谢过！
0
main.js里 寫一系列 if語句，不同的語句，調用不同的js文件。
不能具体的写一个例子吗？
@雨随云落: 你可以根據 當前 網頁的文件名，進行判斷哦。
0
1 (function(w, S) { 2 var m = document, 3 g = !0, 4 h = null, 5 j = !1, 6 x = "length", 7 s = 'split', 8 r = 'charAt', 9 B = 'substring', 10 y = "prototype", 11 w = w[S] = w[S] || {}, 12 l = {}; 13 w.ApisBase = '/js';w.js_ext='.js'; 14 function R(a, b) { 15 for (var c = a[s](/\./), e = w, f = 0; f < c[x] - 1; f++) e[c[f]] || (e[c[f]] = {}), 16 e = e[c[f]]; 17 e[c[c[x] - 1]] = b 18 } 19 function I(a) { 20 a = Error(a); 21 a.toString = function() { 22 return this.message 23 }; 24 return a 25 } 26 function U(a) { 27 this.a = a; 28 this.h = j 29 } 30 w.d = function(a, b, c) { 31 if (c) { 32 var e; 33 "script" == a ? (e = m.createElement("script"), e.type = "text/javascript", e.src = b) : "css" == a && (e = m.createElement("link"), e.type = "text/css", e.href = b, e.rel = "stylesheet"); (a = m.getElementsByTagName("head")[0]) || (a = m.body.parentNode.appendChild(m.createElement("head"))); 34 a.appendChild(e) 35 } else "script" == a ? m.write('<script src="' + b + '" type="text/javascript"><\/script>') : "css" == a && m.write('<link href="' + b + '" type="text/css" rel="stylesheet"></link>') 36 }; 37 n(U[y], 38 function(a) { 39 this.h = g; 40 w.d("script", this.g(a), j) 41 }); 42 U[y].m = function() { 43 return this.h 44 }; 45 U[y].g = function(a) { 46 return w.ApisBase + "/libs/" + a+w.js_ext; 47 } 48 function n(a, b) { 49 a.load = b 50 } 51 R('loader.as', 52 function(b) { 53 for (var i = 0; i < b[x]; i++)(b[i] && ":" == b[i][r](0) && !l[b[i]]) && (l[b[i]] = new U(b[i][B](1))) 54 }) R('N', l) n(w, 55 function(a) { 56 var f = a; 57 if (a = l[":" + f]) a.h || a.load(a.a); 58 else throw I("Module: '" + f + "' not found!") 59 }) 60 })(window, 'S'); 61 S.loader.as([':jquery', ':a', ':b']); 62 S.load('b'); 63 S.load('b');
具体方法改进参考google的apijs,只完成了模块安全性验证和模块载时重复性验证，模块加载后的回调你自己实现。匿名函数的第二个参数“S"是命名空间，你可以根据自己的命名空间修改。通过S.loader.as方法规范可以加载的模块（通过这个函数把你已经完成的模块的模块名包含进来），然后通过s.load加载你的模块，通过修改s.ApisBasep完成加载路径的修改,s.js_ext是js的后缀。
我对google apijs的源码分析可以查看http://blog.nomarker.com/?p=58
太复杂了 根本看不懂 换成几个简单的函数可以吗？ 这是main.js的 html页面里只写<script data-main="scripts/main" src="main.js"></script>就可以了吗？？ 一定要有注释的 “模块加载后的回调”也不知道是什么意思？？？
@雨随云落: 分块加载在浏览器端一定是异步加载，既然是异步加载，那么自然你的函数是要在加载完成后通过回调完成。
分两种情况：
1.相互依赖：文件b的代码需要文件a加载后回调执行，文件c的代码在文件b加载后回调执行。那么就需要实现在执行c文件的代码前检查b,b检查a，不存在就加载，加载完成后再执行。
2.没有依赖：整体加载完成后回调。google的jsapi是这个方案:
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.3.2"); //加载jQuery 1.3.2 google.setOnLoadCallback(function() {//加载完成后执行代码 $("body").html("Hello World!"); }); </script>
通过google.setOnLoadCallback来设置回调。
0
楼上所有回答都是牛头不对马嘴。
你想要模块化加载JS文件，且你已经选requireJs作为加载框架。
一、在你的WEB页面添加<script data-main="scripts/main" src="scripts/require-jquery.js"></script>。
二、在main.js里面依次写上你的js模块文件名如下：
require(["jquery", "jquery.lazyload", "bar.debug"], function($) {
$(function() {
//图片延迟执行模块
$("img").lazyload({
placeholder : "../img/grey.gif",
effect : "fadeIn"
});
//
});
});
注意顺序，我这直接用的是require-jquery.js，集成了jquery，我第二个加载的是jquery的 一个插件，然后在下面的回调函数中就可以使用了。我也是昨在学会的，我是看的官网的例子，这个学不精通，便原理相当简单，看以上面的回答太让人郁闷。所以我献丑了。
答少了，在官网的例子中，scripts目录中还有一个app.build.js文件，是一个配制文件，配制了模块别名，路径，因为require-jquery.js集成了jquery,所以在配制文件中 paths: { "jquery": "empty:" },jquery直接给的一个空路径。
