Re: [問題] RequireJS 目錄如何配置?

看板Ajax作者 (Sirius)時間11年前 (2013/05/21 09:15), 編輯推噓3(302)
留言5則, 1人參與, 最新討論串2/2 (看更多)
※ 引述《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

05/21 12:25, , 1F
感謝大大,努力看懂中 不過是否scripts/editor/main.js
05/21 12:25, 1F

05/21 12:26, , 2F
要改成scripts/app/editor/main.js?
05/21 12:26, 2F

05/21 12:32, , 3F
還有請問一下 這是讓html裡的data-main可以縮短嗎?
05/21 12:32, 3F

05/21 12:33, , 4F
這樣一來在editor中的data-main要寫成哪個路徑呀?
05/21 12:33, 4F
修正一些錯誤 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)

05/21 18:31, , 5F
大致上了解 馬上試著做一下 感謝大大
05/21 18:31, 5F
文章代碼(AID): #1HcigyI6 (Ajax)
文章代碼(AID): #1HcigyI6 (Ajax)