掷鸡蛋者
发表于: 2012/11/16 8:15 引用 回复 只看该作者 1# TOP
管理员
性别: 男
积分:52169
阅读权限:43381
帖子: 8316
加入时间: 2010/4/29
最后登录: 2019/3/3

如果你是 RequireJS 达人,或者已经看过我昨天写的 RequireJS 入门教程http://www.wojilu.com/Forum1/Topic/4205,那么,可以进一步了解在 wojilu 项目中的其他相关问题。

1、为什么使用 RequireJS?
RequireJS 给 javascript 语言提供了命名空间(模块)的规范使用方式,并提高了js的加载性能。用法超级简单。一旦使用,基本上回不去了,再也不愿回到传统的没有命名空间的老路上去。

2、为什么使用 RequireJS 而不是其他模块加载器?
RequireJS 是目前最流行的,用法也挺简单。请参看这篇帖子:http://www.wojilu.com/Forum1/Post/19004 

3、在 wojilu 项目,RequireJS 放在哪个目录?
在 wojilu 的源码中,已经将 RequireJS 打包进去了。所有 js 的列表如下图:


如果你只是使用 wojilu 框架,那么这些文件是必须的:
main.js ——这是所有js的入口文件;
wojlu._xxx.js ——这是框架必须用到的文件;
lib——RequireJS、jquery等第三方类库都在这个文件夹下,必须包含;
editor——我记录的富文本编辑器;

其他js文件是“我记录综合系统”所使用(如果只是用框架开发,不必包含):
wojilu.core.xxx——综合系统的核心js;
wojilu.app.xxx——综合系统个app需要用到的js。

4、如何在 wojilu 中使用 RequireJS?

(1) 整个页面,应该只有一个 <script src="" > 标签,并且放在页面底部,用来引入 RequireJS 和 main.js 文件

<script data-main="~js/main" src="~js/lib/require-jquery-wojilu.js?v=#{jsVersion}"></script>

(2)在页面头部的 <head> 部分,增加一行内联js代码:

<script>var __funcList = []; var _run = function (aFunc) { __funcList.push(aFunc); }; var require = { urlArgs: 'v=#{jsVersion}' };</script>
主要作用两个,就是 a)提供js版本号,b)以及给其他内联代码提供“延迟加载”功能,相当于jquery的$(document).ready()。

(3) 然后你就可以在 (1)和(2) 之间的任何部分写自己的 js 代码了。所有代码请用 _run( function() {} ); 包装:

_run( function() {

    // 你的代码写在这里

    // 也可以引入其他 js 文件,比如
    require(['some-js-filename'], function(xx) {
    });
});

注意:require 的时候,js 文件不能有后缀名。其次,都要放在 js 目录下,目前的目录路径是最规范的方式,不要纠结,不建议改成其他做法。

5、我是旧的 woijilu 项目,需要升级改造,怎么做?
(1) 添加上面步骤的 (1) 和 (2);
(2) 将所有的 $(document).ready 替换成 _run;
(3) 所有通过 <script src="xxx.js" > 引用的地方,都放到 _run 里面的 require 方法中;
(4) 如果有时间,最好将你的 js 重新按照 RequireJS 的规范方式 define() 封装一下。但如果不封装,也不要紧。

本帖于 2013/4/6 8:08:46 被 掷鸡蛋者 最后编辑
关键词 RequireJS 修改tag
相关文章
而死,不默而生
freebird
发表于: 2012/11/16 9:06 引用 回复 只看该作者 2# TOP
江湖新秀
性别: 男
积分:239
阅读权限:194
帖子: 32
加入时间: 2012/4/13
最后登录: 2018/5/4

因为wojilu 中使用 RequireJS的原因,我看了下RequireJS,最后发现我喜欢上了另外一款国产的JS框架SeaJS,从使用上来说和RequireJS很相似,只是标准有所不同,谈谈我最近的试用感受吧。

这个2个框架除了提高类库直接关联性外,还增加了加载性能,主要的想法是按需加载。

最重要的是让以后的开发者养成一种习惯,让每一个JS文件能够独立,并且能够很好的被重复引用。

个人觉得用了这个框架,页面可以很整洁,除了一行加载外,让页面HTML看不到任何JS的痕迹。

可以讲JS进行分层,每个页面相关业务的Service层,以及公用性较强的类库层。

页面直接在data-main引用每个页面的Service层相关的JS文件即可。

非常喜欢在这里能够经常接触到很多新鲜的元素让我去成长

