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

web前端開發2021考試試題

發布時間: 2023-07-24 15:37:07

『壹』 web前端的核心技術是什麼 分別有什麼作用

與其他計算機主流技術所不同的是,Web前端所包含的知識模塊很多,且隨著實際需求的變化一直在更新迭代。目前而言,HTML、CSS、JS是目前前端技術最為基礎也是最為主要的三大基礎模塊。

HTML(5)
是一門標記型語言,主要由一些具備特殊含義的標簽構成。HTML(Hyper Text Mark-up Language )即超文本標記語言,是用於描述網頁文檔的一種標記語言。設計HTML語言的目的是為了能把存放在一台電腦中的文本或圖形與另一台電腦中的文本或圖形方便地聯系在一起,形成有機的整體,人們不用考慮具體信息是在當前電腦上還是在網路的其它電腦上。我們上網所看到網頁,多數都是由HTML寫成的。「超文本」是指頁面內可以包含圖片、鏈接,甚至音樂、程序等非文字元素。而「標記」指的是這些超文本必須由包含屬性的開頭與結尾標志來標記。瀏覽器通過解碼HTML,就可以把網頁內容顯示出來,它也構成了互聯網興起的基礎。
CSS
是一門描述性語言,主要一系列選擇器(html元素)和屬性構成。層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標准通用標記語言的一個應用)或XML(標准通用標記語言的一個子集)等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。
JavaScript
是一門腳本編程語言,包含類似java的語法(數據類型,數組,條件分支,循環,對象..)。是一種直譯式腳本語言,是一種動態類型、弱類型、基於原型的語言,內置支持類型。它的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用於客戶端的腳本語言,最早是在HTML網頁上使用,用來給HTML網頁增加動態功能。

『貳』 支付寶web前端認證初級考什麼

支付寶web前端認證初級考3方面。
1、HTML基礎知識:包括HTML元素、標簽、屬性等基礎知識。
2、前端開發框架:包括jQuery、React.Vue等前端開發框架的使用。
3、實戰項目:需要完成一個實際的前端開發項目襲並,考察學員的綜合能力和實際應用能力。
4、支付寶web前端認證初級考核內容涵蓋了前端開發中的基礎知識、框架和工具的使用以及實際項目的經驗,這些內容是前端開發必備的技能和知識。拍衡跡通過考核,能夠驗證學員是否掌握了前端開發的基本攔並技能,同時也可以幫助學員提升自己的實際開發能力,對於進一步提升職場競爭力和就業前景都有積極的作用。

『叄』 Web前端面試的常見面試題匯總

今天小編要跟大家分享的文章是關於參加Web前端面試的常見面試題匯總。准備參加Web前端面試的小夥伴們來和小編一起看一看吧,希望則寬本篇文章能夠對大家有所幫助。

1.漸進增強與優雅降級


漸進增強
並不是一種技術,而是一種設計思想。各個瀏覽器的渲染能力各不相同,要做一個每個人都能看到的網頁、感受到的體驗都一致的網站幾乎不可能。但還是得網站的可訪問性,保證用戶在任何環境下都能正常訪問網頁得核心內容或能使用基本功能(避免網頁打不開、排版錯誤等),並為他們提供當前條件下最好的體驗,這就是漸進增強得核心思想。


優雅降級也是一種設計思想,為了保證在高版本瀏覽器中提供最好的體驗,碰到低版本瀏覽器再降級進行兼容處理,使其能正常瀏覽。


這兩種思想的區別在於:


1.漸進增強是向上兼容,優雅降級是向下兼容;


2.漸進增強是從簡單到復雜,優雅降級是從復雜到簡單;


3.漸進增強關注的是內容(保證核心內容),優雅降級關注的是瀏覽體驗(為了兼容低版本瀏覽器)


2.DOCTYPE














作用


DTD(DocumentTypeDefinition,文檔類型定義)是一系列的語法規則,用來定義XML或(X)HTML
的文檔類型。瀏覽器會使用它來判斷文檔類型,決定何種協議來解析,以及切換瀏覽模式。


DOCTYPE是用來聲明文檔類型和DTD
規范的,一個主要的用途便是文件的合法性驗證。如果文檔代碼不合法,那麼瀏覽器解析時便會出現一些差錯。


HTML5的文檔類型聲明:





HTML4.01Strict(HTML4.01嚴格模式)的DTD包含所有HTML
元素和屬性,但不包括展示性的和棄用的元素(如font),它的文檔類型聲明:


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


標准模式與怪異模式


怪異模式(Quirks
Mode)用於模擬舊瀏覽器的行為。早期的網站並不會遵循完整的規好卜范,隨著瀏覽器支持越來越多的規范,在那些舊的瀏覽器中開發的頁面在顯示時會友盯穗被破壞。為了向後兼容,瀏覽器發明了怪異模式,一行錯誤或無效的
DOCTYPE都會觸發怪異模式。


瀏覽器使用文件開頭的DOCTYPE來決定用怪異模式處理或標准模式處理。DOCTYPE
可以確保不同瀏覽器以相同的方式解析文檔,以及執行相同的渲染模式。


怪異模式與標准模式的主要區別:


1.怪異模式的寬度和高度會包含padding和border。標准模式不包含,標准模式下可以通過設置box-sizing:
border-box將標准盒模型轉化成怪異模式下的盒模型。


2.怪異模式下,當內容超出容器高度時,會將容器拉伸,而不是溢出。


3.怪異模式下,在表格中的字體樣式(如font-size)不會繼承。


4.怪異模式下顏色值必須使用十六進制標記法。


3.語義化


HTML5
中的語義化就是讓元素、屬性或屬性值有含義,更准確地標記特定類型的內容。對元素語義化的目的是為了讓元素的語義和呈現分離,元素只負責文檔內容的結構與含義,而CSS
樣式控制內容的呈現,像元素,沒有語義但卻能將字體變粗,這類元素違背了語義化的目的,將會被廢棄。


優點


·使得HTML文檔結構清晰、布局合理、主體突出、可讀性更強。


·有利於SEO,搜索引擎根據標簽來確定上下文和各個關鍵字的權重。


·方便其他設備解析,如盲人閱讀器根據語義渲染網頁。


·有利於開發和維護,語義化更具可讀性,代碼更好維護,與CSS3關系更和諧。


語義化標簽


·
定義文檔的頁眉區域,應作為介紹內容或者導航鏈接欄的容器;


·footer內容的頁腳,通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息;


·article
文檔、頁面、應用或網站中的獨立結構,是可獨立分配的、可復用的結構,如在發布中,它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、互動式組件,或者其他獨立的內容項目;


·nav描述一個含有多個超鏈接的區域,該區域包含跳轉到其他頁面或頁面內部其他部分的鏈接列表;


·section表示文檔中的一個區域(或節),比如,內容中的一個專題組;


