20141017 今日學習

現在大量閱讀英文網站，看到一個不錯的google extension，可以在瀏覽器上即時翻譯

• ParrotTalks抄筆記
• 快捷鍵：在網頁裡直接按下e，就可自動開啟，按下esc就可以跳出
• 不過在辜狗的blogger裡無法使用上述方式

看到一篇不錯的Sublime Text教學文

• Sublime Text 全程指南 - Lucida

超甜蜜的台灣高雄媽媽咪呀求婚影片

開始分析threex-master\src\threex.godrays裡的code

• D:\work\WebGL Learning\threex-master\src\threex.godrays\examples\basic.html

有趣了，這個basic.html檔裡引用了很多以前沒看過的.js檔

• <script src="../../../vendor/three.js/examples/js/postprocessing/EffectComposer.js"></script>
• <script src="../../../vendor/three.js/examples/js/postprocessing/RenderPass.js"></script>
• <script src="../../../vendor/three.js/examples/js/postprocessing/ShaderPass.js"></script>
• <script src="../../../vendor/three.js/examples/js/postprocessing/MaskPass.js"></script>
• <script src="../../../vendor/three.js/examples/js/shaders/CopyShader.js"></script>
• <script src="../../../vendor/three.js/examples/js/shaders/HorizontalBlurShader.js"></script>
• <script src="../../../vendor/three.js/examples/js/shaders/VerticalBlurShader.js"></script>
• <script src="../../../vendor/three.js/examples/js/shaders/BasicShader.js"></script>
• <script src="../threex.radialblurshader.js"></script>
• <script src="../threex.godrays.js"></script>
• <script src='../../../vendor/three.js/examples/js/libs/dat.gui.min.js'></script>
• <script src="../threex.godrays2datgui.js"></script>
• <script src="../../../vendor/three.js/examples/js/shaders/BlendShader.js"></script>

為數不少檔案都從shaders這folder裡出來，點進去瞧，裡面全都是.js檔

• threex-master\vendor\three.js\examples\js\shaders

shader，著色器。所以是為model上色的玩意，改天該好好研究如何操作每一種shader。

不過這有趣了，render渲染器與shader著色器有什麼差別

• What is the difference between "shaded" and "rendered" surfaces?
• What is the difference between shading and rendering? | Yahoo

感覺起來shader是處理一個小物體，render是處理整體。

在讀basic.html時馬上就看到奇怪的寫法

;(function(){  var geometry = new THREE.TorusGeometry(0.5-0.1, 0.1, 32,16)
  var material = new THREE.MeshPhongMaterial()
  material.color.set('red')
  var mesh = new THREE.Mesh( geometry, material)
  mesh.scale.set(1,1,1).multiplyScalar(2)
  mesh.position.x = 1;
  mesh.rotation.y = Math.PI/2
  scene.add( mesh )
})()

很好，這是什麼東西???

;(function(){
....
....
})()

印象中以前有看過，所以認真重讀一遍吧

• JavaScript 語言核心（19）名稱空間管理 by caterpillar | CodeData

看來這寫法是處理，函式也想作為其他物件上的特性，這樣寫的目的是因為，在撰寫 JavaScript 時，要儘量避免使用全域變數，JavaScript裡所有東西都是object，function也是一個object，上面這寫法是為了不要污染全域名稱空間。

這篇文章提到一個關鍵字：JavaScript模組化設計 (module pattern)

• 深入了解JavaScript模組化模式 « EasonLin's Blog

在閱讀module pattern時常看到匿名兩字，後來估狗發現有人稱這種寫法為JavaScript的匿名函數

• JavaScript匿名函数_JavaScript编程学院_IT学院   (這篇寫得不錯)
• 匿名函數，可以理解為定了一個函數，但是沒有將它賦值給變量
• 匿名函數沒有函數名，也沒有指向它的變量，不能像具名函數一樣可以在任何地方調用，匿名函數必需在定義後立即執行
• 小括號的作用是將代碼塊作為函數執行，在小括號內一樣可以傳遞參數

辜狗到這篇也不錯，連JavaScript為什麼要用匿名函數的由來(functional language)都寫出來了

• javascript 匿名函數 « FreedomKnight's Blog   (這篇太棒了)
• 用匿名的最大大大優點就是「船過水無痕」。 任何你在裡頭做的事情，所佔的任何空間，到最後會馬上釋放。
• 在小型 js 看不出來，但是再大型一點的程式，大家一股腦的宣告了一堆全域函數跟變數，如果瀏覽器還沒離開這個頁面，這些空間就一直被佔著，無法釋放。

讀完javascript 匿名函數 « FreedomKnight's這篇後再回去讀JavaScript匿名函数_IT學院這篇會更加理解第二篇在說什麼

這篇整理得也不錯

• JavaScript中的匿名函数及函数的闭包 - Rain Man - 博客园
• 閉包closure的含義：閉包說白了就是函數的嵌套，內層的函數可以使用外層函數的所有變量，即使外層函數已經執行完畢

看basic.html時，前面有一大票的外部引用，但是剛好看到一篇文章談如何處理這問題

• 合併與模組化javascript- RequireJS- 紅色死神