{"id":21285490,"url":"https://github.com/343830384/eng","last_synced_at":"2025-07-11T11:32:27.169Z","repository":{"id":47701594,"uuid":"97306742","full_name":"343830384/Eng","owner":"343830384","description":"超 轻量级的 组件化数据渲染 JS 插件 ,是 React 、 Vue 、 Angular 全家桶套工具外另一种更轻量级的 纯插件 实现方式 ， 具有所有此类工具中 ， 最少 最简洁 最易的 学习曲线; Eng + Router组件 + eng_server.js(单文件) min版总共不超过 40KB","archived":false,"fork":false,"pushed_at":"2023-03-08T08:18:02.000Z","size":2252,"stargazers_count":52,"open_issues_count":1,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2023-03-11T13:45:07.656Z","etag":null,"topics":["eng","eng-js","engjs","javascript","react","vue"],"latest_commit_sha":null,"homepage":"http://engjs.club/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/343830384.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-15T09:47:14.000Z","updated_at":"2023-03-11T13:45:07.656Z","dependencies_parsed_at":"2022-08-05T04:30:21.642Z","dependency_job_id":null,"html_url":"https://github.com/343830384/Eng","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/343830384%2FEng","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/343830384%2FEng/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/343830384%2FEng/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/343830384%2FEng/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/343830384","download_url":"https://codeload.github.com/343830384/Eng/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225717233,"owners_count":17513132,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["eng","eng-js","engjs","javascript","react","vue"],"created_at":"2024-11-21T11:20:43.717Z","updated_at":"2024-11-21T11:20:44.240Z","avatar_url":"https://github.com/343830384.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=center\u003e\u003cimg width=\"65\" height=\"65\" src=\"https://s4.ax1x.com/2021/12/08/o2iYvj.png\"/\u003e\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv align=center\u003e\u003cimg width=\"774\" height=\"73\" src=\"https://s4.ax1x.com/2021/12/08/o2iJ2Q.png\"/\u003e\u003c/div\u003e\n\u003cbr\u003e\n\n## [EngJs在线手册](http://engjs.club) \n\u003cbr\u003e\n\n## 最近在忙 使用了一段时间vue, 发现部分短板和不便之处 . 辟如行内属性的拼接和方法调用传值.  后期做个3.0版本 (补足这些小缺点, 以及进一步前端组件化,  减少对后端的依赖 ,以及\"花架子\"知识的学习 )  当前在开发webgl个人引擎 和 公司其它项目\n\n# Eng 2.0\n\n+ **Eng 是一款 MVVM 模式超 轻量级的 组件化数据渲染 JS 插件 ,是 React 、 Vue 、 Angular 全家桶套工具外另一种更轻量级的 纯插件 实现方式 ， 具有所有此类工具中 ， 最少 最简洁 最易的 学习曲线;**\n \n+  **轻量: Eng + Router组件 + eng_server.js(单文件)  min版总共不超过 40KB** \n\n+  **精简: 仅10个行内指令 +  5个基本区域方法 +  基本对象操作方法 ,  即可完成所有组件化数据渲染   (对Eng 1.0 大副删减)**\n\n+  **与原生 JS 紧密契合 , 不在原生JS 基础上 二次发明创造 新名词 新概念 , 基础知识复用,  类似JQuery 仅是插件 ,  提供基础便利 , 不凌驾代替套壳原生JavaScript**\n\n+  **Eng 和 Router组件 向下兼容到 IE9**\n\n+  **可与其它插件组件库混用 ,  如vue(需 理解 vue的v-pre 和 Eng的e-stop 知识点) ,  注意其它组/插件的销毁方法!**\n\n+  **支持 单页面路由! 提供一个基于Eng 的组件化的路由插件 , 配套基本后端服务 , 路由配置浅显易懂 (一目了然) , 无其它插件额外学习成本, 二次开发会调接口即可 (灵活自定义修改)**  \n\n+ **Eng 的数据结构与dom层次划分， 互为结构视图 。 在深度开发下 ，提供异常明晰的规律逻辑思考模式 与 例推效应；**\n \n+  **不提供全家桶! Eng只是灵活的纯插件 , 满足基本需求 ,  仅规定了基于 Router组件和eng_server.js的基本范式 (可自行修改), 在此基础上二次自由开发** \n\n\n### 开发原因:\n\n+ **主流前端的数据渲染和交互开发 以 vue 和 react 生态圈为主 ，  做为与后端紧密配合 ， 提供大量现成可用组件 ， 快速迭代产品的前后端工具， 其有着优渥的便捷性 ， 在这点上必须予以肯定。**\n\n+ **但对于纯粹的基础前端开发而言 ， 此二者的生态圈过于繁杂 ，  大量冗余累赘不可抛弃的历史包袱， 以及对原生JS和web环境破坏严重 。 大量凌驾僭越于原生web 环境的规则束缚，魔法字符串 ， 新规则 ， 新概念 ， 会造成不同程度的束缚和掣肘。**  \n\n+ **且对基于两者的新手开发 ， 为了便捷而便捷 ， 大量引用三方甚至多个重量级插件， 不仅会造成项目臃肿烦杂， 并因过份远离基础， 离开其生态圈则丧失基础开发能力。**\n\n+ **因此 ，EngJS与原生 JS 紧密契合 , 不在原生JS 基础上 二次发明创造 新名词 新概念 , 基础知识复用。  类似JQuery 仅是插件 ,  提供基础便利 , 不凌驾代替套壳原生JavaScript，仅提供基础的 数据渲染和组件支持 ，精简易用 （对于基础开发而言），且能与现有生态的混合使用。**\n\n### 设计思想：\n\n+ **强调数据视图结构 ， web端大量涉及视觉结构的数据逻辑和交互呈现，  因此Eng 的数据结构与dom层次划分， 互为结构视图 。 在深度开发下 ，提供异常明晰的规律逻辑思考模式 与 例推效应。（参图1）。 Router组件，也是基于此结构逻辑实现， 一脉相承。** \n\n#### 图1：下图中， e-base 和 e-for 严格约束了 Dom 和 数据结构 ， 互为结构视图。\n\u003cdiv align=center\u003e\u003cimg width=\"800\" src=\"https://s4.ax1x.com/2021/12/13/oOQEdO.png\"/\u003e\u003c/div\u003e\n\u003cbr\u003e\n\n### 数据渲染与交互开发特点：\n1.\t**精简: 仅10个行内指令 +  5个基本区域方法 +  基本组件对象操作方法 ,  即可完成所有组件化数据渲染   (参下案例)**  \n2.\t**组件对象特点 ，灵活易用，仅destroy，sleep，awake 三个基本状态，就可实现在页面的销毁，隐藏，以及位置变换。** \n     \n### Router组件特点：\n1.\t**基于如下常见页面结构，使用JSON结构表述不同组件的关系**\n2.\t**以区域area划分功能不同的单页面  （参图2）**\n3.\t**（建议）对于简单页面不建议使用，完全没必要**\n4.\t**对于特殊需求，因Eng组件的灵活易用性， 可尝试自行实现并构建基于项目规则需求的Router组件** \n\n\u003cbr\u003e\n\n#### 图2：下图中， e-base 和 e-for 严格约束了 Dom 和 数据结构 ， 互为结构视图。\n\u003cdiv align=center\u003e\u003cimg width=\"800\" src=\"https://s4.ax1x.com/2021/12/13/oOQVoD.png\"/\u003e\u003c/div\u003e\n\u003cbr\u003e\n\n#### 得出如下 Router组件 的设计结构 （参考范式）\n\u003cdiv align=center\u003e\u003cimg width=\"800\" src=\"https://s4.ax1x.com/2021/12/13/oOQAeK.png\"/\u003e\u003c/div\u003e\n\u003cbr\u003e\n\n### 适用范围：\n1.\t**基础开发，不依赖全家桶，只需基本的 数据渲染 和 组件功能支持**\n2.\t**对项目有轻量，简洁需求的**\n3.\t**低代码平台构建，灵活简洁的组件运用方式，恰如其分。**\n4.\t**二次开发 ，自定义项目流程，基础配套工具** \n5.\t**DIY Coder**\n\n### 应用案例：\n1.\t**以下案例只为证明，Eng在如此精简的前提下，仍可以实现同类工具的基础功能**\n\n\n#### 例1：图表类， echarts折线图 等理论上基于此也较容易实现\n\u003cdiv align=center\u003e\u003cimg width=\"800\" src=\"https://s4.ax1x.com/2021/12/13/oOmm7Q.png\"/\u003e\u003c/div\u003e\n\u003cbr\u003e\n\n#### 例2：css3 3D盒模型城市场景编辑器\n\u003cdiv align=center\u003e\u003cimg width=\"800\" src=\"https://s4.ax1x.com/2021/12/13/oOmKts.png\"/\u003e\u003c/div\u003e\n\u003cbr\u003e\n\n#### 例3：canvas2d 的骨骼动画编辑器\n\u003cdiv align=center\u003e\u003cimg width=\"800\" src=\"https://s4.ax1x.com/2021/12/13/oOme0g.png\"/\u003e\u003c/div\u003e\n\u003cbr\u003e\n\n#### 例4：canvas2d 地图场景编辑器\n\u003cdiv align=center\u003e\u003cimg width=\"800\" src=\"https://s4.ax1x.com/2021/12/13/oOmukj.png\"/\u003e\u003c/div\u003e\n\u003cbr\u003e\n\n**综上旨在证明，Eng具备同类工具的 核心基础开发能力，而非泛泛……**\n\n\n\n\n## License\n\n[![License](http://img.shields.io/badge/license-APACHE2-blue.svg)](LICENSE.txt)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F343830384%2Feng","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F343830384%2Feng","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F343830384%2Feng/lists"}