·main定義文檔的主要內容,該內容在文檔中應當是獨一無二的,不包含任何在文檔中重復的內容,比如側邊欄,導航欄鏈接,版權信息,網站
logo,搜索框(搜索框作為文檔的主要內容);


·aside
表示一個和其餘頁面內容幾乎無關的部分,被認為是獨立於該內容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現為側邊欄或嵌入內容。


4.超鏈接偽類


:link、:visited、:active和:hover的聲明順序是怎樣的?


:link表示未訪問的鏈接狀態;


:visited表示已訪問狀態;:active表示激活狀態(滑鼠按下);:hover表示懸停狀態。


推薦順序是LVHA,即:link:visited:hover:active。理由如下:


·當滑鼠懸停在未訪問的鏈接上時,:link和:hover都會命中,如果:hover在:link
之前聲明,那麼(:hover)就會被覆蓋;


·當滑鼠懸停在已訪問的連接上時,:visited和:hover都會命中,如果:hover在:visited
之前聲明,那麼(:hover)就會被覆蓋;


·當滑鼠單擊鏈接時,:active和:hover都會命中,我們大多是想讓:hover只在懸停時展示樣式,按下滑鼠時使用:active
樣式,因此:active在:hover之後聲明;


·綜上,:hover應在:link和:visited之後,在:active之前,因此active在最後。而:link和
:visited兩者的順序無所謂,互不影響。


5.CSS常見的長度單位


CSS中除了px長度單位之外,還有下面幾個長度單位:


·pc六分之一英寸,1pc=12pt=1/6*1in=16px;


·pt一磅,72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;


·in一英寸,1in=2.54cm=96px;


·ex在含有「X」字母的字體中,它是該字體的小寫字母的高度。對於很多字體來說,1ex≈0.5em;


·em1em等於父級元素的字體大小,2em就是父級元素字體大小的二倍;


·rem當用在根元素()的font-size上面時,它代表了它的初始值;


·ch代表元素所用字體font中「0」這一字形的寬度;


·vh1vh相當於視口高度的1%,100vh就是視口的高度;


·vw1vw相當於視口寬度的1%,100vw就是視口的寬度;


·vmax視口高度vw和寬度vh兩者中的最小值


·vmin視口高度vw和寬度vh兩種中的最大值;


·%相對於父級元素的大小來確定;


參考:CSS[1]


CSSpercentage[2]


6.事件對象


冒泡與捕獲


事件冒泡與捕獲是事件處理的兩種機制,主要描述當在一個元素上有兩個相同類型的事件處理器被激活會發生什麼。


在點擊子元素時,瀏覽器運行了兩種不同的階段:捕獲階段和冒泡階段。捕獲階段的行為:


·瀏覽器檢查元素的最外層祖先,是否在捕獲階段中注冊了一個onclick事件處理程序,如果是,則運行它;


·
然後,它移動到中單擊元素的下一個祖先元素,並執行相同的操作,然後是單擊元素再下一個祖先元素,依此類推,直到到達實際點擊的元素;


而冒泡與捕獲恰恰相反:


·瀏覽器檢查實際點擊的元素是否在冒泡階段中注冊了一個onclick事件處理程序,如果是,則運行它;


·然後它移動到下一個直接的祖先元素,並做同樣的事情,然後是下一個,等等,直到它到達元素;


而現代瀏覽器在默認情況下,所有事件處理程序都在冒泡階段進行注冊。因此上面代碼在點擊子元素時會先執行子元素綁定的事件,然後向上冒泡,觸發父元素綁定的事件。


addEventListener函數的第三個參數是個布爾值。含義:


·當布爾值是false時(這也是默認值),表示向上冒泡觸發事件;


·當布爾值是true時,表示向下捕獲觸發事件;


不能冒泡的事件


有些事件是不會冒泡的。比如:


·blur元素失去焦點時觸發,focusout事件也是失去焦點時觸發,但可以冒泡;


·focus元素獲取焦點時觸發;


·mouseenter滑鼠移動到元素上時會觸發該事件,與之對應的是mouseover事件,但會冒泡;


·mouseleave滑鼠離開元素時觸發,與之對應的是mouseout,但會冒泡;


事件冒泡可以讓我們利用事件委託,尤其是處理大量子元素時,如果給每個子元素都綁定事件,這是不優雅的,可以將事件綁定到父元素上,並讓子節點上發生的事件冒泡到父節點上,利用
e.target屬性可以獲取到當前觸發事件的子元素。


事件對象中的方法


·stopPropagation()阻止事件冒泡,當設置後,點擊該元素時父元素綁定的事件就不會再觸發;


·preventDefault()阻止默認事件的發生;


·stopImmediatePropagation()它用來阻止監聽同一事件的其他事件監聽器被調用以及阻止事件冒泡,比如給同一個div
元素綁定多個click事件(使用addEventListener方法可以注冊多個),當在第二個事件函數中調用
stopImmediatePropagation方法時,點擊div元素時,後面注冊的click將不會被觸發,而且還會阻止事件冒泡;


比如下面的例子,給p綁定多個click事件,在第二個事件函數中調用stopImmediatePropagation,第三個click
事件就不會觸發,因為也阻止了冒泡,因此父元素的click事件也不會觸發。





paragraph




『肆』 誰能給我出一兩道 web前端筆試題 上機題啥的,呵呵,比較常考的

[面試題] 某企業前端開發面試題

【HTML & CSS】

1. Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式,區分它們有何意義?

2. 行內元素有哪些?塊級元素有哪些?CSS的盒模型?

3. CSS引入的方式有哪些? link和@import的區別是?

4. CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?

5. 前端頁面有哪三層構成,分別是什麼?作用是什麼?

6. css的基本語句構成是?

7. 你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?經常遇到的瀏覽器的兼容性有哪些?怎麼會出現?解決方法是什麼?

8. 如何居中一個浮動元素?

9. 有沒有關注HTML5和CSS3?如有請簡單說一些您對它們的了解情況!

10. 你怎麼來實現下面這個設計圖,主要講述思路 (效果圖省略)

11. 如果讓你來製作一個訪問量很高的大型網站,你會如何來管理所有CSS文件、JS與圖片?

12. 你對前端界面工程師這個職位是怎麼樣理解的?它的前景會怎麼樣?

【Javascript】

1. js是什麼,js和html 的開發如何結合?

2. 怎樣添加、移除、移動、復制、創建和查找節點

3. 怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別

4. 面向對象編程:b怎麼繼承a

5. 看看下面alert的結果是什麼
view sourceprint?1.function b(x, y, a) {
.arguments[2] = 10;
.alert(a);
}
b(1, 2, 3);
如果函數體改成下面,結果又會是什麼?
a = 10;
alert(arguments[2] );

6. 請編寫一個JavaScript函數 parseQueryString,它的用途是把URL參數解析為一個對象
var obj = parseQueryString(url);
alert(obj.key0) // 輸出0

7. ajax是什麼? ajax的交互模型? 同步和非同步的區別? 如何解決跨域問題?

