前言
本文主要講解管道在Vue和Angular中有哪些作用以及React對于管道概念的替代方案是什么。
管道起源
計算機中的Pipline（管道）常被認為起源于Unix，最初Mcllroy發(fā)現(xiàn)很多時候人們會將shell命令的輸出傳遞給另一個shell命令，類似于管道。所以就提出了管道的概念。并在1973年實現(xiàn)了這個管道概念，使用|作為pipe的語法符號。此后，很多操作系統(tǒng)也引入了pipe概念，而Angular和Vue框架都引入了這個概念。
管道特點
- 各個管道高內(nèi)聚，專注解決某個問題。
- 多個管道可以組合起來用于解決某個特定的問題
前端中管道概念和作用
概念
在Vue和Angular當中，pipe（管道）更像是一種設計模式，一種思想，它也能體現(xiàn)出函數(shù)式編程：利用多個函數(shù)組合到一起用于解決某個特定的問題。強調(diào)組合大于繼承。同時又分為內(nèi)置管道和自定義管道，內(nèi)置管道加粗樣式就是框架中自己封裝好的管道，拿來就可以用的管道。還可以通過自定義的方式自己封裝一個管道進行使用。
angular內(nèi)置管道：
DatePipe：根據(jù)本地環(huán)境中的規(guī)則格式化日期。
UpperCasePipe：字符串全部轉(zhuǎn)換大寫。
LowerCasePipe ：字符串全部轉(zhuǎn)換成小寫。
CurrencyPipe ：把數(shù)字轉(zhuǎn)換成貨幣字符串，根據(jù)本地環(huán)境中的規(guī)則進行格式化。
DecimalPipe：把數(shù)字轉(zhuǎn)換成帶小數(shù)點的字符串，根據(jù)本地環(huán)境中的規(guī)則進行格式化。
PercentPipe ：把數(shù)字轉(zhuǎn)換成百分比字符串，根據(jù)本地環(huán)境中的規(guī)則進行格式化。
Vue內(nèi)置管道：
capitalize：將字符串的第一個字符轉(zhuǎn)換為大寫
uppercase：字符串全部轉(zhuǎn)換大寫。
lowercase：字符串全部轉(zhuǎn)換成小寫。
currency：把數(shù)字轉(zhuǎn)換成貨幣字符串，根據(jù)本地環(huán)境中的規(guī)則進行格式化。
date：將日期格式化為特定格式
作用
利用一個或者多個管道解決某個問題，比如我們想要一個數(shù)據(jù)是大寫的文本，就可以通過{{ data | UpperCasePipe}}進行格式化，這樣獲取到的數(shù)據(jù)就都是大寫的了，那同時我們想要定義首字母大寫的文本可以通過，創(chuàng)建一個自定義管道FirstUpper，來進行轉(zhuǎn)換，同時這些管道之間也是可以進行組合使用?？梢?*{{ data | uppercase | lowercase}}**同時使用，那么這時就進行了兩個操作，第一是大寫，第二是小寫，最終獲得的就是小寫的字符串文本。
React關(guān)于管道的替代方案
React本身并沒有引入管道的概念，我們知道Angular和Vue是雙向數(shù)據(jù)綁定，它們的符號是{{}}，而在react中，所有{}其中的計算的所有內(nèi)容都是JavaScript，可以通過在{}中調(diào)用某個方法來進行操作，如大寫toUpperCase(),就可以寫{ data.toUpperCase() }所以沒有也不需要管道的概念。管道的內(nèi)容可以直接通過React創(chuàng)建方法并在括號的數(shù)據(jù)中調(diào)用來實現(xiàn)。
Vue和Angular管道的區(qū)別
Vue的管道過濾器和Angular用法相同，不同的是Vue中使用filters:{}內(nèi)部進行管道符的定義。而Angular創(chuàng)建管道過程：文章來源：http://www.zghlxwxcb.cn/news/detail-758746.html
ng g pipe 文件夾名/文件名
Vue創(chuàng)建管道過程:：在Vue實例中創(chuàng)建，filters，在filters中創(chuàng)建管道過濾器即可。fitlers中Vue的管道是局部管道，如果不暴露，則無法被其他組件使用，同時Vue引入了全局管道的概念。Angular管道都是暴露的，可以被全局使用。
Vue全局管道定義方式：文章來源地址http://www.zghlxwxcb.cn/news/detail-758746.html
Vue.filter("過濾器名稱", 處理函數(shù) );
到了這里，關(guān)于管道在Vue和Angular中的作用及React的替代方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
