# Eng

**Repository Path**: colaKun/eng

## Basic Information

- **Project Name**: Eng
- **Description**: 超 轻量级的 组件化数据渲染 JS 插件 ,是 React 、 Vue 、 Angular 全家桶套工具外另一种更轻量级的 纯插件 实现方式 ， 具有所有此类工具中 ， 最少 最简洁 最易的 学习曲线; Eng + Router组件 + eng_server.js(单文件) min版总共不超过 40KB
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: http://engjs.club/
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 7
- **Created**: 2022-07-23
- **Last Updated**: 2023-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align=center><img width="65" height="65" src="https://s4.ax1x.com/2021/12/08/o2iYvj.png"/></div>
<br>
<div align=center><img width="774" height="73" src="https://s4.ax1x.com/2021/12/08/o2iJ2Q.png"/></div>
<br>

## [EngJs在线手册](http://engjs.club) 
<br>

# 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 和 数据结构 ， 互为结构视图。
<div align=center><img width="800" src="https://s4.ax1x.com/2021/12/13/oOQEdO.png"/></div>
<br>

### 数据渲染与交互开发特点：
1.	**精简: 仅10个行内指令 +  5个基本区域方法 +  基本组件对象操作方法 ,  即可完成所有组件化数据渲染   (参下案例)**  
2.	**组件对象特点 ，灵活易用，仅destroy，sleep，awake 三个基本状态，就可实现在页面的销毁，隐藏，以及位置变换。** 
     
### Router组件特点：
1.	**基于如下常见页面结构，使用JSON结构表述不同组件的关系**
2.	**以区域area划分功能不同的单页面  （参图2）**
3.	**（建议）对于简单页面不建议使用，完全没必要**
4.	**对于特殊需求，因Eng组件的灵活易用性， 可尝试自行实现并构建基于项目规则需求的Router组件** 

<br>

#### 图2：下图中， e-base 和 e-for 严格约束了 Dom 和 数据结构 ， 互为结构视图。
<div align=center><img width="800" src="https://s4.ax1x.com/2021/12/13/oOQVoD.png"/></div>
<br>

#### 得出如下 Router组件 的设计结构 （参考范式）
<div align=center><img width="800" src="https://s4.ax1x.com/2021/12/13/oOQAeK.png"/></div>
<br>

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

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


#### 例1：图表类， echarts折线图 等理论上基于此也较容易实现
<div align=center><img width="800" src="https://s4.ax1x.com/2021/12/13/oOmm7Q.png"/></div>
<br>

#### 例2：css3 3D盒模型城市场景编辑器
<div align=center><img width="800" src="https://s4.ax1x.com/2021/12/13/oOmKts.png"/></div>
<br>

#### 例3：canvas2d 的骨骼动画编辑器
<div align=center><img width="800" src="https://s4.ax1x.com/2021/12/13/oOme0g.png"/></div>
<br>

#### 例4：canvas2d 地图场景编辑器
<div align=center><img width="800" src="https://s4.ax1x.com/2021/12/13/oOmukj.png"/></div>
<br>

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




## License

[![License](http://img.shields.io/badge/license-APACHE2-blue.svg)](LICENSE.txt)