8. 什麼是閉包?下面這個ul,如何點擊每一列的時候alert其index?
<ul id=」test」>
<li>這是第一條</li><li>這是第二條</li><li>這是第三條</li>
</ul>

9. 最近看的一篇Javascript的文章是?

10. 常使用的庫有哪些?常用的前端開發工具?開發過什麼應用或組件?

11.說說YSlow(可以詳細一點)

答案在參考資料裡面可以找到,答案在參考資料裡面可以找到,答案在參考資料裡面可以找到

『伍』 前端面試項目會給圖片嗎

前端面試項目會給圖片嗎
全部
資訊
視頻
文檔
圖片
一文分析前端面試中的圖片懶載入問題,快來看看吧~
最近整理了一些前端高頻面試題,分享給大家,如有問題歡迎留言指正,面試專欄我會長期更新,歡迎大家點贊、收藏,感謝!1.什麼是_DOCTYPE_,有何作用?Doctype 是HTML5的文檔聲明,通過它可以...
百家號2022-11-28
前端實習生去面試需要什麼作品-芝士回答
3.證明對新技術探索能力的,github里邊應該有幾個現有熱門技術的項目。表示在尋找新技術解決方案的路上,一直保持著一顆敬畏之心,一顆虔誠的心,時刻保持學習或了解新事物的態度或激情。上個成...
芝士回答2021-03-25
初級前端面試需要帶什麼作品?芝士回答
我建議最後去找電商項目,電商項目中的前端特效要求的比較高,如果電商的可以消化,那麼面試就不再是問題了;2、對於已經工作了一段時間的前端開發工程師來說,最好的就是將自己在工作中做過的...
芝士回答2021-01-09
其他人還搜了
前端面試項目素材
前端面試項目描述
面試介紹電商網站前端項目
前端面試問項目遇到的問題
前端面試開源項目
前端面試官要看上線項目怎麼辦
前端工作面試注意事項
作為一名HTML5前端工程師,為了工作,為了就業我們免不了要參加各種各樣的面試。為此總結了面試前的注意事項: 第一:注意自己的儀容儀表 面試之前,一定要再次從頭到腳地將自己的儀容儀表檢查...
芝士回答
初級前端面試需要帶什麼作品?
回答:26瀏覽:24萬+贊同:34
[最佳答案]千言萬語濃縮成了一行URL。
知乎2016-03-27
【前端+面試問題|前端+面試技巧】看準網
面試的前端開發·北京 面試未通過 阿里影業一面 面試過程很愉快,面試官交流起來很舒服,下面的圖片里是我記錄的面試中的問題並附上答案,僅供參考。貢獻於 2022-05-20 3 匿名用戶 面試的前端...
看準網2022-05-20
前端應屆生面試經驗_韓哥、最強操盤手的博客-CSDN博客_前端應屆生
2 年之內的小夥伴,大家酌情閱讀~(更新:最後的面試題只是自己總結的一些偏基礎的知識~剛畢業的小夥伴看著也不要有什麼壓力,不是代表初級前端必須掌握的技能,只是總結出前端面試中比較常見的...
CSDN技術社區2021-11-18
前端面試(1)—准備_樂夫天命兮的博客-CSDN博客_前端面試准備
每輪面試在一小時左右。概念:職位描述:注重的是工作職責。任職要求:要求的是工作能力。通常描述得很細致。PS:前端的知識龐大,不可能所有的內容都准備好,但是要向「任職要求」靠攏。分析...
CSDN技術社區
【前端開發/web前端設計面試|前端開發/web前端設計面試技巧】看準網
面試過程很愉快,面試官交流起來很舒服,下面的圖片里是我記錄的面試中的問題並附上答案,僅供參考。有用(3)|評論(0)|你還記得你曾經的面試情景嗎?分享一條你的面試經歷吧,...
看準網2022-06-11
web前端開發面試流程是怎樣的?網路知道
回答:2
首先投簡歷,等待面試通知。第一次面試填資料,做測試題;等一面通過之後接著二面,二面一般是技術面試,有些公司是通過之後直接進行3面有些是改天再進行3面,3面一般就是項目經理或總經理問你一-些各種各樣的問題,如果3面都過了,基本上就是面試成功了。但是不同公司的面試流程也不相同。...
網路知道2022-06-10
相關搜索
前端面試項目
前端面試題庫
前端面試自我介紹
前端面試視頻教程
前端面試題目
面試圖片
前端性能優化面試
前端面試寶典
快速搞定前端面試
前端面試問項目中遇到的難題
11-20條

【截圖】常見前端面試題_mus_木司的博客-CSDN博客
3.一道面向對象面試題 4.EventLoop 同步非同步、宏任務微任務 5.使下面輸出1 var a={ toString=function*(){ yield 1;yield 2;yield 3;} } a.toString 會轉換,規則: 對象=字元串 對象.toString ...
CSDN技術社區2020-06-02
前端面試
前端面試自我介紹背景:1 面試官在你自我介紹的時候,才有時間看你的簡歷。人太多沒時間看,看了也記不住。2 你在自我介紹中,他在想問你什麼問題。3 了解你語言表達能力,自信氣場,儀表形態。...
www.lwlwlw.com2017-07-04
前端面試作品-芝士回答
我建議最後去找電商項目,電商項目中的前端特效要求的比較高,如果電商的可以消化,那麼面試就不再是問題了;2、對於已經工作了一段時間的前端開發工程師來說,最好的就是將自己在工作中做過的...
芝士回答2021-01-09
web前端經典面試題_約德爾蒙的博客-CSDN博客_前端面試題
閱讀:8w+
web前端面試題 其他問題 1、請談談你對性能優化的認識?網頁內容 減少http請求次數 80%的響應時間花在下載網頁內容(images,stylesheets,javascripts,scripts,flash等)。減少請求次數是縮短響應...
CSDN技術社區
前端面試-項目流程_前端小兔子的博客-CSDN博客_前端面試流程
1、項目流程 (1)項目分多人、多角色參與 (2)項目分多階段 (3)項目需要計劃和執行 2、項目角色 (1)PM 產品經理 (2)UE 視覺設計師 (3)FE 前端開發 (4)RD 後端開發 (5)CRD 移動端...
CSDN技術社區2020-03-18
關於前端面試的十問十答(並附知識點思維導圖)知乎
6.29 雙越老師 在慕課網直播講解了關於前端面試的一些技巧和經驗,以下是同學的一些問題反饋和老師的解答 1、問題描述: 老師你好,我是計算機專業大二在校生,想了解前端需要重點掌握哪些演算法呢...
知乎2019-07-04
Web前端初學者(應屆生)面試攻略-知了樂了-博客園
前端技術日新月異,面試也有了不同的要求,各種框架層出不窮,到了你們那一年前端發展到了什麼地步沒有人知道,牢記法則,以不變應萬變,絕對ok。明確一點,自己想去那種公司,大公司注重基礎,...
博客園2018-02-26
前端面試(三)簡書
前端面試(三) 一、圖片整合 用background-position來實現背景圖片的定位技術,又稱為css精靈圖。用法: 將一些小圖片有規則的合成一張圖片,即多張圖片合為一張整圖,再使用background-...
簡書2019-10-20
前端面試要求-洺劍殘虹-博客園
前端面試所遇到的技術點: HTML的問題 (1)行標簽和塊級標簽分別有哪些?(2)常見HTML5的標簽有哪些?(3)怎麼頁面結構會比較好?(4)如何減少HTTP請求和優化?減少請求的資源,將多個CSS資源打包到...
博客園2018-09-08
前端工程師面試匯總_尊哥的博客-CSDN博客_前端工程師面試
一、前端基礎 1、HTTP,HTML,瀏覽器 說一下http和https tcp三次握手,一句話概括 TCP和UDP的區別 WebSocket的實現和應用 一個圖片url訪問後直接下載怎樣實現?說一下web Quality(無障礙)幾個很...
CSDN技術社區2020-01-28
相關搜索
前端面試項目
前端面試如何介紹自己的項目
前端面試
web前端面試
js前端面試
前端面試問題
2019前端面試
前端面試題庫
前端電話面試
前端面試自我介紹
21-30條

前端面試-網路貼吧
小夥伴們,有很多小夥伴剛學完前端,想找一份好一點的公司去應聘,但是公司的面試又成了一大難題,今天我整理了一些關於web前端面試的試題,幫助大家可以更好的完成面試,早日找到工作。由於...
網路貼吧2020-01-25
前端面試流程_網路文庫
前端面試流程 By漆黑小T 前面5個題,有兩個答不出來就可以pass 遇到面試者反問,以時間有限為由,讓其自行網路,面試印象減分 1、css問題,水平、垂直居中的寫法,請至少寫出4種?水平居中 行內...
網路文庫
前端面試技巧-網路經驗
前端面試技巧,馬上就要進入前端面試的朋友們,對於前端面試的技巧還是比較模糊的,那麼前端面試技巧都有哪些呢?
網路經驗2019-12-03
前端面試到底要做到哪些?知乎
准備面試的時候,可以按照以下幾個模塊來准備: 無論前端技術棧日新月異,我們都得要扎實基礎,腳踏實地,切記不可投機取巧、眼高手低。2.1 JavaScript 基礎 JavaScript 基礎非常重要,相比於...
知乎2021-07-29
常見的前端開發面試題(附答案)DreamTraveler-博客園
2.談談你對前端性能優化的理解 a.請求數量:合並腳本和樣式表,CSS Sprites,拆分初始化負載,劃分主域 b.請求帶寬:開啟GZip,精簡JavaScript,移除重復腳本,圖像優化,將icon做成字體 c.緩存...
博客園2020-04-28
前端面試流程-漆黑小T-博客園
前端面試流程 By漆黑小T 前面5個題,有兩個答不出來就可以pass 遇到面試者反問,以時間有限為由,讓其自行網路,面試印象減分 1、css問題,水平、垂直居中的寫法,請至少寫出4種?水平居中 行內...
博客園2021-01-27
前端面試流程圖-CSDN
csdn已為您找到關於前端面試流程圖相關內容,包含前端面試流程圖相關文檔代碼介紹、相關教程視頻課程,以及相關前端面試流程圖問答內容。為您解決當下相關問題,如果想了解更詳細前端面試流程圖...
CSDN技術社區2021-06-10
前端面試篇,應屆生面試時被問項目經驗不用慌,按這個步驟回答成功率高達95%_碼民的飄柔的博客-CSDN博客
為了讓大家在收到一家公司前端面試邀請之後,准備得更加充足,這里准備了一些高頻和基礎的前端面試題,希望可以幫助大家更加順利完成求職,得到自己滿意的offer。最全前端面試真題匯總 CSS面試...
CSDN技術社區2021-05-14
關於前端面試的注意事項-簡書
前端現在越來越多人,那麼面試的時候要注意哪些問題呢?1.簡歷一定要寫的完善,多一些數據性的東西,項目業績啊,項目效果之類的一定要寫的好一點,這樣面試官看到才能感覺到真實。2.簡歷上的...
簡書2020-05-06
常見的前端開發面試題(附答案)
2.談談你對前端性能優化的理解 a.請求數量:合並腳本和樣式表,CSS Sprites,拆分初始化負載,劃分主域 b.請求帶寬:開啟GZip,精簡JavaScript,移除重復腳本,圖像優化,將icon做成字體 c.緩存...
百家號2019-02-01
相關搜索
前端面試項目
前端面試如何介紹自己的項目
前端面試
web前端面試
js前端面試
前端面試問題
2019前端面試
前端面試題庫
前端電話面試
前端面試自我介紹
31-40條

常見前端面試題及答案_冷小魚的博客-CSDN博客_前端面試題
本文是在GitHub上看到一個大牛總結的前端常見面試題,很多問題問的都很好,很經典、很有代表性。上面沒有答案,我就整理了一下,從網上找了一些相關問題的答案。裡面有一部分問題的答案我也沒有...
CSDN技術社區2019-02-15
前端工作面試問題-前端開發博客
這段事件一直在整理有關前端的面試題目,整理這也題目,不只是為了能夠學習應付即將到來的面試,更是為了補補基礎知識。日常項目開發進度太快了,很多屬性或者方法用了就忘,這樣會造成另外一個...
m.caibaojian.com2017-04-06
前端面試之前要准備的那些事-祈澈姑娘-博客園
現在前端雖火但工作不好找,因為一些外力因素所導致,北上廣這些大城市的招聘都是三年的工作經驗起的。關於怎麼寫工作經驗和工作項目,後續的文章裡面會有更多的干貨和經驗。問題四,簡歷上常見...
博客園2017-10-26
如何面試前端工程師?
評論:1
近來幾個月,一直在努力尋找前端戰友,未果,一路的招聘經歷下來,心生不少感慨,一直都很小心翼翼前端面試項目會給圖片嗎前端面試項目會給圖片嗎
全部
資訊
視頻
文檔
圖片
一文分析前端面試中的圖片懶載入問題,快來看看吧~
最近整理了一些前端高頻面試題,分享給大家,如有問題歡迎留言指正,面試專欄我會長期更新,歡迎大家點贊、收藏,感謝!1.什麼是_DOCTYPE_,有何作用?Doctype 是HTML5的文檔聲明,通過它可以...
百家號2022-11-28
前端實習生去面試需要什麼作品-芝士回答
3.證明對新技術探索能力的,github里邊應該有幾個現有熱門技術的項目。表示在尋找新技術解決方案的路上,一直保持著一顆敬畏之心,一顆虔誠的心,時刻保持學習或了解新事物的態度或激情。上個成...
芝士回答2021-03-25
初級前端面試需要帶什麼作品?芝士回答
我建議最後去找電商項目,電商項目中的前端特效要求的比較高,如果電商的可以消化,那麼面試就不再是問題了;2、對於已經工作了一段時間的前端開發工程師來說,最好的就是將自己在工作中做過的...
芝士回答2021-01-09
其他人還搜了
前端面試項目素材
前端面試項目描述
面試介紹電商網站前端項目
前端面試問項目遇到的問題
前端面試開源項目
前端面試官要看上線項目怎麼辦
前端工作面試注意事項
作為一名HTML5前端工程師,為了工作,為了就業我們免不了要參加各種各樣的面試。為此總結了面試前的注意事項: 第一:注意自己的儀容儀表 面試之前,一定要再次從頭到腳地將自己的儀容儀表檢查...
芝士回答
初級前端面試需要帶什麼作品?
回答:26瀏覽:24萬+贊同:34
[最佳答案]千言萬語濃縮成了一行URL。
知乎2016-03-27
【前端+面試問題|前端+面試技巧】看準網
面試的前端開發·北京 面試未通過 阿里影業一面 面試過程很愉快,面試官交流起來很舒服,下面的圖片里是我記錄的面試中的問題並附上答案,僅供參考。貢獻於 2022-05-20 3 匿名用戶 面試的前端...
看準網2022-05-20
前端應屆生面試經驗_韓哥、最強操盤手的博客-CSDN博客_前端應屆生
2 年之內的小夥伴,大家酌情閱讀~(更新:最後的面試題只是自己總結的一些偏基礎的知識~剛畢業的小夥伴看著也不要有什麼壓力,不是代表初級前端必須掌握的技能,只是總結出前端面試中比較常見的...
CSDN技術社區2021-11-18
前端面試(1)—准備_樂夫天命兮的博客-CSDN博客_前端面試准備
每輪面試在一小時左右。概念:職位描述:注重的是工作職責。任職要求:要求的是工作能力。通常描述得很細致。PS:前端的知識龐大,不可能所有的內容都准備好,但是要向「任職要求」靠攏。分析...
CSDN技術社區
【前端開發/web前端設計面試|前端開發/web前端設計面試技巧】看準網
面試過程很愉快,面試官交流起來很舒服,下面的圖片里是我記錄的面試中的問題並附上答案,僅供參考。有用(3)|評論(0)|你還記得你曾經的面試情景嗎?分享一條你的面試經歷吧,...
看準網2022-06-11
web前端開發面試流程是怎樣的?網路知道
回答:2
首先投簡歷,等待面試通知。第一次面試填資料,做測試題;等一面通過之後接著二面,二面一般是技術面試,有些公司是通過之後直接進行3面有些是改天再進行3面,3面一般就是項目經理或總經理問你一-些各種各樣的問題,如果3面都過了,基本上就是面試成功了。但是不同公司的面試流程也不相同。...
網路知道2022-06-10
相關搜索
前端面試項目
前端面試題庫
前端面試自我介紹
前端面試視頻教程
前端面試題目
面試圖片
前端性能優化面試
前端面試寶典
快速搞定前端面試
前端面試問項目中遇到的難題
11-20條

【截圖】常見前端面試題_mus_木司的博客-CSDN博客
3.一道面向對象面試題 4.EventLoop 同步非同步、宏任務微任務 5.使下面輸出1 var a={ toString=function*(){ yield 1;yield 2;yield 3;} } a.toString 會轉換,規則: 對象=字元串 對象.toString ...
CSDN技術社區2020-06-02
前端面試
前端面試自我介紹背景:1 面試官在你自我介紹的時候,才有時間看你的簡歷。人太多沒時間看,看了也記不住。2 你在自我介紹中,他在想問你什麼問題。3 了解你語言表達能力,自信氣場,儀表形態。...
www.lwlwlw.com2017-07-04
前端面試作品-芝士回答
我建議最後去找電商項目,電商項目中的前端特效要求的比較高,如果電商的可以消化,那麼面試就不再是問題了;2、對於已經工作了一段時間的前端開發工程師來說,最好的就是將自己在工作中做過的...
芝士回答2021-01-09
web前端經典面試題_約德爾蒙的博客-CSDN博客_前端面試題
閱讀:8w+
web前端面試題 其他問題 1、請談談你對性能優化的認識?網頁內容 減少http請求次數 80%的響應時間花在下載網頁內容(images,stylesheets,javascripts,scripts,flash等)。減少請求次數是縮短響應...
CSDN技術社區
前端面試-項目流程_前端小兔子的博客-CSDN博客_前端面試流程
1、項目流程 (1)項目分多人、多角色參與 (2)項目分多階段 (3)項目需要計劃和執行 2、項目角色 (1)PM 產品經理 (2)UE 視覺設計師 (3)FE 前端開發 (4)RD 後端開發 (5)CRD 移動端...
CSDN技術社區2020-03-18
關於前端面試的十問十答(並附知識點思維導圖)知乎
6.29 雙越老師 在慕課網直播講解了關於前端面試的一些技巧和經驗,以下是同學的一些問題反饋和老師的解答 1、問題描述: 老師你好,我是計算機專業大二在校生,想了解前端需要重點掌握哪些演算法呢...
知乎2019-07-04
Web前端初學者(應屆生)面試攻略-知了樂了-博客園
前端技術日新月異,面試也有了不同的要求,各種框架層出不窮,到了你們那一年前端發展到了什麼地步沒有人知道,牢記法則,以不變應萬變,絕對ok。明確一點,自己想去那種公司,大公司注重基礎,...
博客園2018-02-26
前端面試(三)簡書
前端面試(三) 一、圖片整合 用background-position來實現背景圖片的定位技術,又稱為css精靈圖。用法: 將一些小圖片有規則的合成一張圖片,即多張圖片合為一張整圖,再使用background-...
簡書2019-10-20
前端面試要求-洺劍殘虹-博客園
前端面試所遇到的技術點: HTML的問題 (1)行標簽和塊級標簽分別有哪些?(2)常見HTML5的標簽有哪些?(3)怎麼頁面結構會比較好?(4)如何減少HTTP請求和優化?減少請求的資源,將多個CSS資源打包到...
博客園2018-09-08
前端工程師面試匯總_尊哥的博客-CSDN博客_前端工程師面試
一、前端基礎 1、HTTP,HTML,瀏覽器 說一下http和https tcp三次握手,一句話概括 TCP和UDP的區別 WebSocket的實現和應用 一個圖片url訪問後直接下載怎樣實現?說一下web Quality(無障礙)幾個很...
CSDN技術社區2020-01-28
相關搜索
前端面試項目
前端面試如何介紹自己的項目
前端面試
web前端面試
js前端面試
前端面試問題
2019前端面試
前端面試題庫
前端電話面試
前端面試自我介紹
21-30條

前端面試-網路貼吧
小夥伴們,有很多小夥伴剛學完前端,想找一份好一點的公司去應聘,但是公司的面試又成了一大難題,今天我整理了一些關於web前端面試的試題,幫助大家可以更好的完成面試,早日找到工作。由於...
網路貼吧2020-01-25
前端面試流程_網路文庫
前端面試流程 By漆黑小T 前面5個題,有兩個答不出來就可以pass 遇到面試者反問,以時間有限為由,讓其自行網路,面試印象減分 1、css問題,水平、垂直居中的寫法,請至少寫出4種?水平居中 行內...
網路文庫
前端面試技巧-網路經驗
前端面試技巧,馬上就要進入前端面試的朋友們,對於前端面試的技巧還是比較模糊的,那麼前端面試技巧都有哪些呢?
網路經驗2019-12-03
前端面試到底要做到哪些?知乎
准備面試的時候,可以按照以下幾個模塊來准備: 無論前端技術棧日新月異,我們都得要扎實基礎,腳踏實地,切記不可投機取巧、眼高手低。2.1 JavaScript 基礎 JavaScript 基礎非常重要,相比於...
知乎2021-07-29
常見的前端開發面試題(附答案)DreamTraveler-博客園
2.談談你對前端性能優化的理解 a.請求數量:合並腳本和樣式表,CSS Sprites,拆分初始化負載,劃分主域 b.請求帶寬:開啟GZip,精簡JavaScript,移除重復腳本,圖像優化,將icon做成字體 c.緩存...
博客園2020-04-28
前端面試流程-漆黑小T-博客園
前端面試流程 By漆黑小T 前面5個題,有兩個答不出來就可以pass 遇到面試者反問,以時間有限為由,讓其自行網路,面試印象減分 1、css問題,水平、垂直居中的寫法,請至少寫出4種?水平居中 行內...
博客園2021-01-27
前端面試流程圖-CSDN
csdn已為您找到關於前端面試流程圖相關內容,包含前端面試流程圖相關文檔代碼介紹、相關教程視頻課程,以及相關前端面試流程圖問答內容。為您解決當下相關問題,如果想了解更詳細前端面試流程圖...
CSDN技術社區2021-06-10
前端面試篇,應屆生面試時被問項目經驗不用慌,按這個步驟回答成功率高達95%_碼民的飄柔的博客-CSDN博客
為了讓大家在收到一家公司前端面試邀請之後,准備得更加充足,這里准備了一些高頻和基礎的前端面試題,希望可以幫助大家更加順利完成求職,得到自己滿意的offer。最全前端面試真題匯總 CSS面試...
CSDN技術社區2021-05-14
關於前端面試的注意事項-簡書
前端現在越來越多人,那麼面試的時候要注意哪些問題呢?1.簡歷一定要寫的完善,多一些數據性的東西,項目業績啊,項目效果之類的一定要寫的好一點,這樣面試官看到才能感覺到真實。2.簡歷上的...
簡書2020-05-06
常見的前端開發面試題(附答案)
2.談談你對前端性能優化的理解 a.請求數量:合並腳本和樣式表,CSS Sprites,拆分初始化負載,劃分主域 b.請求帶寬:開啟GZip,精簡JavaScript,移除重復腳本,圖像優化,將icon做成字體 c.緩存...
百家號2019-02-01
相關搜索
前端面試項目
前端面試如何介紹自己的項目
前端面試
web前端面試
js前端面試
前端面試問題
2019前端面試
前端面試題庫
前端電話面試
前端面試自我介紹
31-40條

常見前端面試題及答案_冷小魚的博客-CSDN博客_前端面試題
本文是在GitHub上看到一個大牛總結的前端常見面試題,很多問題問的都很好,很經典、很有代表性。上面沒有答案,我就整理了一下,從網上找了一些相關問題的答案。裡面有一部分問題的答案我也沒有...
CSDN技術社區2019-02-15
前端工作面試問題-前端開發博客
這段事件一直在整理有關前端的面試題目,整理這也題目,不只是為了能夠學習應付即將到來的面試,更是為了補補基礎知識。日常項目開發進度太快了,很多屬性或者方法用了就忘,這樣會造成另外一個...
m.caibaojian.com2017-04-06
前端面試之前要准備的那些事-祈澈姑娘-博客園
現在前端雖火但工作不好找,因為一些外力因素所導致,北上廣這些大城市的招聘都是三年的工作經驗起的。關於怎麼寫工作經驗和工作項目,後續的文章裡面會有更多的干貨和經驗。問題四,簡歷上常見...
博客園2017-10-26
如何面試前端工程師?
評論:1
近來幾個月,一直在努力尋找前端戰友,未果,一路的招聘經歷下來,心生不少感慨,一直都很小心翼翼前端面試項目會給圖片嗎

『陸』 Web前端企業面試題

答:

一、display和visibility的相同與不同點

1、相同點:display和visibility都有講元素隱藏的意思

2、不同點:display是元素隱藏,隱藏的元素不佔文檔流

而visibility隱藏的元素仍然占文檔流

二、display和visibility的屬性值

1、display

2、visibility


答:

在開發過程中經常需要循環遍歷數組或者對象,使用最多的方法 forEach、for…in 、 for…of ,整理一下他們的異同點

for循環

其實除了這三種方法以外還有一種最原始的遍歷,自Javascript誕生起就一直用的 就是for循環,它用來遍歷數組

for循環中可以使用return、break等來中斷循環

結果:

forEach

對數組的每一個元素執行一次提供的函數(不能使用return、break等中斷循環),不改變原數組,無返回值undefined。

輸出結果:

for…in

循環遍歷的值都是數據結構的鍵值

總結一句: for in也可以循環數組但是特別適合遍歷對象

結果:

for…of

它是ES6中新增加的語法,用來循環獲取一對鍵值對中的值

循環一個數組

循環一個普通對象(報錯)

答:

px:像素(Pixel),相對長度單位。像素px是相對於顯示器屏幕解析度而言的 。--即解析度不同的機型當前對應的距離可能發生變化。(1Inches=xPx)。

所以相對於同一機型來說是一個絕對的長度單位。


em:是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置,則相對於瀏覽器的默認字體尺寸

以其父級元素為基準來變化長度。所以其演算法不是一個固定的值。


rem:是CSS3新增的一個相對單位(root em,根em)

那麼其好用在用可以直接設置HTML的font-size,然後在其子類都是以這個大小為基準變化的值。

在移動設備上,我們常常設置

此方式的目的是為了將當前屏幕(PC)解析度的px轉化成手機端的px,讓px在手機上能夠兼容此方式。


因此,此時看見的12px與PC端的12px無異。但是,如果不寫著個meta的話,那麼,瀏覽器會一直以PC的視圖來決定手機端的px的大小,讓視圖看起來變小了很多。

那麼,響應式頁面則經常配合媒體查詢media 來設置不同解析度下手機的各種不同的配置機構,然後根據父級來變化所有的相對長度。


基礎篇

1.shift

// 刪除原數組的第一項,並返回刪除元素的值,如果數組為空則返回undefined

2.unshift

// 將參數添加到原數組開頭,並返回數組的長度

//註:此方法在ie6.0下

// 測試的返回值始終為undefined,在firefox下測試的返回值為7,所以此方法不可靠

// 一般需要用返回值時可用splice代替

3.pop

// 刪除原數組的最後一項,並返回刪除元素的值;如果數組為空則返回undefined

4.push

// 將參數添加到原數組末尾,並返回數組的長度

5.concat

// 返回一個新數組,是將參數添加到原數組中構成的

6.splice

7.reverse

8.sort(orderfunction)

9.slice(start,end)

10.join(separator)

11.indexOf

12.lastIndexOf

13. Array.isArray()

14. Array.toString()


進階篇

1.forEach

是最為常用的情景,它至於遍歷,可以在獲取當前數據項的前提下,對數據進行修改。它沒有返回值。理解起來也是最容易的。

2.map

map的本意就是映射,也就是將一個值從一種形式映射到另一種形式,比如將key映射到value。它的每一次遍歷都會有一個返回值。這些返回值組合成最終的結果數組。事實就是如此



forEach和map對比

相同點

1)都是循環遍歷數組中的每一項;

2)forEach()和map()匿名函數的參數相同,參數分別是item(當前每一項)、index(索引值)、arr(原數組);

