一.框架的定位

框架通常只是一種設(shè)計模式的實現(xiàn)，它并不意味著你可以在開發(fā)中避免所有分層設(shè)計工作。

SPA 框架幾乎都是基于 MVC 或 MVVM 設(shè)計模式而建立起來的，這些模式都只是宏觀的分層設(shè)計，當(dāng)代碼量開始隨著項目增大而增多時，問題就會越來越多。許多企業(yè)內(nèi)部的項目仍然在使用 angularjs1.X ，你會發(fā)現(xiàn)許多 controller 的體積大到令人發(fā)指，稍有經(jīng)驗的團(tuán)隊會利用好 angularjs1 構(gòu)建的 controller , service , filter 以及路由和消息機(jī)制來完成基本的拆分和解耦，這已經(jīng)能讓他們的開發(fā)能力中等體量的項目，往往只有掌握了 angularjs1 玩法精髓—— directive 的隊伍，才能夠在應(yīng)付大型項目時使代碼保持足夠的清晰度，當(dāng)然這只是在代碼形態(tài)和模塊劃分上的工作，相當(dāng)于代碼的骨骼，想要讓業(yè)務(wù)邏輯本身更加清晰，就需要更高級的建模設(shè)計知識來對業(yè)務(wù)邏輯進(jìn)行分層，例如 領(lǐng)域驅(qū)動模型 。如果你仍然在使用 angularjs1.x 的版本進(jìn)行開發(fā)，可以參考【如何重構(gòu)Controller】進(jìn)行基本的分層拆分設(shè)計。

有趣的是一些團(tuán)隊認(rèn)為無法承載大型項目是 angularjs1.x 的原罪，與他們的開發(fā)水平無關(guān)，于是將希望寄托于擁有自動化工具加持的現(xiàn)代化 SPA 框架，然而如果有機(jī)會觀察你就會發(fā)現(xiàn)，許多項目對新框架的使用方式和之前并沒有本質(zhì)的差別，只不過是把以前臃腫到不行的代碼又換了一種形式塞進(jìn)了前端工程里，然后借著 ES6 語法和新型框架本身的簡潔性，開始沾沾自喜地認(rèn)為這是自己重構(gòu)的功勞。

請記住，如果不進(jìn)行結(jié)構(gòu)設(shè)計，即便使用最新版本的最熱門的框架，寫出來的代碼依舊會是一團(tuán)亂麻。

二. Vue開發(fā)中的script拆分優(yōu)化

以 Vue 框架為例，在工程化工具和 vue-loader 的支撐下，主流的開發(fā)模式是基于 *.vue 這種單文件組件形態(tài)的。一個典型的 vue 組件包含如下幾個部分：

<template> <!--視圖模板--></template><script> /*編寫組件腳本*/ export default { name:'component1' }</script><style> /*編寫組件樣式*/</style>

script 的部分通常包含有 交互邏輯 ， 業(yè)務(wù)邏輯 ， 數(shù)據(jù)轉(zhuǎn)換 以及 DOM操作 ，如果不加整理，很容易變得混亂不堪。 *.vue 文件的本質(zhì)是View層代碼，它應(yīng)該盡可能輕量并包含與視圖有關(guān)的信息，即 特性聲明 和 事件分發(fā) ，其他的代碼理論上都應(yīng)該剝離出去，這樣當(dāng)項目體量增大后，維護(hù)起來就更容易聚焦關(guān)鍵信息，下面就如何進(jìn)行腳本代碼拆分提供一些思路，有一些可能是很基本的原則，為盡可能完整就放在一起，你并不需要從最開始就采納所有的建議。