基於Webpack, KnockoutJs,esyui,koeasyui實現類vue-cli生成的模板框架

      先後端分離的開發機制，基本上是開發現代業務系統的標配。可在國內某些特殊領域仍是存在大量的以JQuery走天涯的現象，但其中也不泛有追求技術者，如不才的鄙人。不才的本人曾以JQuery走天涯；後又接受了Knockoutjs，被他MVVM思想所吸引；也學習和了解過vue，他確實很棒，很了不得，但他不兼容ie8-（基於他的幾款UI框架對低本的IE支持都不友好）。因此我產生了Knokcoutjs + easyui + webpack = ？的想法。有了想法就要開擼，終於在今年5月份完成了koeasyui的alpha版本（博客地址：http://www.javashuo.com/article/p-gwijrpbi-o.html )。所以公式就變成了 knockoutjs + easyui + webpack + koeasyui = ?的形式。其koeayui是組合knockoutjs和easyui而造成一套UI框架的能力。模板框架地址：https://gitee.com/front-sam/pc-base.git

1、如何解決對jquery，easyui的依賴

    解決這類問題，我採用了較爲粗魯的一種作，就是把這類依賴包直接入到static文件夾中，而後用模塊文件進行依賴。在編譯的時候，將static文件夾進行復制。結果以下圖所示：

     最初我一味的執着於用webpack進行jquery, knockoutjs, koeasyui的引用。但隨後想一想此架構其實只能侷限於pc端的管理系統，也沒辦法作到服務端渲染和h5端通用。因此就直接用了這種粗魯的方式。

2、組件開發規範如何定義和實現

     由於本人對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結尾的。

3、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>

顯示截圖以下：

4、總結

      您能夠在gitee上獲取本模板框架的源碼，而後直接npm install, 再npm run dev運行開模式，用npm run build進行發佈和打包。本模板框架現階段還很基礎，若有不足可留言 。計劃下階段實現：1. Mock的引入；2. 代理的引用；3. 引用路由實現SPA開發模板。