3)this都是指向調用方法的數組;

4) 只能遍歷數組;


不相同點

1)map()創建了新數組,不改變原數組;forEach()可以改變原數組。

2)遇到空缺的時候map()雖然會跳過,但保留空缺;forEach()遍歷時跳過空缺,不保留空缺。

3)map()按照原始數組元素順序依次處理元素;forEach()遍歷數組的每個元素,將元素傳給回調函數。


3.filter

它致力於從已有的數組中篩選出符合一定條件的數據項,最後的返回值是所有符合條件的數據項構成的數組。它不會修改原來的數組。記住,它的立足點就是篩選。也僅僅是篩選。還有一點需要注意:每一次遍歷都會有一個返回值,它的類型是布爾類型。返回值只有是true,當前遍歷項才會被篩選中。不要試圖在filter中去修改原始數組。

理解: 就是在一堆數據裡面去篩選你需要的數據 或者 剔除你不需要的數據


4.find()

返回通過測試的數組的第一個元素的值,

理解:假如你去一個一群人的地方去找人 你說我找xxb 他要是在那裡就找到 不在那裡就是undefined

在第一次調用 callback 函數時會確定元素的索引范圍,因此在 find 方法開始執行之後添加到數組的新元素將不會被 callback 函數訪問到。如果數組中一個尚未被callback函數訪問到的元素的值被callback函數所改變,那麼當callback函數訪問到它時,它的值是將是根據它在數組中的索引所訪問到的當前值。被刪除的元素仍舊會被訪問到。

