当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 基于Webpack, KnockoutJs,esyui,koeasyui实现类vue-cli生成的模板框架

基于Webpack, KnockoutJs,esyui,koeasyui实现类vue-cli生成的模板框架

2018年10月22日  | 移动技术网IT编程  | 我要评论

      前后端分离的开发机制，基本上是开发现代业务系统的标配。可在国内某些特殊领域还是存在大量的以jquery走天涯的现象，但其中也不泛有追求技术者，如不才的鄙人。不才的本人曾以jquery走天涯；后又接受了knockoutjs，被他mvvm思想所吸引；也学习和了解过vue，他确实很棒，很了不起，但他不兼容ie8-（基于他的几款ui框架对低本的ie支持都不友好）。所以我产生了knokcoutjs + easyui + webpack = ？的想法。有了想法就要开撸，终于在今年5月份完成了koeasyui的alpha版本（博客地址： )。因此公式就变成了 knockoutjs + easyui + webpack + koeasyui = ?的形式。其koeayui是组合knockoutjs和easyui而形成一套ui框架的能力。模板框架地址：

一、如何解决对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开发模板。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网