javascript面向对象和设计模式

一、注释写法

/*
 * @author: 作者
 * @action:  组件的作用
 * @date:    创建日期
 * 
 * Options :  events  delay   // 属性
 * Methods : currentShow  getContent    // 方法
 * Events : beforeClick  afterClick   // 自定义事件或系统事件
 */

 

一、面向对象

一、面向对象的一些重要的方面

　　1、对象引用　　2、作用域　　3、闭包　　4、上下文

 

　　引用：引用就是指向对象实际位置的指针，多个变量可以引用一个对象

<script>
    var obj = new Object();     // 创建一个新类
    var objRef = obj;       // 将引用地址赋给这个变量
    obj.one = true;         // 创建类的属性
    alert(obj.one === objRef.one);      // 返回true
</script>

 

　　作用域：是JS中一个难处理的特性，在JS里作用域由函数所约束，而不由块约束（如for，if，while语句）

<script>
    // 例1：
    var foo = "test";
    if(true){
        var foo = "new test";       // 这里仍然是全局变量
    }
    alert(foo === "new test");      // 所以返回true

    // 例2:
    var foos = "test";
    function test(){
        var foos = "new test";      // 这里是局布变量
    }
    alert(foos === "new test");     // 所以为false
</script>

　　全局变量都是window的属性，定义的函数都是window的方法.

　　隐式全局变量：

<script>
    var foos = "test";
    function test(){
        name = "new test";          // 在函数里没有用var定义的变量都为全局变量
    }
    alert(name === "new test");     // 返回true
</script>

 

　　闭包：内层函数可以引用存在于包绕它的函数变量　

 

　　上下文：是通过变量this工作

<script>
    var obj = {
        yes: function(){
            this.val = true;
        },
        no : function(){
            this.val = false;
        }
    }
    // 如果直接调用obj.val 对象obj没有这个属性所以为null
    // 将运行yes方法后this会指向obj上，这时可以调用obj.val
    obj.yes();
    alert(obj.val);         // 返回true
</script>

 

　　改变上下文

<script>
    function changeColor(colors) {
        console.log(this);
        this.style.color = colors;
    }
    // 在window对象上调用这个函数，因为window没有style对象
    // new changeColor("white");

    // 通过call来改变this指针的指向
    var box = document.getElementById("box");
    changeColor.call(box, "red");
</script>

 

二、面向对象的基础

　　1、创建对象和对象属性方法的两个例子

<script>
    // 方法一
    var obj = new Object();
    // 创建对象公用属性和方法
    obj.name = "哈哈";
    obj.sayName = function(){
        alert(this.name);
    }
    obj.sayName();

    // 方法二
    var obj = {
        name : "哈哈",
        sayName : function(){
            alert(this.name);
        }
    }
    obj.sayName();
</script>

 

　　2、公有属性和方法、私有属性和方法

<script>
    // 公有属性、方法
    function User(name, age){
        this.name = name;       // 公有属性
        this.age = age;
    }
    User.prototype.getName = function(){    // 公有方法，通过prototype对象
        return this.name;
    }
    User.prototype.getAge = function(){
        return this.age;
    }
    var user = new User("哈哈", 30);
    alert(user.getName() == "哈哈");       // 返回true;

    // 私有属性、方法
    function Class(student, teacher){
        this.student = student;
        this.teacher = teacher;
        var current = 0;            // 私有属性

        function getCurrent(){
            return current;
        }
    }
    Class.prototype.getName = function(){
        // console.log(current);       // 报错，current为私有属性的,返回undefined
        return this.student;
    }
    var className = new Class("aaa", "bbb");
    className.getName();
    // className.getCurrent();            // 报错，私有方法不能被外界所访问
</script>

 

　　3、特权方法：是用来访问和改变私有变量的方法

<script>
    function User(name, age){
        this.name = name;
        this.age = age;
        var year = 2013;
        this.getYear = function(){      // 特权方法，不能放到prototype中，因为作用域会找不到year
            return year;
        }
    }
    var user = new User("哈哈", 30);
    alert(user.getYear());          // 返回2013;
</script>

 

三、命名空间

<script>
    // 创建一个全局的命名空间
    var YAHOO = {};

    // 设置一个子的命名空间
    YAHOO.util = {};
    
    YAHOO.util.Event = {
        addEventListener:function(){ }
    }

    // 调用方法
    YAHOO.util.event.addEventListener();
</script>

 

三、!=、== vs !==、===

　　在javascript里，null、0、""、false和undefined全部彼此相等（==），因为他们计算的值都为false;