語法

array.find(function(value, index, arr),thisValue)

value:必須,代表當前元素,其他四個參數都是可選,index代表當前索引值,arr代表當前的數組,thisValue代表傳遞給函數的值,一般用this值,如果這個參數為空,undefined會傳遞給this值

返回值:返回符合測試條件的第一個數組元素的值,如果沒有符合條件的則返回undefined。

擴展: findIndex()方法的用法與find()方法非常類似,返回第一個符合條件的數組成員的位置,如果所有成員都不符合條件,則返回-1。自己try吧

5.every

理解: 這個就像 上課了 老師說 昨天布置的作業 只要有一個人沒有寫完 今天就不講課 然後挨個檢查 當檢查到有一個沒有寫完的時候 就不檢查了 返回 不講課了(false)


6.some

理解: 相當於在一個數組裡面找你想要的那個數 找到了 就返回true 找不到就返回false


7.rece

它這個方法是接收一個函數作為累加器,將數組中的值(從左向右)開始合並,最總為一個值 然後返回出來,callback

他可以傳四個參數:

1,previousValue:上一次調用回調返回的值,或者是提供的初始值(initialValue)

2,currentValue:數組中當前被處理的元素

3,index:不啰嗦,自己顧名思義去吧

4,array:返回調用rece的數組


