技術與依賴環境分層結構

ES6 語言
nodejs 底層環境

npm 高階庫

vue-cli 腳手架
webpack 打包編譯工具

vue 前端框架
vue-router
vuex
Less
ES6
ElementUI 元件庫
……

使用vue-cli 部署環境

環境依賴（nodejs”>= 4.0.0”, npm”>= 3.0.0”）

腳手架（vue-cli “2.5.1”）：簡化手動配置安裝過程
打包工具（webpack “1.13.2”）：打包、編譯工具
前端框架（Vue “2.1.0”）：詳解見下節
高階語言（Less、 ES6）：程式碼抽象程度高，更優美易讀，更易於維護
安裝

安裝 nodejs & npm

  npm --registry https://registry.npm.taobao.org info underscore  #配置國內代理
  npm install -g vue-cli  
  vue init webpack <my-project-name>  
  npm install  
  npm run dev 
 

Vue

元件化框架的作用

前端的元件化框架，本質上就是藉助virtual Dom幫助開發者管理混亂的Dom，並提供給開發者像操作狀態機一樣操作頁面的能力。

好處：程式碼和檔案結構更清晰易於維護

Vue 是什麼？能做什麼？

Vue 是典型MVVM框架，擁有雙向繫結的能力與完整的元件化方案，利用 virtual Dom 提供了函式式的 UI 程式設計方式

可以後端渲染。

你不必做任何事就獲得完全優化的重渲染。

原理

• 訂閱釋出模式，響應式資料流
• 生命週期

訂閱釋出模式，響應式資料流

• 訂閱釋出模式：訂閱者訂閱資訊，然後釋出者釋出資訊，訂閱者更新。
• 在物件定義的過程中，通過get 得到訂閱者的依賴列表，通過set 釋出訊息從而訂閱者獲得更新通知
• 從而實現資料流 v m 的同時更新

  var data = {}       //可理解為元件中的data  
  var name = "Peiduo" //元件中的一個屬性  
  var key = "name"  

  Object.defineProperty(data, key, {  
      get:function (){  
          setDepsList(key, name)    
          //訂閱者訂閱（設定 V 和 M 中使用該屬性的地方）  
          return name  
      },  
      set:function (value){  
          tellDepsListToUpdate(key, value)    
          //釋出者釋出（告知要更新的V 和M ）  
          name = value  
      }  
  });  

  data.name += " Du"; //更新該屬性 

  function setDepsList(key, value) { 
    console.log("接收到屬性 " + key + ":" + value)
  }
  function tellDepsListToUpdate(key, value) {
    console.log("請更新"); 
    setDepsList(key, value)
  }

生命週期

常用API解讀與一些最佳實踐(不只是vue)

Vue 生命週期（keep-alive 保留元件狀態或避免重新渲染，將頁面快取到記憶體中）

每次初始化頁面會依次執行以下鉤子函式

beforeCreate
created
beforeMount
mounted
activated
beforeUpdate
updated

如果使用keep-alive標籤，在離開頁面時不銷燬頁面，會執行

deactivated

再次回到該頁面會執行

activated
beforeUpdate
updated

不使用keep-alive，離開時執行

beforeDestroy
destroyed

當再次回到該頁面將會再次全部執行一遍鉤子函式

變數繫結（容易產生的誤區）

在標籤中繫結變數時，如果傳輸字串（比如屬性名為 dataName）

dataName="dpd"  // dpd 就是一個字串，不是變數  

區別於字串的其它型別

:dataBool="true"  // 帶冒號則雙引號內表示為表示式  
:dataNumber="10"  
:dataArray="arrList" // arrList=[1,2,3]; 為陣列型別（來自data 或者 props 中）  

元件定義的方式

1. 構成元件，專案中應用最多的 (props down, events up)
2. 全域性元件，應用：通用元件
3. 在特定結構標籤內使用元件

    <table>  
      <tr is="my-row"></tr>  
    </table>  

父子元件通訊機制

• 父元件通知子元件： props引數傳遞的方式
• 子元件通知父元件：事件繫結的方式

非父子元件通訊

1. 有共同父元件的，通過共同的父元件控制
2. vuex
3. 全域性事件機制

  window.vueBus = new Vue()  

  // 觸發元件 A 中的事件  
  vueBus.$emit('id-selected', 1)  

  // 在元件 B 建立的鉤子中監聽事件  
  vueBus.$on('id-selected', function (id) {  
    // ...  
  })

過濾函式

  <input type="text" :value="dataValue | filterFun"></p>
  <p>{{dataValue | filterFun}}</p>

  filters: {
    filterFun(value) {
      if(value.indexOf("SB") >= 0) {
        value = value.replace(/SB/g, '**')
      }
      return value
    }
  }

slot 分發內容

如何使用子元件內的方法

當我們想要在父元件使用子元件內的方法時可以通過 子元件索引ref 實現

通常情況不需要使用子元件內的方法，通過改變其屬性即可，避免在模版或計算屬性中使用。
因為ref本身是作為渲染結果被建立的，在初始渲染的時候不能訪問它們 - 它們還不存在！$refs 也不是響應式的

v-else 內部使用迴圈的時候，v-else 有邏輯上的問題，for 優先順序比較高

for (item in list) {  
  else {  
    // create <tr> element.  
  }  
}  

1. 可以使用如下方式替換

   v-if=”useA”
   v-if=”!useA”

2. 外部用 template 包裹

Promise 是非同步程式設計的一種解決方案，比傳統的解決方案——回撥函式和事件——更合理和更強大。

將非同步操作以同步操作的流程表達出來，避免了層層巢狀的回撥函式。

Promise 的三種狀態

