Tag Archives: 整站ajax

Hello World 业界杂谈

整站ajax中url的处理

2012 年 01 月 30 日 – 上午 2:50

早在两年前，互联网中的网页数量就已超过了1万亿，并且，每天还会增加数十亿。虽然是如此浩瀚的世界，我们却可以通过url轻而易举的找到每一个页面，可见url对于网络世界时多么的重要。

随着浏览器的进步和对用户体验要求的提升，整站ajax之类的一站式前端应用正在逐步取代传统的一个url对一个页面的展示方式。在整站ajax中，数个模块在一个url下，采用无刷新的方式切换，通过减少页面刷新有效的提升了用户体验，但也带来了一些问题：

1. 某些用户习惯根据url判断自己所在的位置，如果明明点击了链接，页面变化了，url却没有变化，用户会比较晕

2. 用户保存书签后，在打开这个书签，得到的可能并不是自己想要的内容

3. 模块间切换后，不能使用浏览器的回退键退回去

针对上述问题，比较简单的方式是使用锚点做标记：每个模块切换时，锚点都会有所变化，比如：/index#list，/index#edit，这样，可以有效的解决上面提到的第1个问题；对第2个问题，前端代码初始化时根据当前页面的hash做些处理也就行了；第3个问题稍微麻烦一些，需要监控页面url的变化。

浏览器不可以给地址栏添加监听时间，只能通过定时读取location.hash/href来判断锚点是否发生了变化。定时长度不能太长，否则影响用户体验，也不能太频，会耗太多资源。这种定时的方式虽然很土，但出了“坚挺”浏览器是否回退、前进以外，却还可以减少很多绑定链接click的操作：只需要给按钮链接的href加上锚点，将参数写在锚点里，用户点击这个url时，锚点变化被定时程序“监听”到，就可以执行相应的逻辑（还顺道解决了按钮重复点击的问题，一举多得呀 :-) ）。关于如何把button按钮转变为锚点链接的点击可以参考本人以前的博文：js触发链接。

不过使用定时方式“监听”浏览器回退，还有一个无法解决的缺陷（只是本人还未发现解决方法），IE6/7的锚点跳转记录不会进入history对象，也就是在IE6/7里，有A页面进入B页面后，B页面内由/B跳到/B#1，再跳到/B#2，再“回退”，也还是会回到A页面，无法回到中间的/B跳和/B#1…….IE而已，可以暂时不去理它。

前面说，使用方式监听地址栏变化有些土，那么，有跟好的办法吗？

之前转发的一篇博文(使用ajax和history.pushState无刷新改变页面URL)里提到了html5的一个新特性：可以注册“popstate”事件监听url的变化，我们可把前面的定时“监听”稍作改进，如果浏览器支持popstate，就使用popstate，如果不支持，在使用定时。本人测试表明，firefox、chrome、safari支持popstate事件，IE系、以及opera不支持。

———-End

Tags , | Permalink | Comment (1)
Hello World 日志

一页一世界

2011 年 10 月 07 日 – 下午 2:17

一个多月前，去百度技术沙龙听了全站式ajax(er)框架的介绍后，曾觉得和自己之前做的东西差不多，还在日志里结尾处豪迈的说了一句“大家都是探路者”，可是，后来看了er框架的源码后，自己就只有自惭形秽了~~虽然基本的思路差不多，但是除了这个“基本思路”外，人家都要比咱完善的多，特别是在代码的写法上，完全是成熟的js的写法，可是回顾我自己之前做的东西，还处在用java的思路写js的水平上；另外就是mvc模式的应用上，层次分的也不清晰，和业务逻辑结合的太紧密，让别人只有在十分了解框架的原理后，才能使用他，这样用起来很费劲。

趁着十一假期的时间，结合这之前的思路，将这个框架再次整理了一遍，并给他去了一个名字：jLeaf。leaf，叶子，取“页”与“叶”的谐音。

目前框架基本功能已经整理完成，不过800多行代码（和er的十万行代码差远了），但已经是一个相对比较完善的前端mvc框架了：

1.  仿照cakephp，分成view/controller/component/db/util五种组件，使用者只要根据业务逻辑去实现这五种组件，不需要关注其他的部分

2.  仿照spring添加了bean池；组件内调用其他组件时，直接“this.xxx”就可以了