彩蛋: 這里附上前幾天某某人比較喜歡的切割字元串的方法

substring() 和 substr()

相同點: 如果只是寫一個參數,兩者的作用都一樣:都是是截取字元串從當前下標以後直到字元串最後的字元串片段。

不同點: 第二個參數

substr(startIndex, lenth) // 第二個參數是截取字元串的長度(從起始點截取某個長度的字元串);

substring(startIndex, endIndex) // 第二個參數是截取字元串最終的下標 (截取2個位置之間的字元串,『含頭不含尾')。

1:在使用vue框架的過程中,我們經常需要給一些數據做一些初始化處理,這時候我們常用的就是在created與mounted選項中作出處理。


首先來看下官方解釋,官方解釋說created是在實例創建完成後唄立即調用。在這一步,實例已完成以下配置:數據觀測 (data observer),屬性和方法的運算,watch/event 事件回調。然而,掛載階段還沒開始,$el 屬性目前不可見。


這話的意思我覺得重點在於說掛架階段還沒開始,什麼叫還沒開始掛載,也就是說,模板還沒有被渲染成html,也就是這時候通過id什麼的去查找頁面元素是找不到的。下面看下實例來證明。

所以,一般creadted鉤子函數主要是用來初始化數據。


2:mounted鉤子函數一般是用來向後端發起請求拿到數據以後做一些業務處理。官方解釋如下:

