解惑之JavaScript

之前的文章說過講講JS，可博主很懶，一直沒動筆，今天有空就來水一下吧（本文只針對JS初階的，偶也很菜，講不出啥高端貨）

現如今JS發展的好快：TIOBE 2015年1月編程語言排行榜JavaScript奪得桂冠、2014年討論最多的編程語言:JavaScript居首位、蘋果將其引入OS X 10.10代替私有的AppleScript、還有如雨后春筍般的各種js框架和庫的出現或興起（AngularJS、Node.js。。。）種種跡象表明JS地位越來越高，學好它你的前途會更光明。

不扯了，正文↓

1、&&操作符

this.index == oBtn.length - 1 && (oDiv.style.cssText = "");

這一段像初學者有可能就會疑問了這個是啥意思啊，其實它等於

if((this.index)==oBtn.length-1){
    oDiv.style.cssText="";
}

看到這個大家肯定會恍然大悟，上面的簡寫就是利用了&&操作符，但閱讀起來不太方便，所以看大家自己的喜好了

2、for-in

window.onload = function ()
{
    var oLink = document.getElementsByTagName("link")[0];
    var oSkin = document.getElementById("skin").getElementsByTagName("li");
    
    for(var i = 0; i< oSkin.length; i++)
    {        
        oSkin[i].onclick = function ()
        {
            for(var p in oSkin) oSkin[p].className = "";
            this.className = "current";
            oLink['href'] = this.id + ".css";                
        }    
    }
    
};

上面的代碼是一個換膚的代碼，不難理解，估計會出現疑問的就在for(var p in oSkin) oSkin[p].className = ""這一句了，會搞不懂這個p代表啥，熟讀JS高程的會知道for-in語句是一種精准的迭代語句，可以用來枚舉對象的屬性，那上面就是把oSkin這個對象存在的屬性名賦值給變量P，這里的oSkin是一個HTMLCollection[li, li.current, li]，HTMLCollection 對象的行為和只讀數組一樣，所以可以使用 JavaScript 的方括號，通過編號或名稱索引一個 HTMLCollection 對象，這就解釋了上面。

3、var nameSpace=window.nameSpace||{}

這句話是邏輯或操作符的妙用，意思就是window.nameSpace如果存在就賦值給nameSpace,如果不存在就返回空對象{}，其實{}=new function nameSpace(){}，利用了邏輯或避免了給變量賦null或undefined值。

4、JS命名空間

JavaScript 中沒有顯式的命名空間定義，這就意味着所有對象都定義在一個全局共享的命名空間下面，因此過多的全局變量和函數很容易導致命名沖突。怎么解決呢？一種推薦使用匿名包裝器（自執行的匿名函數）來創建命名空間，這樣不僅可以防止命名沖突， 而且有利於程序的模塊化。

(function() {
    // 函數創建一個命名空間

    window.foo = function() {
        // 對外公開的函數，創建了閉包
    };

})(); // 立即執行此匿名函數

在一個由很多開發人員共同參與的大型應用程序中，過多的全局變量和函數很容易導致命名沖突。而通過創建私用作用域，每個開發人員既可以使用自己的變量，又不必擔心搞亂全局作用域（在匿名函數中定義任何變量，都會在執行結束時被銷毀）。

3和4的組合其實也可以構造出命名空間，通過類似JSON的結構也可以創造出命名空間（雖有點牽強，但作用達到了）

var namespace = {
    //類1
    class1: {
     
        //字段1
         field1: "<br/><br/>"
        //字段2
        ,field2: 12345
     
        //方法1
        ,method1: function(para) {
            document.write('e.g.1: namespace.class1.method1 para:' + para + this.field1);
        }
        //方法2
        ,method2: function(para) {
            //還可以調用本類中的方法write，只要在前面加個this，
              //c#中本類中的方法相互調用可以不寫"this",             
              //但php中同樣需要"this->"
            this.write('e.g.1: namespace.class1.method2 para:' + para);
        }
        //方法write，簡化document.write操作
        ,write: function(para) {
            document.write(para + this.field1);
        }
    }
     
       //類2
      ,class2: {
        //方法1
        method1: function(para) {
            document.write('e.g.1: namespace.class2.method1 para:' + para + '<br/><br/>');
        }
        //方法2
        ,method2: function(para) {
            //調用類1中的方法write
            var myClass1 = namespace.class1;
            myClass1.write('e.g.1: 調用類1中的方法write:' + para);
        }
    }
};
//命名空間-類1-方法1-傳入參數xxx 輸出：e.g.1: namespace.class1.method1 para:xxx
namespace.class1.method1('xxx');
  
//命名空間-類1-方法2-傳入參數yyy
namespace.class1.method2('yyy');
  
//命名空間-類1-方法1-傳入參數aaa
namespace.class2.method1('aaa')

var json = { "a":{"key":"value"}, "b":{"key":"value"} };有沒發現上面的方法和這個JSON結構是類似的。

今天就到這了，都是一些個人拙見，當中也有參考資料，有問題還請大家指出，偶去陪老婆覺覺了:-)