3.  添加了filter模块，使用这可以添加beforeFilter和afterFilter，框架本身和业务逻辑是完全分离的，使用filter完成之前使用header完成的功能

4.  添加了debug模块，可以将log和error显示到页面上

本来想利用它给wp做一个“单页模式”，但可惜时间有限，只做了分页，等以后做好了再拿给大家看吧~~

 

Tags , | Permalink | Comments (3)
Hello World

js类如何自动加载组件

2011 年 08 月 31 日 – 下午 3:17

当前端js代码越来越多越来越复杂时，按逻辑分层就会变得势在必行，否则代码会逐渐变乱，维护成本就会越来越高。之前曾做个一个复杂的模块，大部分逻辑都是在前端实现的，其中有一个两千多行的js文件，ajax数据访问、业务逻辑、html生成全都搅在一起…..每次改动都是一场噩梦…..往事不堪回首呀

扯远了，当对代码分层后，各层之间的互相调用也会是一个问题，本文介绍的方法，仿照cakephp的方式，提供了一种为controller层自动添加component组件的思路

首先，是Controller的抽象类，供所有的Controller继承，它的主要功能是为controller的实现类添加它们所需要的component等组件

controller = {};
controller.AbstractController = function(){
	function AbstractController(){
		if(this.components.length > 0){
			for(var i = 0; i < this.components.length; i++){
				var compName = this.components[i];
				if(component[compName]){
					this[compName] = new component[compName]();
				}
			}
		}
	}
	return AbstractController;
}();

下面视一个controller的一个实现，通过this.components定义自己需要加载的component,然后通过call方式继承AbstractController,让AbstractController完成component的加载。然后在下面的方法中，通过this.xxxComponent的方式调用该component

controller.ListController = function(){
	function ListController(){
		this.components = ['newsComponent'];
		controller.AbstractController.call(this);
	}
	ListController.prototype = {
		listNews : function(){
			var news = this.newsComponent.getNewsList();
			//TODO:...
		}
	}
 
	return ListController;
}();

newsComponent

component = {};
component.newsComponent = function(){
	function NewsComponent(){
 
	}
	NewsComponent.prototype = {
		getNewsList : function(){
			alert('call function : newsComponent.getNewsList()');
		}
	}
	return NewsComponent;
}();

测试

var listCont = new controller.ListController();
listCont.listNews();//alert

另外，对于比较大的前端应用，可以构造一个组件池，在实例化一个component后，将其放到组件池内，下次其它controller再要使用这个component时，直接从组件池中拿出来用就行了，可以省去很多资源

Tags , | Permalink | Comment (1)
Hello World 业界杂谈

百度技术沙龙

2011 年 08 月 21 日 – 下午 1:44

昨天下午跑去参加的百度技术沙龙，之所以回去，是因为这一期的主题是“全站式ajax应用”，正是自己近半年一直在做的东西—-闭门造车这么久，终于有机会看看别人是怎么做的了。
两场讲座，一个是百度的人在讲自己的一个前端框架，领一个是IBM的的人在讲Dojo。
百度董睿所讲的ER框架(这里)，用来做所谓整站式ajax应用，在前端实现了MVC的分离、url的前进后退、参数的传递、html模版等等，以及DOM操作～～～听他刚开始讲ER框架用途和亮点时，自己突然，第一次有了一种站在了技术最前沿的感觉—-几个月前为空间通讯录做的前端框架，实现的正是这套东西，MVC/url参数传递等的思想方式与ER很类似，不同的是DOM操作是基于jquery的，另外，为了应对页面灵活多变的显示方式，没有使用html模版。
不过听了ER的一些做法，自己还是受了一些启发的，比如url参数传递方式可以更精简，MVC分层可以更清晰，引入html模版降低使用难度和维护成本等等～～～四个小时的公车算是没白坐吧。
另一场关于Dojo的讲座(这里)—-本来主要式冲着这一场去的—-讲的有些泛泛，基本上就是在推广Dojo，感觉没有多少实质性的内容。
第一次参加这种行业内的技术讲座，本来以为会有更权威的人讲解怎么做 “全站式ajax应用”，但实际两位都只是在介绍、推广自己的东西，所以，刚听完的时候感觉有些失望。但后来想了想，这种技术分享，也只能做到什么程度～～～大家只是将自己的实践经验推广给别人，没有所谓的权威，没有绝对的对与错，大家都是探路者。。。

Tags | Permalink | Comment (0)