在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:EasyWebApp开源软件地址:https://gitee.com/Tech_Query/EasyWebApp开源软件介绍:声明式 MVVM 引擎 —— EasyWebApp v4基于 AMD 规范加载器、jQuery v3.2+ 构建,兼容 IE 9+、ECMAScript 5+、HTML 5+ 【原生态模板】EWA 模板语法完全沿用各种 Web 前端原生技术的标准语义 ——
MVVM 引擎只需扫描 DOM 树,即可 自动加载 HTML、JSON 来构建 VM 树,开发者专注于数据整理、事件回调即可,无需任何本地编译、打包环境,享受低学习成本的 原生 HTML、JavaScript 开发体验。 【易拆分视图】ViewModel 是对 View (HTML/DOM) 基于 “数据驱动”模型的面向对象封装 ——
内置视图对象以上视图的构造函数 均可从
【声明式 AJAX】如下格式的合法 HTTP URL 会被 EWA 引擎理解 —— path/to/template.html?key1=value1&keyN=valueN&data=/path/to/json
(〇)加载页面<a target="_blank" href="path/to/outer.html"> 新窗口打开外部页面(跨域超链接 默认在新网页中打开)</a><a href="path/to/static.html"> 纯静态 SPA 页</a><a href="path/to/template.html"> 无初始数据的模板</a><a href="path/to/template.html?data=/path/to/json"> 用一份数据初始化一个模板</a><a href="path/to/template.html?key1=value1&keyN=valueN&data=/path/to/json"> 用一份数据初始化一个模板,并传入一些参数</a><div id="PageBox"></div><script> $('#PageBox').iWebApp('//api.test.com/v1');</script> SPA 页面总是在初始化 WebApp 实例的元素中被加载。 (一)提交表单<form method="put" enctype="application/json" action="?data=/path/to/submit"> <input type="hidden" name="extraParam" /> <input type="text" name="key1" required /> 已填 ${view.key1.length} 字 <input type="submit" /></form>
(二)引用组件<div data-href="path/to/template.html" data-key1="${view.Key1}" data-keyN="${view.KeyN}"> <span slot="Slot_1"></span> <span slot="Slot_2"></span></div> EWA 组件支持 Web Components 标准草案的 Slot 机制、自定义属性,但引用时无需自定义标签。 (三)请求接口<a data-method="PUT" href="?data=/path/to/put">点个赞</a><h3>列个表</h3><div data-href="?data=/path/to/list?count=10&page=1"> <ul data-name="list"> <li>内置索引号:${view.__index__}</li> </ul> 共 ${view.total} 项</div> 【纯前端路由】利用 HTML 5 History API 对“纯 Hash URL”的支持,EWA 引擎直接把 SPA 页面 URL 置于 (〇)请求拦截(new EWA()).on({ type: 'request', src: 'api.test.com'}, function (iEvent, iAJAX) { // 基于 iQuery 扩展的实用方法,处理 jQuery AJAX 选项对象 iAJAX.option.url = $.extendURL(iAJAX.option.url, { token: self.sessionStorage.token });}); (一)响应处理(new EWA()).on({ type: 'template', href: /\.md$/i}, function (iEvent, iData) { // MarkDown 转 HTML return marked( iData );}).on({ type: 'data', src: 'api.test.com'}, function (iEvent, iData) { if (iData.code || (iEvent.method != 'GET')) self.alert( iData.message ); else return iData.data;}); (二)加载收尾(new EWA()).on({ type: 'ready', href: 'path/to/template.html'}, function (iEvent) { // 一个组件/页面的 DOM Ready // 即除 img、iframe、audio、video 等多媒体资源的 UI 渲染完成}); (三)实用方法
【异步式组件】(〇)HTML 模板EWA 组件代码本身是完全合法的 HTML 片段,可直接被 AJAX 加载并在 DOM 树中实例化 —— <style disabled> /* 此处的 disabled 标准属性是为了防止 DOM 子树初始化时影响全局 CSS, * 组件 VM 对象初始化时会自动生成 CSS 作用域 */</style><!-- 一个组件只有一份 JS 代码,推荐写在其 HTML 文件同目录的同名 .js 文件中--><script src="component.js"></script><!-- 组件 UI 结构完全是普通的 HTML、JavaScript 表达式--><div> 现在是 ${(new Date()).toLocaleString()} <slot name="Slot_1" /></div> (一)JavaScript 模块无论 EWA 引擎本身,还是 EWA 组件的 JS 代码,均遵循 AMD 规范,其必要格式如下 —— require([ 'jquery', 'Module_1', 'Module_N', 'EasyWebApp'], function ($, Module_1, Module_N, EWA) { // 获取已初始化的 WebApp 单例 var iWebApp = new EWA(); EWA.component(function (iData) { // iData 是与组件 HTML 并行加载的 JSON // 此处的 this 是自动创建好的 VM 对象 var VM = this; iData.handler_1 = function () { // 回调函数也可以作为数据的一部分,用同样的模板语法绑定到 HTML 上 // 此处的 this 还是 VM 对象 this.xxx = 'yyy'; }; // 若你改变了传入的数据对象的引用,就必须 return 新的对象 iData = $.extend({ }, iData); return iData; });}); EWA 引擎会自动用它返回的数据对象来更新 VM。 (二)官方组件【声明式事件】声明式事件绑定的统一形式:
内置事件
事件接口
上述 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论