JS元件開發

2022-03-07 14:14:03 字數 613 閱讀 2913

看了一篇關於寫js元件開發的部落格,居然看不懂,雖然我前幾天覺得自己把原型那塊弄的非常懂,但是看到上面實際應用的**時,還是一臉懵逼,不知道如何下面的呼叫這個元件的方式為何是這樣,我就寫了下面的乙個小例子:而且呢,

你一定要搞清楚this的指向問題,在這裡this都是指向建構函式textcountfun.

$(function

()).render();

});

為啥這樣呼叫:首先,匿名函式自執行--返回了建構函式了textcountfun--1,所以textcount 等同於建構函式textcountfun,

2,new textcount()相當於例項化了textcountfun,

3,new textcount().init(),就是呼叫了textcountfun原型裡的方法,init並且傳了引數, init方法又返回了this---又因為this指向了textcountfun,所以實現了鏈式呼叫render.

附上我自己動手分析的乙個小例子:當你弄不明白的時候,動手寫個小小的demo一步步分析,你就會懂了....

順便奉上幾篇關於js外掛程式編寫規則的文章

js元件開發

首先附上jquery元件開發的 jquery元件開發保證chainability,通過返回this.each jquery.fn.test2 function this.css this.each 裡面的this為jquery物件,但是alert裡面this為dom物件.為什麼要return thi...

JS拖拽元件開發

首先,看一下拖拽的原理。被拖拽元素位置的變化,left值的變化其實就是滑鼠位置水平方向的變化值,e.clientx 滑鼠左鍵按下時e.clientx。top值的變化其實就是滑鼠位置豎直方向的變化值,e.clienty 滑鼠左鍵按下時e.clienty。另外就是設定拖拽的範圍,上下左右不得超過父元素所...

JS 簡單的元件化開發思想

利用立即執行函式和閉包的原理 1.定義外部接收用的變數 var yourvar 2.封裝元件 function 形參root function 內部函式2 arg function 內部函式3 arg function 內部函式keyfunction arg1,arg2,將內部函式keyfuncti...