word val resolv ack pat lena name 漸進 視圖框架

漸進式

有這麽一句話，vue是漸進式框架。

抽取“漸進式框架”和“自底向上增量開發的設計”這兩個概念是什麽？中的解釋：

漸進式代表的含義是：主張（主張指使用時的硬性要求）最少。來個對比就知道什麽叫主張最少：

比如說，Angular，它兩個版本都是強主張的，如果你用它，必須接受以下東西：

• 必須使用它的模塊機制
• 必須使用它的依賴註入
• 必須使用它的特殊形式定義組件（這一點每個視圖框架都有，難以避免）

而使用vue使用，你可以只用它的一部分，不是說你必須一竿子把所有的東西都用上。你可以在原有大系統的上面，把一兩個組件改用它實現，把它當jQuery用；也可以整個用它全家桶開發，把它當Angular用；

還可以用它的視圖，搭配你自己設計的整個下層用。你可以在底層數據邏輯的地方用OO和設計模式的那套理念。也可以函數式，都可以。

腳手架概念

在生活中含義是為了保證各施工過程順利進行而搭設的工作平臺，因此作為一個工作平臺，前端的腳手架可以理解為能夠幫助我們快速構建前端項目的一個工具或者平臺。目前很多主流的前端框架都提供了各自官方的腳手架工具，以幫助開發者快速構建起自己的項目，比如 Vue、React 等， Vue 的腳手架工具 vue-cli。

文件路徑寫法

• 以 / 為起始，表示從根目錄開始解析；
• 以 ./ 為起始，表示從當前目錄開始解析；
• 以 ../ 為起始，表示從上級目錄開始解析；

以@開頭的文件路徑：

@/這是webpack設置的路徑別名，resolve裏面有一個alias的配置項目，能夠讓開發者指定一些模塊的引用路徑。對一些經常要被import或者require的庫,我們最好可以直接指定它們的位置，這樣方便我們查找。
該文件在目錄build/webpack.base.conf這個文件裏面。該項配置具體講解參考：resolve.alias

resolve: {
    // 路徑別名
    alias: {
        ‘@‘: resolve(‘src‘),
        ‘vue$‘: ‘vue/dist/vue.esm.js‘
    }
 
}

運行和編譯的概念

編譯包括編譯和鏈接兩個過程。

編譯過程就是把源代碼翻譯成機器能識別的代碼或者某個中間狀態的語言.比如java只有JVM識別的字節碼,C#中只有CLR能識別的MSIL。還簡單的作一些比如檢查有沒有粗心寫錯啥關鍵字了啊.有啥詞法分析,語法分析之類的過程。

鏈接，是把編譯生成的二進制文件，組合成為一個系統可以執行的可執行文件。

所謂運行時就是把編譯出來的可執行文件代碼在系統中運行的過程，被此時被裝載到內存中去了.(代碼保存在磁盤上沒裝入內存之前是個死家夥.只有跑到內存中才變成活的).而運行時類型檢查就與前面講的編譯時類型檢查(或者靜態類型檢查)不一樣.不是簡單的掃描代碼.而是在內存中做些操作,做些判斷.

es6常用語法

vue裏用到了一些es6的語法，比如在一個模塊對外提供接口時：

const getName = () => person.name;
const getAge = () => person.age;

// commonJS的方式
module.exports = { getName, getAge }

// ES6 modules的方式
export default { getName, getAge  }

進階：前端基礎進階系列

AMD、CMD、Common規範

CommonJS

為在瀏覽器環境之外構建JavaScript生態系統而產生的項目，比如服務器和桌面環境中。

一個單獨的文件就是一個模塊

每一個模塊都是一個單獨的作用域，在一個文件中定義的變量，都是私有的，對其他文件是不可見的，所有代碼都運行在模塊作用域。如果想在多個文件分享變量，必須定義為global對象的屬性。（不推薦）

模塊可以多次加載，但只會在第一次加載的時候運行一次，然後運行結果就被緩存了，以後再加載，就直接讀取緩存結果；

模塊通過exports或者 module.exports導出對外的變量或接口，通過require()同步加載依賴，導出API輸出到當前模塊。

定義模塊

在每個模塊內部，module變量代表當前模塊。它的exports屬性是對外的接口，其指向module.exports，

相當於在模塊頭部加了這句話：var exports = module.exports，在對外輸出時，可以給exports對象添加方法

PS：不能直接賦值（因為這樣就切斷了exports和module.exports的聯系）

其他文件加載該模塊，實際上就是讀取module.exports變量。

var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

加載模塊

require方法：讀取並執行一個JS文件（後綴名默認為.js），然後返回該模塊的exports對象，如果沒有發現指定模塊會報錯。

模塊加載的順序：按照其在代碼中出現的順序，所以只有加載完成才能執行後面的操作,多個模塊不能並行加載。

