閱讀目錄

• 效果圖

• jQuery中的extend方法

• 流程分析

• 初始化

• 寄語

依據我現有的知識，在前端上"簡易"的實現了騰訊信用的界面，同時自己自製了一個豎直的刻度尺插件，曲線的位置可以根據傳入的數值動態的改變，這次主要也想總結一下關於jQuery中extend的方法，也是我們在寫插件的時候常用的方法

回到目錄

效果圖

回到目錄

jQuery中的extend方法

這裡我參考了前輩的博客，在前輩博客中可以進行更深一步的學習：

文檔中給的解釋是：jQuery.extend()函數主要是用於將一個或多個對象的內容合併到目標對象上，該函數可以將一個或多個對象的成員屬性和方法複製到指定的對象上。

extend也是在我們寫插件時常用的方法，

1、擴展方法的原型

$.extend(param,dparam...),它的含義是將dparam合併到param中，

需要注意如果多個對象具有該屬性，則後者會覆蓋前者的屬性值，

也就是說var result = $.extend({},{name : "JSoso",age：17}，{name:"okaychen",sex:"boy"})

最後 result = {name:"okaychen",age:17,sex:"boy"};

2、只有一個參數的情況

只有一個參數時會將改方法合併到jQuery的全局對象中

比如：$.extend(

{hello:function(){console.log("hello extend")}}

)

最終會將hello方法添加到jQuery全局對象中去。

3、帶布爾值的情況

jQuery中的extend還有一種重載原型

語法：$.extend(boolean,dest,src1,src2...)

第一個布爾值參數表示是否使用深度拷貝，默認為false（可以明確指定為true，但是不能明確指明為false）

那麼什麼是深度拷貝呢？其實不難理解，深度拷貝就是該"屬性對象"的"屬性"也會被拷貝的目標對象中

var result = $.extend(true, {}

{name:"JSoso",abstract: {age：17,country:"USA"}},

{last："Amor",abstract: {state:"student",country:"China"}}

);

那麼合併後的結果就是：

result = {

name:"JSoso",

last:"Amor",

abstract:{age:17,state:"student",country:"China"}

}

那麼如果參數是false，結果會是神馬呢？

result = {

name : "JSoso",

last : "Amor",

abstract:{state:"student",country:"China"}

}

會看到第一個abstract內的屬性並沒有被拷貝，因為沒有執行深度拷貝，所以abstract會被後一個覆蓋掉了。

關於extend拷貝的方法我總結了上面三點，其實還有好多學問，需要我們去發掘。

回到目錄

流程分析

我看目前網上幾乎都是水平的可滑動的刻度尺插件，幾乎沒有豎直的插件，其實也大同小異。因為做這個東西的需要，所以我需要做一個豎直的刻度尺（而且我本人也不喜歡用插件，我想有一天實現我的插件夢）。

我做這個插件的第一步是先用HTML+ CSS靜態的寫出大致的效果（這樣的同時我覺得我也直觀的構思了這個東西的大致架構），比如先0~10做出來，然後計算好間距，然後在後面做文章。

當我們清晰了這個刻度尺的架構之後，需要做的就是用append的方法（這裡我用的jQuery）插入到指定的位置就可以了（因為這個時候你的刻度尺css代碼基本已經完成）。

然後我們需要處理中間標誌（即曲線的初始位置）

改變曲線的位置<和傳入的數值相對應>

然後我們用each遍歷的方法給刻度尺標上刻度值（這裡idx就是索引值，ele表示獲取遍歷的每一個dom對象）

到這裡我們的刻度尺的代碼已經完成（我只展示了部分代碼）。

回到目錄

初始化

當我們完成插件的封裝，我們只需要創建一個實例化的對象就可以了。

文章摘自博客園

更多精彩推薦：

IT職業教育：http://www.ujiuye.com/

更多前端知識學習：http://www.ujiuye.com/zt/webqianduan/?wt.db=lsh11tt

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！