HTML5单页框架View.js介绍

什么是单页应用
单页应用,是指将用户视觉上的多个页面在技术上使用一个载体来实现的应用。

换句话来讲,用户视觉效果,与技术实现的载体,并不是一定要一一对应的。采取哪种技术方案,取决于产品设计、技术组成以及方案之间的优劣平衡。
放到 Web 前端环境中,这个承载了多个视觉效果的载体,就是 html 文件(或 asp,jsp 等)。

为便于描述,本文将使用多个术语。其名称及对应的含义如下所示:

页面:技术上的一个html文件;
视图:视觉上的一页内容;
初步实现单页应用
直观效果的单页应用,其实现过程其实并不复杂。
我们可以使用 div 或 section 等标签承载视图的展现,并通过脚本实现特定视图的呈现与隐藏。例如:

<!DOCTYPE HTML>
<html>
<head>...</head>
<body>
	<div id = "view1" class = "view">page1</div>
	<div id = "view2" class = "view">page2</div>
</body>
</html>
.view{
	display: none;
}
.view.active{
	display: block;
}
var find = function(selector){
    return document.querySelector(selector);
};

find(".view.active").classList.remove("active");
find("#view2.view").classList.add("active");

这可能是最简单的单页应用了。

和其它框架相比,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");// --> G01
    goodsId = View.getActiveViewOption("goodsId");// --> G02
    goodsId = 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}

  

  

  

  

原文地址:https://www.cnblogs.com/lgx5/p/11102264.html

时间: 2024-10-14 02:52:35

HTML5单页框架View.js介绍的相关文章

HTML5网站大观:15个精美的 HTML5 单页网站作品欣赏

HTML5 是现在Web开发领域的热点,更多的开发人员开始使用HTML5来开发交互性强.效果出众的Web应用和游戏.今天,本文收集了15个精美的 HTML5 单页网站作品,让大家感受一下 HTML5 的魅力,一起欣赏. Digitalhands Hellocarbon Morehazards Bokicabo Mindepic Tejpotter Unfold Shweplantis Vertaaverkkoja Sitesprouter (web前端学习交流群:328058344 禁止闲聊,非

SEO黑页以及门页框架和JS跳转实现方法

在去年大家还在针对第三方博客狂轰乱炸,比如:webs.com.blogspot.com.weebly.com主要是因为本身博客平台的权重,再就是低廉的成本,主需要注册,没有域名和服务器的投入.排名也非常好上,实现这种门页的方法也是五花八门,比如:利用JS设置从搜索引擎来路直接跳转的,嵌入框架的,调用主站代码的. 但是今天google几次算法的调整之后,这些第三方平台的权重被削弱了,也很少有这样的平台会有很好的排名,以往有的一些中上词,几乎占满前三页.面对这种情况外贸SEOer们怎么办?不做门页了

【单页应用之通信机制】view之间应该如何通信

前言 在单页应用中,view与view之间的通信机制一直是一个重点,因为单页应用的所有操作以及状态管理全部发生在一个页面上 没有很好的组织的话很容易就乱了,就算表面上看起来没有问题,事实上会有各种隐忧,各种坑等着你去跳 最初就没有一定理论上的支撑,极有可能是这么一种情况: ① 需求下来了,搞一个demo做交待 ② 发现基本满足很满意,于是直接在demo中做调整 上面的做法本身没有什么问题,问题发生在后期 ③ 在demo调整后应用到了实际业务中,发现很多地方有问题,于是见一个坑解决一个坑 ④ 到最

精品素材:WALK &amp; RIDE 单页网站模板下载

今天,很高兴能向大家分享一个响应式的,简约风格的 HTML5 单页网站模板.Walk & Ride 这款单页网站模板是现代风格的网页模板,简洁干净,像素完美,特别适合用于推广移动 APP 应用程序,当然这款模板能够被改为任何用途. 在线演示      立即下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款

单页网站不是梦,几款国外的单页网站创建工具

单页网站已经流行很久了,受到很多人的喜爱.从立体动感的视差滚动效果和流畅的动画到固定和干净的菜单,你会发现单页网站的效果真的很酷! 在这篇文章中,我们寻找了一些真正好用的单页网站创建工具分享给大家.这些工具对于那些想要一个方便的方法来创建单页网站的在线作品集网站或引导页面的人来说很有用.这些服务的最酷??的部分是,他们开箱即用的精美主题可以让制作出来的网页有华丽的外观. 您可能感兴趣的相关文章 经典网页设计:超炫动画效果单页网站 30个独具匠心的精美单页网站设计案例 25个以全屏照片为背景的精美

【单页应用】view与model相关梳理

前情回顾 根据之前的学习,我们形成了一个view与一个messageCenterview这块来说又内建了一套mvc的东西,我们这里来理一下首先View一层由三部分组成:① view② dataAdpter③ viewController view一块两个重要数据是模板以及对应data,一个状态机status这里view只负责根据状态取出对应的模板,而后根据传入的数据返回组装好的html这里一个view多种状态是什么意思呢?比如我有一个组件,但是里面有一圈数据是需要Ajax请求的,所以我的view

html5手机Web单页应用实践--起点移动阅读

一开始以hybrid形式做了一个android的小说阅读客户端,叫4G阅读.而后由于业务需求,要迅速实现纯手机html5 版的,所以就直接在原先客户端内内嵌的网页进行改版,快速实现以后在优化的过程中发现越改越多越改越多- 注意此web应用只支持android及iphone内的浏览器,及PC或mac上的chrome,safari,firefox等支持html5的浏览器.IE10以上浏览器 这算是试验版了吧,以前没这么弄过.. 手机访问http://crapi.4gshu.com:8096/4g-r

【单页应用】view与model相关梳理(转载)

[单页应用]view与model相关梳理 前情回顾 根据之前的学习,我们形成了一个view与一个messageCenterview这块来说又内建了一套mvc的东西,我们这里来理一下首先View一层由三部分组成:① view② dataAdpter③ viewController view一块两个重要数据是模板以及对应data,一个状态机status这里view只负责根据状态取出对应的模板,而后根据传入的数据返回组装好的html这里一个view多种状态是什么意思呢?比如我有一个组件,但是里面有一圈

通过Web Api 和 Angular.js 构建单页面的web 程序

在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的页面,比如说:用户通过一个连接导航到一个页面,会发送一个请求到服务器端,接下来服务器将会发送一个新的页面给浏览器. 但是在单页面应用程序中,整个页面只是在浏览器一开始请求的时候才会加载,接下来的请求,下来的交互请求都是通过ajax 来完成的,这就意味着只有部分的页面会更新,并不需要去加载整个的页面,这就减少了对用户操作的响应时间,从而使用户有一个更流畅的体验.但是在传统