前後端分離的開發機制，基本上是開發現代業務系統的標配。可在國內某些特殊領域還是存在大量的以JQuery走天涯的現象，但其中也不泛有追求技術者，如不才的鄙人。不才的本人曾以JQuery走天涯；後又接受了Knockoutjs，被他MVVM思想所吸引；也學習和了解過vue，他確實很棒，很了不起，但他不相容ie8-（基於他的幾款UI框架對低本的IE支援都不友好）。所以我產生了Knokcoutjs + easyui + webpack = ？的想法。有了想法就要開擼，終於在今年5月份完成了koeasyui的alpha版本（部落格地址：https://www.cnblogs.com/cqhaibin/p/9064803.html

一、如何解決對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開發模板。