视频分享前台经验总结

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] : '';
}