Web學習筆記

javascript

js跨平臺，從web到App到後臺均可以勝任，並且從當前市場對js開發的需求來看，刷刷js技能頗有必要。

js無需編譯，解釋運行，弱類型，面向對象，運行在瀏覽器或者nodejs等平臺上。

js基本數據類型、運算符

js中的數據類型有number, string, boolean, object, function, undefined。

delete刪除對象的一個屬性，不能刪除一個函數名。

in判斷屬性是否在某個對象中。

js錯誤處理

編寫js代碼容易出錯的地方我的以爲一個是大小寫，另外一個就是把方法看成屬性或者把屬性看成方法用。並且不一樣瀏覽器對於js代碼的錯誤提示不太同樣，不過隨着html5和ECMAStript5的普遍應用，這種狀況會愈來愈少。

js中throw錯誤能夠是不一樣類型的對象（數值、字符串、對象等），瀏覽器拋出的錯誤是一個對象，可是對象的類型取決於瀏覽器的具體實現。

js屬性

js中的屬性有3個特性：Configurable（可修改或刪除）、Enumerable（可枚舉）和Writable（可寫）。

js函數

js函數中的變量聲明會提早，意思是全部函數中使用的變量已經在函數做用域中，可是給變量賦值以前變量的值是undefined。自調函數比較適合執行執行一次的或初始化的操做。函數也是一種數據類型，因此函數做用域中能夠有私有函數，函數內部能夠重寫本身，能夠在第一次調用後重寫本身，這樣能夠保證某些操做不會重複執行。

var a = function () {
    function someSetup() {
        var setup = "done";
    }

    function actualWork() {
        alert("Worky-worky");
    }

    someSetup();
    return actualWork;
};

a();

私有函數

 瀏覽器探測技術：相同的任務在不一樣瀏覽器中多是不一樣的，因此函數能夠先檢測瀏覽器而後重寫本身。

js中的做用域（scope）能夠理解成詞法做用域（lexical）和執行上下文。詞法做用域包括全局做用域以及函數定義的做用域，決定了代碼中是否能夠訪問變量，會不會出現語法錯誤；執行上下文指運行時內存中的變量存儲，變量名和變量值會以鍵值對的形式存儲其中。程序開始運行以前，解釋器會建立一個全局的執行上下文，以後每個函數的執行會建立一個新的執行上下文。函數建立執行上下文的位置在其被定義的做用域對應的執行上下文中。閉包是指有權訪問另外一個函數做用域中的變量的函數。

js函數中的this是一個特殊參數，在運行時綁定（簡單來講大多數狀況即點號前面的對象），默認的綁定對象是global，call和apply能夠重載默認的綁定。

js面向對象

js中沒有類、繼承等概念，可是能夠利用原型鏈創建對象之間的聯繫來模擬繼承。原型鏈最頂端的對象是object（擁有hasOwnProperty, constructor, toString等方法或屬性）。

js中僞類的實現：

var Car = function (loc) {
    this.loc = loc;
};

Car.prototype.move = function () {
    this.loc++;
};

var amy = new Car(1);
amy.move();

僞類

js中父類和子類的實現：

var Car = function (loc) {
    this.loc = loc;
};

// 自動屬性Car.prototype.constructor會指向Car()
Car.prototype.move = function () {
    this.loc++;
};

var Van = function (loc) {
    Car.call(this, loc);
};

Van.prototype = Object.create(Car.prototype);

// 須要從新指定constructor由於prototype是本身建立
Van.prototype.constructor = Van;

Van.prototype.grab = function () {
};

父類和子類

js模塊化

js的模塊管理器Browserify、webpack、Duo等。瀏覽器中加載不一樣js模塊須要實現模塊的異步加載避免使網頁失去響應，另外須要根據模塊的依賴關係按順序加載。js中實現模塊化的規範有AMD、CommonJS以及CMD等。服務器端Node.js遵循CommonJS，瀏覽器端須要異步加載因此遵循AMD或者CMD。

js宿主內置對象

BOM：瀏覽器對象模型，目前瞭解的幾個window、document、navigator（能夠獲取瀏覽器和系統信息，名稱是歷史遺留）、screen、location等。

HTMLInputElement：輸入元素對應的DOM對象。

window.localStorage：存儲在其中的數據瀏覽器被關閉以後也不會被清除，這與window.sessionStorage是不一樣的。

AJAX

ajax是一種不須要從新加載頁面與後臺服務器交換數據的技術。

js庫

• jQuery

js工具

自動化構建工具：Grunt

js代碼校驗工具：JSHint

js桌面化技術

• 開源項目electron

事件處理

通常將事件處理程序添加到事件流的冒泡階段，能夠最大限度的兼容各類瀏覽器，除非須要在事件到達目標以前截獲它纔在捕獲階段處理。

HTML

H5中的新增元素好比figure（文檔中的一小節）、header、section以及footer等等，可以讓文檔結構更清晰，可是會變得複雜不宜理解，另外，要怎麼處理瀏覽器不支持時的狀況？仍是要嘗試使用，對搜索引擎的識別有好處。

CSS

flex佈局模型能夠很方便的實現響應式佈局；bootstrap提供的預約義css樣式，實現了響應式的網格佈局。