Eng2.0 - 面向纯前端的数据渲染和交互开发插件

南柯君OL
181 阅读4分钟

不好意! 我回归了! 带来了 Eng2.0

------API网址-------------------------

简介:

  •  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的基本范式 (可自行修改), 在此基础上自行二次自由开发 

开发思想:

  •  Eng 以对 基本原生JS知识点的运用 和 宏观思路整体架构 为基础开发 , 尽可能的精简 无意义 或 没必要(使用量少, 又可自行实现)的冗余.

  •  Eng 的开发哲学基础 : 一生二 , 二生三 , 三生万物(全家桶) , 学 "三+" 不学万物 (侧重对通用基础知识点的运用 )!!

  •  从后端的角度思考，数据结构与算法 ，完全是出于事务逻辑， 储存和IO性能考量 。

  •  从前端（特指涉及Dom的 强交互，及插件开发）而言，好的数据和Dom结构设计， 在操作Dom视图时，对于梳理处理相关逻辑事半功倍。

  •  在web环境中，Dom本身就是个特殊的JSON对象 ，与JSON数据结构某种意义上无区别。（ 参看word文档 ）

  • （函数式编程关心数据的映射，命令式编程关心解决问题的步骤）。从这个意义上说前端关心： 数据结构 + DOM结构 + 交互结构 + 视图结构 的映射， 后端关心如何调用封装好的组件解决问题。 所以 vue ，react 全家桶生态圈 应当视为后端工具，而非前端。 因其一开始就严格限制了某些原生web环境基础特性的应用和通用性。 并且过度的二次抽象， 试图凌驾取代原生web环境。 其和Jquery等基础便利插件有着本质的区别 ，Jquery用熟的，稍加探索即可理解原生JS和DOM操作关系，且能够混用。但直接Vue ， React 出道的前端就很费解。

  •  Eng设计初衷就是面向 严格意义 前端的 基础数据渲染 和 交互组件开发工具 ，对前端能力要求更高 ,, 对基础开发更友好 , 更自由 , 更灵活 , 是给前端造轮子发挥创造力的工具(前端优先), 对后端开发不友好 ( 需掌握更多前端基础 ,得不偿失)

一个简易的路由配置:

     
var routerCfg={
      //开发模式
      env:'dev',
      //默认打开 login区域
      default:['login'],
      //定义所有区域关系
      areas:{
            login:{
                self:{
                        parent:{type:'tag',name:'body'},
                },
                cloaseAreas:['workArea']
            }
            workArea:{
                //子组件可用位置
                container:{
                        left:{type:'class',name:'left'},
                        right:{type:'class',name:'left'},
                },
                self:{
                        parent:{type:'tag',name:'body'},
                },
                closeAreas:['login'],
                openComponents:['zj0','zj2'],
                components:{
                        'zj0':['left','mutex','destroy','cache'],
                        'zj1':['left','mutex','destroy','cache'],
                        'zj2':['right','mutex','destroy','cache'],
                        'zj3':['right','mutex','destroy','cache'],
                }
            }
      },
};
以上配置中可见 :默认打开 login 区域 ,  login 与 workArea 区域页面互斥 
                 workArea下默认显示 zj0 和 zj2 其下 zj0和1互斥, zj2和3互斥

PS:

本身就是非传统前端  , 正如我的个人简介所述:

疫情辞职叠加 ,我跑去研究写游戏了 , 写了一整套的2d游戏开发工具 ,  css3dcity 乱七八糟的 , 目前正在研究webGL...

Eng1.0的时候  , 恰逢此类插件兴起 , 好奇之下摸鱼写了 Eng1.0 ,没想那么多 ,只是想实现此类插件. 发现意外的简单 , 所以从一开始就是没详细规划的个人作品 (能用而已)

当然现在的 Eng 2,0 依然非主流  , 更加简易简单 ,删减了大量东西 , 并支持单页面路由 与 基本的后端开发服务 .  额外的部分需要你有一定的动手能力 , 会使用调用各种包接口 , 根据你的项目添加修改   !!!

avatar
文章
阅读
粉丝