五、HTML5单页框架View.js介绍 - View.js的比较优势
不需要 Npm 的单页应用框架:
View.js - http://view-js.com
“比较优势”,是经济学的术语,是指生产者可以使用更低的机会成本生产产品或提供服务的的优势。
和其它框架相比,View.js为单页应用开发提供了的以下几个关键特性彰显了它的比较优势:
- 无需配置和开发,视图导航开箱可用
- 允许在视图切换时传递任意类型的参数
- 允许自定义视图切换动画
- 允许自定义视图配置
- 以事件驱动地形式完成视图功能的开发
View.js是为了简化移动端单页应用的功能开发而创建的,web前端开发者可以继续沿用既有技术栈,不会因为使用view.js而面临较大的冲击。
需要注意的是,和vue不同,对于使用View.js完成的单页应用,其HTML文档仍然由HTML、CSS和JS组成。开发者一如既往地需要手动建立html、css和js文件,并手动完成资源的引用。因为View.js的舞台,是浏览器装载文档之后的运行时环境。
视图导航
视图导航,在视图切换时由View.js自动完成。下面是一个例子
/* 切换至商品详情视图 */
View.navTo("goods-detail", {options: {goodsId: "G01"}
});
视图切换后,页面URL将自动变更为:http://domain:port/context/index.html#goods-detail!goodsId=G01。
View.js当前仅支持hash形式的地址表示。
视图传参
View.js允许以视图为单位拆分任务,执行多人协作。视图之间使用参数完成协作。参数在进行视图切换时传递,如下所示:
View.navTo("goods-detail", {options: {/* 使用options传递的参数将反馈到地址栏中,因此只能传递字符串类型的参数 */goodsId: "G01"}
});/* ---------------------------------- */View.navTo("delivery-address-list", {params: {/* 使用params传递的参数不会反馈到地址栏中,因此可以是任意被浏览器所支持的类型 */selectCallback: function(selectedAddress){//...}}
});/* ---------------------------------- */View.navTo("goods-detail", {params: {goodsId: "G01",},options: {goodsId: "G02"}
});var view = View.ofId("goods-detail");
view.on("enter", function(){var goodsId = view.getParameter("goodsId");// --> G01goodsId = View.getActiveViewOption("goodsId");// --> G02goodsId = view.seekParameter("goodsId");// --> G01
});
视图配置
多数情况下,一个视图的表现和行为是固定的一种。但对于软件提供商,其同一产品在被多个客户购买时,会遇到“不同客户有不同需求,拒绝需求没收入,答应需求成本高”的窘境。而不同需求的差异点通常也并不高,可能也就只有10-30%左右的差别。但因为10%的差别,就要把源码硬拷贝2份,对于软件提供商而言,成本无疑高了许多。
View.js考虑到了这一点。
通过引入视图配置,开发者可以将视图开发为多种形态的综合体,最终以视图配置的方式指定视图的具体工作模式或表现形式。如下所示:
var view = View.ofId("register");/* 默认配置:密码最少位数 */
view.config.get("password-min-length").setValue(6);/* 默认配置:密码最多位数 */
view.config.get("password-max-length").setValue(20);/* -------------------------------------------- */view.find(".submit").addEventListener("click", function(){var pwd = pwdObj.value.trim();var minLen = view.config.get("password-min-length").getValue(),maxLen = view.config.get("password-max-length").getValue();if(pwd.length < min){alert("密码长度不能少于" + minLen + "位");return;}if(pwd.length > max){alert("密码长度不能多于" + maxLen + "位");return;}
});/* -------------------------------------------- *//* 客户A的视图配置 *//* 重载既有配置:密码最少位数 */
view.config.get("password-min-length").setValue(10, true);/* 第二个参数用于复写可能已经存在的值,如果不传且已经有值,则赋值无效,相当于什么也没做 *//* 重载默认配置:密码最多位数 */
view.config.get("password-max-length").setValue(20, true);/* -------------------------------------------- *//* 客户B的视图配置 *//* 重载既有配置:密码最少位数 */
view.config.get("password-min-length").setValue(4, true);/* 重载默认配置:密码最多位数 */
view.config.get("password-max-length").setValue(10, true);
事件驱动
开发者通过监听视图的相关事件来决定执行特定操作的时机。View.js为每个视图实例预制了如下几个事件:
- ready - 视图就绪,在视图第一次进入时触发;
- beforeenter - 视图即将进入
- enter - 视图进入
- afterenter - 视图进入后
- leave - 视图离开
除此之外,开发者还可以根据自己的业务需要,自行发起并消费事件,如下所示:
var view = View.ofId("myView");
view.on("myevent", function(e){view.logger.debug("Event name: {}, event data: {}", e.name, e.data);
});
//…
view.fire("myevent", {a: 1});//-> 0918 10:20:54 [View#myView]: Event name: null, event data: {"a":1}
引入即用
View.js并不借助npm才能使用,开发者可以引入对应的js和css文件即可开始使用。
[第一篇]
[上一篇 - 单页应用的优点] [下一篇 - 注意事项]
五、HTML5单页框架View.js介绍 - View.js的比较优势相关推荐
- HTML5 单页应用/框架 - View.js介绍
单页应用框架: View.js - http://view-js.com 什么是单页应用 单页应用,是指将用户视觉上的多个页面在技术上使用一个载体来实现的应用. 换句话来讲,用户视觉效果,与技术实现的 ...
- HTML5网站大观:15个精美的 HTML5 单页网站作品欣赏
HTML5 是现在Web开发领域的热点,更多的开发人员开始使用HTML5来开发交互性强.效果出众的Web应用和游戏.今天,本文收集了15个精美的 HTML5 单页网站作品,让大家感受一下 HTML5 ...
- 15个精美的 HTML5 单页网站作品欣赏
HTML5 是现在Web开发领域的热点,更多的开发人员开始使用HTML5来开发交互性强.效果出众的Web应用和游戏.今天,本文收集了15个精美的 HTML5 单页网站作品,让大家感受一下 HTML5 ...
- spa:单页web应用(介绍,实现思路及技术点,路由,router-link相关属性)
SPA是什么 单页Web应用(single page application,SPA),就是只有一个Web页面的应用, 是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序 ...
- html5 单页动画,超炫的动画效果单页网站
如果一个网站的内容不是很多,那么制作成单页网站(Single Page Websites)的形式是一个不错的选择,把所有的内容都展示在一个页面中,这样访客就不需要跳转到其它的页面,分享一组在页面滚动时 ...
- 开发html5单页用什么框架,GitHub - mmcai/single-page-react-h5: 基于React框架的单页活动框架,可以基于此代码上进行相关的H5活动等相关内容的开发...
single-page-react-h5 基于React的H5活动页面脚手架,助力你在1小时就可以完成一个H5活动页面,这里已经帮您做了如下几个基本事情 页面缩放,基于宽度为750px的视觉稿,当然您 ...
- 如何在单页应用程序Angular 7中使用FastReport Core Web报表
2019独角兽企业重金招聘Python工程师标准>>> 下载FastReport.Net最新版本 单页应用程序的概念正在寻找越来越多的支持者.最着名的单页框架之一是Angular,它 ...
- (2)Node.js介绍
一.Node.js中文官网 https://nodejs.org/zh-cn/ 二.Node.js介绍 Node.js 是除了浏览器之外的,另一个 JavaScript 的运行环境. 我们知道,Jav ...
- 单页应用和多页应用的区别
一.定义区分 [1.1]单页应用 单页应用又称 SPA(Single Page Application)指的是使用单个 HTML 完成多个页面切换和功能的应用.这些应用只有一个 html 文件作为入口 ...
最新文章
- 客快物流大数据项目(八):Docker的安装和启动
- 利用CodeBERT,这个VS Code扩展可以自动生成Python文档字符串
- Boost库实现线程池学习及线程实现的异步调用
- PHP扩展CURL的用法详解
- 5G NR中的两套绝对频域位置:GSCN和ARFCN
- 如何调用 DLL 中的函数
- 改变图标颜色_LOL设计师宣布修改装备图标:提高清晰度、颜色差异化
- System.getProperty()参数
- java 指针 引用_java中的引用与c中的指针
- 百度以侵犯商业秘密起诉前高管王劲 索赔5000万 内附王劲离职承诺函
- 旅行商问题近似解——NP完全问题
- 微信公众号的订阅号和服务号权限区别
- 王思聪喜欢的女生类型是这样的?
- O3 Interchange全面讲解
- Leetcode 368. Largest Divisible Subset
- #八、用双波不干涉理论推导出的最简化的股市数学拟合模型
- java 祖先_java – 家谱祖先查找算法
- 高中数学40分怎么办_高二了数学40多分还有救吗?
- airflow使用macros
- python图片转文字easyocr_OCR识别软件将图片转文字的具体方法