根据我现有的知识，腾讯信用的界面已经在前端实现，并且我自己做了一个垂直尺度的插件。曲线的位置可以根据输入的数值动态改变。这次主要想总结一下jQuery中的extend方法，这也是我们编写插件时常用的方法。

翻译

jQuery中的扩展方法

在这里，我参考前人的博客，可以进一步了解：

文档中给出的解释是jQuery.extend()函数主要用于将一个或多个对象的内容合并到目标对象中，这个函数可以将一个或多个对象的成员属性和方法复制到指定的对象中。

扩展也是我们编写插件时常用的方法。

1.可拓方法的原型

$.扩展(参数，dparam.)，这意味着要将dparam合并到param中。

需要注意的是，如果多个对象都有这个属性，那么后者会覆盖前者的属性值。

也就是说，var结果=$。extend ({}，{姓名：' j so '，年龄：17}，{姓名： ' okay Chen '，性别：' boy'})

最终结果={姓名： '好陈'，年龄：17，性别： '男孩' }；

2.只有一个参数

当只有一个参数时，修改后的方法将被合并到jQuery的全局对象中

例如：

$.extend({ hello : function(){ console . log(' hello extend ')})最终会向jQuery全局对象添加hello方法。

3.布尔值的情况

jQuery中还有一个扩展的重载原型

语法：$。扩展(布尔值，dest，src1，src2.)

第一个布尔参数指示是否使用深度复制，默认值为false(可以明确指定为true，但不能明确指定为false)

那么什么是深度复制呢？事实上，不难理解深度复制是“属性对象”的“属性”也将被复制到其中的目标对象

var结果=$。extend(true，{}{name:'JSoso '，abstract: {age:17，country:'USA'}}，{last:'Amor '，abstract : { state : ' student '，country : ' China ' } })；那么合并的结果就是：

结果={name :' j so '，last :' Amor '，abstract : {age :17，state :' student '，country :' China'}}那么如果参数为false，会是什么结果呢？

Result={name :' j so '，last :' Amor '，abstract : { state : ' student '，country :' China'}}可以看到第一个摘要中的属性没有被复制，因为没有执行深度复制，所以该摘要会被后一个覆盖。

关于扩展复制的方法，我已经总结了以上三点，但是还有很多知识需要我们去探索。

在线分析

我觉得目前互联网上几乎都是横滑秤插件，竖滑秤插件几乎没有，其实都差不多。因为做这个事情的需要，我需要做一个纵向的尺度(而且我不喜欢用插件，我想有一天实现我的插件梦)。

我做这个插件的第一步就是用HTML CSS静态写出大致的效果(同时我觉得我也直观的构思了这个东西的大致结构)，比如先从0到10做出来，然后计算距离，之后再大惊小怪。

当我们清楚的知道这个scale的架构后，我们需要做的就是使用append方法将它插入到指定的位置(这里我使用的是jQuery)(因为此时你的scale的css代码已经基本完成了)。

然后我们需要处理中间标记(即曲线的初始位置)

var firstRand=trueif (firstRand) { pTop=$('。ruleropinter’)。位置()。底部；} var Rulerlno=0；for(var z=0；z setLenz){ if(z * set height PTop){ LimitTop=PTop-z * set height；规则编号=z；打破；}}变化曲线的位置对应于输入值

if(param . value param . value=param . minu nit param . value=param . max){ $('。ruleropinter’)。css('bottom '，(param . value/param . minu nit)* 10 * param . mult)} else { $('。ruleropinter’)。css('bottom '，' 0 ')；}然后我们用每个遍历方法标记比例值(这里idx是索引值，ele表示得到遍历的每个dom对象)

$(“#”param . wrapperid)。尺寸编号')。每个(函数(idx，ele){ if(idx=rule rlno idx setLen){ $(ele)。html((idx-rule rlno)* param . minu nit * param . unitset)；}})我们秤的代码已经在这里完成了(我只展示了部分代码)。

初始化

当我们封装完插件后，我们只需要创建一个实例化的对象。

Var measureruler尺规=new measureruler尺规({wrapper id: '尺规wrapper '，//刻度容器的id max3360110，//最大刻度最小值：1，//最小刻度单位集：10，//刻度单位长度值：60，//初始值，曲线的初始位置mult:1刻度倍数，默认值为10px})摘要

以上是边肖为实现腾讯信用界面(自制秤)而推出的jQuery。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！