Skip to content
/ Eng Public

超 轻量级的 组件化数据渲染 JS 插件 ,是 React 、 Vue 、 Angular 全家桶套工具外另一种更轻量级的 纯插件 实现方式 , 具有所有此类工具中 , 最少 最简洁 最易的 学习曲线; Eng + Router组件 + eng_server.js(单文件) min版总共不超过 40KB

License

Notifications You must be signed in to change notification settings

343830384/Eng

Repository files navigation




最近在忙 使用了一段时间vue, 发现部分短板和不便之处 . 辟如行内属性的拼接和方法调用传值. 后期做个3.0版本 (补足这些小缺点, 以及进一步前端组件化, 减少对后端的依赖 ,以及"花架子"知识的学习 ) 当前在开发webgl个人引擎 和 公司其它项目

Eng 2.0

  • Eng 是一款 MVVM 模式超 轻量级的 组件化数据渲染 JS 插件 ,是 React 、 Vue 、 Angular 全家桶套工具外另一种更轻量级的 纯插件 实现方式 , 具有所有此类工具中 , 最少 最简洁 最易的 学习曲线;

  • 轻量: Eng + Router组件 + eng_server.js(单文件) min版总共不超过 40KB

  • 精简: 仅10个行内指令 + 5个基本区域方法 + 基本对象操作方法 , 即可完成所有组件化数据渲染 (对Eng 1.0 大副删减)

  • 与原生 JS 紧密契合 , 不在原生JS 基础上 二次发明创造 新名词 新概念 , 基础知识复用, 类似JQuery 仅是插件 , 提供基础便利 , 不凌驾代替套壳原生JavaScript

  • Eng 和 Router组件 向下兼容到 IE9

  • 可与其它插件组件库混用 , 如vue(需 理解 vue的v-pre 和 Eng的e-stop 知识点) , 注意其它组/插件的销毁方法!

  • 支持 单页面路由! 提供一个基于Eng 的组件化的路由插件 , 配套基本后端服务 , 路由配置浅显易懂 (一目了然) , 无其它插件额外学习成本, 二次开发会调接口即可 (灵活自定义修改)

  • Eng 的数据结构与dom层次划分, 互为结构视图 。 在深度开发下 ,提供异常明晰的规律逻辑思考模式 与 例推效应;

  • 不提供全家桶! Eng只是灵活的纯插件 , 满足基本需求 , 仅规定了基于 Router组件和eng_server.js的基本范式 (可自行修改), 在此基础上二次自由开发

开发原因:

  • 主流前端的数据渲染和交互开发 以 vue 和 react 生态圈为主 , 做为与后端紧密配合 , 提供大量现成可用组件 , 快速迭代产品的前后端工具, 其有着优渥的便捷性 , 在这点上必须予以肯定。

  • 但对于纯粹的基础前端开发而言 , 此二者的生态圈过于繁杂 , 大量冗余累赘不可抛弃的历史包袱, 以及对原生JS和web环境破坏严重 。 大量凌驾僭越于原生web 环境的规则束缚,魔法字符串 , 新规则 , 新概念 , 会造成不同程度的束缚和掣肘。

  • 且对基于两者的新手开发 , 为了便捷而便捷 , 大量引用三方甚至多个重量级插件, 不仅会造成项目臃肿烦杂, 并因过份远离基础, 离开其生态圈则丧失基础开发能力。

  • 因此 ,EngJS与原生 JS 紧密契合 , 不在原生JS 基础上 二次发明创造 新名词 新概念 , 基础知识复用。  类似JQuery 仅是插件 ,  提供基础便利 , 不凌驾代替套壳原生JavaScript,仅提供基础的 数据渲染和组件支持 ,精简易用 (对于基础开发而言),且能与现有生态的混合使用。

设计思想:

  • 强调数据视图结构 , web端大量涉及视觉结构的数据逻辑和交互呈现, 因此Eng 的数据结构与dom层次划分, 互为结构视图 。 在深度开发下 ,提供异常明晰的规律逻辑思考模式 与 例推效应。(参图1)。 Router组件,也是基于此结构逻辑实现, 一脉相承。

图1:下图中, e-base 和 e-for 严格约束了 Dom 和 数据结构 , 互为结构视图。


数据渲染与交互开发特点:

  1. 精简: 仅10个行内指令 +  5个基本区域方法 +  基本组件对象操作方法 ,  即可完成所有组件化数据渲染   (参下案例)
  2. 组件对象特点 ,灵活易用,仅destroy,sleep,awake 三个基本状态,就可实现在页面的销毁,隐藏,以及位置变换。

Router组件特点:

  1. 基于如下常见页面结构,使用JSON结构表述不同组件的关系
  2. 以区域area划分功能不同的单页面 (参图2)
  3. (建议)对于简单页面不建议使用,完全没必要
  4. 对于特殊需求,因Eng组件的灵活易用性, 可尝试自行实现并构建基于项目规则需求的Router组件

图2:下图中, e-base 和 e-for 严格约束了 Dom 和 数据结构 , 互为结构视图。


得出如下 Router组件 的设计结构 (参考范式)


适用范围:

  1. 基础开发,不依赖全家桶,只需基本的 数据渲染 和 组件功能支持
  2. 对项目有轻量,简洁需求的
  3. 低代码平台构建,灵活简洁的组件运用方式,恰如其分。
  4. 二次开发 ,自定义项目流程,基础配套工具
  5. DIY Coder

应用案例:

  1. 以下案例只为证明,Eng在如此精简的前提下,仍可以实现同类工具的基础功能

例1:图表类, echarts折线图 等理论上基于此也较容易实现


例2:css3 3D盒模型城市场景编辑器


例3:canvas2d 的骨骼动画编辑器


例4:canvas2d 地图场景编辑器


综上旨在证明,Eng具备同类工具的 核心基础开发能力,而非泛泛……

License

License

About

超 轻量级的 组件化数据渲染 JS 插件 ,是 React 、 Vue 、 Angular 全家桶套工具外另一种更轻量级的 纯插件 实现方式 , 具有所有此类工具中 , 最少 最简洁 最易的 学习曲线; Eng + Router组件 + eng_server.js(单文件) min版总共不超过 40KB

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published