javascript集錦(一)

javascript集錦(一)：

• javascript做用域:

function myFun(){
   test =  123;
}
myFun(); //執行myFun後, test在myFun中沒有聲明var, 被視做全局變量
alert(test); //123

• javascript閉包：閉包能夠記憶建立它的上下文。

/**
 * 利用閉包實現公有訪問
 */
var Counter = (function(){
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };   
})(); //最後這個()就調用一次function(){}匿名函數了, 全部Counter爲return後那個對象

alert(Counter.value()); /* Alerts 0 */
Counter.increment();
Counter.increment();
alert(Counter.value()); /* Alerts 2 */
Counter.decrement();
alert(Counter.value()); /* Alerts 1 */

• 獲取網頁大小：

//1.當前可看見的頁面大小
function pageArea(){
　　　　if (document.compatMode == "BackCompat"){ //ie6的quirks模式
　　　　　　return {
　　　　　　　　width: document.body.clientWidth,
　　　　　　　　height: document.body.clientHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.clientWidth,
　　　　　　　　height: document.documentElement.clientHeight
　　　　　　}
　　　　}
}

/* 2.包括滾動條在內的頁面大, 當網頁沒有滾動條時,
 * clientWidth/scrollWidth, clientHeight/clientScrollHeight
 * 根據瀏覽器有可能不等
 */
function pageAreaWithScroll(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: document.body.scrollWidth,
　　　　　　　　height: document.body.scrollHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.scrollWidth,
　　　　　　　　height: document.documentElement.scrollHeight
　　　　　　}
　　　　}
}

• 獲取網頁元素絕對位置：相對於整個網頁的左上角的座標

/**
 * 獲取元素左偏移量,對錶格,iframe不適用
 */
function getElementLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var parent = element.offsetParent;
　　　　while (parent !== null){
　　　　　　actualLeft += parent.offsetLeft;
　　　　　　parent = parent.offsetParent;
　　　　}
　　　　return actualLeft;
}

/**
 * 獲取元素上偏移量,對錶格,iframe不適用
 */
function getElementTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var parent = element.offsetParent;
　　　　while (parent !== null){
　　　　　　actualTop += parent.offsetTop;
　　　　　　parent = parent.offsetParent;
　　　　}
　　　　return actualTop;
}

• 獲取元素相對位置：相對於瀏覽器左上角的座標

function getElementLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var parent = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualLeft += parent.offsetLeft;
　　　　　　parent = parent.offsetParent;
　　　　}
　　　　var elementScrollLeft;
　　　　if (document.compatMode == "BackCompat"){
　　　　　　elementScrollLeft=document.body.scrollLeft;
　　　　} else {
　　　　　　elementScrollLeft=document.documentElement.scrollLeft; 
　　　　}
　　　　return actualLeft-elementScrollLeft;
}

function getElementTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var parent = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualTop += parent.offsetTop;
　　　　　　parent = parent.offsetParent;
　　　　}
　　　　 if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollTop=document.body.scrollTop;
　　　　} else {
　　　　　　var elementScrollTop=document.documentElement.scrollTop; 
　　　　}
　　　　return actualTop-elementScrollTop;
}

• 方便獲取元素位置(相對於瀏覽器左上角)：

//IE、Firefox 3.0+、Opera 9.5+, Chrome
element.getBoundingClientRect().left
element.getBoundingClientRect().top
element.getBoundingClientRect().bottom
element.getBoundingClientRect().right
element.getBoundingClientRect().width
element.getBoundingClientRect().height

• apply函數：改變函數的調用對象

var x = 1;
var obj = {};
obj.x = 2;
obj.fun1 = function(){
   alert(this.x);
}
obj.fun1.apply(); //1, 默認apply對象是全局對象
obj.fun1.apply(obj); //2, obj對象

//也能夠加入第二個參數, 必須爲數組; 於call(currentObject, arg1, arg2, ...)是用可變長參數
apply(currentObject, args[]);

• javascript構造函數模式：

var Person = function(name, age){
    this.name = name;
    this.age = age;

    this.fun1 = function(){ ... }
}

//建立一個對象
var p = new Person("p1", 100);

• javascript繼承：

/**
 * 利用prototype實現繼承
 */
var Extend = (Sub, Super) {
　　　　var F = function(){};
　　　　F.prototype = Super.prototype;
　　　　Sub.prototype = new F();
　　　　Sub.prototype.constructor = Sub;
　　　　Sub.uber = Super.prototype; //備用屬性
}

• javascript深拷貝：

function DeepClone(p, c) {
　　　　var c = c || {};
　　　　for (var i in p) {
　　　　　　if (typeof p[i] === 'object') {
　　　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
　　　　　　　　deepCopy(p[i], c[i]);
　　　　　　} else {
　　　　　　　　　c[i] = p[i];
　　　　　　}
　　　　}
　　　　return c;
}

//
var obj2 = DeepClone(obj1); //obj1 clone to obj2 deeply

• 判斷對象是否存在：

//1.
if (!myObj) {
　　var myObj = {};
}

//2.
if (!window.myObj) {
　　window.myObj = {};
}

//3.
if (!this.myObj) {
　　this.myObj = {};
}

//4.建議使用，判斷變量是否存在
if (typeof myObj == "undefined") {
　　var myObj = {};
}

//5.
if (myObj == undefined) {
　　var myObj = {};
}

//6.
if (myObj == null) {
　　var myObj = {};
}
//7.
if (!('myObj' in window)) {
　　window.myObj = {};
}

• 極簡主義建立對象

var Person = {
	createNew: function(n, a){
		var p = {
			name: n,
			age: a 
		};
		
		p.whoAmI = function(){
			alert(this.name);
		};
		
		return p;
	}
}

先到這裏。下次繼續。