Video sharing foreground Experience Summary

Document directory

• 1. Front-end Organization Framework
• 2. Use Micro-Templating
• 3. refactoring
• 4. Refresh
• 5. geturlparam

1. Front-end Organization Framework

Use the jquery Library as the basic library. At the same time, public variables and public methods are defined in public. js. Public. js also acts as a public library and starts loading on each page. Each other page card corresponds to a JS file.

2. Use Micro-Templating

By using the micro-templating method, you can combine the restructured template file with JS variables to dynamically render pages. At the same time, micro-templating can be used to divide pages into different modules.

Micro-templating source code:

// 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. refactoring

(1) In order to narrow down the browser window, the screen is displayed in the content area rather than the background area. Set the width of the container to 100%, and fix the width of the content area (for example, 960px ).

(2) For pages with pure float elements, in order to support the background, a clearer class element must be placed under the floiner of the float element. In this way, the page height can be dynamically increased. The clearer class is defined as follows:

.clearer{clear:both;display:block;line-height:1px;font-size:0;height:0;overflow;hidden}

4. Refresh

When switching between different page cards, to ensure page refreshing, you can add a random number after the jump URL as the parameter. After the browser detects the parameter change, the page is forcibly refreshed. (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] : '';}