前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于Webpack, KnockoutJs,esyui,koeasyui实现类vue-cli生成的模板框架

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

作者头像
sam dragon
发布2018-11-08 10:46:24
1.1K0
发布2018-11-08 10:46:24
举报
文章被收录于专栏:cnblogs

前后端分离的开发机制,基本上是开发现代业务系统的标配。可在国内某些特殊领域还是存在大量的以JQuery走天涯的现象,但其中也不泛有追求技术者,如不才的鄙人。不才的本人曾以JQuery走天涯;后又接受了Knockoutjs,被他MVVM思想所吸引;也学习和了解过vue,他确实很棒,很了不起,但他不兼容ie8-(基于他的几款UI框架对低本的IE支持都不友好)。所以我产生了Knokcoutjs + easyui + webpack = ?的想法。有了想法就要开撸,终于在今年5月份完成了koeasyui的alpha版本(博客地址:https://cloud.tencent.com/developer/article/1137615 )。因此公式就变成了 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:默认的视图文件
代码语言:javascript
复制
<div>
    <span data-bind="text:text" ></span>
</div>
  • index.ts:组件入口和出口文件
代码语言:javascript
复制
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:组件模型文件
代码语言:javascript
复制
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相关组件都注册到内存中,代码如下:

代码语言:javascript
复制
//注册easyui
window.koeasyui.use(ko);

然后在需要要位置进行组件引入,所以easyui组件被翻译为ko-组件名称,如:

代码语言:javascript
复制
<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开发模板。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-10-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、如何解决对jquery,easyui的依赖
  • 二、组件开发规范如何定义和实现
  • 三、easyui组件的引入
  • 四、总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档