首页新闻找找看学习计划

js模块加载问题(requireJs)

0
悬赏园豆:100 [待解决问题]

后端用的.net 有一个核心的common的js文件 目标是去掉这个大的合成的js文件 改为N个根据功能分为小JS文件 采用模块加载的方法 分小模块已经完成 接下来 main.js里面应该怎么去写 怎么引用jqery 及先后顺序 等(已经看过网上所有的技术博客 requirejs官网)

雨随云落的主页 雨随云落 | 初学一级 | 园豆:102
提问于:2012-06-30 19:25
< >
分享
所有回答(4)
0

按编程执行的顺序排列,也就是你的程序需要先执行什么就排列在前面,最后执行什么就排列在最后。

梦里寻人 | 园豆:11377 (专家六级) | 2012-06-30 23:42

怎么一个代码都没呢 很急 看理论看不懂 所有的博文和官网都看过了 就是要具体应用在项目里 就变得毫无头绪 那个main文件里到底要怎么样去写 才能实现它的模块加载功能 这个是重点 谢谢 麻烦你了 再给讲解一下 实战性的那种 再次谢过!

支持(0) 反对(0) 雨随云落 | 园豆:102 (初学一级) | 2012-07-01 01:56
0

main.js里 寫一系列 if語句,不同的語句,調用不同的js文件。

無限遐想 | 园豆:3740 (老鸟四级) | 2012-07-01 09:25

不能具体的写一个例子吗?

支持(0) 反对(0) 雨随云落 | 园豆:102 (初学一级) | 2012-07-01 10:16

@雨随云落: 你可以根據 當前 網頁的文件名,進行判斷哦。

支持(0) 反对(0) 無限遐想 | 园豆:3740 (老鸟四级) | 2012-07-01 12:18
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

stone62202119 | 园豆:204 (菜鸟二级) | 2012-07-01 14:21

太复杂了 根本看不懂 换成几个简单的函数可以吗? 这是main.js的 html页面里只写<script data-main="scripts/main" src="main.js"></script>就可以了吗?? 一定要有注释的 “模块加载后的回调”也不知道是什么意思???

支持(0) 反对(0) 雨随云落 | 园豆:102 (初学一级) | 2012-07-02 15:20

@雨随云落: 分块加载在浏览器端一定是异步加载,既然是异步加载,那么自然你的函数是要在加载完成后通过回调完成。

分两种情况:

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) 反对(1) stone62202119 | 园豆:204 (菜鸟二级) | 2012-07-02 19:01
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的 一个插件,然后在下面的回调函数中就可以使用了。我也是昨在学会的,我是看的官网的例子,这个学不精通,便原理相当简单,看以上面的回答太让人郁闷。所以我献丑了。

ChixTech | 园豆:171 (初学一级) | 2012-07-15 15:12

答少了,在官网的例子中,scripts目录中还有一个app.build.js文件,是一个配制文件,配制了模块别名,路径,因为require-jquery.js集成了jquery,所以在配制文件中 paths: { "jquery": "empty:"  },jquery直接给的一个空路径。

支持(0) 反对(0) ChixTech | 园豆:171 (初学一级) | 2012-07-15 15:23
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册