快捷導(dǎo)航

基于 Vue.js 之 iView UI 框架非工程化實(shí)踐記錄(推薦)

更新時(shí)間：2017年11月21日 11:09:16 作者：溪邊靜禪

為了快速體驗(yàn) MVVM 模式，我選擇了非工程化方式來(lái)起步，并選擇使用 Vue.js，以及基于它構(gòu)建的 iView UI 框架。本文給大家分享基于 Vue.js 之 iView UI 框架非工程化實(shí)踐記錄，需要的朋友參考下吧

像我們平日里做慣了 Java 或者 .NET 這種后端程序員，對(duì)于前端的認(rèn)識(shí)還常常停留在 jQuery 時(shí)代，包括其插件在需要時(shí)就引用一下，不需要就刪除。故觀念使然，盡管 Nuget 和 Maven 用得順溜，但對(duì) NPM 仍不帶感，興許是周邊無(wú)人帶動(dòng)的稀薄氣氛，也或者是沒(méi)參加過(guò)類似的大型活動(dòng)，于是在自發(fā)性上差了許多。再者，我不用 MVVM 模式，領(lǐng)導(dǎo)也不會(huì)扣績(jī)效。

為了快速體驗(yàn) MVVM 模式，我選擇了非工程化方式來(lái)起步，并選擇使用 Vue.js，以及基于它構(gòu)建的 iView UI 框架。

Vue.js 是美籍華人尤雨溪?jiǎng)?chuàng)作的，那會(huì)兒他還在 Google 工作，他自感 Angular.js 繁雜，進(jìn)而自創(chuàng)了更為簡(jiǎn)潔易用的 Vue.js。

iView UI 是由 90 后梁灝[hào]創(chuàng)作，網(wǎng)名 Aresn，在大數(shù)據(jù)公司 TalkingData 負(fù)責(zé)可視化基礎(chǔ)架構(gòu)，更了不起的是他還出了《Vue.js實(shí)戰(zhàn)》一書，我是在“雙十一”的前一天買的，行文措詞簡(jiǎn)潔，表意直達(dá)困惑，入門很迅速，是我喜歡的風(fēng)格?；艘恢軙r(shí)間掃完了前十二章內(nèi)容，用 WebStorm 練習(xí)了大部分實(shí)例，盡管書中用一整章內(nèi)容介紹了 webpack 工程化構(gòu)建方案，但由于我慣性使然，還是選擇對(duì)其跳過(guò)而使用了非工程化方式來(lái)體驗(yàn) Vue.js，其實(shí)多少有失暴殄。無(wú)奈，畢竟才學(xué)了一周，后期時(shí)間充裕了再接著分享工程化構(gòu)建的學(xué)習(xí)心得吧。

一、 MVVM 模式

Vue.js 比較顯著的特征是解耦了視圖和數(shù)據(jù)，也就是說(shuō)視圖的變化不再需要命令式編程去顯式改變，只要修改完數(shù)據(jù)就能立即自動(dòng)同步，這是比較大的一個(gè)思維模式的轉(zhuǎn)變，另一個(gè)就是組件化思維俯首皆是，這樣開(kāi)發(fā)一個(gè)應(yīng)用就相當(dāng)是在搭積木。

其實(shí)以上對(duì) Vue.js 所闡述的優(yōu)點(diǎn)也正是 MVVM 模式的寫照，它原是由 MVC 所衍生，即當(dāng)視圖層發(fā)生變化時(shí)，會(huì)自動(dòng)更新到視圖模型上，反之亦然，這就是常說(shuō)的雙向綁定，上一張圖吧：

甭管這圖是否好理解，通俗地來(lái)講，MVVM 這種模式拆分了視圖和數(shù)據(jù)，這樣我們?cè)陂_(kāi)發(fā)時(shí)只要關(guān)心數(shù)據(jù)本身即可，然后視圖 DOM 這方面會(huì)由 Vue.js 自動(dòng)解決。

二、非工程化起步

為了能支撐起一個(gè)最基本的應(yīng)用，需要引入以下幾個(gè)必要文件：

vue.min.2.5.3.js，vue.js 庫(kù)
iview.2.7.0.css，iView 樣式文件
iview.min.2.7.0.js，iView 庫(kù)
iview /locale/zh-CN.js 語(yǔ)言包
iview /font 字體包

下載 Vue.js

來(lái)到 Github 上的 Vue 項(xiàng)目，直接下載 Zip 源碼：

在 dist 目錄中就可以找到 vue.js 文件：

根據(jù)不同的環(huán)境選擇一個(gè)版本即可，至此第 1 步就搞定了。

