zoukankan      html  css  js  c++  java
  • 通过js的面向对象来理解jQuery.extend()

    1、$.extend()为jQuery添加扩展方法和属性,用一个或多个多想扩展另一个对象,并返回已修改的原始对象;

    语法:$.extend({object1},{object2},{object3},{object4});把object2,object3,object4的对象中的属性和方法合并(重构)到object1对象中,后面参数的键值与前面的相同的话,合并(重构)后以后面的为主;

    //(1)多个参数对象
       var parameObj = { "province": "山东", "city": "济南" }; //实例的对象
       var parameObj1 = { "province": "河南", "name": "张三" };
       var parameObj2 = { "province": "山西", "sex": "男" };
       var parameObj3 = { funWay: function () { alert("方法") } };
       var newStr = $.extend(parameObj, parameObj1, parameObj2, parameObj3);
    //object1的结构变化
       alert(parameObj.province); //山西  若键值相同合并(重构)以最后一个对象为主
       alert(parameObj.city); //济南
       alert(parameObj.name); //张三
       alert(parameObj.sex); //
    parameObj.funWay(); //var newObj = new newStr(); 返回的newStr本身就是一个实例对象了,所以不能在new对象来调用方法和属性 //生成的newStr实例对象 alert(newStr.province); //山西 alert(newStr.city); //济南 alert(newStr.name); //张三 alert(newStr.sex); // newStr.funWay(); /*****通过jquery的扩展方法extend合并生成的是一个实例对象,所以他不需要再new生成实例对象或者通过prototype来添加方法*****/

    *通过合并(重构)后parameObj的对象结构发生了变化;然后把新生成的对象赋值给newStr,parameObj对象的结构和newStr对象的结构一样;

    2、$.extend()一个参数对象的情况,要想理解这种情况,首先得明白Javascript的面相对象和jQuery对象;

    (1)javascript的面相对象看下这篇博文有助于下面的理解:http://www.cnblogs.com/heluo/archive/2013/05/21/3091743.html

    (2)jQuery就是javascript的一个巨大类库,类库中有许多方法,比如我们用语句 $("#btn1") 会生成一个 jQuery类的实例或者说是jQuery的实例对象,$("#btn1")所调用的函数就是,就是Jquery类库中定义的函数;

    (3)我们为JQuery类扩展函数和属性经常用以下两种方法:

            1)jQuery.extend()  相当于为jQuery的类库扩展静态的方法和属性

            2)jQuery.fn.extend()  相当于为jQuery实例对象扩展方法和属性

            jQuery可以看成类名,也可以简写成$; $.fn.extend()=$.prototype.extend()这样扩展的方法只有new实例对象后才能调用;

    var funObj = { Validate: function () { alert("验证方法"); } };
    var f1 = $.extend(funObj);
    $.Validate(); //就像调用静态方法一样
    var f2 = $.fn.extend(funObj);
    $("#but").Validate(); //调用实例对象的方法

    (4)下面我们看一下$.extend()一个参数对象的情况,先看下面的例子:

    var obj = { "name": "小柳", run: function () { alert("一个参数对象") } };
    var newObj = $.extend(obj);
    alert(obj.name);
    obj.run();
    alert(newObj.name);
    newObj.run();
    $.run();
    alert($.name);
    newObj.prototype.AddFun = function () { }; //通过prototype添加方法
    var oneObj = new newObj();
    oneObj.AddFun();

    我们看到obj的结构没有发生变化,仍是一个实例对象,但是newObj对象结构和obj一样,但是是一个函数对象(或者类,因为javascript中的函数和类区分不明确),还能够通过prototype为其扩展添加属性和方法,然后通过new生成实例对象,但是新生成的oneObj对象不能再调用静态类中的方法和属性。

    (5)JQuery 对象之所以能够实现链式操作是因为大多数的JQuery函数返回的是JQuery对象,除了那些获取值得JQuer函数;使用链式操作可以是代码看着简洁,并能提高性能,不用多次组合jQuery实例对象,链不宜过长,过长的话会降低可读行,不利于维护,所以适中为好!

  • 相关阅读:
    JavaScript之DOM文档对象模型--对HTML元素的增删操作
    JavaScript之DOM文档对象模型--对HTML元素的访问操作
    JavaScript之BOM浏览器对象模型-history
    SpringBoot配置自定义日期参数转换器
    SpringMVC参数绑定(未完待续)
    一个简单的SpringBoot入门程序
    四种JavaEE架构简介
    浏览器禁用Cookie后的Session处理
    基础回顾: 关于Session的一些细节
    使用Cookie实现用户商品历史浏览记录
  • 原文地址:https://www.cnblogs.com/heluo/p/3107294.html
Copyright © 2011-2022 走看看