前臺技術容易上手，掌握主要賬務一些細碎的技術點會給開發帶來更大的便利。本文章持續更新，用於記錄常見的javascript技術點。

1、javascript面向物件中繼承實現

	function Animal(name) {
		this.name = name;
	}
	Animal.prototype.getName = function() {
		alert(this.name)
	}

	function Dog() {};
	Dog.prototype = new Animal("Buddy");
	Dog.prototype.constructor = Dog;
	var dog = new Dog();
 

2、寫出3個使用this的典型應用

（1）在html元素事件屬性中使用，如 

<input type=”button” onclick=”showInfo(this);” value=”點選一下”/>

（2）建構函式 

function Animal(name, color) {
   this.name = name;
   this.color = color;
}

（3） 

<input type="button" id="text" value="點選一下" />
<script type="text/javascript">
var btn = document.getElementById("text");
btn.onclick = function() {
alert(this.value); //此處的this是按鈕元素
}
</script>
 

（4）CSS expression表示式中使用this關鍵字 

<table width="100px" height="100px">
  <tr>
    <td>
    <div style="width:expression(this.parentNode.width);">div element</div>
    </td>
  </tr>
</table>

3、JavaScript中如何對一個物件進行深度clone

function cloneObject(o) {
	if (!o || 'object' !== typeof o) {
		return o;
	}
	var c = 'function' === typeof o.pop ? [] : {};
	var p, v;
	for (p in o) {
		if (o.hasOwnProperty(p)) {
			v = o[p];
			if (v && 'object' === typeof v) {
				c[p] = Ext.ux.clone(v);
			} else {
				c[p] = v;
			}
		}
	}
	return c;
};
 

4、ajax是什麼? ajax的互動模型? 同步和非同步的區別? 如何解決跨域問題?

5、什麼是閉包？下面這個ul，如何點選每一列的時候alert其index?

<ul id=”test”>
<li>這是第一條</li>
<li>這是第二條</li>
<li>這是第三條</li>
</ul>

(function A() {
   var index = 0;
   var ul = document.getElementById("test");
   var obj = {};
   for (var i = 0, l = ul.childNodes.length; i < l; i++) {
      if (ul.childNodes[i].nodeName.toLowerCase() == "li") {
         var li = ul.childNodes[i];
         li.onclick = function() {
            index++;
            alert(index);
         }
      }
   }
})();

6、請給出非同步載入js方案，不少於兩種

function loadScript(url, callback) {
	var script = document.createElement("script")
	script.type = "text/javascript";
	if (script.readyState) { //IE
		script.onreadystatechange = function() {
			if (script.readyState == "loaded" ||
				script.readyState == "complete") {
				script.onreadystatechange = null;
				callback();
			}
		};
	} else { //Others: Firefox, Safari, Chrome, and Opera
		script.onload = function() {
			callback();
		};
	}
	script.src = url;
	document.body.appendChild(script);
}

7、請設計一套方案，用於確保頁面中JS載入完全。

var n = document.createElement("script");
n.type = "text/javascript";
//以上省略部分程式碼
//ie支援script的readystatechange屬性(IE support the readystatechange event for script and css nodes)
if (ua.ie) {
	n.onreadystatechange = function() {
		var rs = this.readyState;
		if ('loaded' === rs || 'complete' === rs) {
			n.onreadystatechange = null;
			f(id, url); //回撥函式
		}
	};
	//省略部分程式碼
	//safari 3.x supports the load event for script nodes(DOM2)
	n.addEventListener('load', function() {
		f(id, url);
	});
	//firefox and opera support onload(but not dom2 in ff) handlers for
	//script nodes. opera, but no ff, support the onload event for link
	//nodes.
} else {
	n.onload = function() {
		f(id, url);
	};
}

8、js中如何定義class,如何擴充套件prototype?

9、documen.write和 innerHTML的區別

10、前端開發的優化問題