js中的extend

11人阅读 评论(0) 收藏 举报
分类:


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()

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

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

.extend(<br>sayHello:function(name)<br>console.log(Hello,+(name?name:Dude)+!);<br><br>)<br>.sayHello(); //调用
$.sayHello(‘Wayou’); //带参调用

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(){});

查看评论

详解js中extend函数

为了简化类的声明,可以把派生子类的整个过程包装在一个extend的函数,和其他语言中的extend关键字类似,基于一个给定的类结构创建一个新的类 function extend(subClass,...
  • sysuzhyupeng
  • sysuzhyupeng
  • 2017-02-03 14:54:43
  • 930

js继承的实现 extend

Object.extend = function (destination, source) { for ( var property in source) {     destination[p...
  • xl7751125
  • xl7751125
  • 2016-03-01 16:13:37
  • 2749

js 自定义extend函数

1.实现
  • juroney1
  • juroney1
  • 2014-05-07 01:26:43
  • 2965

原生js实现复制对象、扩展对象 类似jquery中的extend()方法

jq的extend()方法能很方便的实现扩展对象方法,这里要实现的是:原生js实现复制对象,扩展对象,类似jq中的extend()方法,需要的朋友可以参考下 q的extend()方法能很方便的实现...
  • u010585120
  • u010585120
  • 2016-05-18 22:39:04
  • 2400

js插件之$.extend()、$.fn和$.fn.extend()区别

jQuery为开发插件提拱了两个方法,分别是:原文来自:http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html jQuery.fn....
  • yummy_go
  • yummy_go
  • 2017-01-11 10:05:01
  • 1176

JavaScript的extend函数

为了简化类继承的声明,基于一个给定类结构创建一个新的类,把整个过程封装在一个extend()函数里,代码如下: function extend(subClass,superClass){    /...
  • clj9017
  • clj9017
  • 2014-01-10 14:34:33
  • 804

js obj合并 添加 移除 Object.assign $.extend splice

var a={"楼盘":"","交易类型":"","数据类型":"","期间":"","成交时间":""}var b={"姓名":"","工号":"","companyName":"","统计时间":...
  • q3585914
  • q3585914
  • 2017-04-28 17:24:56
  • 2119

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

2014-02-09 前言:     节后头两天上班,主要是调整工作状态。项目也不是很紧,趁着周末把年前遇到了一些关于JS和JQuery的一些问题给总结一下。主要是介绍JQuery的extend方...
  • xuemoyao
  • xuemoyao
  • 2014-02-09 23:47:38
  • 43035

js extend

转载  http://www.cnblogs.com/anjey/archive/2012/01/11/2319765.html  上回说到了类的定义,prototype通过一个全局对象Class从...
  • fendou4533
  • fendou4533
  • 2013-01-16 18:01:47
  • 425

Javascript中extend方法的实现

今天来分析下extend方法在各种js框架下的设计。这个函数的功能基本都是实现对象的拷贝功能,即将一个对象的所有属属性拷贝到另外一个对象上去,这个函数使用的频率也很高,如果我们要将一个类的所有方法拷贝...
  • wjm80839664
  • wjm80839664
  • 2016-03-16 14:54:14
  • 449
    个人资料
    等级:
    访问量: 4341
    积分: 145
    排名: 113万+