下載 iView 系列文件

在 iView 官網(wǎng)的“組件” / “安裝” 頁(yè)面的開(kāi)頭處發(fā)現(xiàn)了這個(gè)鏈接：https://unpkg.com/iview/**，通過(guò)它可以查看到 dist** 目錄：

必要文件都在這里，這些文件無(wú)法打包下載，我采取的笨辦法是逐個(gè)點(diǎn)開(kāi)，然后復(fù)制其中的內(nèi)容。

在獲取 iView 相關(guān)的 js 和 css 方面還有一個(gè)辦法，仔細(xì)觀察官網(wǎng)給出的 CDN 地址分別為：

http://unpkg.com/iview/dist/iview.min.js
http://unpkg.com/iview/dist/styles/iview.css

我嘗試將它們放在瀏覽器里進(jìn)行訪問(wèn)：

發(fā)現(xiàn)地址有變更，不過(guò)這并無(wú)大礙。

至此，將各個(gè)文件放在期望的位置即可：

該圖中各文件的擺放并不是很嚴(yán)謹(jǐn)，大家按自己習(xí)慣來(lái)即可。

三、實(shí)例演練

完成以上的準(zhǔn)備工作后，就可以結(jié)合 iView UI 來(lái)正式開(kāi)發(fā)了，接下來(lái)基于 table 表格組件演示一下購(gòu)物車的基本操作。

引入資源

經(jīng)過(guò)起步工作的籌備，可以在新建頁(yè)面中逐個(gè)地引入這些資源。

HTML head 部分

<head>
 <meta charset="UTF-8">
 <title>購(gòu)物車實(shí)例</title>
 <link rel="stylesheet" href="iViewContent/iview.2.7.0.css" rel="external nofollow" >
 <script src="utility_js/vue.min.2.5.3.js"></script>
 <script src="utility_js/iview.min.2.7.0.js"></script>
 <script src="iViewContent/locale/zh-CN.js"></script>
 <script>
 iview.lang('zh-CN');
 </script>
</head>

按一貫的方式引用，樣式居前，隨后緊跟著 vue.js 和 iView.js，以及 iView 中文語(yǔ)言包 zh-CN.js，然后立即調(diào)用 lang 方法使其生效。

綁定數(shù)據(jù)

首先把數(shù)據(jù)綁定起來(lái)，從而看一看整體效果，至于其他的行為操作先不管：

HTML body 部分

<body>
 <div id="app">
 <i-table id="datatable1"
   size="small"
   :columns="columns"
   :data="cartList"
   stripe
   highlight-row>
 </i-table>
 </div>
 <script src="iViewUI_cart.js"></script>
</body>

組件 i-table 最核心的兩個(gè)屬性分別是 columns 和 data，columns 是列定義，data 則為數(shù)據(jù)。

這兩個(gè)屬性都添加了冒號(hào)(:)語(yǔ)法糖，它指代的是 v-bind 指令，表示這個(gè)屬性的值是動(dòng)態(tài)綁定的，這樣在運(yùn)行過(guò)程中發(fā)現(xiàn)數(shù)據(jù)有變更時(shí)，表格視圖也會(huì)迅速的變更。

iViewUI_cart.js 腳本部分

var cart = new Vue({
 el: '#app',
 data: function () {
 return {
  cartList: [
  {id: 1, name: 'iPhone X', price: 8300.05, count: 1},
  {id: 2, name: 'MacBook Pro', price: 18800.75, count: 3},
  {id: 3, name: 'Mate 10 Porsche', price: 16600.00, count: 8}
  ],
  columns: [
  {
   title: '名稱',
   key: 'name'
  },
  {
   title: '單價(jià)',
   key: 'price'
  },
  {
   title: '數(shù)量',
   key: 'count'
  }
  ]
 }
 },
 methods: {}
});

該文件是與頁(yè)面對(duì)應(yīng)的業(yè)務(wù)腳本，整個(gè)文件就負(fù)責(zé) new 一個(gè) Vue 實(shí)例，并將其賦值給了變量 cart，可以看到的 data 包含了兩個(gè)屬性，即表示數(shù)據(jù)源的 cartList 和列定義的 columns，二者正好與上述 i-table 的核心屬性相映射。

再次值得注意的是 data，它的值需要以匿名函數(shù)的形式進(jìn)行書寫，即：

function () {
 return {}
}

如此，在其 columns 中出現(xiàn)的 Render 函數(shù)體內(nèi)才能正常通過(guò) this 訪問(wèn)到 methods 中定義的方法。當(dāng)然本次演示是通過(guò) cart 對(duì)象來(lái)訪問(wèn)，故不受此影響。