el 被新創建的 vm.$el 替換,並掛載到實例上去之後調用該鉤子。如果 root 實例掛載了一個文檔內元素,當 mounted 被調用時 vm.$el 也在文檔內。

這意思是該鉤子函數是在掛在完成以後也就是模板渲染完成以後才會被調用。下面看實例

下面是結果

nihao

取到了值,這說明這時候vue模板已經渲染完畢。因此,Dom操作一般是在mounted鉤子函數中進行的

computed:{} 計算屬性,什麼是計算屬性呢,我個人理解就是對數據進行一定的操作,可以包含邏輯處理操作,對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的,只有在相關依賴發生改變時側能更新變化,以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。

總結:
通常created使用的次數多,而mounted通常是在一些插件的使用或者組件的使用中進行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID);通常會有這一步,而如果你寫入組件中,你會發現在created中無法對chart進行一些初始化配置,一定要等這個html渲染完後才可以進行,那麼mounted就是不二之選。
methods:{}中的方法都需要主動去觸發,比如點擊click之類的
而created(){}、mounted(){}、裡面的代碼都是自動去執行的,即vue生命周期到了哪一步就直接去執行對應鉤子函數裡面的代碼了,無需手動去執行
created中主要放初始化獲取數據之類,mounted()中掛載到具體的DOM節點

computed:{} 計算屬性,什麼是計算屬性呢,我個人理解就是對數據進行一定的操作,可以包含邏輯處理操作,對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的,只有在相關依賴發生改變時側能更新變化,以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。