<script>
    console.log(typeof null);       // 返回Object
    console.log(typeof undefined);  // 返回undefined

    // 常见问题
    console.log(null == undefined); // false;
    console.log("" == undefined);   // false;
    console.log(0 == undefined);    // true;
    console.log(String == undefined);   // false;
    console.log(String == null);    // false;
    console.log(String === Object); // false;
</script>

 

 

一、富有表现力的javascript

一、在编程时你可以写采用函数式编程风格，也可以写成复杂一点的面象对象编程风格

 

二、链式调用

　　如jQuery采用的就是链式调用，$("#name").find("<p>").addClass("active");

<div class="box" id="box">14077期任选9场中头奖3894注</div>
<input type="button" value="添加" id="add">
<input type="button" value="删除" id="del">

<script>
    function getId(id){
        return document.getElementById(id);
    }

    var oAdd = getId("add");
    var oDel = getId("del");

    function Chain(oId){
        this.box = getId(oId);
    }

    Chain.prototype = {

        // 添加class值
        addClass: function(claName){
            console.log(this.box);
            var sClass = this.box.getAttribute("class");
            this.box.className = sClass+ " " +claName;
            return this;
        },

        // 删除class值
        removeClass: function(claName){
            var sClass = this.box.getAttribute("class");
            var delClass = sClass.replace(/"claName"/, "");
            this.box.className = delClass;
            return this;
        },

        // css读写样式
        css: function(pro, val){
            var t = this;
            if(arguments.length == 1){
                console.log("参1")
                var cssValue = t.getStyle(this.box, pro);
                return cssValue;
            }
            if(arguments.length == 2){
                console.log("参2");
                t.box.style[pro] = val + "px";
            }
            return this;
        },

        // 获取样式
        getStyle: function(obj, attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }
            else{
                return getComputedStyle(obj, false)[attr]
            }
        }


    }

    window.$ = function(id){
       return new Chain(id);
    }

    oAdd.onclick = function(){
        var getWidth = $("box").addClass("active").css("width");
        console.log(getWidth);
    }

    oDel.onclick = function(){
        $("box").addClass("show").removeClass("active").css("width", "20");
    }
</script>

 

三、活动的方法

一、直接定义函数
function start(){    }
function end(){   }

二、创建一个类
function Amm(){   }

Amm.prototype.start = function(){   }
Amm.prototype.end = function(){    }


三、传统的程序员更喜欢把他们写到一起
function Amm(){  }

Amm.prototype = {
    start: function(){      },
    end: function(){     }
}

四、链式调用
window.$ = function(id){
    return new _$(id);
}
function _$(id){
    this.elements = document.getElementById(id);
}
_$.prototype = {
    constructor:_$,
    hide:function(){
        console.log('hide');
        return this;
    },
    show:function(){
        console.log('show');
        return this;
    },
    getName:function(callback){
        if(callback){
            callback.call(this, this.name);
        }
        return this;
    },
    setName:function(name){
        this.name = name;
        return this;
    }
}

$("box").setName("aa").getName(function(name){
    console.log(name);
}).hide().show();

 

四、弱类型语言

　　在js中变量不用声明其类型，不带表变量没有类型，而是变量类型取决于数据的类型，javascript的类型：整型、字符串、布尔，undefined、null

 

五、函数是一等对象

　　函数可以存储在变量中，也可以作为参数传给另一个函数，可以作为返回值从其它函数传出，还可以进行构造，

　　匿名函数，没有名字的函数，自动执行，也可以赋给一个变量　　

// 匿名函数
(function(){
    var foo = 20;
    var bar = 10;
    alert(foo * bar);
})();

// 可加参数
(function(foo, bar){
    alert(foo * bar);
})(20, 10);

// 赋给一个变量
var sun = (function(foo, bar){
    return foo * bar
})(20, 10);
alert(sun);

　　

　　匿名函数最有趣的用途是创建“闭包”，闭包是一个受保护变量的空间，如果一个函数调变量并不想让这个变量为全局，也不是局部变量，并且让变量一直保一直保存，不会随着函数的结束而自动消毁，这样就可以使用闭包。

 

六、继承

　　继承中不像其它面象对象语言中那么简单，js是使用基于对象的（原型式）继承

 

七、Javascript中使用设计模式的原因？

　　1、可维护性：降低模块之间的耦合度，使代码进行重构和换用不同的模块变得容易

　　2、沟通：

　　3、性能：某些模式是起优化作用的可以提高运行速度，减少传送到客户端的代码量，

 

八、检测对象的属性和方法

1、hasOwnProperty：判断是否是对象的属性