var app = require(‘./app.js‘);

根據參數的不同格式，require命令去不同路徑尋找模塊文件。
如果參數字符串以“/”開頭，則表示加載的是一個位於絕對路徑的模塊文件。
如果參數字符串以“./”開頭，則表示加載的是一個位於相對路徑的模塊文件
如果參數字符串不以“./“或”/“開頭，則表示加載的是一個默認提供的核心模塊（node核心模塊，或者通過全局安裝或局部安裝在node_modules目錄中的模塊） __dirname代表當前模塊文件所在的文件夾路徑，__filename代表當前模塊文件所在的文件夾路徑+文件名 入口文件 一般都會有一個主文件（入口文件），在index.html中加載這個入口文件，然後在這個入口文件中加載其他文件。 可以通過在package.json中配置main字段來指定入口文件。 模塊緩存 第一次加載某個模塊時，Node會緩存該模塊。以後再加載該模塊，就直接從緩存取出該模塊的module.exports屬性。 加載機制 CommonJS模塊的加載機制是，輸入的是被輸出的值的拷貝。也就是說，一旦輸出一個值，模塊內部的變化就影響不到這個值。

服務器端的Node.js遵循CommonJS規範，Node.js主要用於服務器的編程，加載的模塊文件一般都已經存在本地硬盤，所以加載起來比較快，不用考慮異步加載的方式，所以CommonJS規範比較適用。

AMD和CMD以及ES6

但如果是瀏覽器環境，要從服務器加載模塊，這是就必須采用異步模式。所以就有了 AMD 、CMD 的解決方案，AMD與CMD都借鑒了CommonJs

AMD：Asynchronous Module Definition，異步模塊加載。它完整描述了模塊的定義，依賴關系，引用關系以及加載機制。AMD 裏，require 分全局 require 和局部 require，都叫 require。

CMD：Common Module Definition 通用模塊定義，提供模塊定義及按需執行模塊。CMD 裏，沒有全局 require，而是根據模塊系統的完備性，提供 seajs.use 來實現模塊系統的加載啟動

優劣：

AMD | 速度快 | 會浪費資源 | 預先加載所有的依賴，直到使用的時候才執行
CMD | 只有真正需要才加載依賴 | 性能較差 | 直到使用的時候才定義依賴

運行策略：

AMD:

define([‘./a‘, ‘./b‘], function(a, b) { //運行至此，a.js和b.js文件已下載完成 a模塊和b模塊已執行完，直接可用；
    a.doing();
    // 此處省略500行代碼
    b.doing();
});

CMD:

define(function(require, exports, module) {
     var a = require("./a"); //等待a.js下載、執行完
     a.doing();
     // 此處省略500行代碼
     var b = require("./b"); //依賴就近書寫
     b.doing();
});

從它被requireJS，NodeJs，Dojo，JQuery使用也可以看出它具有很大的價值，沒錯，JQuery近期也采用了AMD規範。　

NPM模塊加載機制

如果require的是絕對路徑文件，查找不會去遍歷每個node_modules目錄，其速度最快

　　1）.從module.paths數組中（由當前執行文件目錄到磁盤根目錄）取出第一個目錄作為查找基準

　　2）.直接從目錄中查找該文件，如果存在則結束查找，如果不存在則進行下一條查找

　　3）.嘗試添加.js、.node、.json後綴之後查找，如果存在文件則結束查找，如果不存在則進行下一條查找

　　4）.嘗試將require的參數作為一個包來進行查找，讀取目錄下的package.json文件，取得Main參數指定的文件

　　5）.嘗試查找該文件，如果存在則結束查找，如果不存在則進行第3條查找

　　6）.如果繼續失敗，則取出module.paths數組中的下一目錄作為基準查找，循環第1-5個步驟

　　7）.如果繼續失敗，循環第1-6個步驟，直到module.paths中的最後一個值

　　8）.如果繼續失敗，則拋出異常

RequireJS和AMD規範

學習路線

比如一個博主的學習歷程是：

form表單驗證==》整個頁面的dom 用Vue 來管理（用數據驅動DOM的變化）==》webpack vue-router控制路由，用於一整套前端開發的工程的構建==》熟悉組件之間的交流來處理數據交流和後端接口==》大型項目。

在網上搜了一波學習路線，也想過自己設計一個產品，最後還是決定把手頭穩定的項目使用vue實現個簡易版本的（單頁面和多頁面的形式），畢竟自己熟悉其中的業務邏輯，知道自己想要幹嘛，這樣直接搜索vue能實現的辦法，這樣來上手學習vue。而且接口也是現成的，之後再自己用node和MongoDB來實現。

介紹兩篇大概介紹vue使用的文章：

Vue.js 2 漸進式前端框架 的最佳學習方法

Vue 淺談前端js框架vue（挺詳細的）

Vue.js 快速入門

vue學習起步：了解下