mounted 是生命周期鉤子,vue的生命周期中一個實例的mounted只會運行一次。mounted在vue的渲染模板掛載到$el元素上才會調用,很顯然你export的時候el都么有自然不會運行mounted鉤子函數了。
所有的方法都應該在methods里定義,然後在created或者mounted里 使用this調用方法,用這種方式實現初始化

6、Vue中組件之間的傳參方式有哪些方式?

Vue 組件傳參的八種方式總結

Vue 組件的使用不管是在平常工作還是在面試面試中,都是頻繁出現的。因此系統的梳理一下組件之間的傳參還是非常有必要的

一、props 傳參

子組件定義 props 有三種方式:

// 第一種數組方式

// 第二種對象方式

// 第三種對象嵌套對象方式

第三種對象默認支持 4 種屬性,並且都是非必填的。可以隨意使用


父組件傳參的倆種方式

第一種靜態屬性傳參

注意:

1、在不定義 props 類型的情況下 props 接受到的均為 String。

2、當 props 屬性指定為 Boolean 時,並且只有屬性 key 沒有值 value 時接受到的是 true


第二種動態屬性傳參

注意:

1、需要區分非簡寫形式傳入的值是對象,則會對應 props 中多個值

2、會保留傳入值的類型

3、如果是表達式則獲取到的是表達式的計算結果


二、attrs 和listeners

$attrs

$attrs 會獲取到 props 中未定義的屬性(class 和 style 屬性除外),支持響應式。常用的場景有倆種:

組件嵌套組件時可以使用 $attrs 來支持過多的屬性支持。比如 elementUI 的 table 組件。支持的屬性十幾個,而平常封裝的時候用的最多的也就一倆個。

屬性默認是添加在父組件上的,有時候想把多餘的屬性添加在子組件上(可以結合 inheritAttrs: false 屬性,讓父屬性不接受多餘的屬性)

$listeners 定義的事件都在子組件的根元素上,有時候想加到其他元素上。就可以使用 $listerners。它包含了父組件中的事件監聽器(除了帶有 .native 修飾符的監聽器)


三、$emit 通知

這里有一道考題: for 循環的時候如何拿到子組件的傳值和 for 中循環的值

答案有倆種,一是 $event, 二是 閉包。只是需要注意 $event 只能獲取到第一個值

四、v-model

這個其實是一種通過 emit,on 的組合方式。優點再於同步值方便,寫法優雅。下面三種寫法其實是一個意思


五、插槽

六、$refs, $root, $parent, $children

$root 獲取根組件

$parent 獲取父組件

$children 獲取子組件(所有的子組件,不保證順序)

$refs 組件獲取組件實例,元素獲取元素


七、project / inject

注意:注入的值是非響應的



八、Vuex

這個相當於單獨維護的一組數據,就不過多的說了。

watch,computed和methods的關系

1.watch和computed都是以Vue的依賴追蹤機制為基礎的 ,它們都試圖處理這樣一件事情:當某一個數據(稱它為依賴數據)發生變化的時候,所有依賴這個數據的「相關」數據「自動」發生變化,也就是自動調用相關的函數去實現數據的變動。

2.對methods:methods裡面是用來定義函數的,很顯然,它需要手動調用才能執行。而不像watch和computed那樣,「自動執行」預先定義的函數


watch和computed各自處理的數據關系場景不同

1. watch 擅長處理的場景: 一個數據影響多個數據

2. computed 擅長處理的場景: 一個數據受多個數據影響

watch用法 監聽下記haiZeiTuan_Name的值,會改變其他所有的值

結果:this.suoLong會變為 '橡膠海賊團索隆',以此類推

computed用法 監聽下記firstName,secName,thirdName的值,會改變luFei_Name的值

methods和computed的區別例子

注意兩次點擊computed返回的時間是相同的!!

1.兩次點擊methods返回的時間是不同的

2.注意兩次點擊computed返回的時間是相同的

【注意】為什麼兩次點擊computed返回的時間是相同的呢?new Date()不是依賴型數據 (不是放在data等對象下的實例數據) ,所以computed只提供了緩存的值,而沒有重新計算

只有符合:1.存在依賴型數據 2.依賴型數據發生改變這兩個條件 ,computed才會重新計算。

參考:http://www.cnblogs.com/penghuwan/p/7194133.html

答:https://codecat.blog.csdn.net/article/details/100031285

1、Promise

Promise 是非同步編程的一種解決方案,比傳統的解決方案——回調函數和事件——更合理和更強大,簡單地說,Promise好比容器,裡面存放著一些未來才會執行完畢(非同步)的事件的結果,而這些結果一旦生成是無法改變的


2、async await

async await也是非同步編程的一種解決方案,他遵循的是Generator 函數的語法糖,他擁有內置執行器,不需要額外的調用直接會自動執行並輸出結果,它返回的是一個Promise對象。

兩者的主要用法、語法就不贅述了,感興趣的同學可以自行查閱 es6中文文檔


兩者的區別

1、Promise的出現解決了傳統callback函數導致的「地域回調」問題,但它的語法導致了它向縱向發展行成了一個回調鏈,遇到復雜的業務場景,這樣的語法顯然也是不美觀的。而async await代碼看起來會簡潔些,使得非同步代碼看起來像同步代碼,await的本質是可以提供等同於」同步效果「的等待非同步返回能力的語法糖,只有這一句代碼執行完,才會執行下一句。

2、async await與Promise一樣,是非阻塞的。

3、async await是基於Promise實現的,可以說是改良版的Promise,它不能用於普通的回調函數。

簡單來看,這兩者除了語法糖不一樣外,他們解決的問題、達到的效果是大同小異的,我們可以在不同的應用場景,根據自己的喜好來選擇使用。

『柒』 前端常見面試題

前端開發可能問到的問題:
自我介紹(一定要對項目很熟悉)
ui-app web前端技術體系?

響應式怎麼做?

render跟狀態的差異
類組件的生命周期?
阻止冒泡,阻止事件默認行為
文本垂直居中。 line-height設置為元素高度。

用rece講數組中的對象進行合並
解釋localstorage sessionstorage cookie
eventbus滿足event.on('eventname', callback)

display有幾個值?默認值?
position有幾個值?默認值?
div水平垂直居中?
position有哪些值

react相關問題(概念理解、通訊組件等)、react常用內置
React-router
html+css

頁面增刪改查

position的值 absolute relative fixed static

工作中是怎麼聯調和上線的(現場想合適的前後端聯調方式,能和webpack環境切換聯系起來)
antd的Form shouldUpdate增量更新方式,性能優化。
對Hooks的理解

3:操作dom點擊事件向伺服器上傳數據,在上傳未完成之前不可重復操作事件
4:日期格式化,日期不足前兩位補0(2021-06-06 06:06:00)

用css寫一個布局,左側固定寬度,右側自適應

你看