2013学习总结----JavaScript

javascript面向对象，实现的几种方式

1:直接使用JSON对象

        var o1={
            "a":1,
            "b":2,
            "c":function() {
            }    
        }

2：把函数作为对象

function HandleOne() {
        var test = 0;
        this.setFlag = function() {
            test = 1;
        }
        this.displayFlag = function() {
        console.log("这是逻辑1中的变量值：" + test);
        }
        return this;
    }
    
    
    var H1 = HandleOne();
    H1.displayFlag();  //逻辑1输出自己的变量

3：匿名函数的方式 

//匿名函数的方式
    var H1 = (function() {
        var test = 0;
        this.setFlag = function() {
            test = 1;
        }
        this.displayFlag = function() {
            console.log("这是逻辑1中的变量值：" + test);
        }
        //返回this对象，以访问module里定义的函数
        return this;
    } ());
    
    H1.displayFlag();  //逻辑1输出自己的变量

4: 只暴漏对象中的特定元素

    var person = function () {
        // Private
        var name = "Robert";
        return {
            getName: function () {
                return name;
            },
            setName: function (newName) {
                name = newName;
            }
        };
    } ();
    alert(person.name); // Undefined
    alert(person.getName()); // "Robert"
    person.setName("Robert Nyman");
    alert(person.getName()); // "Robert Nyman"

jquery extend 函数使用方法

$(function(){

//测试extend的基本用法
//后面的对象可以覆盖前面的对象，有的元素可以覆盖，没有的元素可以补充
var e1=$.extend({"a":1,"b":2},{"d":3,"b":22});
console.log(e1); 
//result : {a: 1, b: 22, d: 3} 



//测试向jquery全局对象中添加元素（可以是函数）  插件原理！！！！！
$.extend({"a":function() {
    alert("33333");
}});

$.a();
//result :弹出 33333对话框



//测试向jquery对象中扩展元素的方法 插件原理！！！！！
//以及this转换成jquery对象的方法
//以及jquery对象和dom对象之间的转换
$.fn.extend({"a":function() {
    console.log($(this).attr("name"));
    console.log($(this)[0].name);
}});


$("#tt1").a();

//html中的内容：<a href="#" id="tt1" name="sdfsdf">ssss</a> 
//result:sdfsdf sdfsdf



//测试extend深度拷贝和浅拷贝的不同
//面度嵌套对象，如果是浅度拷贝，只是用上一个去替换上一个；如果是深度拷贝，会对嵌套的对象进行复杂的extend操作
var e2=$.extend(true,{"a":1,"b":2,"c":{"a":1,"b":2}},{"d":3,"b":22,"c":{"d":1,"b":22}});
console.log(e2); 

var e3=$.extend(false,{"a":1,"b":2,"c":{"a":1,"b":2}},{"d":3,"b":22,"c":{"d":1,"b":22}});
console.log(e3); 

/**
深度拷贝result:
Object {a: 1, b: 22, c: Object, d: 3}
a: 1
b: 22
c: Object
    a: 1
    b: 22
    d: 1
__proto__: Object
d: 3

浅度拷贝result
__proto__: Object
 extend.html:46
Object {a: 1, b: 22, c: Object, d: 3}
a: 1
b: 22
c: Object
    b: 22
    d: 1
__proto__: Object
d: 3
__proto__: Object
**/
});

Javascript 插件式开发

• 设置默认值
• 支持jquery选择器
• 支持jquery的链式调用
• 插件里的方法

 (function ($) {
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };

    var showLink = function (obj) {
        $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
    }

    $.fn.easySlider = function (options) {       
        var options = $.extend(defaults, options);
        return this.each(function () {
           showLink(this);
        });
    }
})(jQuery);

Javascript 闭包的使用