《碼農（第12期）》的筆記

碼農（第12期）

圖靈社區

前端開發技術的發展

2015-07-14

其實是一系列已有技術的組合，早在這個名詞出現之前，這些技術的使用就已經比較廣泛了，GMail因爲恰當地應用了這些技術，獲得了很好的用戶體驗。

2015-07-14

DOM的選擇
jQuery提供了一系列選擇器用於選取界面元素，在其他一些框架中也有類似功能，但是一般沒有它的簡潔、強大。$("*") // 選取所有元素
$("#lastname") // 選取id爲lastname 的元素 $(".intro") // 選取所有class="intro"的元素
$("p") // 選取所有<p> 元素 $(".intro.demo") // 選取所有class="intro" 且class="demo"的元素
鏈式表達式：在jQuery中，可以使用鏈式表達式來連續操作dom，比如下面這個例子：
如果不使用鏈式表達式，可能我們需要這麼寫：var neat = $("p.neat");
neat.addClass("ohmy"); neat.show("slow");
但是有了鏈式表達式，我們只需要這麼一行代碼就可以完成這些：$("p.neat").addClass("ohmy").show("slow");
除此之外，jQuery還提供了一些動畫方面的特效代碼，也有大量的外圍庫，比如jQuery UI這樣的控件庫，jQuery mobile這樣的移動開發庫等等。

2015-07-14

單個的界面想要做很多功能，需要寫的代碼是會比較多的，但是，並非所有的功能都需要在界面加載的時候就全部引入，如果能夠在需要的時候才加載那些代碼，就把加載的壓力分擔了，在這個背景下，出現了一些用於動態加載JavaScript的框架，也出現了一些定義這類可被動態加載代碼的規範。
在這些框架裏，知名度比較高的是RequireJS，它遵循一種稱爲AMD（Asynchronous Module Definition）的規範。

2015-07-14

RequireJS除了提供異步加載方式，也可以使用同步方式加載模塊代碼。AMD規範除了使用在前端瀏覽器環境中，也可以運行於nodejs等服務端環境，nodejs的模塊就是基於這套規範定義的。

2015-07-14

這個時期，隨着Web端功能的日益複雜，人們開始考慮這樣一些問題：
如何更好地模塊化開發業務數據如何組織
界面和業務數據之間通過何種方式進行交互在這種背景下，出現了一些前端MVC、MVP、MVVM框架，我們把這些框架統稱爲MV*框架。這些框架的出現，都是爲了解決上面這些問題

給JavaScript初學者的24 條最佳實踐

2015-07-14

1. 使用===代替==
JavaScript使用2種不同的等值運算符：===|!==和==|!=，在比較操作中使用前者是最佳實踐。“如果兩邊的操作數具有相同的類型和值，===返回true，!==返回false。”
——JavaScript：語言精粹然而，當使用==和！=時，你可能會遇到類型不同的情況，這種情況下，操作數的類型會被強制轉換成一樣的再做比較，這可能不是你想要的結果。

2015-07-14

JSLint是由大名鼎鼎的道格拉斯（Douglas Crockford）編寫的調試器。簡單的將你的代碼粘貼進JSLint中，它會迅速找出代碼中明顯的問題和錯誤。
“JSLint掃面輸入的源代碼。如果發現一個問題，它返回一條描述問題和一個代碼中的所在位置的消息。問題並不一定是語法錯誤，儘管通常是這樣。JSLint還會查看一些編碼風格和程序結構問題。這並不能保證你的程序是正確的。它只是提供了另一雙幫助發現問題的眼睛。”——JSLing文檔
部署腳本之前，運行JSLint，只是爲了確保你沒有做出任何愚蠢的錯誤。

2015-07-14

將腳本放在頁面的底部
在本系列前面的文章裏已經提到過這個技巧，我粘貼信息在這裏。記住——首要目標是讓頁面儘可能快的呈獻給用戶，腳本的夾在是阻塞的，腳本加載並執行完之前，瀏覽器不能繼續渲染下面的內容。因此，用戶將被迫等待更長時間。
如果你的js只是用來增強效果——例如，按鈕的單擊事件——馬上將腳本放在body結束之前。這絕對是最佳實踐。

2015-07-14

構建字符串的最優方法
當你需要遍歷數組或對象的時候，不要總想着“for”語句，要有創造性，總能找到更好的辦法，例如，像下面這樣。var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';我不是你心中神，但請你相信我（不信你自己測試）——這是迄今爲止最快的方法！使用原生代碼（如 join()），不管系統內部做了什麼，通常比非原生快很多。
——James Padolsey, james.padolsey.com

