javascript继承模式，Function模式，对象创建模式

为什么80%的码农都做不了架构师？>>>   

原型继承

//继承
function inherit(obj){
   var F = function(){}
   F.prototype = obj;
   return new F();
}


var parent = {name:'张三', say: function(){console.log(this.name);}}

var child = inherit(parent);

child.say(); //张三

var Person = function(){
    this.name = '张三';
}
Person.prototype.say = function(){
    console.log(this.name);
}

var student = inherit(new Person())

student.say();


//ECMAScript 5提供了上面inherit方法的功能

var child = Object.create({name:'张三', say: function(){console.log(this.name);}});

借用方法

var parent = {
   name: '张三',
   say: function(){

       console.log(this.name);
   }

}

var child = {
    name:'李四'
}

//借用parent的say方法

parent.say.apply(child);  //李四

立即执行函数

//立即执行函数

(function(){console.log(123)}())

(function(){console.log(123)})()


!function(){console.log(123)}();

+function(){console.log(123)}();

-function(){console.log(123)}();

~function(){console.log(123)}();

立即初始化对象

({
    name: '张三那',
    say: function(){
        return this.name;
    },
    init: function(){
        console.log(this.say());

    }


}).init();

命名空间

我们一般这么定义

var app = app || {};
app.moduleA = app.moduleA || {};
app.moduleA.subModule = app.moduleA.subModule || {};
app.moduleA.subModule.MethodA = function () {
    console.log("print A");
};

如果层级很多呢？这样一直下去会很乱

var MYAPP = MYAPP || {};

//定义通用方法
MYAPP.namespace = function (ns_string) {
    var parts = ns_string.split('.'),
        parent = MYAPP,
        i;

    // 默认如果第一个节点是MYAPP的话，就忽略掉，比如MYAPP.ModuleA
    if (parts[0] === "MYAPP") {
        parts = parts.slice(1);
    }

    for (i = 0; i < parts.length; i += 1) {
        // 如果属性不存在，就创建
        if (typeof parent[parts[i]] === "undefined") {
            parent[parts[i]] = {};
        }
        parent = parent[parts[i]];
    }
    return parent;
};


//使用方法

MYAPP.namespace('a.b.c.d.e.f.g.h')


console.log(MYAPP);

定义依赖

有时候你的一个模块或者函数可能要引用第三方的一些模块或者工具，这时候最好将这些依赖模块在刚开始的时候就定义好，以便以后可以很方便地替换掉。

var myFunction = function () {
    // 依赖模块
    var event = YAHOO.util.Event,
        dom = YAHOO.util.dom;

    // 其它函数后面的代码里使用局部变量event和dom
};

隐藏私有方法模式

var myapp  = (function(){
    var name = '张三';
    var sayMyName = function(){

          console.log(name);
    };
    
    return {

       say:sayMyName 
     }

}())

myapp.say();

链模式

链模式可以你连续可以调用一个对象的方法，比如obj.add(1).remove(2).delete(4).add(2)这样的形式，其实现思路非常简单，就是将this原样返回。

var obj = {
    value: 1,
    increment: function () {
        this.value += 1;
        return this;
    },
    add: function (v) {
        this.value += v;
        return this;
    },
    shout: function () {
        console.log(this.value);
    }
};

// 链方法调用
obj.increment().add(3).shout(); // 5

// 也可以单独一个一个调用
obj.increment();
obj.add(3);
obj.shout();

函数语法糖

函数语法糖是为一个对象快速添加方法（函数）的扩展

if(typeof Function.prototype.method !== 'function'){
	Function.prototype.method = function(name, func){
	
		this.prototype[name] = func;
		return this;
	}
	
}


var Person = function(name){
	this.name = name;
}
.method('get', function(){

	return this.name;
})
.method('set', function(value){
	this.name = value;

});

var a = new Person('张三');

console.log(a.get());
console.log(a.set('李四'));
console.log(a.get());

对象的深度克隆。

var man = {
	name:{
		realname: '张三',
		nick:'rick'
	},
	age: 18,
	address:['中国', '美国', '澳大利亚']

}

var clone = function(obj){
	var result, b;
	if((b = (obj instanceof Array)) || obj instanceof Object){
		result = b ? [] : {};
		for(var k in obj){
			result[k] = (obj[k] instanceof Array || obj[k] instanceof Object) ? clone(obj[k]) : obj[k];
		}
	}
	else{
		result = obj;
	}
	return result;

}

var man2 = clone(man);

man2.name.realname = '李四'

console.log(man.name.realname); // 张三

为对象扩展方法：

(function(){
	var xQuery = (function(){
		var xQuery = function(){
		
			return xQuery.fn.init();
		
		};
        //xQuery.fn 为对象定义别名，暂时没用
		xQuery.fn = xQuery.prototype = {
			init: function(){
				return this;
			}
		};
        //xQuery.fn.extend 为方法定义别名，暂时没用
		xQuery.extend = xQuery.fn.extend = function(){
			var options, name, src, copy,
				target = arguments[0] || {},
				i = 1,
				length = arguments.length;

			if(length === i){
				target = this;
				--i;  //不执行后面循环
			}

			for(; i < length; i++){
				if((options = arguments[i]) != null){
					for(name in options){
						src = target[name];
						copy = options[name];
						
						if( src === copy ){
							continue;
						}

						if( copy !== undefined ){
							
							target[name] = copy;
						
						}
					
					}
				
				}
			
			}

			return target;
		
		}

		return xQuery;
	}());

	window.xQuery = window.$ = xQuery();

}());

$.ui = $.ui || {};

$.extend($.ui, {name: 'php', getName: function(){ return this.name;}});

console.log($.ui.getName());

 

转载于:https://my.oschina.net/shyl/blog/681478