基於Webpack, KnockoutJs,esyui,koeasyui實現類vue-cli生成的模板框架
前後端分離的開發機制，基本上是開發現代業務系統的標配。可在國內某些特殊領域還是存在大量的以JQuery走天涯的現象，但其中也不泛有追求技術者，如不才的鄙人。不才的本人曾以JQuery走天涯；後又接受了Knockoutjs，被他MVVM思想所吸引；也學習和了解過vue，他確實很棒，很了不起，但他不相容ie8-（基於他的幾款UI框架對低本的IE支援都不友好）。所以我產生了Knokcoutjs + easyui + webpack = ？的想法。有了想法就要開擼，終於在今年5月份完成了koeasyui的alpha版本（部落格地址： ofollow,noindex" target="_blank">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檔案，然後進行組裝啊，果不其然。所以我們的元件模式如下：
Line"/>
- 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開發模板。