當前位置:首頁 » 網頁前端 » 前端組件化開發
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端組件化開發

發布時間: 2022-01-30 16:50:05

Ⅰ 怎麼看待前端 組件化 開源 知乎

前端相對後端又有點後台化,因為既要懂得網站前台的事情又要懂得後台代碼的事情!

Ⅱ 如何在不使用前端框架的情況下嘗試組件化開發

一個組件包括三個內容!
組件的結構(html)、組件的表現(css)、組件的行為(javascript);
在你引入其中一個的時候,順帶將其他部分引入就可以了,
不過還有一個問題,就是作用於,css和js如果不限定作用於的話,會影響到其他組件,這些在很多blog裡面有說明的,詳細請 https://segmentfault.com 等網站查找吧

Ⅲ 什麼叫組件化開發

張克軍 提出的「組件化就是函數式界面開發」這一說法我是難以接受的,函數式界面開發就讓它好好地叫「函數式組件化」吧,不然我們會在所謂的「傳統UI框架」和「函數式界面開發」之間出現一個Gap,豈不是又要造個詞給填上,多累……
我前面說會有一個Gap,這個Gap很可能就是我們現在想用「組件化」這個定義去表達的一些點,我想在此做一些個人的見解
我將之理解為以下幾要素:

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

把圖形、非圖形的各種邏輯均抽象為一個統一的概念(組件)來實現開發的模式

這與傳統開發框架的最大區別就是統一了圖形元素與非圖形元素,除此之外我再想不出其它真正體現區別的點了
在這個概念下,包括router、ajax、mole loader、timer、animation、interval等,都是組件,共享統一的生命周期管理和對外介面,且都是聲明式地進行組合
我的一位同事告訴我去年的深JS上,有位淘寶的朋友的話題叫做「前端組件服務化」,這裡面提的那些個概念,是很符合我對「組件化」的認識的,他要是不給再強安個「服務化」的噱頭就好了- -
不過話說回來,在這個要求之下,組件其實不是那麼好進行抽象設計的,隨便說幾個例子,有難的也有簡單的:

非圖形元素的各種需求如何統一介面,如timer和ajax
組件可以橫向組件,但是縱向復用如何解決,如希望任何圖形元素都可以實現被滑鼠拖拽的效果,則滑鼠拖拽應該也是個組件,這個組件與其它組件的關系是什麼
有些組件對其可被組合的組件是有要求的,比如HTML里就不大好意思把一個<p>放進一個<span>里,這一點如何在組件上表達(實現不難,表達比較難)
一些我們原本想當然認為純的小函數的東西,是不是也能當組件玩,比如underscore.pick要不要也是個組件

Ⅳ 如何實現項目的模塊化(組件化)開發,最近的做這個

,產品形態五花八門,涉獵極廣,什麼高大上的基礎庫/框架,拽炫酷的宣傳頁面,還有屌炸天的小游戲……不過這些一兩個文件的小項目並非是前端技術的主要應用場景,更具商業價值的則是復雜的Web應用,它們功能完善,界面繁多,為用戶提供了完整的產品體驗,可能是新聞聚合網站,可能是在線購物平台,可能是社交網路,可能是金融信貸應用,可能是音樂互動社區,也可能是視頻上傳與分享平台……

Ⅳ 前端怎麼進行組件化的開發,以及如何解決組件之間依賴

可以用webpack,目前最火的前端構建工具。只要載入loader,你想引用什麼模塊就引用什麼模塊。現在用的就是webpack+react,組件化太方便了。更多問題可以去php中文網問答社區提問

Ⅵ 既然html都是由後端動態生成,為什麼前端還要強調組件化開發

誰告訴你html都是後端動態生成的

後端開發還得基於前端來做

組件化開發可以減少頁面開發成本 提高頁面的可維護性和拓展性

Ⅶ 在前端中什麼是組件化 什麼是模塊化

