2018 5 8 元件開發的一些記錄

2021-08-19 19:06:33 字數 925 閱讀 4032

元件化思想是近幾年來說,在前端領域非常火的乙個開發思想。

以下是**知乎的我認為的跟自己理解相近的對於元件的介紹:

元件是對邏輯的封裝,不限於圖形元素。即我們可以把if做成元件、把乙個倒計時做成元件、把一段動畫做成元件、把路由做成元件、把資料架構做成元件,而這些並不能稱為控制項元件具備單個可移植性,即「隨載入隨用」,不需要為其準備複雜的基礎條件(如引入樣式、引入框架等)。然而這一點現有那些所謂元件庫做得並不好,技術上也不大現實元件是宣告式定義的,而非命令式。這個不想多說,很大程度上是自己主觀的乙個想法

我個人理解的元件化開發是將乙個具有可復用性的元素或者方法封裝成乙個可隨使用隨呼叫的元件的開發方式。而這種開發方式可以使前端專案在開發的過程中更簡便的維護。

同時,最近在學習vue的同時,在掘金看到乙個很有意思的帖子。其中作者介紹了其使用vue的一些業務場景,看到了作者對於vue的全域性註冊和區域性註冊的一些介紹,其中介紹到了部分元件開發也就是全域性元件開發的介紹。

1.全域性註冊

vue.component('component-name', )
乙個網頁,一般由基礎功能塊,再由盒子模型合理布局之後,便組成了我們常見的網頁。這些基礎性功能塊,再由一些基礎元素組成,比如button標籤、input標籤等等。這些大家應該都了解。 在這基礎上,整個頁面基本遵守頁面設計統一的原則,基礎元素一般要設計統一,但又要在多個地方復用,所以此時就是全域性元件的發揮之地。我們將多處需要復用的元素,封裝成全域性元件,功能與設計統一維護,而需要用到的地方,直接呼叫就好了,無需二次開發。這就是全域性元件的便利之處。

全域性元件的開發可以不侷限於一些大型的元件開發,例如分頁**或者一些其他的,一些小的例如input之類的也可以通過元件化開發的思想去將之變為乙個自定義元件,在使用的時候呼叫就可以,而且也更利於後期的維護,而這也是一些ui元件的開發思想和開發源泉。

Vue元件基礎 一 元件的建立

這裡簡單介紹一下元件建立的三種方法 方式1 extend建立的元件 用乙個變數接收extend建立的元件 var com vue.extend 然後把建立好的元件放入到vue中 vue.component first component com 第二種 註冊全域性元件 注意元件必須在vue控制的元素...

Angular2元件開發 模板的邏輯控制(一)

有時我們需要模板的一部分內容在滿足一定條件時才顯示,比如右邊示例中的ezreader元件,對於試用使用者,它將在正文之上額外顯示乙個廣告 這是指令ngif發揮作用的場景,它評估屬性ngif的值是否為真,來決定是否渲染template元素的內容 1 view angular2同時提供了兩種語法糖,讓n...

Spring註解開發(一)元件註冊

spring元件註冊就是讓spring的ioc容器去管理元件的這個bean,spring元件基於註解的註冊方法主要有以下幾種 首先需要乙個 configuration註解的配置類,告訴spring容器配置的入口,和xml配置檔案的功能一樣 首先新建乙個person類,屬性為string name,i...