作者musie (Sirius)
看板Ajax
标题Re: [问题] RequireJS 目录如何配置?
时间Tue May 21 09:15:37 2013
※ 引述《FreedomMax (FreedomKnight)》之铭言：
: 小弟目前打算使用 RequireJS 来做配置模组
: 但是有点搞不太懂
: 如果只是一个页面的js的话似乎只要
: 一个 script 资料夹
: 里面放个 main.js 去找 lib
: app.js 是让 main.js 呼叫的 callback
: 但我现在有一点疑问
: 假设我有两个js是为了两个不同的js而生，也用到不同的js lib
: 假设一个叫做 editor.js 另一个叫 login.js
: editor假设是负责做个网页编辑器用到了lib/jquery.js
: 而 login.js 用到了lib/md5.js
: 那这样我的script资料夹下要怎麽分配这些档案？
: 我一开始的想法是
: scripts/
: |--lib/
: |--jquery.js
: |--md5.js
: |--app/
: |--editor/
: |--main.js
: |--app.js
: |--login/
: |--main.js
: |--app.js
: editor.html
: login.html
: 然後在 editor.html 里面 data-main="scripts/app/editor/main"
: login 则是 data-main="scripts/app/login/main"
: 但我觉的我的想法可能不是 requireJS 的精神
: 是否能够有大大们可以告诉小弟一些 RequireJS 的作法
我的话会在外面再包一层main.js data-main="scripts/app/main"
require(['editor/main' , 'login/main'] , function(editMain , loginMain){
});
当然更好就在这个main.js里面写config，
requirejs.config({
baseUrl: "scripts",
paths: {
'jquery' : 'lib/jquery',
'md5' : 'lib/md5',
'editor' : 'app/editor/main',
'login' : 'app/login/main',
}
});
就可以省略一些路径....
scripts/main.js就变成
require(['editor' , 'login'] , function(editMain , loginMain){
....
});
scripts/app/editor/main.js 里就写
define(['jquery' , './app'] , function($ , app){
...
})
scripts/app/login/main.js 就就写
define(['md5' , './app'] , function(md5 , app){
})
不过最後建议一下，你的架构假如不是很大的话，
像这种不到10个module，不建议用require.js。
--
require.js不麻烦，麻烦的是後面处理r.js的优化处理。
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 61.31.193.1
1F：推 FreedomMax:感谢大大，努力看懂中 不过是否scripts/editor/main.js 05/21 12:25
2F：→ FreedomMax:要改成scripts/app/editor/main.js? 05/21 12:26
3F：推 FreedomMax:还有请问一下 这是让html里的data-main可以缩短吗？ 05/21 12:32
4F：→ FreedomMax:这样一来在editor中的data-main要写成哪个路径呀? 05/21 12:33
修正一些错误
html里面的data-main没办法缩短路径，他是取相对於目前html所在位置的档案
例如
<script data-main="js/page1/app/app" src="js/lib/require.js">
载完require.js之後 就会去抓js/page1/app/app.js的档案..
你可以在js/page1/app/app.js里面设定config让接下来的require比较简洁
例如
requirejs.config({
baseUrl: "js",
paths: {
'jquery' : [
'
https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
'lib/jquery-1.9.1.min'
],
'underscore' : 'lib/underscore-min',
'masonry' : 'lib/jquery.masonry.min',
'slimScroll' : 'lib/slimScroll.drag.min',
}
});
後来的档案有用到jquery ， underscore 就可以直接打
require(['jquery' , 'underscore']); 而不用打
require(['js/lib/jquery-1.9.1.min' , 'js/lib/underscore-min'] )....
※ 编辑: musie 来自: 61.31.193.1 (05/21 14:20)
5F：推 FreedomMax:大致上了解 马上试着做一下 感谢大大 05/21 18:31