前後端分離的開發機制，基本上是開發現代業務系統的標配。可在國內某些特殊領域還是存在大量的以JQuery走天涯的現象，但其中也不泛有追求技術者，如不才的鄙人。不才的本人曾以JQuery走天涯；後又接受了Knockoutjs，被他MVVM思想所吸引；也學習和了解過vue，他確實很棒，很了不起，但他不兼容ie8-（基於他的幾款UI框架對低本的IE支持都不友好）。所以我產生了Knokcoutjs + easyui + webpack = ？的想法。有了想法就要開擼，終於在今年5月份完成了koeasyui的alpha版本（博客地址：https://www.cnblogs.com/cqhaibin/p/9064803.html )。因此公式就變成了 knockoutjs + easyui + webpack + koeasyui = ?的形式。其koeayui是組合knockoutjs和easyui而形成一套UI框架的能力。模板框架地址：https://gitee.com/front-sam/pc-base.git
一、如何解決對jquery，easyui的依賴
解決這類問題，我採用了較爲粗魯的一種做，就是把這類依賴包直接入到static文件夾中，然後用模塊文件進行依賴。在編譯的時候，將static文件夾進行復制。結果如下圖所示：
最初我一味的執着於用webpack進行jquery, knockoutjs, koeasyui的引用。但隨後想想此架構其實只能侷限於pc端的管理系統，也沒辦法做到服務端渲染和h5端通用。所以就直接用了這種粗魯的方式。
二、組件開發規範如何定義和實現
因爲本人對vue較爲喜歡，所以很想模仿其實現文件組件方案。可試來試去發現，做好一個單文件組件需要的東西太多，如：組件編譯器、vscode擴展工具、atom擴展工具的支持等，所以我選擇了放棄。但回頭一起，webpack不是萬能的嘛，肯定可以導入html，js文件，然後進行組裝啊，果不其然。所以我們的組件模式如下：
- default.html：默認的視圖文件
<div>
<span data-bind="text:text" ></span>
</div>- index.ts：組件入口和出口文件
import {ViewModel} from './viewModel';
//@ts-ignore
import * as template from './default.html';
export function use(ko:KnockoutStatic){
ko.components.register('test',{
viewModel: ViewModel,
template: template
});
}其中在導入.html文件時，需要加上@ts-igonre，用於忽略ts lint的檢測
- viewModels.ts：組件模型文件
export class ViewModel{
public text:KnockoutObservable<string>;
constructor(param, componentDef, $root){
let that = this;
this.text = ko.observable('ko easyui framework in webpack');
}
}本模板框架全程使用typescript，所以js相關文件都是.ts結尾的。
三、easyui組件的引入
引入easyui非常方便，首先需要裝koeasyui相關組件都註冊到內存中，代碼如下：
//註冊easyui window.koeasyui.use(ko);
然後在需要要位置進行組件引入，所以easyui組件被翻譯爲ko-組件名稱，如：
<div>
<span data-bind="text:text" ></span><br />
<ko-textbox params="options:{value:text, width: 400}" ></ko-textbox>
</div>顯示截圖如下：
四、總結
您可以在gitee上獲取本模板框架的源碼，然後直接npm install, 再npm run dev運行開模式，用npm run build進行發佈和打包。本模板框架現階段還很基礎，如有不足可留言 。計劃下階段實現：1. Mock的引入；2. 代理的引用；3. 引用路由實現SPA開發模板。