在學習怎麼寫之前我們來先看看什麼是元件，我的理解是快速的完成一個特定的可以被抽象和複用並且可以擴充套件的功能模組，這裡和使用什麼框架沒有關係。

抽象、可複用、可擴充套件是其最主要的特點，下面我們來具體講下javascript元件該怎麼寫。

抽象是什麼呢？就是把實際業務需求中常用的東西總結成一個通用的正規化。比如bootstrap框架裡面的眾多元件，就拿彈出框元件來說，是實際業務開發過程中經常會被使用的，被抽象出來以後透過一些配置就能夠快去開發。

抽象完以後，我們就要考慮對它設計和開發，考慮如何才能提升它的可複用性，不能說只能在特定情況下才能使用，不可變更，這樣就違背了元件的特性，也就不能被稱為元件了。

複用性提高的前提就是靈活的配置項，不約定死的html結構以及不強制依賴的css樣式，元件提供功能的專一性，保持元件的單一性，對其它不關心的通通用配置進行解耦。

我們還拿彈出框元件來說，彈出框可以有多種彈出方向，如下圖

不同的彈出方向是透過attr屬性來配置的，而其html結構並不會發生變動

可以看出不同的彈出方向其data-placement屬性是不同的，而其它屬性是相同的，其中data-toggle屬性是用來識別執行元件的。這樣一來，html結構，樣式就都是可以複用的，而只需要更改attr來實現不同的需求。

擴充套件性一般有兩種，一個是透過廣播的行為，一個是透過繼承的方式，當然你還可以選擇組合的方式來進行擴充套件行為。

比如彈出框元件提供了許多事件

透過這些事件你可以很好的進行擴充套件，在不同的執行過程中去自定義自己的行為，從而實現業務需求。

上面我說的只是一些基本操作，當然也會有更多高階的組織行為方法，針對這個問題，就當是拋磚引玉了。