運(yùn)行頁(yè)面后，數(shù)據(jù)即可綁定成功。

添加操作所需按鈕

數(shù)據(jù)呈現(xiàn)出來(lái)后，就可以補(bǔ)充必要的按鈕了：

這一步簡(jiǎn)單，只需要修改一下 columns 屬性，追加一項(xiàng)“操作”列，添加三個(gè)按鈕：

{
 title: '數(shù)量',
 key: 'count'
},
{
 title: '操作',
 render: (h, params) => {
 return h('div', [
  h('Button', {
  props: {
   type: 'primary',
   size: 'small'
  },
  style: {
   marginRight: '5px'
  },
  on: {
   click: () => {
   console.info('減少數(shù)量');
   cart.reduceQuantity(params.row.id);
   }
  }
  }, '-'),
  h('Button', {
  props: {
   type: 'primary',
   size: 'small'
  },
  style: {
   marginRight: '5px'
  },
  on: {
   click: () => {
   console.info('增加數(shù)量');
   cart.increaseQuantity(params.row.id);
   }
  }
  }, '+'),
  h('Button', {
  props: {
   type: 'error',
   size: 'small'
  },
  style: {
   marginRight: '5px'
  },
  on: {
   click: () => {
   console.info('刪除當(dāng)前項(xiàng)');
   cart.deleteItem(params.row.id);
   }
  }
  }, '刪除')
 ]);
 }
}

在這里使用到了 Render 函數(shù)，該函數(shù)的內(nèi)部機(jī)制略顯復(fù)雜，作為初步演示只需依樣畫葫蘆即可。

說(shuō)到 Render 函數(shù)，還需要再?gòu)?qiáng)調(diào)一下在其內(nèi)部對(duì) methods 中所定義方法的調(diào)用，如果試圖通過(guò) this 來(lái)調(diào)用方法（比如 reduceQuantity），那么 Vue 實(shí)例中 data 的值需要使用匿名函數(shù)的方式來(lái)表達(dá)；反之，若是通過(guò) Vue 實(shí)例 cart 來(lái)調(diào)用，則無(wú)此顧慮，即 data 的值使用一貫的對(duì)象大括號(hào)（{}）來(lái)表達(dá)即可。

添加操作所需方法

操作按鈕已經(jīng)添加成功了，那就需要有對(duì)應(yīng)的方法去執(zhí)行，在 Vue.js 中，方法都定義在 methods 屬性中。

減去數(shù)量

首先關(guān)注一下“減去數(shù)量”的定義：

methods: {
 reduceQuantity: function (id) {
 for (let i = 0; i < this.cartList.length; i++) {
  if (this.cartList[i].id === id) {
  this.cartList[i].count--;
  break;
  }
 }
 }
}

通過(guò)遍歷找到目標(biāo)記錄，并將其 count 屬性減一，如同 MVVM 的定義，當(dāng)數(shù)據(jù)變更的時(shí)候，視圖也跟隨著變化。

但凡是存在于購(gòu)物車內(nèi)的商品，其數(shù)量至少應(yīng)該為 1，為防止減到 0，不妨再加一個(gè)判斷使其邏輯更為完美：

methods: {
 reduceQuantity: function (id) {
 for (let i = 0; i < this.cartList.length; i++) {
  if (this.cartList[i].id === id) {
  if (this.cartList[i].count > 1) {
   this.cartList[i].count--;
  }
  break;
  }
 }
 }
},

增加數(shù)量

methods: {
 increaseQuantity: function (id) {
 for (let i = 0; i < this.cartList.length; i++) {
  if (this.cartList[i].id === id) {
  this.cartList[i].count++;
  break;
  }
 }
 }
}

只需要針對(duì) count 屬性做 +1 操作即可。

刪除

deleteItem: function (id) {
 for (let i = 0; i < this.cartList.length; i++) {
 if (this.cartList[i].id === id) {
  // 詢問(wèn)是否刪除
  this.$Modal.confirm({
  title: '提示',
  content: '確定要?jiǎng)h除嗎？',
  onOk: () => {
   this.cartList.splice(i, 1);
  },
  onCancel: () => {
   // 什么也不做
  }
  });
 }
 }
}

在刪除邏輯中，當(dāng)遍歷到目標(biāo)記錄時(shí)，會(huì)詢問(wèn)用戶是否真的要?jiǎng)h除當(dāng)前記錄，這里用到了 $Modal 對(duì)話框，如果用戶點(diǎn)擊確定，那么就執(zhí)行真正的刪除，看一看效果：