1樓：
你看看git上的這個寫法，閉包這樣可以把多個方法封裝在乙個物件上，並且變數都在內部定義不會洩漏到外部
2樓：
我說的範圍窄一些，就是一般意義上我們使用的前端元件，可以看一些元件的原始碼，細細體會，從簡單的入手，一般採用配置初始化，然後繼承的方式增加內部方法，當然也不固定，參考上面回答的，當然具體怎麼寫好看你的程式抽象程度，這方便要多看看設計模式方面的書還有程式設計方面的知識，多練多總結，就會慢慢提高。
當然更寬泛的概念就是一切都可以寫成元件，主要是利於程式的後期可維護，可擴充套件，並且越寫越快，因為我們自己在寫專案的過程中自己創造了一套元件而不需要別人的，我特別同意小爵老師的觀點，我們在自己寫元件的時候盡可能由使用者去操作那些可能會變的東西，自己只去實現一些通用的東西，然後留有鉤子然後使用者自己去實現。因為我們的元件不可能各個方面有考慮到，而且實際的專案是很複雜的，元件自己不可能面面具到。
3樓：
本來我是來看答案的但這麼好乙個問題只有乙個人回答， 我在這裡就說說我的理解吧。
@小爝 已經回答的很好了，但我的理解略有不同如果相同也就沒有意思了 O(∩_∩)O~ ，以下說的只是我理解的元件 。
我相信任何東西的本質都是最簡單的而抽象擴充套件復用這些都太概念化，我的理解元件不應該只是與dom相關的東西才叫元件比如ajax也應該視為乙個元件。
但是react vue 之流只是把ajax作為乙個外掛程式或者工具的概念，react vue的「元件」值得一提的地方是它們都定義了元件的標準還有元件和元件間的通訊也定義了標準即進行了歸一化，但是對我來說還是有點複雜。
其實大多數人沒有發現js中的函式本身就可以視為乙個元件，可以接收引數,引數也可以是函式（元件間的通訊）可以有返回值 （元件的成品） 如果善於利用是個不錯的選擇 ，反過來亂用也會變的很複雜但好在本質上是乙個簡單的函式
function
list
(item
,xsprimise
)//list 元件
function
item(x
)//item 元件
)//http元件
//渲染乙個列表
))現在貌似越來越簡單了元件的本質就是乙個函式，但是這還不夠我覺得元件裡面的東西都是很汙的，元件不按照預期執行怎麼辦？ 報錯怎麼辦完？對於list元件來說我真正想要的是乙個陣列而不是乙個promise 。
那麼針對以上的問題我們進行一層抽象吧，我把元件視為是乙個容器上面提到的問題都讓容器內部自動解決。 容器對外只提供乙個入口即對映容器裡面的內容（並不是取出來） 跟陣列的map函式類似（陣列也可以看做是乙個容器）目的是為了內容不脫離容器。
有元件就有元件和元件之間的通訊， 這個可以在容器的基礎上再抽象一層《應用容器》 來進行通訊。以上提到的都實現元件就可以保羅萬物了。 具體怎麼去做這裡先不細說去吃飯咯...
4樓：小爝
瀉藥，好久沒答題了，熱身一下。
題目並沒有寫是什麼元件，以及基於什麼框架的元件，？
回歸本質，元件的意義是什麼？我個人的理解是快速的完成乙個特定的可以被抽象和復用並且可以擴充套件的功能模組，和使用什麼框架無關。
關鍵在於這幾個詞抽象，復用和可擴充套件，當然效能安全和易用（api設計等）你也可以考慮進去。
妥了，我們脫離框架來說，如何編寫乙個前端的抽象可復用可擴充套件的功能呢？首先，你要有抽象能力，把現實前端業務中的需求總結成乙個正規化。比如前端的select下拉選擇框（可自定義樣式），後面我拿這個元件來進行舉例。
首先瀏覽器給了select這個標籤，但是很多人知道他的樣式很難看，難以擴充套件包括二級下拉列表，分組，自定義高度以及下拉容器的定位等一系列問題，產品需求來了，我們可能乙個web站點有很多地方需要用到這個自定義樣式的select元件，相信非常多人的人寫過。
抽象完需求，我們要對他進行設計和開發了，基於什麼框架其實不重要，重要在於如何讓他的復用性提高，並且有可擴充套件的能力。
說一下我的經驗，復用性提高的前提就是靈活的配置項，不約定死的html結構以及不強制依賴的css樣式，元件提供的只是下拉列表的能力這乙個功能，保持元件的單一性，對他不關心的通通用配置進行解耦。
舉個例子：
lt;li>1lt;li>2lt;li>lt;ul>3lt;/li>
可能有些人說，這樣蠻標準的嘛，乙個下拉多級選單的基本結構。那麼你就錯了，真的別人會用ul嗎？會用li嗎？
會用div嗎？li下面真的只會有ul或者文字嗎？他們的樣式呢？
我們改一下：
lt;li data-role="select-child">1lt;li data-role="select-child">2lt;li data-role="select-child">lt;div data-role="select-sub">3
lt;/li>
ok，我們通過增加attrs的方法來對html進行復用性的增強，html你可以放任何結構，只要你掛好role的鉤子就可以了，保持我們的結構 main->sub->child，當然你還可以設計成別的樣子。
那麼樣式怎麼辦？我以前的做法有2種，一種反應到html的classname上，一種是通過role來進行動態新增，我們只需要進行對應的配置如下：
}這樣css也可以盡量復用了，我們完全不需要關注main，sub，child到底長什麼樣子。
ok，我們增加一些相關的其他配置，他們關注select的一些行為：
你可以把上面這些想成是乙個jq外掛程式的配置也可以把他理解成乙個class類的構造器config，也可以把它理解成是vue或者react的props等，因為無論基於什麼，他們都是和抽象功能相關的屬性。
擴充套件性我有幾個基礎的方法來做，乙個是通過廣播的行為，乙個是通過繼承的方式，當然你還可以選擇組合的方式來進行擴充套件行為。
select舉例子吧：
let myselect = new Select廣播形式
myselect.on("change",(val)=>{});
//繼承
myselect.extend({
mynewMethod:functionthis.super.
method.call(this,...);//繼承方式擴充套件，當然你也可以重寫一些方法myselect.
mixin(utils); //組合一些工具方法等。
以上只是拋磚引玉，多看看一些設計模式的書會有更多靈感。
最後我們編寫好對應的components和components的css以及html，最後再組裝到一起，他有足夠的復用性，抽象行為，以及擴充套件方式，那麼對應文件api，配置說明，以及demo和最佳實踐。
總結下來，就是一套基本比較完美或者說合格的前端元件實現方式。
當然也會有更多高階的組織行為方法，針對這個問題，就當是拋磚引玉了。
現在寫 JavaScript 還要考慮對不同瀏覽器的支援嗎？
rambo 必須的啊 eg上傳檔案判斷大小你怎麼弄?你在正常瀏覽器中你可以使用file 你在非正常ie中呢?你只能使用控制項使用者體驗大幅度的下降乙個度 思揚 需要注意是肯定的，但並沒有多恐怖。現在的js庫 如mootools,jquery 在很大程度上解決了這個問題。一般在firefox或chro...
Vue怎麼實現載入網路元件（遠端元件）？
123木頭人 網路元件 Vue 3.2 引入了一種使用 Vue 元件 API 輕鬆建立原生自定義元素的新方法 defineCustomElement import from vue const MyVueElement defineCustomElement emits template 只用於 d...
JavaScript中寫乙個方法，用於實現繼承功能,怎麼寫
季斌 賭五分錢其實你不需要這樣實現繼承，ES5繼承可以試試mixinFunction prototype extend function Child call ctx aParents forEach function Parent wrapChild prototype cProto return...