`
mw666666
  • 浏览: 23902 次
  • 性别: Icon_minigender_1
  • 来自: 保定
社区版块
存档分类
最新评论

模仿JQuery.extend函数扩展自己对象的js代码

    博客分类:
  • js
阅读更多
但在写的过程中发现,如果要在之前写好的对象中添加新的静态方法或实例方法,要修改原有的对象结构,于是查看了jquery了extend方法,果然extend方法支持了jq的半边天,拿来主义,给自己的对象做扩张用。
下面进入正题:
假如有以下一个对象
复制代码 代码如下:

var MyMath = {
//加法
Add: function(a, b){
return a + b;
},
//减法
Sub: function(a, b){
return a - b;
}
}

对象名MyMath,有两个静态方法Add和Sub,正常调用:
复制代码 代码如下:

alert(MyMath.Add(3, 5)) //结果8

好,现在如果现在MyMath增加两个静态方法(乘法、除法)怎么办,并且不要修改之前写好的对象,以前我们可以这么做:
复制代码 代码如下:

//新加一静态方法:Mul乘法
MyMath["Mul"] = function(a, b){
return a * b;
}
//新加一静态方法:Div除法
MyMath["Div"] = function(a, b){
return a / b;
}

这样,我们给MyMath添加两个方法:Mul和Div。正常调用:
复制代码 代码如下:

alert(MyMath.Add(3, 5)) //结果8
alert(MyMath.Mul(3, 5)) //结果15

但是,刚才增加方法的写法有点笨拙,每增加一个方法都要写一次对象名(MyMath),能不能想之前我们创建对象的时候那样,通过Json的结构去声明一个对象呢?
答案当然是可以了,通过模拟JQuery.extend函数,轻松做到。以下提取JQuery.extend函数并修改了函数名:
复制代码 代码如下:
MyMath.extend = function(){
// copy reference to target object
var target = arguments[0] ||
{}, i = 1, length = arguments.length, deep = false, options;
// Handle a deep copy situation
if (typeof target === "boolean") {
deep = target;
target = arguments[1] ||
{};
// skip the boolean and the target
i = 2;
}
// Handle case when target is a string or something (possible in deep copy)
if (typeof target !== "object" && !jQuery.isFunction(target))
target = {};
// extend jQuery itself if only one argument is passed
if (length == i) {
target = this;
--i;
}
for (; i < length; i++)
// Only deal with non-null/undefined values
if ((options = arguments[i]) != null)
// Extend the base object
for (var name in options) {
var src = target[name], copy = options[name];
// Prevent never-ending loop
if (target === copy)
continue;
// Recurse if we're merging object values
if (deep && copy && typeof copy === "object" && !copy.nodeType)
target[name] = jQuery.extend(deep, // Never move original objects, clone them
src || (copy.length != null ? [] : {}), copy);
// Don't bring in undefined values
else
if (copy !== undefined)
target[name] = copy;
}
// Return the modified object
return target;
};


现在我们通过这个extend方法来增加刚才我们的方法(乘法、除法):
复制代码 代码如下:

MyMath.extend({
Mul: function(a, b){
return a * b;
},
Div: function(a, b){
return a / b;
}
});


这样的结构更加一目了然。

转自:http://www.codesky.net/article/doc/201004/20100417043454.htm
分享到:
评论

相关推荐

    jQuery仿杀毒软件自动检测代码.zip

    在这款代码中,开发者可能使用了$.fn.extend()来扩展jQuery对象,创建自定义的方法,模拟杀毒软件的扫描行为。例如,可能有一个`$.fn.scan()`方法,用于遍历DOM并检测潜在的“病毒”。 其次,jQuery事件处理也是...

    仿jquery 写自己的框架

    本文将基于"仿jquery 写自己的框架"这一主题,深入探讨如何模仿jQuery的核心特性来构建一个简易的JavaScript框架,旨在帮助新手理解jQuery的工作原理并提升编程技能。 首先,我们需要了解jQuery的基本概念。jQuery...

    jquery插件库-jquery仿京东商品详情页图片放大效果.zip

    在网页设计领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript代码的编写,使得动态交互和动画效果的实现变得更加容易。"jquery插件库-jquery仿京东商品详情页图片放大效果.zip"这个压缩包文件...

    JQuery 模仿qq 消息提示

    在IT行业中,前端开发是一项关键任务,而JavaScript库如jQuery极大地简化了网页动态效果的实现。本主题聚焦于使用jQuery来模仿QQ的消息提示功能,这是一个常见的用户交互设计,旨在提供实时反馈并提升用户体验。 ...

    jquery命名空间模拟

    `.data()`可以用来存储插件的私有数据,而`.fn.extend()`则用于扩展jQuery对象的方法。下面是一个创建jQuery插件的简单示例: ```javascript (function($) { var pluginName = 'myPlugin'; $.fn[pluginName] = ...

    学习jQuery源码时模仿写出来的一个简易框架实现了jQuery的部分核心功能

    8. **实用工具函数(Utility Functions)**:如`$.each()`, `$.extend()`, `$.trim()`等,是jQuery中的通用辅助方法,对简化代码有很大帮助。 在模仿jQuery的简易框架中,开发者通常会遵循以下步骤: 1. **选择器...

    最新版锋利的jquery综合案例

    8. **面向对象编程**:jQuery支持面向对象编程,通过`.extend()`和$.fn扩展,可以创建可复用的组件和插件。 9. **性能优化**:学习如何有效地使用jQuery,避免不必要的DOM操作,提高页面加载和执行速度。 通过这个...

    jQuery实例源码一、二、三季完全版

    2. 插件开发:jQuery生态系统中有众多插件,通过`$.fn.extend()`可以创建自定义的jQuery插件,扩展其功能,例如滑动效果、轮播图、表单验证等。 三、jQuery实战示例 1. 选择器应用:通过查看不同季节的示例,你...

    20款jquery网页颤抖摇摆特效特效代码

    标签 "20款 jquery" 提醒我们这些效果都是基于jQuery的,这可能包括使用$.fn.extend()扩展jQuery对象,创建自定义插件,或者利用jQuery的核心函数如animate()来进行动画制作。jQuery的语法简洁,使得开发者能够快速...

    jQuery实现原理的模拟代码 -6 代码下载

    这些代码包可能包括了模仿jQuery核心功能的文件,如`jQuery-core.js`,模仿事件处理的`jQuery-event-2.js`,数据处理的`jQuery-data.js`,对象扩展的`jQuery-extend.js`以及处理Ajax的`jQuery-ajax.js`。 ### 结论 ...

    prototype手册

    Prototype.js的核心概念是模仿面向对象编程(OOP)的特性,为JavaScript提供类和继承等结构,从而简化复杂的前端开发。 ### 1. 原型链 在JavaScript中,每个对象都有一个`__proto__`属性,指向创建该对象的构造...

    仿京东图片放大.zip

    jQuery插件的基本结构通常包括一个函数,该函数接受配置参数,并通过`$.fn.extend()`扩展jQuery对象的方法。用户只需简单引入插件和jQuery库,然后调用对应的jQuery选择器方法即可启用该功能。 6. **示例与文档**:...

    JQ 完美仿qq邮件功能

    这涉及到理解jQuery插件的构造模式,如使用`.fn.extend()`来扩展jQuery对象。 8. **表单验证**:在实际应用中,我们还需要确保用户输入的有效性,例如检查收件人邮箱地址的格式。可以使用正则表达式配合jQuery的...

    JQuery 获取Dom元素的实例讲解

    此外,`VP.extend`方法是自定义的一个扩展方法,它模仿了JQuery中的`$.extend`方法,用于合并对象的内容。这里的实现主要是为了展示如何在JQuery中通过对象的扩展来实现更复杂的功能,比如合并两个对象,处理深度...

    jQuery获取地址栏参数插件(模仿C#)

    本文介绍的是一款模仿C#中获取地址栏参数功能的jQuery插件,它使得开发者可以在JavaScript中以类似.NET的Request.QueryString["param"]的方式获取URL中的查询字符串参数。这个插件的功能非常实用,特别适合于需要在...

    jQuery仿Window弹窗插件

    1. **DOM操作**:利用jQuery的$.fn.extend()方法,可以扩展jQuery对象,添加自定义的弹窗函数。这样,开发者可以通过链式调用来选择元素并执行弹窗操作,如`$("#element").popupWindow(options);`。 2. **事件处理*...

    Site-Seguranca-Patrimonial-2:Site desenvolvido para fins de estudo das tecnologias jQuery e Sass

    jQuery,作为一个轻量级的JavaScript库,简化了DOM操作,使得JavaScript代码更加简洁易懂。在Site-Seguranca-Patrimonial-2项目中,jQuery被广泛用于处理用户交互,如响应式导航菜单的切换、表单验证、动画效果等。...

Global site tag (gtag.js) - Google Analytics