js元件開發

首先附上jquery元件開發的**： 

jquery元件開發保證chainability，通過返回this.each();

jquery.fn.test2= function()); 

};

為什麼要return this.each()物件，所以這樣就可以繼續鏈式操作了。

js元件寫法

元件寫的不多，使勁回憶以前用到的元件，完全用js開發的元件，主要有兩部分，tag名稱定義和元件api，具體的實現過程不記得了。

先給出乙個計算輸入字元陣列件的原始寫法：

>
>
="utf-8">
>test
="">
>
$(function() 
//渲染元素
function render();
$('#j_input_count').html(num+'個字');
}//監聽事件
input.on('keyup',function());
//初始化，第一次渲染
render();
})>
="text" id="j_input"/>

1.作用域隔離

使用物件字面量定義乙個物件，呼叫物件的函式方法；

var textcount = ,

bind:function());
},getnum:function(),
//渲染元素
render:function();
$('#j_input_count').html(num+'個字');
}}$(function() ).render();
}) 這樣寫的優點是：所有的功能都在乙個變數下面。**更清晰，並且有統一的入口呼叫方法
缺點：沒有私有的概念，所有的方法都是公開的，例如getnum和bind方法應該是私有的方法，但是其他**可以訪問和更改他們，當**量特別特別多的時候，很容易出現變數重複，或被修改的問題。
為了私有化方法，出現的閉包的寫法。
2.閉包寫法

var textcount = (function());

} var _getnum = function(that)
var textcountfun = function(config)
textcountfun.prototype.init = function(config) ;
textcountfun.prototype.render = function() ;
$('#j_input_count').html(num+'個字');
};//返回建構函式
return textcountfun;
})();
$(function() ).render();
})這種寫法把所有的東西都放在乙個自動執行的閉包模組中，所以不受外界的影響，並且只對外返回了
textcountfun的建構函式，生成的物件只能訪問到init,render方法。這種寫法已經滿足絕大多數的需求了。事實上大部分的jquery外掛程式都是這種寫法。

3.物件導向方式
上面的寫法已經可以滿足大部分需求，但是當乙個頁面特別複雜，我們需要做一套元件。僅僅用這個就不行了。首先的問題就是，這種寫法太靈活了，寫單個元件還可以。如果我們需要做一套風格相近的元件，而且是多個人同時在寫。那真的是噩夢。
在程式設計的圈子裡，物件導向一直是被認為最佳的編寫**方式。比如j**a，就是因為把物件導向發揮到了極致，所以多個人寫出來的**都很接近，維護也很方便。但是很不幸的是，j**ascript不支援class類的定義。但是我們可以模擬。
先實現乙個簡單的js類，作為base類。

var class = (function() 

}} var _extend = function() 也支援 function
while (item = items.shift()) 
// 這邊是返回的類，其實就是我們返回的子類
function subclass() 
// 賦值原型鏈，完成繼承
subclass.prototype = prototype
// 改變constructor引用
subclass.prototype.constructor = subclass
// 為子類也新增extend方法
subclass.extend = _extend
return subclass
} //超級父類
var class = function() {}
//為超級父類新增extend方法
class.extend = _extend
})()

基類的使用方式為：

/繼承超級父類，生成個子類animal，並且混入一些方法。這些方法會到animal的原型上。

//另外這邊不僅支援混入{}，還支援混入function
var animal = class.extend(,
say:function()
})//繼承animal，並且混入一些方法
var dog = animal.extend(
})//new animal().say()
new dog().say()
可以看到，我們的元件有些方法，是大部分元件都會有的。
抽象出這三個方法，都按照這個約定寫，開發大規模元件庫就變得更加規範，相互之間配合也更容易。
事實上，這邊的init，bind，render就已經有了點生命週期的影子，但凡是元件都會具有這幾個階段，初始化，繫結事件，以及渲染。當然這邊還可以加乙個destroy銷毀的方法，用來清理現場。
在元件開發中，引入事件機制 ，以便向外部報出元件當前狀態。
觀察者模式
想象一下base是個機械人會說話，他會一直監聽輸入的字數並且匯報出去（通知）。而你可以把耳朵湊上去，聽著他的匯報（監聽）。發現字數超過5個字了，你就做些操作。

//輔組函式，獲取陣列裡某個元素的索引 index

var _indexof = function(array,key)
var event = class.extend(
}if (!this.__events[key]) 
if (_indexof(this.__events,listener) === -1 && typeof listener === 'function') 
return this
},//觸發乙個事件，也就是通知
fire:function(key)
return this
},//取消監聽
off:function(key,listener)
}//不傳監聽函式，就去掉當前key下面的所有的監聽函式
if (key && !listener) 
if (key && listener) 
return this;
}})var a = new event()
//新增監聽 test事件
a.on('test',function

JS元件開發

看了一篇關於寫js元件開發的部落格，居然看不懂，雖然我前幾天覺得自己把原型那塊弄的非常懂，但是看到上面實際應用的 時，還是一臉懵逼，不知道如何下面的呼叫這個元件的方式為何是這樣，我就寫了下面的乙個小例子 而且呢，你一定要搞清楚this的指向問題，在這裡this都是指向建構函式textcountfun...

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...