小程序的模板化編程-創(chuàng)新互聯(lián)

筆記內(nèi)容：小程序的模板化編程
筆記日期：2018-01-08

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：主機(jī)域名、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、兩當(dāng)網(wǎng)站維護(hù)、網(wǎng)站推廣。

---

將業(yè)務(wù)中的數(shù)據(jù)分離到單獨(dú)的數(shù)據(jù)文件中

之前編寫的新聞列表頁(yè)面中，我們把示例數(shù)據(jù)都放在了js文件中，但實(shí)際上數(shù)據(jù)是不應(yīng)該寫在js文件中的，所以我們得把這些數(shù)據(jù)分離到一個(gè)單獨(dú)的數(shù)據(jù)文件中。然后post.js文件就加載這個(gè)數(shù)據(jù)文件中的數(shù)據(jù)即可，這樣也可以模擬一下加載服務(wù)器數(shù)據(jù)的過程。

1.新建一個(gè)data目錄，并在該目錄下創(chuàng)建一個(gè).js文件：

2.將數(shù)據(jù)剪切到該新建的文件中：

// 將數(shù)據(jù)整合成數(shù)組類型
var local_database = [
  {
    date: "Jan 06 2018",
    title: "正是蝦肥蟹壯時(shí)",
    imgSrc: "/images/post/crab.png",
    avatar: "/images/avatar/1.png",
    content: "“山明水凈夜來霜，數(shù)樹深紅出淺黃。試上高樓清入骨，豈如春色嗾人狂?！苯鹎飼r(shí)節(jié)，天高云淡，秋風(fēng)送爽，氣候宜人。秋風(fēng)秋陽(yáng)中，碩果墜掛枝頭，玉米撫須含笑，高粱引頸高歌，豆莢飽滿圓潤(rùn)。",
    reading: "112",
    collection: "96",
  },
  {
    date: "Jan 03 2018",
    title: "比利·林恩的中場(chǎng)戰(zhàn)事",
    imgSrc: "/images/post/bl.png",
    avatar: "/images/avatar/2.png",
    content: "伊拉克戰(zhàn)爭(zhēng)時(shí)期，來自美國(guó)德州的19歲技術(shù)兵比利·林恩（喬·阿爾文 Joe Alwyn 飾）因?yàn)橐欢闻既慌臄z的視頻而家喻戶曉。那是一次規(guī)模不大卻激烈非常的遭遇戰(zhàn)，戰(zhàn)斗中林恩所在的B班班長(zhǎng)（范·迪塞爾 Vin Diesel 飾）遭到當(dāng)?shù)匚溲b分子的伏擊和劫持，而林恩為了營(yíng)救班長(zhǎng)不惜鋌而走險(xiǎn)沖鋒陷陣。",
    reading: "92",
    collection: "65",
  },
  {
    date: "Jan 05 2018",
    title: "肖申克的救贖",
    imgSrc: "/images/post/xs.jpg",
    avatar: "/images/avatar/3.png",
    content: "20世紀(jì)40年代末，小有成就的青年銀行家安迪（蒂姆·羅賓斯 Tim Robbins 飾）因涉嫌殺害妻子及她的情人而鋃鐺入獄。在這座名為肖申克的監(jiān)獄內(nèi)，希望似乎虛無縹緲，終身監(jiān)禁的懲罰無疑注定了安迪接下來灰暗絕望的人生。",
    reading: "92",
    collection: "65",
  },
  {
    date: "Jan 01 2018",
    title: "霸王別姬",
    imgSrc: "/images/post/bj.jpg",
    avatar: "/images/avatar/4.png",
    content: "段小樓（張豐毅）與程蝶衣（張國(guó)榮）是一對(duì)打小一起長(zhǎng)大的師兄弟，兩人一個(gè)演生，一個(gè)飾旦，一向配合天衣無縫，尤其一出《霸王別姬》，更是譽(yù)滿京城，為此，兩人約定合演一輩子《霸王別姬》。但兩人對(duì)戲劇與人生關(guān)系的理解有本質(zhì)不同，段小樓深知戲非人生，程蝶衣則是人戲不分。",
    reading: "92",
    collection: "65",
  },
  {
    date: "Jan 08 2018",
    title: "這個(gè)殺手不太冷",
    imgSrc: "/images/post/ss.jpg",
    avatar: "/images/avatar/5.png",
    content: "里昂（讓·雷諾飾）是名孤獨(dú)的×××，受人雇傭。一天，鄰居家小姑娘馬蒂爾達(dá)（納塔麗·波特曼飾)敲開他的房門，要求在他那里暫避殺身之禍。原來鄰居家的主人是警方緝毒組的眼線，只因貪污了一小包×××而遭惡警（加里·奧德曼飾）殺害全家的懲罰。",
    reading: "92",
    collection: "65",
  },
  {
    date: "Jan 04 2018",
    title: "阿甘正傳",
    imgSrc: "/images/post/ag.jpg",
    avatar: "/images/avatar/1.png",
    content: "阿甘（湯姆·漢克斯 飾）于二戰(zhàn)結(jié)束后不久出生在美國(guó)南方阿拉巴馬州一個(gè)閉塞的小鎮(zhèn)，他先天弱智，智商只有75，然而他的媽媽是一個(gè)性格堅(jiān)強(qiáng)的女性，她常常鼓勵(lì)阿甘“傻人有傻?！保詮?qiáng)不息。",
    reading: "92",
    collection: "65",
  },
]