模塊化更一種開發規范,比如cmd amd 是為了更好的解藕,比如一個網站,按照不同的模塊來開發,比如你有個評論區,a 項目有,b 項目有,如果僅是單純的模塊開發,這個js 文件你就可以單獨來回引用,
更比如 ,一個頁面 分好多個功能, 這時候你要是都寫在一個js 中 會越來越大,
而你把他分成不同的模塊,
比如評論是一塊
分頁又是一塊,
已經上線,或你不做了,後期別人拉手,或你接手別人的項目, 這時候來個需求讓你把分頁去掉,或修改 你可以清楚的找到對應模塊文件 進行修改 或去掉
模塊是自定義的,

組件,更想當於一個通用的東西,有的分功能組件,有的分業務組件
大圖切換,這種就是單純的一個效果展示,只要調用就ok
一個分頁,也是只單純的調用,
組件更是一個多處都可以使用 ,不需要再單獨開發的

Ⅷ 前端如何提升開發效率

來具體聊一聊提高前端工程師開發效率的那些方法!

當然除了以上5點,對於前端來說需要提高開發效率的地方還有很多,可謂任重而道遠。希望以上幾點能夠給初識前端的同學帶來啟發並能夠親自實踐。

Ⅸ 如何通過 Vue+Webpack 來做通用的前端組件化架構設計

angular:
我覺得angularjs的學習上手周期比較長,可能遇到問題,都無法立刻解決,而且編碼的質量明顯的很差,如果團隊沒有制定規范,那寫出來的代碼就沒法看。對於一個選用angularjs的團隊來說,我認為編碼規范是很重要的,否則對編碼能力是沒有提升的。
avalon:
avalonjs文檔資料沒有那麼全,我感覺一些開源支持的力量不夠多。不過,如果有項目需求,需要去做IE瀏覽器的支持話,我建議選擇avalonjs
vue:
vuejs 文檔比較齊全,vue吸取了angularjs
的一些優點,規避了一些缺點,至少編碼規范上有了一個質的飛躍,學習上手的周期比較短。vue起初只是一個輕量級的類庫,用來做類似於react的事情,
同時vue也是可以拿來做前端架構設計的,比如:vueify + vue-router (spa框架)。
vue學習地址:http://cn.vuejs.org/
以上說了那麼多沒用的,下面就來點幹活了!
我的前端組件化架構設計,目錄如下:
項目架構用到的知識點,還是挺多的,知識清單如下:
[1]: gulp + webpack 構建打包工具, 使用了一系列的loader,比如:vue-loader, sass-loader, babel-loader , 以及 postcss,postcss-custom-properties,等等
[2] : postcss-custom-properties : 用來做樣式全局化, 只需要通過變數去維護,通過編譯變數既可以換膚。
[3] : vue-loader (vue文件組件化):用來去編譯處理 *.vue 的文件,一個vue 文件就是一個單獨的組件,vue組件開發具有高獨立且易維護。組件的劃分可大可小,一個頁面也可以看作成由多個vue 組件構成的,一個頁面也可以是一個vue組件, vue 文件結構如下:
[4] : babel-loader :實現對vue文件中 es6 語法的編譯解析
[5] : vue-router :用來做路由分發,而且文檔非常的齊全(學習地址:http://vuejs.github.io/vue-router/zh-cn/index.html)。
[6] : vue (插件式方式):vue本身提供了一個install 方式用來注入,我們可以注入一些全局的(屬性、方法、以及通用的ui組件)。
下面說說文件夾的含義:
common 文件夾: 是用來存一些通用的東西,比如樣式,以及全局的js等等
components 文件夾:用來放獨立的組件,我打算後期做細分,ui 組件,以及page 組件等等,這裡面就是團隊的心血,以後就能做成獨立的組件庫了。
filters 文件夾:用來放通用的過濾器操作。
plugins 文件夾:用來放 Vue.use 注入到Vue全局的插件庫,比如:請求載入、彈框、分頁、ui組件 等等。plugins 只是把 componets 組件暴露給 Vue全局。
views 文件夾: 用來存放頁面模塊
app.vue 文件:第一次啟動的主程序模塊
app.js 文件:啟動前的載入,注入,實例化
router.config.js 文件:路由模塊
目前該架構在前後台的SPA架構都適用,可能還是有很多不完善,不過我還很年輕,vue也還狠年輕,望各位道友多給我們年輕人一些機會。