學(xué)習(xí)單頁面應(yīng)用1-4章總結(jié)

xiangchaobin 發(fā)布于2019-08-28 18:20 / 2103人閱讀

摘要：?jiǎn)雾撁鎽?yīng)用從前端到后端這本書是一本教讀者怎樣將模塊化，也就是前端同學(xué)們常說的模塊化思想，變量避免全局污染以及將功能分塊管理。

《單頁面web應(yīng)用 JavaScript從前端到后端》這本書是一本教讀者怎樣將js模塊化，也就是前端同學(xué)們常說的模塊化思想，變量避免全局污染以及將功能分塊管理。

那么應(yīng)該怎么開始呢？

確定要做頁面的聊天滑塊

進(jìn)行頁面結(jié)構(gòu)的簡(jiǎn)單設(shè)計(jì)，確定將聊天滑塊放在被關(guān)注率和點(diǎn)擊率最高的右下角

確定滑塊需要實(shí)現(xiàn)的功能

當(dāng)打開頁面的時(shí)候滑塊處于最小化

當(dāng)點(diǎn)擊滑塊時(shí)，滑塊實(shí)現(xiàn)最小化和最大化之間的切換

接下來的事情：?jiǎn)雾搼?yīng)用的初步試探

js文件結(jié)構(gòu)的確定：

確定js的入口文件spa.js

確定spa.shell.js核心的js文件，可以調(diào)用應(yīng)用中的任何子模塊，比如接下來所說的spa.chat.js，但是的子模塊之間是不可以隨意調(diào)用的。

那接下來就是實(shí)現(xiàn)具體功能的模塊spa.chat.js

來一張比較清晰的線框圖：

圖上清楚的顯示shell是核心的js，chat是真正分離出來的功能塊，在chat中是處理聊天滑塊的文件。

這樣其實(shí)架子就算是搭起來了，我們就可以開始碼代碼啦啦啦啦~~~~

滑塊代碼直接放到chat中就可以了，前邊已經(jīng)提到，這種模塊思想中有避免變量污染全局，所以每一個(gè)功能模塊都有自己的命名空間。也就是，spa，spa.shell，spa.chat。

具體到代碼

總體來說，每個(gè)文件中的代碼都有配置，初始化的功能，作者已經(jīng)給出，配置使用configMap，初始化使用initModule,當(dāng)開始書寫代碼的時(shí)候，首先要確定在此命名空間下中需要的變量（當(dāng)然也包括函數(shù)變量名稱），要一次提前聲明好。這樣在每個(gè)文件中的代碼也會(huì)清晰的展現(xiàn)。
比如：

變量區(qū)域

公共方法區(qū)域

公共的工具區(qū)域

事件方法區(qū)域

初始化區(qū)域

這樣每個(gè)js文件都是這樣的布局，當(dāng)文件越來越復(fù)雜的時(shí)候，前端的代碼會(huì)越來越好寫，而且可讀性很高。