MingleJS的设计理念以及功能介绍✨

前言

最近在找工作，把自己的以前做的项目梳理一下，于是找了几个比较有代表性的项目，分别由不用文章给大家介绍一下，这篇文章讲的是MingleJS，是我个人独立开发的一个项目，针对toB中后台系统组件化开发的一个解决方案，已在公司内部技术部内部推行使用。

下面分为几个板块来详细介绍一下它

• What？ MingleJS是什么？
• Why？ 为什么要开发这样一个东西，它解决了什么样的问题？
• How？ 如何去使用它？

MingleJS 是什么？

描述：融汇WUI的思想，实现的一套开箱即用的前端框架/组件库

面向用户：后端开发工程师【，全栈开发工程师

应用场景：toB 中后台系统

特点：无需打包编译等过程，直接在html中引入minglejs就能使用

功能：其内部集成了 Antd 组件库，组件提供了简易的API，以及交互规则，模版渲染，流程控制，循环列表等

创作背景 （为什么开发？）

在上一家公司的技术部里，toB中后台系统的开发模式是前后端不分离，所有的内部后台系统的项目都是基于后端的项目中的，后端通过在模版里去调用前端的组件，配置几个参数，一个页面视图和交互就都构建好了（组件支持的相对较完善）

这套框架就是WUI，是公司自己的内部框架和组件库了，是一套以CommonJS + jQuery 实现的一套内部UI框架，组件规则里包含了交互逻辑， 入职后一直在它上面去做开发和维护，因为是以前的上古项目，维护异常痛苦，于是萌生出了把WUI重构的想法

然后就开始对框架的使用和一些组件/功能模块去进行剖析，用在了哪些系统，一些列边界情况的考虑等等，研究了好几天，因为代码做了太多的兼容处理，导致阅读起来成本巨高，我放弃了，于是准备自己重新写一套框架。保留和WUI同样的模式，让后端去使用前端的组件库，团队模式还是保持不变。

找我们老大聊之后，于是就开始了。

它解决了什么样的问题？

• 由于团队中toB系统是前后端不分离的模式，后端MVC架构中的View这一层，需要前端去辅助实现，它提供了，开箱即用，无需打包编译的特点，后端直接在script中引入minglejs，就能在项目中去使用

• 几乎无需编写视图代码，真正实现配置化，还有配套可视化代码生成器，能够快速构建视图

项目展示

• MingleJS 代码地址 https://github.com/ImChrisChen/MingleJS
• 基于MingleJS开发的可视化页面生成器 演示地址 👉🏻 可视化平台

功能介绍

• 模版解析
  • 文本解析，属性解析, 拓展运算符 等 <{var}>
  • 事件解析 @[event] 例如：@click="handleClick"
  • 流程控制 w-if w-else
  • 循环数据 w-foreach
  • 指令 w-readonly 等

有时间再补充， 未完待续。。