這個(gè)文件實(shí)際上充當(dāng)了一個(gè)本地?cái)?shù)據(jù)庫(kù)，到時(shí)候腳本文件從這個(gè)文件中加載數(shù)據(jù)即可。注意：我把一些屬性名稱更改了，wxml文件中的名稱也要跟著更改。

使用require方法加載js模塊文件

1.在數(shù)據(jù)文件中增加以下代碼，設(shè)置一個(gè)數(shù)據(jù)出口：

// 設(shè)置一個(gè)數(shù)據(jù)出口，當(dāng)前這個(gè)文件相當(dāng)于是一個(gè)js模塊
module.exports = {
  // 輸出的是一個(gè)Array對(duì)象
  postList: local_database,
}

2.然后在腳本文件中通過require方法加載js模塊文件：

// 注意：這里只能使用相對(duì)路徑
var postsData = require('../../data/posts-data.js')

Page({
  data: {
  },

  onLoad: function (options) {
    this.setData({
      // 通過postsData來拿到postList對(duì)象
      posts_key: postsData.postList
    });
  },
})

以上就完成了數(shù)據(jù)與邏輯的分離，在我們平時(shí)開發(fā)中，應(yīng)盡量避免這種數(shù)據(jù)與邏輯或者邏輯與視圖代碼混雜在一塊的情況。

關(guān)于setData方法的一些問題：
1.直接修改 this.data 而不調(diào)用 this.setData 是無法改變頁(yè)面的狀態(tài)的，還會(huì)造成數(shù)據(jù)不一致。
2.單次設(shè)置的數(shù)據(jù)不能超過1024kB，請(qǐng)盡量避免一次設(shè)置過多的數(shù)據(jù)。
3.請(qǐng)不要把 data 中任何一項(xiàng)的 value 設(shè)為 undefined ，否則這一項(xiàng)將不被設(shè)置并可能遺留一些潛在問題。

template模板的使用

之前我們使用for循環(huán)改寫了新聞列表頁(yè)面，解決了重復(fù)代碼的問題，但是使用for循環(huán)只能解決當(dāng)前頁(yè)面代碼重復(fù)的問題，如果別的頁(yè)面也要使用相同的代碼的話，就無法使用for循環(huán)來解決了。不過小程序給我們提供了一個(gè)template模板，使用template模板就能解決這種問題。因?yàn)閠emplate可以讓多個(gè)頁(yè)面共享一個(gè)模板文件中的代碼，如果熟悉23種設(shè)計(jì)模式的話，就應(yīng)該知道這種模式類似于模板設(shè)計(jì)模式。

1.在posts目錄下創(chuàng)建一個(gè)目錄，并在該目錄下創(chuàng)建一個(gè)wxml和wxss文件：

注：js文件無法作為模板文件，即便創(chuàng)建了也不會(huì)運(yùn)行，因?yàn)樾〕绦驔]有模塊化的編程，只有模板化的編程

2.將post.wxml中需要被復(fù)用的代碼剪切到post-item-template.wxml模板文件中：

3.接著在post.wxml中引入模板文件，代碼如下：