掷鸡蛋者
发表于: 2012/11/16 9:47 引用 回复 只看该作者 3# TOP
管理员
性别: 男
积分:52169
阅读权限:43381
帖子: 8316
加入时间: 2010/4/29
最后登录: 2019/3/3

这个分享不错,欢迎常来交流开发经验

而死,不默而生
rubywu
发表于: 2012/11/16 9:55 引用 回复 只看该作者 4# TOP
版主
性别: 男
积分:2787
阅读权限:2105
帖子: 428
加入时间: 2010/5/19
最后登录: 2019/1/22

这个分享不错,欢迎常来交流开发经验

掷鸡蛋者 at 2012-11-16 9:47

 国产的 SeaJS不错,http://seajs.org/docs/兼容所有主流浏览器。支付宝的人做的。

目前 SeaJS 的使用者非常多,包括阿里、腾讯、网易等公司。 
考虑过用这个吗?
掷鸡蛋者
发表于: 2012/11/16 10:39 引用 回复 只看该作者 5# TOP
管理员
性别: 男
积分:52169
阅读权限:43381
帖子: 8316
加入时间: 2010/4/29
最后登录: 2019/3/3

先用 RequireJS 吧,1楼的第二条解释原因。

补充一个我对 RequireJS 的看法:其实不管 RequireJS,还是 SeaJS,都不应该神化,只不过给 javascript 提供了这个语言本该具有的特性,谁叫 javascript 设计陈旧、老而不死呢?它们实现的功能,在c#、java等语言中,基本上就是内置的两行代码而已。

最近写帖子介绍 RequireJS ,不是多么推崇它、或者神化它,是想消解这一类 js 类库的神秘感,给 wojilu 的使用者清除障碍,迅速上手。

其实我自己有点烦 javascript 这门语言,为了命名空间和加载方便,不得不搞这一堆东西出来,当然,RequireJS 等类库的作用还得感谢。

而死,不默而生
tc11o8
发表于: 2013/4/6 0:53 引用 回复 只看该作者 6# TOP
江湖少侠
性别: 男
积分:321
阅读权限:266
帖子: 56
加入时间: 2011/7/10
最后登录: 2013/10/9

 蛋哥,我加了<script data-main="js/main" src="js/lib/require-jquery-wojilu.js?v=#{jsVersion}"></script> 这句话,发现main.js文件根本没有被执行啊,你是通过data-main="js/main"这句话来加载main.js文件的吗

掷鸡蛋者
发表于: 2013/4/6 8:06 引用 回复 只看该作者 7# TOP
管理员
性别: 男
积分:52169
阅读权限:43381
帖子: 8316
加入时间: 2010/4/29
最后登录: 2019/3/3

不好意思,写错了,这就更正

<script data-main="js/main" src="js/lib/require-jquery-wojilu.js?v=#{jsVersion}"></script> 

应该改成

<script data-main="~js/main" src="~js/lib/require-jquery-wojilu.js?v=#{jsVersion}"></script>

而死,不默而生
tc11o8
发表于: 2013/4/6 10:55 引用 回复 只看该作者 8# TOP
江湖少侠
性别: 男
积分:321
阅读权限:266
帖子: 56
加入时间: 2011/7/10
最后登录: 2013/10/9

恩,就是这个问题,搞定! 蛋哥,还有一个问题,你用了requirejs,那页面的其他js文件版本号是怎么控制的。

掷鸡蛋者
发表于: 2013/4/6 12:33 引用 回复 只看该作者 9# TOP
管理员
性别: 男
积分:52169
阅读权限:43381
帖子: 8316
加入时间: 2010/4/29
最后登录: 2019/3/3

除了这第一个 js/lib/require-jquery-wojilu.js,因为是通过<script>直接加载,需要用上版本号;其他js文件,凡是通过 require 加载的,默认内部已经添加了版本号,无需再添加版本号

这个默认的版本号是在 <head> 中设置的

<script>var __funcList = []; var _run = function (aFunc) { __funcList.push(aFunc); }; var require = { urlArgs: 'v=#{jsVersion}' };</script>

在浏览器中按f12,打开network查看,可以看到所有被require的js,都已经带上了这个版本号。

而死,不默而生
小白虎
发表于: 2013/6/26 13:44 引用 回复 只看该作者 10# TOP
江湖新秀
性别: 保密
积分:52
阅读权限:12
帖子: 1
加入时间: 2013/6/26
最后登录: 2013/6/26

我想知道wojilu.core.sitetop.js中的东西是怎么 追加到页面上的 没有任何注释  恕我新手愚钝 我效仿着 没做出来

快速回复主题