　　var obj = {};   obj.name = "haha";   obj.hasOwnProperty("haha"); 　　　　// 返回true

 

2、constructor：查看对象是否是构造函数

var type = function(o){
    return (o === null) ? "null" : typeof o;
}

var arr = new Array();

if(type.constructor == Function){
    console.log("function");
}

if(arr.constructor == Array){
    console.log("array");
}

 

3、instanceof：查看对象与构造函数之间的关系，如果对象继承过其他构造函数的方法，那就也返回真

　　var arr = []; 　　alert(arr instanceof Array);　　alert(arr instanceof Object);　　　　// 都返回true

 

 

二、接口

一、什么是接口

　　接口提供一种说明一个对象中的哪些方法

　　接口的好处：能促进代码的重用，接口可以告诉程序员一个类实现了哪些方法

 

三、封装和信息隐藏

　　为对象创建私有成员是面向对象的特性之一，目前有几种方法来创建私有、公有、特权方法的对象

 

　　封装：通过将一个方法或者属性声明为私用的，可以让对象的实现细节对其他对象保密以降低对象之间的耦合程度，可以保持数据的完整性并对其修改方式加以约束，这样可以是代码更可靠，更易于调试。封装是面向对象的设计的基石。

　　尽管JavaScript是一门面向对象的语言，可它并不具备将成员声明为公用或私用的任何内部机制，所以我们只能自己想办法实现这种特性。下面还是通过一套完整的代码去分析，介绍什么是私有属性和方法，什么是特权属性和方法，什么是公有属性和方法，什么是公有静态属性和方法。

　　私有属性和方法：函数有作用域，在函数内用var 关键字声明的变量在外部无法访问，私有属性和方法本质就是你希望在对象外部无法访问的变量。

　　特权属性和方法：创建属性和方法时使用的this关键字，因为这些方法定义在构造器的作用域中，所以它们可以访问到私有属性和方法；只有那些需要直接访问私有成员的方法才应该被设计为特权方法。

function SetObject(name, age, sex){
    var _name = name;
    var _age = age;
    var _sex = sex;

    this.writeInfo = function(){
        console.log("name:" + _.name + " age:" + _.age + " sex:" + _.sex);
    }
}

SetObject.prototype = {
    setInfo: function(){
        this.writeInfo();
    }
}

var createObj = new SetObject("jack", 20, "男");
createObj.setInfo();

　　共有属性和方法：直接链在prototype上的属性和方法，不可以访问构造器内的私有成员，可以访问特权成员，子类会继承所有的共有方法。

　　共有静态属性和方法：最好的理解方式就是把它想象成一个命名空间，实际上相当于把构造器作为命名空间来使用。

/* -- 封装 -- */
var _packaging =function(){
    //私有属性和方法
    var name ='Darren';
    var method1 =function(){
      //...
    }
    
    //特权属性和方法
    this.title ='JavaScript Design Patterns' ;
    this.getName =function(){
      return name;
    }
}

//共有静态属性和方法
_packaging._name ='Darren code';
_packaging.alertName =function(){
    alert(_packaging._name);
}

//共有属性和方法
_packaging.prototype = {
    init:function(){
    //...
    }
}

 

四、继承

　　继承一般是在一个基础类上又增加了新的功能，但不想破坏这个基础类中的方法和属性，这样可以创建一个新的超类将基础类继承过来

　　继承分为两种继承：1、继承属性  使用call来继承父类的属性　　　　2、继承方法，使用for...in的方式将父类的方法继承过来

 

1、只继承属性：

// 构造模式
function TabB(name, age){
    this.name = name;
    this.age = age;
}
TabB.prototype = {
    sayName : function(){
        alert(this.name);
    },
    showAge : function(){
        alert(this.age)
    }
}

// 创建继承类
function CopyTabB(name, age, show){
    TabB.call(this, name, age);
    this.show = show;
}

CopyTabB.prototype = {
    childerName : function(){
        console.log(this.name);
    }
}

var newTagB = new CopyTabB("虎虎", 20, true);
newTagB.childerName();
// newTagB.sayName();      // 因为没有继承父类的方法所以就会报错

 

2、只继承方法：有两种方式

第一种方式：CopyTabB.prototype = new TabB();　　　　// 将子类的原型 = 创建的父类

function TabB(name, age){　　　　// 创建父类
    this.name = name;
    this.age = age;
}
TabB.prototype = {
    sayName : function(){
        alert(this.name);
    }
}

// 创建继承的子类
function CopyTabB(name, age, show){
    TabB.call(this, name, age);
    this.show = show;
}
CopyTabB.prototype = TabB.prototype;
// CopyTabB.prototype = new TabB();     这两种方法都是继承方法不继承属性

