作者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