1.前台组织框架
利用jQuery库作为基础库。同时,将公用变量及公用方法定义在public.js中。public.js也作为一个公用库,在每个页面开始载入。其他每一个页卡对应一个js文件。
2.使用Micro-Templating
通过使用Micro-Templating方法,可以将重构的模板文件与js变量相结合,从而能够动态渲染页面。同时,利用Micro-Templating,可以将页面划分为不同的模块。
Micro-Templating源码:
// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
var cache = {};
this.tmpl = function tmpl(str, data){
// Figure out if we're getting a template, or if we need to
// load the template - and be sure to cache the result.
var fn = !/\W/.test(str) ?
cache[str] = cache[str] ||
tmpl(document.getElementById(str).innerHTML) :
// Generate a reusable function that will serve as a template
// generator (and which will be cached).
new Function("obj",
"var p=[],print=function(){p.push.apply(p,arguments);};" +
// Introduce the data as local variables using with(){}
"with(obj){p.push('" +
// Convert the template into pure JavaScript
str
.replace(/[\r\t\n]/g, " ")
.split("<%").join("\t")
.replace(/((^|%>)[^\t]*)'/g, "$1\r")
.replace(/\t=(.*?)%>/g, "',$1,'")
.split("\t").join("');")
.split("%>").join("p.push('")
.split("\r").join("\\'")
+ "');}return p.join('');");
// Provide some basic currying to the user
return data ? fn( data ) : fn;
};
})();
3.重构
(1)为了在用户缩小浏览器窗口时,屏幕显示定位于内容区而不是背景区。应该将container的width设为100%,然后将content区的width固定(比如:960px)。
(2)对于纯float元素的页面,为了能够撑开背景,需要在float元素的container下面紧接一个clearer类元素。这样就可实现页面的height动态增长。clearer类定义如下:
.clearer{
clear:both;
display:block;
line-height:1px;
font-size:0;
height:0;
overflow;hidden
}
4.刷新
在不同的页卡之间切换的时候,为了能够保证页面的刷新,可以在跳转的url后面添加一个随机数作为参数,浏览器在检测到参数变化后,会强制刷新一次页面。(url?Math.random());
5.getUrlParam
getUrlParam : function (name) {
var re = new RegExp('(?:\\?|#|&)' + name + '=([^&]*)(?:$|&|#)', 'i');
var m = re.exec(window.location.href);
return m ? m[1] : '';
}