var newTagB = new CopyTabB("虎虎", 20, true);
newTagB.sayName();

 

第二种方式：for...in将对象的方法循环出来

// 构造模式
function TabB(name, age){
    this.name = name;
    this.age = age;
}
TabB.prototype = {
    sayName : function(){
        alert(this.name);
    },
    showAge : function(){
        alert(this.age)
    }
}

// 创建继承类
function CopyTabB(name, age, show){
    TabB.call(this, name, age);
    this.show = show;
}

extend(TabB.prototype, CopyTabB.prototype);    // 将父亲类的所有方法赋给子类

// 将父类的方法赋给子类
function extend(oParent, oChilder){
    for(var attr in oParent){
        oChilder[attr] = oParent[attr];
    }
}

var newTagB = new CopyTabB("虎虎", 20, true);
newTagB.sayName();

 

-----------------------------------------------------------------------------------------------

 

继承是一个抽象的话题，继承有两种方式：1、类继承    2、原型继承

1、prototype继承

// 定义一个超类
function PeopleA(name){
    this.name = name;
}

// 给超类添加一个方法
PeopleA.prototype.getName = function(){
    return this.name;
}


// 在定义一个超类
function PeopleB(name, sex){
    PeopleA.call(this, name);
    this.sex = sex;
}

// 类继承
PeopleB.prototype = new PeopleA();                 // 将new一个对象赋给prototype
// PeopleB.prototype = PeopleA.prototype;          // 也可以这样写

/*
*  注：一定要将B类的方法写在，类继承之后，因为方法中还有调A中的属性
* */
// 给B超类添加一个方法
PeopleB.prototype.writeInfo = function(){
    return this.name + this.sex;
}

// 实例化话PeopleB类
var createPeopleB = new PeopleB("全家", 20);
// console.log(createPeopleB.getName());        // 如果不继承就不能使用PeopleA中的方法
console.log(createPeopleB.getName());
console.log(createPeopleB.writeInfo());

 

2、原型继承

<script>
    // 创建一个超类
    function Person(name){
        this.name = name;
    }
    Person.prototype.getName = function(){
        return this.name;
    }

    // 创建一个新类
    function User(name, passwrod){
        Person.call(this, name);
        this.passwrod = passwrod;
    }

    User.prototype = new Person()   // User对象继承Person的所有方法
　　　　// User.prototype = Person.prototype;

    User.prototype.getPasswrod = function(){
        return this.password;
    }

    var person = new User("names", 1111);
    alert(person.getName());
</script>

 

属性和方法都可以继承

function Obj1(){    // 创建一个对象
    this.name = "siguang";
}
Obj1.prototype.sayName = function(){
    return this.name;
}

function Obj2(){    // 另一个对象
    this.age = 20;
}

Obj2.prototype = new Obj1();

var newObj = new Obj2();
var sName = newObj.sayName();
console.log(newObj.name);           // siguang
console.log(sName);                 // siguang

 

 

五、设计模式的类型

一、单例模式

　　模块模式是为单例模式创建私有变量和特权方法，所谓的单例模式，指的就是只有一个实例的对象，javascript是以对象字面量来创建单例模式

　　单例模式的用途：提供一个创建一系列相关或相互依赖对象的接口，而无需指定他们具体的类。

　　工厂就是把成员对象的创建工作转交给一个外部对象，好处在于消除对象之间的耦合(何为耦合？就是相互影响)。通过使用工厂方法而不是new关键字及具体类，可以把所有实例化的代码都集中在一个位置，有助于创建模块化的代码，这才是工厂模式的目的和优势。

1、普通的对象字面量单例：都是公有的属性和方法

var obj = {
    name : "My Object",
    getNameFun : function(){
       alert(this.name);
    }
}
obj.getNameFun()

 

2、单例模式，声明的私有变量和方法

var singleton = function(){
    // 私有变量和私有函数
    var privateVar = 10;

    // 私有函数
    function privateFun(){
        return false;
    }

    // 返回对象，可以通过特权方法来访问私有属性和私有方法
    return {
        publicVar : 10,
        publicMethod : function(){
            privateVar++;
        }
    }
}

singleton.publicMethod();

　　

　　单体模式之利：把方法和属性组织在一个不会被多次实例化的单体中，描述性的命名空间可以增强代码的自我说明

　　单体模式之弊：单体模式提供单点访问，导致模块之间的藕和性

 

 

二、原型模式（构造函数）

　　通过每个函数，都有一个prototype的属性来创造其原型方法，所有创建的对象只有一套prototype原型的方法或属性