2015-07-14

減少全局變量
只要把多個全局變量都整理在一個名稱空間下，擬將顯著降低與其他應用程序、組件或類庫之間產生糟糕的相互影響的可能性。——Douglas Crockford
var name = 'Jeffrey'; var lastName = 'Way';
function doSomething() {...}
console.log(name); // Jeffrey -- 或 window.name更好的做法
var DudeNameSpace = { name : 'Jeffrey',
lastName : 'Way', doSomething : function() {...}
} console.log(DudeNameSpace.name); // Jeffrey

2015-07-14

使用{}代替 new Ojbect()
在JavaScript中創建對象的方法有多種。可能是傳統的方法是使用"new"加構造函數，像下面這樣：var o = new Object();
o.name = 'Jeffrey'; o.lastName = 'Way';
o.someFunction = function() { console.log(this.name);
}然而，這種方法的受到的詬病不及實際上多。作爲代替，我建議你使用更健壯的對象字面量方法。
更好的做法var o = {
name: 'Jeffrey', lastName = 'Way',
someFunction : function() { console.log(this.name);
} };
注意，如果你只是想創建一個空對象，{}更好。var o = {};
“對象字面量使我們能夠編寫更具特色的代碼，而且相對簡單的多。不需要直接調用構造函數或維持傳遞給函數的參數的正確順序，等

2015-07-14

使用[]代替 new Array()
這同樣適用於創建一個新的數組。例如：
var a = new Array(); a[0] = "Joe";
a[1] = 'Plumber';更好的做法：
var a = ['Joe','Plumber'];“javascript程序中常見的錯誤是在需要對象的時候使用數組，而需要數組的時候卻使用對象。規則很簡單：當屬性名是連續的整數時，你應該使用數組。否則，請使用對象”
——Douglas Crockford

2015-07-14

定義多個變量時，省略var關鍵字，用逗號代替
var someItem = 'some string'; var anotherItem = 'another string';
var oneMoreItem = 'one more string';更好的做法
var someItem = 'some string', anotherItem = 'another string',
oneMoreItem = 'one more string';…應而不言自明。我懷疑這裏真的有所提速，但它能是你的代碼更清晰。

2015-07-14

"For in"語句
當遍歷對象的屬性時，你可能會發現還會檢索方法函數。爲了解決這個問題，總在你的代碼裏包裹在一個if語句來過濾信息。for(key in object) {
if(object.hasOwnProperty(key) { ...then do something...
} }
參考JavaScript：語言精粹，道格拉斯（Douglas Crockford）。

2015-07-14

使用Firebug的"timer"功能優化你的代碼
在尋找一個快速、簡單的方法來確定操作需要多長時間嗎？使用Firebug的“timer”功能來記錄結果。function TimeTracker(){
console.time("MyTimer"); for(x=5000; x > 0; x--){}
console.timeEnd("MyTimer");

2015-07-14

自執行函數
和調用一個函數類似，它很簡單的使一個函數在頁面加載或父函數被調用時自動運行。簡單的將你的函數用圓括號包裹起來，然後添加一個額外的設置，這本質上就是調用函數。(function doSomething() {
return { name: 'jeff',
lastName: 'way' };
})()

Angular、Backbone、CanJS與Ember : JavaScript MVC框架PK

2015-07-14

我用過其中4個框架：Angular、Backbone、CanJS和Ember

2015-07-14

視圖綁定、雙向綁定、篩選、可計算屬性（computed property）、髒屬性（dirty attribute）、表單驗證，等等。還能羅列出一大堆來。下面比較了一些我認爲MVC框架中比較重要的功能：

2015-07-14

可觀察對象：可以被監聽是否發生變化的對象。
路由：把變化通過瀏覽器URL的參數反映出來，並監聽這些變化以便執行相應的操作。視圖綁定：在視圖中使用可觀察對象，讓視圖隨着可觀察對象的變化而自動刷新。
雙向綁定：讓視圖也能把變化（如表單輸入）自動推送到可觀察對象。部分視圖：包含其他視圖的視圖。
篩選列表視圖：用於顯示根據某些條件篩選出來的對象的視圖。

---

多看筆記 來自多看閱讀 for Android

duokanbookid:498de9c698f2443fb76a4e41b992abab