`
youyu4
  • 浏览: 435966 次
社区版块
存档分类
最新评论

extend方法使用

 
阅读更多

1)在百度tangram js 框架中的实现,

baidu.extend =
baidu.object.extend = function (target, source) {
    for (var p in source) {
        if (source.hasOwnProperty(p)) {
            target[p] = source[p];
        }
    }
    
    return target;
};

 

仅有2个参数,extend(target,source),第一个参数是目标对象,第二个参数是原对象 ,对原对象中的每个属性进行判断,如果是,那么将他拷贝到目标的对象上去。

 

2)在jquery 中的实现:

jQuery.extend = jQuery.fn.extend = function() {
	var options, name, src, copy, copyIsArray, clone,
	target = arguments[0] || {},
	i = 1,
	length = arguments.length,
	deep = false;
	//如果第一个值为bool值,那么就将第二个参数作为目标参数,同时目标参数从2开始计数
	if ( typeof target === "boolean" ) {
		deep = target;
		target = arguments[1] || {};
		// skip the boolean and the target
		i = 2;
	}
	// 当目标参数不是object 或者不是函数的时候,设置成object类型的
	if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
		target = {};
	}
	//如果extend只有一个函数的时候,那么将跳出后面的操作
	if ( length === i ) {
		target = this;
		--i;
	}
	for ( ; i < length; i++ ) {
		// 仅处理不是 null/undefined values
		if ( (options = arguments[ i ]) != null ) {
			// 扩展options对象
			for ( name in options ) {
				src = target[ name ];
				copy = options[ name ];
				// 如果目标对象和要拷贝的对象是恒相等的话,那就执行下一个循环。
				if ( target === copy ) {
					continue;
				}
				// 如果我们拷贝的对象是一个对象或者数组的话
				if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
					if ( copyIsArray ) {
						copyIsArray = false;
						clone = src && jQuery.isArray(src) ? src : [];
					} else {
						clone = src && jQuery.isPlainObject(src) ? src : {};
					}
					//不删除目标对象,将目标对象和原对象重新拷贝一份出来。 
					target[ name ] = jQuery.extend( deep, clone, copy );
				// 如果options[name]的不为空,那么将拷贝到目标对象上去。
				} else if ( copy !== undefined ) {
					target[ name ] = copy;
				}
			}
		}
	}
	// 返回修改的目标对象
	return target;
}; 
 

jquery的实现原理和tangram差不多,也是讲原对象的属性分别拷贝到目标对象上去,不过jq可以接受的参数比tangram要多,他可以接受无限和参数,如果第一个参数为true的话,将执行深度拷贝,将原对象和目标对象中的某些属性值合并起来。

 

 

 3)protype.js的实现方式

 
function extend(destination, source) {
    for (var property in source)
      destination[property] = source[property];
    return destination;

  } 
 

也是遍历原 对象的各种属性,然后将他拷贝到目标对象上去。实现的方式和tangram类似。

 

 

4)dojo的实现

dojo.extend = function(/*Object*/ constructor, /*Object...*/ props){
// summary:
//	Adds all properties and methods of props to constructor's
//	prototype, making them available to all instances created with
//	constructor.
for(var i=1, l=arguments.length; i<l; i++){
d._mixin(constructor.prototype, arguments[i]);
}
return constructor; // Object

} 

 
var extraNames, extraLen, empty = {};
for(var i in {toString: 1}){ extraNames = []; break; }
dojo._extraNames = extraNames = extraNames || ["hasOwnProperty", "valueOf", "isPrototypeOf",
"propertyIsEnumerable", "toLocaleString", "toString", "constructor"];
extraLen = extraNames.length;
dojo._mixin = function(/*Object*/ target, /*Object*/ source){
// summary:
//	Adds all properties and methods of source to target. This addition
//	is "prototype extension safe", so that instances of objects
//	will not pass along prototype defaults.
var name, s, i;
for(name in source){
// the "tobj" condition avoid copying properties in "source"
// inherited from Object.prototype.  For example, if target has a custom
// toString() method, don't overwrite it with the toString() method
// that source inherited from Object.prototype
s = source[name];
//fixed by yupeng 判断元素是否是对象的属性
if(!(name in target) || (target[name] !== s && (!(name in empty) || empty[name] !== s))){
target[name] = s;
}
}
// IE doesn't recognize some custom functions in for..in
if(extraLen && source){
for(i = 0; i < extraLen; ++i){
name = extraNames[i];
s = source[name];
if(!(name in target) || (target[name] !== s && (!(name in empty) || empty[name] !== s))){
target[name] = s;
}
}
}
return target; // Object

} 
 

dojo首先会封装一个_mixin方法,该方法起到的作用其实就是extend该起到的作用,然后再背部调用_mixin()方法,封装的extend方法可以接受多个参数,同时将原对象的每个属性都拷贝到目标对象的原型方法上。 

技巧(extend方法的妙用):

1)实现组件参数的灵活配置,我们在写组件的时候,可以使用一些默认的配置参数,但是如果用户想定制一些特殊的样式的话,可以使用extend方法

例如在写jq插件的时候

(function($) { 
	$.fn.xxxx= function(options) {
		var defaults = {
			a: false,
			b: {},
			c: false,
			b: false
		};
		var params = $.extend({}, defaults, options || {}); 

		//接下来对函数进行处理。 
	} 

})(jquery) 
 

2)实现类方法的拷贝。

 

 

原文:http://www.cnblogs.com/yupeng/archive/2012/03/11/2389997.html

分享到:
评论

相关推荐

    原生js实现jquery $.extend方法

    原生js实现jquery $.extend方法 通过遍历对象属性来实现

    angular.extend方法的具体使用

    Angular.extend方法的具体使用 angular.extend方法是AngularJs框架中的一个重要方法,主要用来将一个或多个对象中的方法和属性扩展到一个目的对象中,使得这个对象拥有其他对象相同的方法和属性。该方法的使用可以...

    jQuery中的deferred对象和extend方法详解

    jQuery中的`deferred对象`和`extend方法`是JavaScript异步编程的重要工具,尤其在处理AJAX请求和其他异步操作时非常有用。`deferred对象`是jQuery 1.5.0版本引入的,它提供了一种更优雅的方式来管理回调函数,解决了...

    在Python中操作列表之list.extend()方法的使用

    **`list.extend()`方法的使用** `list.extend()`方法接受一个可迭代对象(如列表、元组、字符串等)作为参数,并将该对象中的所有元素添加到调用它的列表的末尾。这个过程不会创建新的列表,而是直接修改原列表,...

    underscore.extend与$.extend实例比较分析

    在JavaScript开发中,`underscore` 和 `jQuery` 都提供了扩展对象的功能,即 `_.extend()` 和 `$.extend()` 方法。这两个方法允许开发者合并一个或多个对象的属性到目标对象中,实现对象间的属性拷贝。本文将深入...

    Extend

    因此,适度和明智地使用继承是必要的。 在提供的文件列表中,`tree.html`可能是显示项目或源码目录结构的页面,帮助开发者了解代码组织方式。而`文件的目录.txt`可能是一个文本文件,列出了压缩包内的所有文件和子...

    jQuery.extend 函数详解

    `jQuery.extend`是jQuery提供的一个用于扩展jQuery核心功能或自定义jQuery插件的方法。通过这个方法,开发者可以在不修改原始jQuery源码的情况下,向jQuery添加新的功能。 #### 二、基本用法与原理 **1. 基本用法*...

    jquery $.fn.extend

    `$.fn.extend`是jQuery库中的一个核心方法,主要用于扩展jQuery对象的方法集合。这个方法允许开发者自定义jQuery的函数,从而实现对DOM元素的操作或添加新的功能。在jQuery中,`$.fn`实际上是`$.prototype`的一个...

    jQuery的extend方法【三种】

    如果使用`$.fn.method = function() {}`,也可以定义单个方法,但`$.fn.extend({})`更适合一次性定义多个方法。 3. **继承与浅拷贝/深拷贝** `$.extend()` 除了扩展方法外,还可以用于对象的合并和复制。它有两种...

    ExtJS的extend(Ext Designer的使用)

    `extend`的使用还涉及到`config`对象,这是Ext JS中的另一个重要概念。`config`用来定义类的可配置属性,这些属性可以在实例化时传入值。通过`extend`和`config`,我们可以构建出高度可定制且复用性强的组件。 在...

    cesium-extend_Extend_cesium拓展entity_cesium_

    4. **使用cesium-extend**: 要在项目中使用"cesium-extend",首先需要将其解压并引入到HTML文件中。如果使用的是模块化开发,可以借助`import`语句导入所需的扩展功能。然后,按照扩展包提供的API文档,调用相应的...

    Js-$.extend扩展方法使方法参数更灵活.docx

    在提供的代码示例中,`extend`函数接受一个可选参数`arr`,并使用`$.extend()`方法将其与一个预设的对象合并。如果`arr`未定义或为`null`,`$.extend()`会使用空对象`{}`作为源对象,这样就不会改变目标对象的原始...

    Java中extend与implement区别.doc

    Java 中 extend 与 implement 的区别 Java 语言中,extend 和 implement 是两个基本概念,它们之间的区别是非常重要的。extend 用于继承类,而 implement 用于实现接口。在 Java 中,不支持多重继承,但是可以使用...

Global site tag (gtag.js) - Google Analytics