每日学习心得：$.extend()方法和(function($){...})(jQuery)详解

2014-02-09

前言：

    节后头两天上班，主要是调整工作状态。项目也不是很紧，趁着周末把年前遇到了一些关于JS和JQuery的一些问题给总结一下。主要是介绍JQuery的extend方法和（function($){}）(jQuery)，也会涉及一些相关的知识。

1.    JS中substring与substr的区别

之前在项目中用到substring方法，因为C#中也有字符串的截取方法Substring方法，当时也没有多想就误以为这两种方法的使用时一样的。这样就直接按照在C#中使用Substring的方式，直接在js中用了substring，在实际的项目中，有时候能得到正确的结果，但是有时候得到的结果却让人匪夷所思，后来仔细的调试跟踪之后才发现，原来是Js中substring的方法跟C#中的Substring方法不一样。关于C# 中的字符串截取方法已经很简单了，这里就不再叙述了。主要讲一个js中的substring方法，顺便再讲一下substr方法。

Substring：

该方法可以有一个参数也可以有两个参数。

l  一个参数：

示例： var str=“Olive”；

               str.substring(3);

        结果：“ve”

        说明：当substring只有一个参数时，参数表示从字符串的第几位开始截取，

直截取到字符串结尾。

l  两个参数：

        示例：var str=“Olive”；

1)       Str.substring(3,4);

2)       Str.substring(3,2);

           结果：1) “v”  2) 0

           说明：当substring有两个参数时，第一个参数表示从字符串的第几位开始截取，第二个参数表示截取到字符串的第几位。这点是个C#中字符截取不同的一点，所以才会导致不同的结果。

Substr：

该方法也可以有一个或两个参数。

l  一个参数：

    说明：substr一个参数时，作用跟substring方法一个参数时一样。

l  两个参数：

    示例：var str=“Olive”；

1)       Str.substr(3,2);

2)       Str.substr(3,4);

        结果：1) “ve” 2) “ve”

        说明：substr有两个参数时，第一个参数表示从字符串的第几位开始截取，第二个参数表示截取多少位字符串。这点跟C#中字符截取相同的，所以在以后的使用中，如果想要避免出现截取的问题最好还是使用substr。

2 $.extend()

因为项目中有些地方看到有用到这个方法，当时也不知道是什么意思，见的多了就想了

解一下。原来这个方法还是挺有用的，多用在编写插件，当然，它本身也有一些重载原型。

2.1 extend(result,item1,item2…..)

这里这个方法主要用来合并，将所有的参数项都合并result中，并返回result，但是这

样就会破坏result的结构。

2.2 extend({},item1,item2,……)

用这个方法，可以将所得的结果全部合并在{}中，并返回，而且还不会破坏原有的项的结构。

示例：

Var item={name:”olive”,age:23};

Var item1={name:”Momo”,sex:”gril”};

Var result=$.extend({},item,item1);

结果：

Result={name:”Momo”,age:23,sex:”gril”};

说明：

以上的结果表明extend方法将所有的项都合并到了{}中，但是，细心一点就会发现，其中item1中的name：“Momo” 将item中的name：“olive”给覆盖了，这是怎么回事？请接着往下看。

2.3 extend(bool,{},item1,item2….)

Extend方法还有带bool型参数的重载。

bool型参数为true表示深拷贝，为false时表示浅拷贝。具体可以通过一下示例来说明：

示例：

var item={name：“olive”,age:23,address{provice:”河南”,city:”郑州”}};

var item1={sex:”girl”,address{city:”北京”}};

var result=$.extend(true,item,item1);

var result1=$.extend(false,item,item1);

结果：

Result={name：“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};

Result1={name：“olive”,age:23,sex:”gril”,address:{ city:”北京”}};

说明：

以上结果说明，当参数为ture时，即为深拷贝，当子项item1中的子项有与item中的子项相同属性的值不一样时，item1中子项的值会将item子项中的值给覆盖，当子项item1的属性跟item中的属性不同时，会与item进行合并。

当参数为false时，子项item1中的子项中与item中的子项属性相同时，item1中子项的属性值会将item中的值给完全覆盖。

2.4 $.extend(item)

该方法是将item合并到Jquery的全局对象中去，相当于为Jquery全局对象添加了一个

静态方法（对应这里的静态方法，当然还有实例方法，在后边有介绍）。

     示例：

           $.extend({SayHello:function(value){alert(“hello “+value);}});

           这样写过之后，就可以直接调用SayHello方法：

           $.SayHello(“Olive”);

     说明：该方法相当于为Jquery类添加了新的方法。

2.5 $.fn.extend(item)

上边提到的$.extend(item)说是为Jquery类添加了静态方法，那么这里的$.fn.extend(item

)就是为每一个实例添加一个实例方法了。

     示例：

         $.fn.extend({hello:function(value){alert(“hello “+value);}});

         这样写过之后，在获取每一个示例之后，都可以调用该方法：

         $(“#id”).hello(“Olive”);

 

3.（function($){….}）（jQuery）

初次看到这种写法时，一头雾水，不知所云。在网上查找了一些资料之后才有点明白。

我们先看第一个括号里边的内容：function($){….}，这不就是一个匿名的函数吗？但是它的形参比较奇怪，是$,这里主要是为了不与其它的库冲突。

这样我们就比较容易理解第一个括号内的内容就是定义了一个匿名函数，我们在调用函数的时候，都是函数名后边加上括号以及实参，但是由于操作符的优先级我们定义的匿名函数也需要用（）括起来。

现在我想大家已经很清楚这句话是什么意思了吧。第一个括号表示定义了一个匿名函数，然后第二个函数表示为该函数传递的参数，整个结合起来意思就是，定义了一个匿名函数，然后又调用该函数，该函数的实参为jQuery。

相当于：function fun($){…};fun(jQuery);

这种方法多用于存放开发的插件，执行其中的代码时，Dom对象并不一定加载完毕。于此相反的是$(function(){})，这种方法在使用时页面的Dom对象已经加载完毕了。事实上该方法的全写是：$(document).ready(function(){});

 

好了，今天就总结到这里了，主要都是一些跟写插件相关的常用的方法，希望能给大家一些帮助。