function GetObj(name, old){
    this.name = name;
    this.old = old
}

GetObj.prototype = {
    init : function(){
        alert(this.name + "," + this.old);
    }        
}

var obj = new GetObj("aa", "bb");
obj.init();

　

普通函数与构造函数的区别

function show(){
    // var this = new object();     // 如果是new出来的会自动创建一个
    alert(this);
}

show();  // 这个时候this指向window
new show();     // 时候this指向object，如果用new出来的函数系统会自动在内部创建一个var this = new object

　　

 

三、工厂模式

　　创建一个函数，在函数内在创建一个对象并将对象返回，而不需要象构造的数一样需要new出来一个对象，因为函数返回的是一个对象所以赋给一个变量就可以直接使用

function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(o.name);
    }
    
    return o;
}

var por = createPerson("haha", 20, "人人");
var join = createPerson("heihei", 30, "360");
console.log(por.sayName());
console.log(por.sayName());

1、什么时候使用工厂模式：

　　　　1、对象的构建十分复杂 　　 2、需要依赖具体的环境，创建不同的实例　　 3、处理大量具有相同的属性的小对象

　　如果功能小就不适合用工厂模式，使得程序复杂

 

2、工厂模式存在的问题：

对象的方法都是单独存放，构造函数的原型prototype可以解决这种情况.

function createPerson(name, age){
	var obj = new Object();
	obj.name = name;
	obj.age = age;

	obj.showName = function(){
		alert(this.name);
	}
	obj.showAge = function(){
		alert(this.age);
	}
	return obj;
}

var c1 = createPerson("siguang", 30);
var c2 = createPerson("lulu", 27);
c1.showName();
c2.showName();

alert(c1.showName == c2.showName);      // 返回false，说明每次调用都会单独存放这样会占用资源，如果使用构造函数就不会存这种情况

　　

 

 

四、桥接模式

　　在实现API的时候桥接模式非常有用，

　　桥接模式的作用在于，将抽象与实现分离，以后便二者独立变化

addEevent(element, "click", getBeerById(e))

function getBeerById(id, callback){
    var id = this.id;
    asyncRequest('GET', 'beer.uri?id=' + id, function(resp){
        // Callback response.
        console.log('Requested Beer: ' + resp.responseText);
    })
}

function asyncRequest(type, data, callback){}

 

 

// 方法的链式调用 

　　把方法串链起来调用，象Jquery一样，$("#name").find("span").addClass("active");

　　这种技术分为两部分：1、创建代表HTML元素的工厂（工厂模式）　　2、　　

 

 

  

// 使用单例模式和构造函数的区别

<script>
    // 使用对象直接量（单体模式）和构造函数的区别
    // 对象直接量
    var Obj = {
        getName: "10",

        selectName: function(){
            alert(this.getName);
            this.getName+=10;
        }
    }

    $("#btn1").click(function(){
        Obj.selectName();           // 每点击一次getName都累加10
    })

    $("#btn2").click(function(){
        Obj.selectName();           // 每点击一次getName都累加10
    })

    
    // 构造函数
    function Obj(){
        this.getName = 10;
    }

    Obj.prototype.selectName = function(){
        alert(this.getName);
        this.getName+=10;
    }

    var n1 = new Obj();
    var n2 = new Obj();
    $("#btn1").click(function(){
        n1.selectName();                // 每点击一次n1下的getName都会加10
    })

    $("#btn2").click(function(){
        n2.selectName();                // 每点击一次n2下的getName都会加10
    })
</script>

 

六、模块化

模块方式一

var singleton = function(){
    // 私有属性
    var parive = 0;
    
    // 私有方法
    function getParive(){
        console.log(parive);
    }

    function getName(){
        console.log("siguang");
    }

    return {
        getParive: getParive(),
        getName  : getName()
    }
}()

singleton.getParive;        // 调用

 

模块方法二：

(function(){
    var name = "siguang";

    function Person(val){
        this.name = val;
    }

    Person.prototype.getName = function(){
        console.log(this.name);
    }

    var newObj = new Person(name);
    newObj.getName();
})()

 

 

JS的压缩器

　　分发js库的一个不可缺少的方面是压缩来节省带宽，有三种类型的压缩器：

　　1、简单的删除空格和换行和注释，公保留主要的代码

　　2、删除空白注释，也同将所有的变量名变得改短的压缩

　　3、删除空白和注释，同时还最小化代码中的所有单词（不仅是变量名）的压缩器

 

　　两种不同的库：JSMin和Paker

　　JSMin：删除无关的非代码　　Paker：属于第三类彻底压缩所有单词