產品經理必懂技術術語（前端類）

目錄

1. 控件
2. 組件和組件庫?
   
3. 框架
4. 頁面適配
5. 渲染
6. 同源和跨域
7. cdn

控件

眾所周知，html是一門標簽語言，組成了網頁的基本結構。比如：

表示單行文本輸入框

表示表格

表示按鈕

文本框、按鈕、下拉框等最小的界面視覺元素就叫做控件。

組件和組件庫

1、組件

單純的控件只是展示了簡陋的視覺UI和基本行為，在實際開發(fā)中需要用到的是經過各種樣式裝飾和動畫還有豐富行為的UI，而且還會被重復利用。所以為了降低代碼重復率，提高開發(fā)效率，一般開發(fā)會把一個或多個控件的結構、樣式、行為、聯(lián)動封裝到一個文件中，這樣一個組合文件就稱為“組件”。

我們來看下經過封裝的表格組件，它具有表頭的灰色樣式、表頭固定樣式、行狀態(tài)樣式、間距樣式等。同時它也具有表格行可伸縮、可排序、可拖拽、可內嵌展開等行為。

1)可以排序的表格

2）可以展開的表格

3）自帶搜索的表格

注：現(xiàn)在市面上看到的UI,一般都是經過組合封裝的，UI主題樣式一般跟公司、項目有關。所以目前最多的叫法是“組件”。

2、組件庫

多個組件通過一定的方式封裝起來，可以提供給多個項目使用的同一套代碼組件，就叫組件庫。多個項目使用一套組件庫，不僅可以讓類似項目保持相同的UI主題，還能避免開發(fā)重復造輪子，提高開發(fā)效率。

現(xiàn)在市面上比較流行的組件庫，有螞蟻金服ant design，餓了么element ui、iView等。現(xiàn)在很多公司在做網站時，使用的是這幾種組件庫。當然也有部分公司使用自己研發(fā)的組件庫。

框架

框架是為解決一類問題而產生的產品。它面向的用戶是開發(fā)者。現(xiàn)在市面上比較流行的前端類框架有：

web端：js框架 --> react、vue、angular

客戶端：react native、flutter

微信小程序端：wepy、mpvue

它們的誕生，大多是為了解決js操作界面元素的性能消耗、代碼復用性、可維護性、可讀性、健壯性等問題。

使用不同的js框架，代碼的寫法幾乎不一樣，對應的組件庫也不一樣。

react->ant design?? ?vue->element

所以如果想把項目換一種框架來寫，成本是相當高的。如果想在不同端展示一樣的UI怎么辦？在web端、客戶端、小程序端寫3套代碼？這時跨端跨框架的解決方案就誕生了，Taro框架?=> 它支持只編寫一套代碼就能夠適配到多端的能力。

頁面適配

頁面適配一詞一般用于移動端。因為現(xiàn)在的手機機型和手機屏幕種類很多，不同的屏幕大小下，一樣的布局可能表現(xiàn)會錯亂。不同的機型下，可能因為某個樣式不兼容而表現(xiàn)異常。

對手機機型或手機屏幕大小或瀏覽器大小來對頁面樣式做兼容匹配，叫做頁面適配。

當一個移動端頁面做出來后，怎么知道要兼容哪些機型和屏幕呢？要看該產品的目標用戶有哪些。

如果目標用戶是東南亞等發(fā)展中國家，一般要考慮國外用戶常用的機型，比如一加手機。如果目標用戶是國內的中老年人，則要考慮大屏幕的安卓手機，比如華為、小米。如果目標用戶是18-35歲之間的藍領白領，需要適配的機型就比較多了，一般要考慮蘋果6/7/8/x/plus/se/ipad、華為、小米、三星等主流機型。

渲染

眾所周知，一個網頁基本是由html、css、js構成的。當前端請求回來html、css、js等靜態(tài)文件后，瀏覽器引擎就開始按照規(guī)則解析語言，然后測量、排版、繪制頁面，最后展現(xiàn)出我們眼前的網頁視覺效果。這個過程就叫做渲染。

有時候你可能會看到網頁展示有點慢或者是卡頓，那就是渲染比較慢。

同源和跨域

先看個例子：

?

設想這樣一種情況：A 網站是一家銀行，用戶登錄以后，A 網站在用戶的機器上設置了一個 Cookie，包含了一些隱私信息（比如存款總額）。用戶離開 A 網站以后，又去訪問 B 網站，如果沒有同源限制，B 網站可以讀取 A 網站的 Cookie，那么隱私信息就會泄漏。更可怕的是，Cookie 往往用來保存用戶的登錄狀態(tài)，如果用戶沒有退出登錄，其他網站就可以冒充用戶，為所欲為。因為瀏覽器同時還規(guī)定，提交表單不受同源政策的限制。（注：以上例子來自阮一峰老師）

?

為了保證用戶信息的安全，1995年開始，所有瀏覽器都遵循了“同源策略”。同源策略指的是，網址在協(xié)議、域名、端口都相同的情況下才是同源的。

舉個例子：

網址：http://a.com:80/page/index.html。http://?是協(xié)議，域名是a.com，端口是80。

不同源的網址，不能獲取對方的cookie、localstorage，不能給對方發(fā)送ajax異步請求，不能獲取對方的頁面元素。

如果你對不同源網址發(fā)起了請求，或者是去獲取不同源的頁面元素，就叫做跨域，瀏覽器會攔截報錯。

cdn

cdn是一個為了使用戶就近獲取內容，提高資源訪問速度的一種內容分發(fā)網絡，主要由內容分發(fā)技術和內容緩存設備組成。

一般我們會把html、css、js、圖片等靜態(tài)資源放在cdn上，當加載頁面時，瀏覽器會請求cdn的靜態(tài)資源。

假設你的目標用戶是國際用戶，cdn緩存設備分別在亞洲、歐洲、美洲、澳洲、非洲各有一臺，如果你是一個美國用戶，當前端請求靜態(tài)資源時，就會被分配到最近的美洲cdn緩存設備獲取資源。

這樣不僅能提高資源加載速度，還能避免網絡擁塞。

最后也歡迎有問題的小伙伴加微信：chanpin628?交流。

此外我們的官方網站也上線了，每日分享高質量的文章、原型素材和行業(yè)報告，小伙伴可自行前往索取，支持搜索，需要的小伙伴可點擊底部的閱讀原文直接查看，或者復制網址：www.dadaghp.com?打開。

更多干貨可關注微信公眾號：產品劉

想學習更多關于產品、職場、心理、認知等干貨，可長按右邊二維碼，關注我們。

··················END··················

RECOMMEND

推薦閱讀

分享關于餓了么的需求文檔

一道騰訊的專業(yè)面試題

線下實戰(zhàn)2.0

一周時間摸清一個行業(yè)

點擊“閱讀原文”

查看更多干貨