Pending（進行中）
Resolved（已完成，又稱 Fulfilled）
Rejected（已失敗）

  // 能被 2 整除就返回成功， 否則返回失敗
  var promise = new Promise(function(resolve, reject) {

    var number, value, error = "Not even";

    setTimeout(() => {

      number = Math.round(Math.random() * 1000)
      if(number%2 === 0) {
        resolve(value);

      } else {
        reject(error);
      }

    }, 1000)
  });

  promise.then( (value) => {
    console.log("success", value)

  }, (error) => {
    console.log("failure", error)
  })

鉤子是非同步解析執行，此時導航在所有鉤子 resolve 完之前一直處於 等待中。

beforeEach
beforeEnter // 某個路由獨享
……

vuex

提供了全域性狀態管理機制

webpack2.0 概念
中文
webpack is a module bundler.–模組打包機*

webpack 能做

• Split the dependency tree into chunks loaded on demand（把依賴樹分割成塊按需載入）
• Keep initial loading time low
• Every static asset should be able to be a module
• Ability to integrate 3rd-party libraries as modules （整合）
• Ability to customize nearly every part of the module bundler （定製）
• Suited for big projects

基本組成

  module.exports = {  
    entry: './src/app.js',
    output: {  
        path: './bin',  
        filename: 'app.bundle.js'  
    }  
  }  

resolve

路徑、檔案相關配置

Loaders(轉換器)

Loaders are special modules webpack uses to ‘load’ other modules (written in another language) into JavaScript (that webpack understands).

Loaders in webpack transform these files into modules as they are added to your dependency graph.

webpack 只認識javascript ，它把其他檔案看作是模組，加到依賴樹中

Plugins(外掛)

To do some additional processing of the bundle in your workflow.

額外的包整合、熱載入、語言轉換、壓縮、混淆等…

package

package 中版本前的符號~和^

    # [email protected] or later  
    npm update <package name>  
    npm update   
    # 更新所有package 到tags 中最新版本,包括全域性包、本地包、依賴        
    "dependencies": {  
      "dep1": "^1.1.1"  #可更新小於最大版本號的版本  
    }        
    "dependencies": {  
      "dep1": "~1.1.1"  #可更新最小版本號  
    }  
    npm update --save  
    # 更新 dependencies中包，package.json 會被修改（只寫了這裡）  
    npm update -g  
    # 更新全域性包  

專案架構

• 入口（main.js -> index.html -> router -> app.vue -> router-> pages）
• 配置（2處，工程級、專案級）
• vuex（主要用於登入）
• 路由（定義、引數的使用、生命週期鉤子的使用）
• 請求層（基礎請求、快取層詳見下文）
• 模型層（不改變介面資料，反回符合業務需求的資料模型）
• 專案間通用元件（詳見下文）
• 專案內通用元件（專案內部個性化的可重用元件）
• 頁面（組織結構，頁面內元件組織結構）
• 公共方法、工具類的提取（無依賴，可複用）
• 靜態資源

• 原理，檔案的軟連線
• 管理方式 svn + gulp （ES6 -> ES5）
• 使用:更新svn 進入專案目錄執行如下命令即可（nodejs 指令碼）

node initlink.js <componentPath> <programPath> <component^version> <component1^version>  
 node initlink.js /Users/dupeiduo/Desktop/Program/VueComponents/tags  /Users/dupeiduo/Desktop/Program/OSS/truck/vue-webpack  agrisz-map^1.0.0 agrisz-echart^1.0.0 agrisz-dialog^1.0.0 agrisz-button^1.0.0 agrisz-searchpoi^1.0.0  

設計與思考

記憶體快取機制（專案例項）

我們可以也有必要在任何統一入口處做一些事情

以資料為導向

1. 做一個頁面先想清楚它所需要的資料 （立馬開始動手是大忌）
2. 理清巨集觀的整體頁面結構

頁面就像個機器，它的“變數”就是控制機器執行的操縱器，先清楚要有哪些操縱器

程式碼要有順序，有邏輯關係（努力方向）

按照載入的順序、操作的順序（人們容易理解的順序）
變數名方法名自上而下有邏輯關係

自頂向下 （分析問題的一種思維方式）

思想就是分解問題，問題分解後，單看每個小問題，就非常簡單了（不夠簡單那是分的不夠細）。

反映到程式碼中每個小問題就是一個方法，每個方法只做一件事。當分的足夠細的時候，程式碼抽象也就做好了

應用

1. 工作流

   • 整理頁面所需資料
   • 搭建整體頁面結構（父元件結構，由多個子元件組成）
   • 設計子元件內部資料屬性，回撥事件
   • 模擬頁面操作邏輯，mock資料
   • 完善方法和樣式，除錯介面

   把有困難的或者可以分工的部分分配出去，從而達到最大限度分工協作

2. 搭建專案結構可以用相同的思想

開發除錯方法、工具

debugger // 在js 程式碼中新增斷點
console.log(a,b,c) // 在js 程式碼中新增控制檯輸出
vuedevtool // vue 瀏覽器外掛(Chrome)

建議

對自己的程式碼有強烈的控制慾
對自己寫的程式碼有信心
對效能有極致需求的特殊情況，其實應該犧牲一些可維護性採取手動優化

瞭解

函數語言程式設計

到這裡能否掌握如下幾條

1. 知道搭建一個全新的工程要做的事情有哪些，並能夠開始搭建
2. 瞭解webpack 基礎配置
3. 掌握工程的檔案結構
4. 瞭解工程的啟動機制
5. 掌握路由與其常用鉤子函式
6. 瞭解 vuex 與使用場景
7. 瞭解 vue 生命週期
8. 掌握元件間的通訊機制
9. 能夠獨立搭建一個專案並開始開發功能

討論與補充