放慢，靈感才會進來: 20141219 初探Require.js

在昨天嘗試把threex.romemodel放入WG-Map，fail，經多方嘗試後記錄在coding記錄 12/8，線再來學習如何使用Require.js。

學習資源：
過去曾經在20141021 今日學習、20141022 今日學習對Require.js有淺淺的認識，以下是過去記錄的文章

Require.js官方載點

Download RequireJS

Require.js教學

Require.js的安裝

r.js + Require.js

bower

學習開始：

對於Require.js，過去曾讀過合併與模組化javascript- RequireJS- 紅色死神這篇，對於Require.js的用法僅有初步了解，於是我們現在重讀初探 RequireJS - 網站製作學習誌，重讀這篇開頭時才知道，原來

CommonJS提出 AMD 這個 API 規範，用以讓我們的 JavaScript 程式可以模組化，並同時解決 js 檔案載入時的阻塞問題。

一解我過去20141022的疑惑，Require.js就是實作 AMD 規範的 JavaScript Library，AMD，全名 Asynchronous module definition（異步模塊定義）。為了要實作初探 RequireJS的內容，開始準備安裝Require.js，看到新的syntax，bower，讓我想起過去曾在mike-map看過bower_component，也找了一些資料備份在上面。

Require.js的安裝，決定參考RequireJS異步模塊加載| 粉絲日誌，用npm install requirejs將Require.js安裝於D:\work\JavaScript\node_modules\requirejs，現在我們可以開始~~實作初探 RequireJS的內容了~~。

稍微評估後改用RequireJS異步模塊加載| 粉絲日誌來練習實作，首先先實作3. RequireJS基本使用這節，實作路徑D:\work\JavaScript\RequireJsPractice。閱讀RequireJS異步模塊加載提醒了我，傳統html的加載，必須由上而下在script tag的src attritube來加載，又慢又費時，透過require.js 的require function，我們可以較優雅的方式來加載。

RequireJS可以幫我們做，js依賴管理。我們可以再也不用在HTML中，以很土的加載順序的方式管理JS文件了。這種優雅的注入可以幫我很好的管理全局變量。

Require.js提供的require function其syntanx如下：require(dependencies, callback)。dependencies: 是我們要載入的js，使用相對路徑。callback: 是封裝有程序邏輯。參考初探 RequireJS的內容發現，RequireJS 怎麼知道要載入哪些檔案呢？注意 script 標籤上的 data-main 屬性，它指向了我們所要加載的js file。

想到一個可能性，是否可以透過<body><script data-main='寫好的threejs logic'></script></body>呢? ~~後來發現不太行，先不論建一個model，光是調用打光function就需要script tag用src attritube來引入three.js~~。實作後這概念是可行的，在我們實作的RequireJsPractice資料夾底下，我新創一個use threejs.js檔，先在裡面寫個function three(){...}，然後把threejs的邏輯lighting、camera、import都寫在three()的body裡面

接著我再去main.js讓我們的require function的dependancy加入use threejs，接著我們就能在callback調用我們寫在use threejs.js裡的three()。

回到index.html別忘了把three.js import進來

成功能run了。

經測試把要加載的script放在body tag內行得通

現在要來研究先前卡很久的define用法，先讀初探 RequireJS 這篇的模組化這節，知道define用法與syntax，接著參考Require.js – 陈三時發現，require.js 建議我們不要設置模塊名稱，因為設置了'libs/hi' 的模塊名稱後，模塊就必須放在js/libs 目錄下的hi.js 文件中，要移動位置的話，模塊名稱要跟著改變，所以才會看到多數的範例code不使用define的第一個parameter

接著我們要來實作這篇文章的5. RequireJS模塊化這節，稍微研究後這節可以跳過，直接實作
6. 多路徑配置: baseUrl,paths這節 (尚未開始)

一直在思考，為什麼mike-map裡頭package.require.js，裡面用define()總是會看到module.uri，瀏覽到這兩篇，不知是不是解

最近一直卡在路徑的用法，讀了路徑表示法才知道，"\"的寫法是絕對路徑，''/"的寫法是相對路徑，看了這篇才知道，原來還有虛擬路徑的寫法，以下是摘錄

絕對路徑的表示方式：從根目錄起，表示所有資料夾，以倒斜杠「\」作分隔
相對路徑表示方式：只記錄該檔對另一檔的當前位置。上一層目錄則使用「../」
虛擬路徑表示方式：由根目錄起向上層數，以「/」起首代表根目錄，再一層一層地數，跟絕對路徑類似，但不同之處是根目錄不限定是C:\，可以是D:\、E:\，甚至連線磁碟機也可以。

鳥哥的 Linux 私房菜 -- 檔案與目錄管理

雖然無法理解為什麼Jerome Etienne在用package.require.js時要把url使用module.uri+'/../'，在gitHub上觀看threex/threex.romemodels.js at master · jeromeetienne/threex · GitHub與threex/threex.minecraft.js at master · jeromeetienne/threex · GitHub分別都是使用THREEx.RomeModels.baseUrl = '../'與THREEx.MinecraftChar.baseUrl = '../'。後來參考THREEx官網的
threex.md2character，在threex.md2character/threex.md2characterratmahatta.js at master · jeromeetienne/threex.md2character · GitHub也是使用THREEx.MD2CharacterRatmahatta.baseUrl = '../'。

threex.md2character/package.require.js、threex.minecraft/package.require.js

都是採用module.uri+'/../'，明天直接拿threex.md2character來測試放在WG-Map上面。

放慢，靈感才會進來

2014年12月19日星期五

20141219 初探Require.js

沒有留言:

張貼留言

2014年12月19日 星期五

20141219 初探Require.js

沒有留言:

張貼留言

2014年12月19日星期五