码迷,mamicode.com
首页 > 编程语言 > 详细

解惑之JavaScript

时间:2015-01-14 00:36:02      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:

之前的文章说过讲讲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结构是类似的。

今天就到这了,都是一些个人拙见,当中也有参考资料,有问题还请大家指出,偶去陪老婆觉觉了:-)

 

解惑之JavaScript

标签:

原文地址:http://www.cnblogs.com/web-lexi/p/4221995.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!