css3总结龙田研发人员在GitHub上共享前端代码 EngJscss3实战满满干货，

龙田前端研发在闲暇之余，利用VMMV模式，开发了一个前端小工具 EngJs，并在 GitHub 上进行了代码共享，同时收获了48个赞。可以说，我们的技术小哥哥还是非常有技术钻研精神的！

GitHub是一个软件源代码托管服务平台，也是世界上最大的代码存放网站和开源社区。目前，GitHub上已有超过7300万注册用户和2亿多代码库。

主流前端数据渲染和交互开发的冗余和效率内耗，相信让不少人身心俱疲。在行业&职场如此内卷的情况下，对高耗能开发工具 say no !

有没有更简便的路径达到预期效果？龙田科技X科技院研发工程师南柯君有话要说！下面一起看看他的轻量化开发设计思路吧。

作者南柯君

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

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

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

因此，EngJS 紧密结合 JS，可避免在原生 JS 基础上二次发明出新名词、新概念，实现基础知识复用。这类似于 JQuery ，仅作为插件，不凌驾、不代替套壳原生 javascript ，提供基础的数据渲染和组件支持，精简易用（对于基础开发而言），且能与现有生态混合使用。

设计思想

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

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

图1

数据渲染与交互开发的特点1.精简:仅10个行内指令+5个基本区域方法+基本组件对象操作方法，即可完成所有组件化数据渲染(参下应用案例部分)2.组件对象特点，灵活易用。仅 destroy，sleep ，awake 三个基本状态，就可实现在页面的销毁、隐藏，以及位置变换Router组件特点1.基于图2常见页面结构，使用 JSON 结构表述不同组件的关系2.以区域 area 划分功能不同的单页面（参图2、图3）3.（建议）对于简单页面不建议使用，完全没必要4.对于特殊需求，因 Eng 组件的灵活易用性，可尝试自行实现并构建基于项目规则需求的 Router 组件图2，得出如Router组件的设计结构（参考范式）图3适用范围1.基础开发，不依赖全家桶，只需基本的数据渲染和组件功能支持2.对项目有轻量，简洁需求的3.低代码平台构建，灵活简洁的组件运用方式，恰如其分4.二次开发，自定义项目流程，基础配套工具5. DIY Coder应用案例以下案例只为证明，Eng 在如此精简的前提下，仍可以实现同类工具的基础功能。例1：图表类， echarts 折线图等理论上基于此也较容易实现例2：css33D 盒模型城市场景编辑器例3：canvas2d 的骨骼动画编辑器例4：canvas2d 地图场景编辑器综上，Eng 具备同类工具的核心基础开发能力，而非泛泛……总结