Write high-quality code, study notes--javascript

First, good programming habits

1. Avoid JS conflicts

1> uses anonymous functions to package scripts, reduce global variables, and avoid collisions.

2> Team Project It is necessary to add the necessary annotations:

includes features, author name, author contact, writing time.

3> uses namespaces as a communication between different functions--using a variable of the {} object type as a global variable

<script type= "Text/javascript" >var GLOBAL = {}; Gloabl.namespace = function (str) {    var arr = Atr.split ("."), o = GLOBAL;    for (i = (arr[0] = = "Alobal"))? 1:0; i < arr.length; i++) {    o[arr[i]] = 0[arr[i]] | | {};    o = o[arr[i]];</script>

</pre><pre name= "code" class= "HTML" ><script> (function () {<span></span> Global.namespace ("A.cat"); <span></span>global. A.cat.name = "Xiaohua"; <span></span>global. A.cat.move = function () {}}) ();

</pre><pre name= "code" class= "HTML" ></script>

4>css is placed on the page header, and JavaScript is placed at the end of the page so that the loading of the script does not block the loading of the page HTML.

Ii. Hierarchies and libraries

1. Layering: base, common, Page three layer

The 1>base layer provides an interface for common page, including JavaScript differences under different browsers.

Roughly divided into three pieces: 1. Operation DOM2. Operation Event 3. Provides functions that are not provided by native JavaScript.

For example: penetration density, ie through the filter implementation, ordinary browser such as Firefox through the opacity implementation:

</pre><pre name= "code" class= "HTML" ><script  type= "Text/javascript" ><span></span >var test = document.getElementById ("id01"); <span></span>if (document.all) {<span></span >test.style.filter = ' alpha (opacity = +) '; <span></span>else {<span></span> Test.style.opacity = 0.2;<span></span>}</script>

<span style= "font-family:arial, Helvetica, Sans-serif;" ></span>

The 2>common layer provides a larger component that can be split into individual files by function

the 3>page layer belongs to the application level

Three, practical skills

1. Naming tips

<div class= "tab" ><ul><li>menu1</li><li>menu2</li><li>menu3</li> <span style= "White-space:pre" ></span></ul></div>

Set the hooks for Li in the code above, in order to represent the ID more like the tab component's private naming:

<div class= "tab" ><ul><li id= "tab-menu1" >menu1</li><li id= "TAB-MENU2" >menu2</li ><li id= "Tab-menu3" >menu3</li></ul></div>

Write high-quality code, study notes--javascript