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 閉包的使用