Eng2.0 --- React 、 Vue 、 Angular全家桶外另一种超轻量插件式web开发

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

 一个routerCfg简易配置

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互斥 */