⑴ 前端面試題,人家問我像那個電商產品列表頁,每一個商品的模塊,有沒有不用for循環生成,而是用面向對
把每一個商品封裝成一個對象,它有很多的屬性
比如 :筆記本是一個對象 它的屬性有價格.尺寸等等
⑵ 如何把前端開發的靜態頁封裝成可執行軟體
vue-form-making 是gitbub上一款stars 2.2k的開源表單設計器,使用拖拽的方式直接生成HTML文件,可以綁定後端API,不用寫前端代碼就能和後端完成數據交互。
⑶ 關於前端的幾個知識點,勞煩知友幫忙解答一下
1、DOM結構——兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。
document.documentElement 返迴文檔的根節點<html>
document.body <body>
document.activeElement 返回當前文檔中被擊活的標簽節點(ie)
event.fromElement 返回滑鼠移出的源節點(ie)
event.toElement 返回滑鼠移入的源節點(ie)
event.srcElement 返回激活事件的源節點(ie)
event.target 返回激活事件的源節點(firefox)
當前對象為node
返回父節點:node.parentNode, node.parendElement,
返回所有子節點:node.childNodes(包含文本節點及標簽節點),node.children
返回第一個子節點:node.firstChild
返回最後一個子節點: node.lastChild
返回同屬上一個子節點:node.nextSibling
返回同屬下一個子節點:node.previousSibling
parentNode和parentElement功能一樣,childNodes和children功能一樣。但是parentNode和
childNodes是符合W3C標準的,可以說比較通用。而另外兩個只是IE支持,不是標准,Firefox就不支持
,所以大家只要記得有parentElement和children就行了
2、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點。
(1)創建新節點
createDocumentFragment() //創建一個DOM片段
createElement() //創建一個具體的元素
createTextNode() //創建一個文本節點
(2)添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
(3)查找
getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id,唯一性
3、事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別。
(1)冒泡型事件:事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
(2)捕獲型事件(event capturing):事件從最不精確的對象(document 對象)開始觸發,然後到最精確(也可以在窗口級別捕獲事件,不過必須由開發人員特別指定)。
(3)DOM事件流:同時支持兩種事件模型:捕獲型事件和冒泡型事件,但是,捕獲型事件先發生。兩種事件流會觸及DOM中的所有對象,從document對象開始,也在document對象結束。
DOM事件模型最獨特的性質是,文本節點也觸發事件(在IE中不會)。
4、XMLHttpRequest——這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
XMLHttpRequest 對象提供了在網頁載入後與伺服器進行通信的方法。
<script type="text/javascript">
varxmlhttp;
functionloadXMLDoc(url){
xmlhttp=null;
if(window.XMLHttpRequest){ //code for all new browsers
xmlhttp=newXMLHttpRequest();
}elseif(window.ActiveXObject){ //code for IE5 and IE6
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
if(xmlhttp!=null){
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}else{
alert("Your browser does not support XMLHTTP.");
}
}
functionstate_Change(){
if(xmlhttp.readyState==4){ //4 = "loaded"
if(xmlhttp.status==200){ //200 = OK
//...our code here...
}else{
alert("Problem retrieving XML data");
}
}
}
</script>
5、嚴格模式與混雜模式——如何觸發這兩種模式,區分它們有何意義。
在標准模式中,瀏覽器根據規范呈現頁面;
在混雜模式中,頁面以一種比較寬松的向後兼容的方式顯示。
瀏覽器根據DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現方法。如果XHTML文檔包含形式完整的DOCTYPE,那麼它一般以標准模式
呈現。對於HTML
4.01文檔,包含嚴格DTD的DOCTYPE常常導致頁面以標准模式呈現。包含過渡DTD和URI的DOCTYPE也導致頁面以標准模式呈現,但是有過
渡DTD而沒有URI會導致頁面以混雜模式呈現。DOCTYPE不存在或形式不正確會導致HTML和XHTML文檔以混雜模式呈現。
6、盒模型——外邊距、內邊距和邊框之間的關系,IE 8以下版本的瀏覽器中的盒模型有什麼不同。
一個元素盒模型的層次從內到外分別為:內邊距、邊框和外邊距
IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框
7、塊級元素與行內元素——怎麼用CSS控制它們、它們怎樣影響周圍的元素以及你覺得應該如何定義它們的樣式。
塊級元素,用CSS中的display:inline;屬性則變為行內元素
行內元素,用CSS中的display:block;屬性則變為塊級元素
影響:周圍元素顯示在同一行或換行顯示,根據具體情況調整樣式
8、浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
需要浮動的元素可使用CSS中float屬性來定義元素的浮動位置,left:往左浮動,right:往右浮動
浮動元素引起的問題:
(1)父元素的高度無法被撐開,影響與父元素同級的元素
(2)與浮動元素同級的非浮動元素會跟隨其後
(3)若非第一個元素浮動,則該元素之前的元素也需要浮動,否則會影響頁面顯示的結構
解決方法:
使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題,對於問題1,添加如下樣式,給父元素添加clearfix樣式:
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
9、HTML與XHTML——二者有什麼區別,你覺得應該使用哪一個並說出理由。
主要區別:
XHTML 元素必須被正確地嵌套
XHTML 元素必須被關閉,空標簽也必須被關閉,如 <br> 必須寫成 <br />
XHTML 標簽名必須用小寫字母
XHTML 文檔必須擁有根元素
XHTML 文檔要求給所有屬性賦一個值
XHTML 要求所有的屬性必須用引號""括起來
XHTML 文檔需要把所有 < 、>、& 等特殊符號用編碼表示
XHTML 文檔不要在注釋內容中使「--」
XHTML 圖片必須有說明文字
XHTML 文檔中用id屬性代替name屬性
10、JSON——它是什麼、為什麼應該使用它、到底該怎麼使用它,說出實現細節來。
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。易於人閱讀和編寫。同時也易於機器解析和生成。
JSON建構於兩種結構:
「名稱/值」對的集合(A collection of name/value
pairs)。不同的語言中,它被理解為對象(object),紀錄(record),結構(struct),字典(dictionary),哈希表
(hash table),有鍵列表(keyed list),或者關聯數組 (associative array)。
值的有序列表(An ordered list of values)。在大部分語言中,它被理解為數組(array)。
⑷ ssm怎麼將前端表格封裝到list
先封裝到json,然後後台解析就行了
⑸ web前端開發需要掌握的幾個必備技術
Web前端開發需要掌握的幾個必備技術是:
HTML +_CSS核心、JavaScript、VUE框架
前端的應用非常廣泛,基本網站、APP、HTML5小程序等都需要前端開發,所以只要是互聯網產品基本都需要前端。
前端程序猿切頁面寫頁面,Web上、H5上的炫酷效果,是前端開發大展身手的地方。最常見的用於前端開發的技術組合是:
HTML+CSS+JavaScript。
web前端是在開發人員中最直接面向產品、面向用戶的設計人員,一個開發團隊的成果是要靠web前端去展現,因為用戶不會去關心後台的處理有多麼強大。
後端開發是寫後台,各種業務邏輯、數據處理、模塊介面、客戶端介面等等。後端開發者通常精通於一種Web編程語言和一個資料庫管理系統。電商平台點擊篩選條件下面為你篩選出來的寶貝的功能以及付款人數數據的變化等都是由後台來實現提供的。
目前web產品交互越來越復雜,用戶使用體驗和網站前端性能優化這些都得靠web前端去做。
前端開發則是網站的前台代碼實現,包括基本的HTML和CSS以及JavaScript/ajax,最新的高級版本HTML5、CSS3,以及SVG等。
前端開發需要學習的技術
1 掌握基本web前端開發技術:HTML、CSS、JavaScript、DOM、BOM、AJAX等,而且要了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug
2 必須掌握網站性能優化、SEO和伺服器端開發技術的基礎知識
3 必須學會運用各種web前端開發與測試工具進行輔助開發
4 除了掌握技術層面的知識,還要掌握理論層面的知識,包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等
5 未來web前端開發工程師還要研究HTML5、web視覺設計、網站配色、網站交互設計模式等相關技術
web前端有廣闊的發展空間,app、小程序、移動端、pc端等都網站是需要前端技術的開發支持才能夠完成,技術門檻相對較低、需求量較大,薪資待遇良好。只要是互聯網端的客戶界面,就需要前端來製作完成,前端開發的編程量不大,但是需要部分編程,入門簡單,但是要學的深入需要一個過程。
Web前端招聘崗位
• 前端開發工程師、Web開發工程師、網頁開發工程師、HTML開發工程師...
• H5開發工程師、移動應用開發工程師、App開發工程師、小程序開發工程師...
• JS開發工程師、Vue.js開發工程師、Node.js開發工程師、前端架構師...
• 小游戲開發工程師、數據可視化開發工程師、WebGL開發工程師、WebVR開 發工程師、Web安全工程師...
⑹ 前端學習中 先學好javascript還是先學jquery框架
先學javascript,jquery框架就是用js封裝的,需要js基礎知識
⑺ 沒有基礎的人就不可以學習web前端了嗎
前端前景是很不錯的,像前端這樣的專業還是一線城市比較好,師資力量跟得上、就業的薪資也是可觀的,學習前端可以按照路線圖的順序,
0基礎學習前端是沒有問題的,關鍵是找到靠譜的前端培訓機構,你可以深度了解機構的口碑情況,問問周圍知道這家機構的人,除了口碑再了解機構的以下幾方面:
1. 師資力量雄厚
要想有1+1>2的實際效果,很關鍵的一點是師資隊伍,你接下來無論是找個工作還是工作中出任哪些的人物角色,都越來越愛你本身的技術專業前端技術性,也許的技術專業前端技術性則絕大多數來自你的技術專業前端教師,一個好的前端培訓機構必須具備雄厚的師資力量。
2. 就業保障完善
實現1+1>2效果的關鍵在於能夠為你提供良好的發展平台,即能夠為你提供良好的就業保障,讓學員能夠學到實在實在的知識,並向前端學員提供一對一的就業指導,確保學員找到自己的心理工作。
3. 學費性價比高
一個好的前端培訓機構肯定能給你帶來1+1>2的效果,如果你在一個由專業的前端教師領導並由前端培訓機構自己提供的平台上工作,你將獲得比以往更多的投資。
希望你早日學有所成。
⑻ js前端組件是怎麼封裝的
JS即使封裝了,你也是可以看得到的。JS運行於客戶端,只要能看得到就能下載得到。只是一般都會做一些混淆處理罷了。
要知道是如何封裝的,你首先要弄明白啥叫面向對象編程。不知道這個,就不知道如何封裝一段代碼。
⑼ 一個合格的web前端需要會什麼
1. div和table
這個是最簡單的,也是最基礎的。要熟練掌握div、form table、ul li 、p、span、font這些標簽,這些都是最常用的,特別是div和table,div用於布局、table也可以用於布局,但是不靈活,基本 table是用來和數據打交道。
2.html
HTML是指超文本標簽語言,是目前web領域應用廣泛的語言,我們只需要在html文檔中插入對應的標簽,即可實現web頁面的編寫與排列,所以要熟練掌握HTML基本知識,包括每個標簽的用法等。
3. CSS
CSS指層疊樣式表,可以為HTML標簽自定義樣式,通過設置HTML標簽的樣式,來改變其外形,達到美化與排版web頁面的目的。
4.Javascript
Javascript是網頁腳本語言,它可以在html中運行,設置並修改瀏覽器中的各種對象與變數。例如用來改進設計、驗證表單、檢測瀏覽器、創建 cookies等等,現在各大網站都可以看見 Javascript的蹤影,常見的網站首頁大眼晴、警告提示框、頁面動畫效果等等。Javascript更是一種在客戶端廣泛使用的腳步語言,在 Javascript當中提供了一些內置函數、對象和DOM操作,藉助這些內容我們可以來實現一些客戶端的特效、驗證、交互等!
5.Jquery
Jquery是相當於把js封裝了一套的一個js插件,目的就是操作起來更方便,代碼寫的更少。 Jquery是一個免費、開源的輕量級的Javascript庫,並且兼容各種瀏覽器,同時現在有很多基於 Jquery的插件可供選擇,這樣在我們實現一些豐富的動態效果時更方便快捷,大大節省了我們開發的時間,提高了開發速度。
6.框架
從 bootstrap開始,響應式的珊格系統被後來框架一直沿用,建議學一套主流mvc框架,vue,react, angular兩選一種。
7.會點後台語言
對於前端工程師來說,並不需要像網站程序員樣,編寫對象、開發特殊功能、搭建資料庫。但是前端工程師要掌握基本的頁面GET&POST傳參、程序判斷語法、程序輸出語法、頁面提交、資料庫查詢與記錄插入,以及掌握HTTP與WEB工作原理、掌握Socket長連接實時網路通信技術、掌握 NOSQL中的 MONGODB的應用、了解PHP語法、了解 MYSQL資料庫的基本操作。
當然,以上技能能夠幫助你成為一個合格的前端工程師,但要成為一個優秀的前端,必須掌握除技術以外的東西,例如設計,用戶等等,因此還需不斷的堅持學習。
⑽ web前端開發的幾個問題
1.嵌套表單一般不會有什麼問題,主要是看業務需求,不過盡量還是不要使用嵌套。
2.name只是標簽的屬性,一般的網頁標簽元素都可以使用這個屬性,並非只能表單域里的標簽才能使用。比如 div、span、input等等都可以有name屬性。
3.JQuery已經成為JS腳本開發的標配了,本身的體積也比較小,最主要的是簡化了很多JS操作,而且我們基本不用考慮JS的瀏覽器兼容問題了。至於性能和原生的JS沒什麼區別,放心使用吧。