整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
2014年一個引爆朋友圈的H5小游戲《圍住神經(jīng)貓》開始，各行各業(yè)不斷推出令人耳目一新的H5創(chuàng)意。“H5”，這個由HTML5簡化而來的詞匯，借助微信平臺，正在走進更多人的視野。后來支付寶的十年賬單引發(fā)熱議，各大企業(yè)的年終總結(jié)現(xiàn)也熱衷于用H5技術(shù)實現(xiàn)，優(yōu)秀的互動體驗令原本乏味的總結(jié)報告有趣生動了起來。毫無疑問，HTML5將是未來互聯(lián)網(wǎng)技術(shù)的制高點。尚學堂小編就來解答一下，對HTML5一點都不了解，適合學HTML5嗎?
HTML5網(wǎng)頁的多媒體特性、三維、圖形及特效，超炫的瀏覽體驗，使得HTML5不僅在電腦瀏覽器上可以呈現(xiàn)令人驚嘆的效果，在移動設(shè)備上更加表現(xiàn)不凡，它改變了企業(yè)網(wǎng)絡(luò)廣告的模式與分布。HTML5與移動互聯(lián)網(wǎng)現(xiàn)在如膠如漆。HTML5具有的本地存儲功能、設(shè)備兼容性、地理位置信息等特性，非常適用于移動開發(fā)，幫助企業(yè)構(gòu)建應(yīng)用平臺。作為時下熱門的技術(shù)，掌握HTML5技術(shù)的人才，前景還是不可估量的。
學習HTML5編程這門技能，學習遇到的困難遠沒有學習之前施加給自己的壓力大，每個人接觸新的技能，都會抱著“難不難，我沒有基礎(chǔ)，能學會嗎”這樣的疑問。尚學堂教學部符總認為，對未知事物存在疑慮和擔心自己做不好，這是一種很正常的心理。只要認真對待，積極學習，學好HTML5編程語言其實不難。那么，零基礎(chǔ)學習HTML5，到底需要什么基礎(chǔ)呢?
如果零基礎(chǔ)的情況下想去學代碼的話，就得把HTML5、CSS3、JavaScript三個都學了，這樣就不需要各種求供應(yīng)商和技術(shù)了。這種情況下建議在網(wǎng)上利用HTML5教程學習，并結(jié)合書本教材同步進行。如果只需要能制作出簡單的H5頁面，就可以繞過代碼這關(guān)，善用各類H5制作平臺，應(yīng)該都能輕松上手。如Maka、初頁、秀制作等。當然，網(wǎng)上也有很多制作H5頁面的HTML5教程，教你輕松制作出有吸引力的H5頁面。
總而言之，學習HTML5開發(fā)還是不錯的選擇，移動時代還是非常火的。根據(jù)自身的能力，利用現(xiàn)有的學習資源，選擇合適的HTML5教程或者書籍，學好這門技術(shù)不是難事。
有想學Java的朋友歡迎來尚學堂報名 。機不可失哦。更多技術(shù)交流者或想獲取JAVA資料請加微信（858568103）
著互聯(lián)網(wǎng)、移動互聯(lián)網(wǎng)的發(fā)展，HTML5成為了客戶端軟件開發(fā)的主流技術(shù)，HTML5實際上是由：HTML5語言、CSS3、JAVASCRIPT語言組成。
尚學堂的HTML5前端課程由國內(nèi)知名技術(shù)專家劉興宇老師領(lǐng)銜，已經(jīng)培訓(xùn)就業(yè)數(shù)千人，取得了非常好的社會影響。
為了讓更多人受益，我們會陸續(xù)公布大部分的學習視頻，這些視頻來自于我們線下培訓(xùn)精品課程，大多數(shù)直接錄制于課堂，歡迎大家免費下載或者在線觀看。
我們每個月都會更新相應(yīng)的視頻，大家可以持續(xù)關(guān)注下載地址（前端視頻的拼音）：
http://www.bjsxt.com/qianduanshipin.html
1、WEB前端快速入門
在本階段，我們需要掌握HTML與CSS基礎(chǔ)，當然，也包含H5和C3的新特性。這個部分內(nèi)容非常簡單，而且非常容易掌握。相信你也更愿意學習這個部分，畢竟他可以讓你最直觀的感受到前端的魅力。為了鍛煉大家寫代碼，可以根據(jù)你喜歡的站點去實現(xiàn)效果。
這一階段是非常重要的基礎(chǔ)階段，所謂基礎(chǔ)就是可能這個階段我們的學習的內(nèi)容，可以讓我們開發(fā)出來絢麗網(wǎng)站站點，但是功能豐富卻暫時做不到。為了完成更絢麗的站點，我們需要掌握常見特效的實現(xiàn)，利用css3和h5的新特性實現(xiàn)動畫，布局，雪碧圖，滑動門，tab切換等特效。并且掌握基礎(chǔ)的站點優(yōu)化內(nèi)容。例如sprite等。雖然我們還不能完成更多交互內(nèi)容，但是我們會學習到很多的知識模型和理論，而這些知識模型和理論是我們后期工作和學習的基石。扎實的基礎(chǔ)有了，我們才能走的更穩(wěn)更快。
注：本階段不涉及到編程，主要是熟悉HTML5各種標簽用法、CSS3各種屬性的用法。
2、JavaScript基礎(chǔ)與深入解析
JavaScript語言非常重要，可以說學習前端本質(zhì)就是學習“JavaScript”編程。后面學的很多高級技術(shù)，全部都是基于JavaScript的。
JavaScript語言可以讓網(wǎng)頁元素具備動態(tài)效果，讓體驗度更加流暢。這在目前流行的B/S架構(gòu)體系下，是極端重要的事情。這也是為什么前端工程師大行其道，被廣泛需求的根本原因。
在本階段中，我們主要學習基礎(chǔ)JavaScript語法與深入解析JavaScript，包含DOM操作同時也涵蓋了面向?qū)ο蠛驮O(shè)計模式，課程也涵蓋了兼容性處理和數(shù)據(jù)解析。希望大家在本階段可以熟練掌握這些知識點。
3、jQuery應(yīng)用與項目開發(fā)
jQuery是一個快速、簡潔的JavaScript框架，jQuery設(shè)計的宗旨是“write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設(shè)計模式，優(yōu)化HTML文檔操作、事件處理、動畫設(shè)計和Ajax交互。在本階段，我們注重講解如何更好的應(yīng)用jQuery以及他的設(shè)計方式，同時也包含jQuery擴展內(nèi)容。
4、PHP、數(shù)據(jù)庫編程與設(shè)計
后端服務(wù)器工程師需要了解前端的基本知識，同樣，前端工程師也必須了解服務(wù)器端編程的基本內(nèi)容。我們可以不精通，但必須知道整體的流程。
作為一名前端開發(fā)工程師，會一門后端語言是必然的。在我們的課程中，為您選擇的是PHP，因為PHP環(huán)境搭建簡單，語言與JavaScript相似性比較大，并且容易上手，連接數(shù)據(jù)庫也非常方便。希望本階段的內(nèi)容能幫助你快速掌握前后端交互數(shù)據(jù)。
通過學習PHP，前端工程師也能稱為“全棧工程師”。既能做前端開發(fā)，也能做后端服務(wù)器開發(fā)。
5、Http服務(wù)于Ajax編程
Ajax真的是一個非常古老的技術(shù)了，但是到現(xiàn)在為止，這門技術(shù)仍然被大量使用，可以看出來，他是多么的優(yōu)秀。在本階段，我們將帶你了解Ajax，并且掌握它的應(yīng)用。也包含了解Http相關(guān)的知識。對于站點來說，除了頁面效果能看到的就是數(shù)據(jù)了。所以，數(shù)據(jù)的獲取合理適配尤為重要。與Ajax相關(guān)的也包含跨域處理，希望大家可以掌握這些核心知識點。
6、做一個階段項目
本階段為純項目實戰(zhàn)，可以將前面學到的知識融會貫通，不實戰(zhàn)就相當于沒有學習；主要練習網(wǎng)絡(luò)請求、站點布局、網(wǎng)站優(yōu)化等內(nèi)容，同時我們需要對項目有一定的而了解。所以，在老師的帶領(lǐng)下，可以更快的了解項目如何搭建，如何更優(yōu)雅的實現(xiàn)代碼。老師會將整個項目的開發(fā)流程完整的羅列出來。本階段也鍛煉BootStrap的應(yīng)用，也包含一些常用的第三方插件。在實戰(zhàn)中展示具體應(yīng)用。
7、H5新特性與移動端開發(fā)
H5新特性在現(xiàn)在來說已經(jīng)不再是新內(nèi)容了，項目中隨處可見，畢竟移動端不會存在兼
容性問題，而且這些新特性在移動端的體現(xiàn)也是非常好的。例如定位，語義化等。利用Canvas實現(xiàn)更多的效果等。
在移動端中，我們主要注重移動端布局和資源加載，布局方向，我們主要講解百分比、flex、REM、柵格系統(tǒng)來實現(xiàn)。資源加載采用（SPA）單頁面加載，也是目前比較火的形式。在頁面跳轉(zhuǎn)時可以非常節(jié)省資源。混合開發(fā)也同樣是移動端的一大特點，在我們的課程中都會詳細講解。
8、高級框架
隨著項目的需求越來越多。傳統(tǒng)的開發(fā)方式已經(jīng)不能滿足我們的需求了，所以我們需要更多的支持。在本階段中，我們講解模塊化，將程序分解為模塊化開發(fā)。我們需要Nodejs做支撐，無論是作為構(gòu)建工具中的服務(wù)器存在，還是為我們提供數(shù)據(jù)模擬測試，都是必不可少的。
隨著ES5開發(fā)者體會在開發(fā)中的難言之隱，ES6的到來解決了各種頭痛的問題。也是我們必須要掌握的一個重點。還有更多，例如多人協(xié)同開發(fā)（git或者svn），利用Less和Sass完成更好的CSS的編寫。
接下來我們介紹一下目前前端三大框架：Angular：Angular是一個開發(fā)平臺，他能幫我們輕松的構(gòu)建Web應(yīng)用，我們將在這部分課程中講解Angular的聲明式模板，依賴注入，端到端的工具和一些最佳實踐于一身。我們通過完整項目配合實例講解課程，以便于大家更容易去理解Angular的應(yīng)用。
React：作為前端三大框架之一，React擁有聲明式和組件化兩大特點，React可以輕松創(chuàng)建交互式用戶界面。為應(yīng)用程序中的每個狀態(tài)設(shè)計簡單的視圖，當數(shù)據(jù)更改時，React將高效地更新和正確的渲染組件。聲明式視圖使您的代碼更具可預(yù)測性，更易于調(diào)試。創(chuàng)建好擁有各自State(狀態(tài))的組件，再將其組合構(gòu)成更加復(fù)雜的UI界面。由于組件邏輯是用JavaScript而不是模板編寫的，因此可以通過應(yīng)用程序輕松傳遞豐富的數(shù)據(jù)，并將State(狀態(tài))保留在DOM之外。我們將會從零開發(fā)講解，講解過程中個，我們也帶領(lǐng)大家從環(huán)境的構(gòu)建開始學習，這樣可以讓你更好更快的對接企業(yè)級項目的環(huán)境架構(gòu)。
VUE：在借鑒了Angular和React兩個優(yōu)秀框架的基礎(chǔ)上，Vue無疑是非常受歡迎的，它使用簡單，強大的生態(tài)系統(tǒng)，高效的運行速度也是我們在開發(fā)中的選擇之一。Vue是一套用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是，Vue被設(shè)計為可以自底向上逐層應(yīng)用。Vue的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。在學習真?zhèn)€Vue的過程中，我們會通過兩個企業(yè)級項目來講解他的使用，以便于大家更好的掌握使用Vue熟練開發(fā)。
9、微信小程序
作為微信推出的一種新的項目展示形式，微信小程序必然是非常受到人們重視的，而且，目前為止，大部分推廣為主的公司都存在了微信小程序，也催生了一個崗位，微信小程序開發(fā)工程師。可想而知，微信小程序是非常火的。我們課程是在小程序正式發(fā)布后就已經(jīng)加入到課程了，通過近1年的實戰(zhàn)演練，在我們的課程中，通過項目直接入手，在項目中掌握API知識點的應(yīng)用，這樣可以更快適應(yīng)項目開發(fā)。
關(guān)注微信公眾號IT百戰(zhàn)程序員（baizhanchengxuyuan），更多資料盡在分享。
TML:
1.對WEB標準以及W3C的理解與認識
標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁面速度更快、內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要變動頁面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性;
2.xhtml和html有什么區(qū)別
HTML是一種基本的WEB網(wǎng)頁設(shè)計語言，XHTML是一個基于XML的置標語言
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關(guān)閉。
標簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。
3.Doctype? 嚴格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義?
用于聲明文檔使用那種規(guī)范(html/Xhtml)一般為 嚴格 過度 基于框架的html文檔
加入XMl聲明可觸發(fā)，解析方式更改為IE5.5 擁有IE5.5的bug
4.行內(nèi)元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul
行內(nèi)元素: a b br i span input select
Css盒模型:內(nèi)容，border ,margin，padding
5.CSS引入的方式有哪些? link和@import的區(qū)別是?
內(nèi)聯(lián) 內(nèi)嵌 外鏈 導(dǎo)入
區(qū)別 ：同時加載
前者無兼容性，后者CSS2.1以下瀏覽器不支持
Link 支持使用javascript改變樣式，后者不可
6.CSS選擇符有哪些?哪些屬性可以繼承?優(yōu)先級算法如何計算?內(nèi)聯(lián)和important哪個優(yōu)先級高?
標簽選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標簽選擇
后者優(yōu)先級高
7.前端頁面有哪三層構(gòu)成，分別是什么?作用是什么?
結(jié)構(gòu)層 Html 表示層 CSS 行為層 js
8.css的基本語句構(gòu)成是?
選擇器{屬性1:值1;屬性2:值2;……}
9.你做的頁面在哪些流覽器測試過?這些瀏覽器的內(nèi)核分別是什么?
Ie(Ie內(nèi)核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
10.寫出幾種IE6 BUG的解決方法
1.雙邊距BUG float引起的 使用display
2.像素問題 使用float引起的 使用dislpay:inline -3px
3.超鏈接hover 點擊后失效 使用正確的書寫順序 link visited hover active
4.Ie z-index問題 給父級添加position:relative
5.Png 透明 使用js代碼 改
6.Min-height 最小高度 !Important 解決’
7.select 在ie6下遮蓋 使用iframe嵌套
8.為什么沒有辦法定義1px左右的寬度容器(IE6默認的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)
11.標簽上title與alt屬性的區(qū)別是什么?
Alt 當圖片不顯示是 用文字代表。
Title 為該屬性提供信息
12.描述css reset的作用和用途。
Reset重置瀏覽器的css默認屬性 瀏覽器的品種不同，樣式不同，然后重置，讓他們統(tǒng)一
13.解釋css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務(wù)器對圖片的請求數(shù)量
14.瀏覽器標準模式和怪異模式之間的區(qū)別是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可顯示為什么模式
15.你如何對網(wǎng)站的文件和資源進行優(yōu)化?期待的解決方案包括：
文件合并
文件最小化/文件壓縮
使用CDN托管
緩存的使用
16.什么是語義化的HTML?
直觀的認識標簽 對于搜索引擎的抓取有好處
17.清除浮動的幾種方式，各自的優(yōu)缺點
1.使用空標簽清除浮動 clear:both(理論上能清楚任何標簽，，，增加無意義的標簽)
2.使用overflow:auto(空標簽元素清除浮動而不得不增加無意代碼的弊端,,使用zoom:1用于兼容IE)
3.是用afert偽元素清除浮動(用于非IE瀏覽器)
18、常用那幾種瀏覽器測試?有哪些內(nèi)核(Layout Engine)?
瀏覽器：IE，Chrome，F(xiàn)ireFox，Safari，Opera。
內(nèi)核：Trident，Gecko，Presto，Webkit。
19、 說下行內(nèi)元素和塊級元素的區(qū)別?行內(nèi)塊元素的兼容性使用?(IE8 以下)
行內(nèi)元素：會在水平方向排列，不能包含塊級元素，設(shè)置width無效，height無效(可以設(shè)置line-height)，margin上下無效，padding上下無效。
塊級元素：各占據(jù)一行，垂直方向排列。從新行開始結(jié)束接著一個斷行。
兼容性：display:inline-block;*display:inline;*zoom:1;
20、 清除浮動有哪些方式?比較好的方式是哪一種?
(1)父級div定義height。
(2)結(jié)尾處加空div標簽clear:both。
(3)父級div定義偽類:after和zoom。
(4)父級div定義overflow:hidden。
(5)父級div定義overflow:auto。
(6)父級div也浮動，需要定義寬度。
(7)父級div定義display:table。
(8)結(jié)尾處加br標簽clear:both。
比較好的是第3種方式，好多網(wǎng)站都這么用。
21、box-sizing常用的屬性有哪些?分別有什么作用?
box-sizing: content-box|border-box|inherit;
content-box:寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框(元素默認效果)。
border-box:元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
22、Doctype作用?標準模式與兼容模式各有什么區(qū)別?
告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。
標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
23、HTML5 為什么只需要寫 ?
HTML5不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規(guī)范瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來運行)。
而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
24、 頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別?
(1)link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用;而@import是CSS提供的，只能用于加載CSS;
(2)頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
(3)import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題。
25、介紹一下你對瀏覽器內(nèi)核的理解?
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網(wǎng)頁的內(nèi)容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等)，以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎。
26、html5有哪些新特性?如何處理HTML5新標簽的瀏覽器兼容問題?如何區(qū)分 HTML 和 HTML5?
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。
(1)繪畫 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
(4)sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;
(5)語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;
(6)表單控件，calendar、date、time、email、url、search;
(7)新的技術(shù)webworker, websocket, Geolocation;
IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
瀏覽器支持新標簽后，還需要添加標簽?zāi)J的樣式。
當然也可以直接使用成熟的框架、比如html5shim，
JavaScript:
1.解釋jsonp的原理，以及為什么不是真正的ajax?
動態(tài)創(chuàng)建script標簽，回調(diào)函數(shù)
Ajax是頁面無刷新請求數(shù)據(jù)操作
2. apply和call的用法和區(qū)別:
用法:
都能繼承另一個對象的方法和屬性,區(qū)別在于參數(shù)列表不一樣
區(qū)別:
Function.apply(obj, args) args是一個數(shù)組,作為參數(shù)傳給Function
Function.call(obj, arg1, arg2,...) arg*是參數(shù)列表
apply一個妙用: 可以將一個數(shù)組默認的轉(zhuǎn)化為一個參數(shù)列表
舉例說明: 有一個數(shù)組arr要push進一個新的數(shù)組中去, 如果用call的話需要把數(shù)組中的元素一個個取出來再push, 而用apply只有Array.prototype.push.apply(this, arr)
3. bind函數(shù)的兼容性
用法:
bind()函數(shù)會創(chuàng)建一個新函數(shù), 為綁定函數(shù)。當調(diào)用這個綁定函數(shù)時,綁定函數(shù)會以創(chuàng)建它時傳入bind方法的第一個參數(shù)作為this,傳入bind方法的第二個以及以后的參數(shù)加上綁定函數(shù)運行時本身的參數(shù)按照順序作為原函數(shù)的參數(shù)來調(diào)用原函數(shù).
一個綁定函數(shù)也能使用new操作符創(chuàng)建對象：這種行為就像把原函數(shù)當成構(gòu)造器。提供的 this 值被忽略，同時調(diào)用時的參數(shù)被提供給模擬函數(shù)。
4. 解釋下事件代理
事件委托利用了事件冒泡, 只指定一個事件處理程序, 就可以管理某一類型的所有事件.
例: html部分: 要點擊li彈出其id
html 代碼效果預(yù)覽
javascript 代碼效果預(yù)覽
//js部分
document.getElementById("list").addHandler("click", function(e){
var e=e || window.event;
var target=e.target || e.srcElement;
if(target.nodeName.toUpperCase=="LI"){
console.log("List item", e,target.id, "was clicked!");
}
});
5. 解釋下js中this是怎么工作的?
this 在 JavaScript 中主要由以下五種使用場景。
作為函數(shù)調(diào)用，this 綁定全局對象，瀏覽器環(huán)境全局對象為 window 。
內(nèi)部函數(shù)內(nèi)部函數(shù)的 this 也綁定全局對象，應(yīng)該綁定到其外層函數(shù)對應(yīng)的對象上，這是 JavaScript的缺陷，用that替換。
作為構(gòu)造函數(shù)使用，this 綁定到新創(chuàng)建的對象。
作為對象方法使用，this 綁定到該對象。
使用apply或call調(diào)用 this 將會被顯式設(shè)置為函數(shù)調(diào)用的第一個參數(shù)。
6. 繼承
參考：js怎么實現(xiàn)繼承?
7. AMD vs. CommonJS?
AMD是依賴提前加載
CMD是依賴延時加載
8. 什么是哈希表?
哈希表(Hash table，也叫散列表)，是根據(jù)關(guān)鍵碼值(Key value)而直接進行訪問的數(shù)據(jù)結(jié)構(gòu)。也就是說，它通過把關(guān)鍵碼值映射到表中一個位置來訪問記錄，以加快查找的速度。這個映射函數(shù)叫做散列函數(shù)，存放記錄的數(shù)組叫做散列表。
使用哈希查找有兩個步驟:
使用哈希函數(shù)將被查找的鍵轉(zhuǎn)換為數(shù)組的索引。在理想的情況下，不同的鍵會被轉(zhuǎn)換為不同的索引值，但是在有些情況下我們需要處理多個鍵被哈希到同一個索引值的情況。
所以哈希查找的第二個步驟就是處理沖突。處理哈希碰撞沖突。有很多處理哈希碰撞沖突的方法，比如拉鏈法和線性探測法。
元素特征轉(zhuǎn)變?yōu)閿?shù)組下標的方法就是散列法。散列法當然不止一種，下面列出三種比較常用的：
1，除法散列法
最直觀的一種，上圖使用的就是這種散列法，公式： index=value % 16
學過匯編的都知道，求模數(shù)其實是通過一個除法運算得到的，所以叫“除法散列法”。
2，平方散列法
求index是非常頻繁的操作，而乘法的運算要比除法來得省時(對現(xiàn)在的CPU來說，估計我們感覺不出來)，所以我們考慮把除法換成乘法和一個位移操作。公式： index=(value * value) >> 28 (右移，除以2^28。記法：左移變大，是乘。右移變小，是除。)
如果數(shù)值分配比較均勻的話這種方法能得到不錯的結(jié)果，但我上面畫的那個圖的各個元素的值算出來的index都是0——非常失敗。也許你還有個問題，value如果很大，value * value不會溢出嗎?答案是會的，但我們這個乘法不關(guān)心溢出，因為我們根本不是為了獲取相乘結(jié)果，而是為了獲取index。
3，斐波那契(Fibonacci)散列法
解決沖突的方法:
1. 拉鏈法
將大小為M 的數(shù)組的每一個元素指向一個條鏈表，鏈表中的每一個節(jié)點都存儲散列值為該索引的鍵值對，這就是拉鏈法.
對采用拉鏈法的哈希實現(xiàn)的查找分為兩步，首先是根據(jù)散列值找到等一應(yīng)的鏈表，然后沿著鏈表順序找到相應(yīng)的鍵。
2. 線性探測法:
使用數(shù)組中的空位解決碰撞沖突
參考：淺談算法和數(shù)據(jù)結(jié)構(gòu): 十一 哈希表 哈希表的工作原理
9. 什么是閉包? 閉包有什么作用?
閉包是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù). 創(chuàng)建閉包常見方式,就是在一個函數(shù)內(nèi)部創(chuàng)建另一個函數(shù).
作用:
匿名自執(zhí)行函數(shù) (function (){ ... })(); 創(chuàng)建了一個匿名的函數(shù)，并立即執(zhí)行它，由于外部無法引用它內(nèi)部的變量，因此在執(zhí)行完后很快就會被釋放，關(guān)鍵是這種機制不會污染全局對象。
緩存, 可保留函數(shù)內(nèi)部的值
實現(xiàn)封裝
實現(xiàn)模板
參考: js閉包的用途
10. 偽數(shù)組:
什么是偽數(shù)組:
偽數(shù)組是能通過Array.prototype.slice 轉(zhuǎn)換為真正的數(shù)組的帶有l(wèi)ength屬性的對象
比如arguments對象,還有像調(diào)用getElementsByTagName,document.childNodes之類的，它們都返回NodeList對象都屬于偽數(shù)組
我們可以通過Array.prototype.slice.call(fakeArray)將偽數(shù)組轉(zhuǎn)變?yōu)檎嬲腁rray對象: 返回新數(shù)組而不會修改原數(shù)組
參考：偽數(shù)組
11. undefined和null的區(qū)別, 還有undeclared:
null表示沒有對象, 即此處不該有此值. 典型用法:
(1) 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象。
(2) 作為對象原型鏈的終點。
( 3 ) null可以作為空指針. 只要意在保存對象的值還沒有真正保存對象,就應(yīng)該明確地讓該對象保存null值.
undefined表示缺少值, 即此處應(yīng)該有值, 但還未定義.
(1)變量被聲明了，但沒有賦值時，就等于undefined。
(2) 調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。
(3)對象沒有賦值的屬性，該屬性的值為undefined。
(4)函數(shù)沒有返回值時，默認返回undefined。
undeclared即為被污染的命名, 訪問沒有被聲明的變量, 則會拋出異常, 終止執(zhí)行. 即undeclared是一種語法錯誤
參考: undefined與null的區(qū)別
12. 事件冒泡機制:
從目標元素開始，往頂層元素傳播。途中如果有節(jié)點綁定了相應(yīng)的事件處理函數(shù)，這些函數(shù)都會被一次觸發(fā)。如果想阻止事件起泡，可以使用e.stopPropagation()(Firefox)或者e.cancelBubble=true(IE)來組織事件的冒泡傳播。
13. 解釋下為什么接下來這段代碼不是 IIFE(立即調(diào)用的函數(shù)表達式)：function foo(){ }();?
而函數(shù)定義(語句以function關(guān)鍵字開始)是不能被立即執(zhí)行的，這無疑會導(dǎo)致語法的錯誤(SyntaxError)。當函數(shù)定義代碼段包裹在括號內(nèi)，使解析器可以將之識別為函數(shù)表達式，然后調(diào)用。IIFE: (function foo(){})()
區(qū)分 (function(){})(); 和 (function(){}()); 其實兩者實現(xiàn)效果一樣。
函數(shù)字面量：首先聲明一個函數(shù)對象，然后執(zhí)行它。(function () { alert(1); })();
優(yōu)先表達式：由于Javascript執(zhí)行表達式是從圓括號里面到外面，所以可以用圓括號強制執(zhí)行聲明的函數(shù)。(function () { alert(2); }());
14. "attribute" 和 "property" 的區(qū)別是什么?
DOM元素的attribute和property兩者是不同的東西。attribute翻譯為“特性”，property翻譯為“屬性”。
attribute是一個特性節(jié)點，每個DOM元素都有一個對應(yīng)的attributes屬性來存放所有的attribute節(jié)點，attributes是一個類數(shù)組的容器，說得準確點就是NameNodeMap，不繼承于Array.prototype，不能直接調(diào)用Array的方法。attributes的每個數(shù)字索引以名值對(name=”value”)的形式存放了一個attribute節(jié)點。
hello
property就是一個屬性，如果把DOM元素看成是一個普通的Object對象，那么property就是一個以名值對(name=”value”)的形式存放在Object中的屬性。要添加和刪除property和普通的對象類似。
很多attribute節(jié)點還有一個相對應(yīng)的property屬性，比如上面的div元素的id和class既是attribute，也有對應(yīng)的property，不管使用哪種方法都可以訪問和修改。
總之，attribute節(jié)點都是在HTML代碼中可見的，而property只是一個普通的名值對屬性。
15. 請指出 document load 和 document ready 兩個事件的區(qū)別。
document.ready和onload的區(qū)別——JavaScript文檔加載完成事件。頁面加載完成有兩種事件:
一是ready，表示文檔結(jié)構(gòu)已經(jīng)加載完成(不包含圖片等非文字媒體文件)
二是onload，指示頁面包含圖片等文件在內(nèi)的所有元素都加載完成。
jQuery中$(function(){});他的作用或者意義就是:在DOM加載完成后就可以可以對DOM進行操作。一般情況先一個頁面響應(yīng)加載的順序是，域名解析-加載html-加載js和css-加載圖片等其他信息。
16. 什么是use strict? 其好處壞處分別是什么?
在所有的函數(shù) (或者所有最外層函數(shù)) 的開始處加入 "use strict"; 指令啟動嚴格模式。
"嚴格模式"有兩種調(diào)用方法
1)將"use strict"放在腳本文件的第一行，則整個腳本都將以"嚴格模式"運行。如果這行語句不在第一行，則無效，整個腳本以"正常模式"運行。如果不同模式的代碼文件合并成一個文件，這一點需要特別注意。
2)將整個腳本文件放在一個立即執(zhí)行的匿名函數(shù)之中。
好處
- 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
- 消除代碼運行的一些不安全之處，保證代碼運行的安全;
- 提高編譯器效率，增加運行速度;
- 為未來新版本的Javascript做好鋪墊。
壞處
同樣的代碼，在"嚴格模式"中，可能會有不一樣的運行結(jié)果;一些在"正常模式"下可以運行的語句，在"嚴格模式"下將不能運行
17. 瀏覽器端的js包括哪幾個部分?
核心( ECMAScript) , 文檔對象模型(DOM), 瀏覽器對象模型(BOM)
18. DOM包括哪些對象?
DOM是針對HTML和XML文檔的一個API(應(yīng)用程序編程接口). DOM描繪了一個層次化的節(jié)點樹, 允許開發(fā)人員添加, 移除和修改頁面的某一部分.
常用的DOM方法:
getElementById(id)
getElementsByTagName()
appendChild(node)
removeChild(node)
replaceChild()
insertChild()
createElement()
createTextNode()
getAttribute()
setAttribute()
常用的DOM屬性
innerHTML 節(jié)點(元素)的文本值
parentNode 節(jié)點(元素)的父節(jié)點
childNodes
attributes 節(jié)點(元素)的屬性節(jié)點
參考: HTML DOM 方法
19. js有哪些基本類型?
Undefined, Null, Boolean, Number, String
Object是復(fù)雜數(shù)據(jù)類型, 其本質(zhì)是由一組無序的名值對組成的.
20. 基本類型與引用類型有什么區(qū)別?
基本類型如上題所示. 引用類型則有: Object, Array, Date, RegExp, Function
存儲
基本類型值在內(nèi)存中占據(jù)固定大小的空間,因此被保存在棧內(nèi)存中
引用類型的值是對象, 保存在堆內(nèi)存中. 包含引用類型的變量實際上包含的并不是對象本身, 而是一個指向改對象的指針
復(fù)制
從一個變量向另一個變量復(fù)制基本類型的值, 會創(chuàng)建這個值的一個副本
從一個變量向另一個變量復(fù)制引用類型的值, 復(fù)制的其實是指針, 因此兩個變量最終都指向同一個對象
檢測類型
確定一個值是哪種基本類型可以用typeof操作符,
而確定一個值是哪種引用類型可以使用instanceof操作符
21. 關(guān)于js的垃圾收集例程
js是一門具有自動垃圾回收機制的編程語言,開發(fā)人員不必關(guān)心內(nèi)存分配和回收問題
離開作用域的值將被自動標記為可以回收, 因此將在垃圾收集期間被刪除
"標記清除"是目前主流的垃圾收集算法, 這種算法的思路是給當前不使用的值加上標記, 然后再回收其內(nèi)存
另一種垃圾收集算法是"引用計數(shù)", 這種算法的思想是跟蹤記錄所有值被引用的次數(shù). js引擎目前都不再使用這種算法, 但在IE中訪問非原生JS對象(如DOM元素)時, 這種算法仍然可能會導(dǎo)致問題
當代碼中存在循環(huán)引用現(xiàn)象時, "引用計數(shù)" 算法就會導(dǎo)致問題
解除變量的引用不僅有助于消除循環(huán)引用現(xiàn)象, 而且對垃圾收集也有好處. 為了確保有效地回收內(nèi)存, 應(yīng)該及時解除不再使用的全局對象, 全局對象屬性以及循環(huán)引用變量的引用
22. ES5中, 除了函數(shù),什么能夠產(chǎn)生作用域?
try-catch 和with延長作用域. 因為他們都會創(chuàng)建一個新的變量對象.
這兩個語句都會在作用域鏈的前端添加一個變量對象. 對with語句來說, 會將指定的對象添加到作用域鏈中. 對catch語句來說, 會創(chuàng)建一個新的變量對象, 其中包含的是被拋出的錯誤對象的聲明.
當try代碼塊中發(fā)生錯誤時，執(zhí)行過程會跳轉(zhuǎn)到catch語句，然后把異常對象推入一個可變對象并置于作用域的頭部。在catch代碼塊內(nèi)部，函數(shù)的所有局部變量將會被放在第二個作用域鏈對象中。請注意，一旦catch語句執(zhí)行完畢，作用域鏈機會返回到之前的狀態(tài)。try-catch語句在代碼調(diào)試和異常處理中非常有用，因此不建議完全避免。你可以通過優(yōu)化代碼來減少catch語句對性能的影響。一個很好的模式是將錯誤委托給一個函數(shù)處理
with(object) {statement}。它的意思是把object添加到作用域鏈的頂端
23. js有幾種函數(shù)調(diào)用方式?
方法調(diào)用模型 var obj={ func : function(){};} obj.func()
函數(shù)調(diào)用模式 var func=function(){} func();
構(gòu)造器調(diào)用模式
apply/ call調(diào)用模式
24. 描述事件模型?IE的事件模型是怎樣的?事件代理是什么?事件代理中怎么定位實際事件產(chǎn)生的目標?
捕獲->處于目標->冒泡，IE應(yīng)該是只有冒泡沒有捕獲。
事件代理就是在父元素上綁定事件來處理，通過event對象的target來定位。
25. js動畫有哪些實現(xiàn)方法?
用定時器 setTimeout和setInterval
26. 還有什么實現(xiàn)動畫的方法?
js動畫：使用定時器 setTimeout和setInterval
CSS : transition , animation
transition 包含4種屬性：transition-delaytransition-durationtransition-propertytransition-timing-function，對應(yīng)動畫的4種屬性： 延遲、持續(xù)時間、對應(yīng)css屬性和緩動函數(shù)，
transform 包含7種屬性：animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-directionanimation-iteration-countanimation-fill-modeanimation-play-state，它們可以定義動畫名稱，持續(xù)時間，緩動函數(shù)，動畫延遲，動畫方向，重復(fù)次數(shù)，填充模式。
HTML5 動畫
canvas
svg
webgl
參考：前端動畫效果實現(xiàn)的簡單比較
27. 面向?qū)ο笥心膸讉€特點?
封裝, 繼承, 多態(tài)
28. 如何判斷屬性來自自身對象還是原型鏈?
hasOwnPrototype
29. ES6新特性
1) 箭頭操作符 inputs=>outputs: 操作符左邊是輸入的參數(shù)，而右邊則是進行的操作以及返回的值
2) 支持類, 引入了class關(guān)鍵字. ES6提供的類實際上就是JS原型模式的包裝
3) 增強的對象字面量.
1. 可以在對象字面量中定義原型 __proto__: xxx //設(shè)置其原型為xxx,相當于繼承xxx
2. 定義方法可以不用function關(guān)鍵字
3. 直接調(diào)用父類方法
4) 字符串模板: ES6中允許使用反引號 ` 來創(chuàng)建字符串，此種方法創(chuàng)建的字符串里面可以包含由美元符號加花括號包裹的變量${vraible}。
5) 自動解析數(shù)組或?qū)ο笾械闹怠１热缛粢粋€函數(shù)要返回多個值，常規(guī)的做法是返回一個對象，將每個值做為這個對象的屬性返回。但在ES6中，利用解構(gòu)這一特性，可以直接返回一個數(shù)組，然后數(shù)組中的值會自動被解析到對應(yīng)接收該值的變量中。
6) 默認參數(shù)值: 現(xiàn)在可以在定義函數(shù)的時候指定參數(shù)的默認值了，而不用像以前那樣通過邏輯或操作符來達到目的了。
7) 不定參數(shù)是在函數(shù)中使用命名參數(shù)同時接收不定數(shù)量的未命名參數(shù)。在以前的JavaScript代碼中我們可以通過arguments變量來達到這一目的。不定參數(shù)的格式是三個句點后跟代表所有不定參數(shù)的變量名。比如下面這個例子中，…x代表了所有傳入add函數(shù)的參數(shù)。
8) 拓展參數(shù)則是另一種形式的語法糖，它允許傳遞數(shù)組或者類數(shù)組直接做為函數(shù)的參數(shù)而不用通過apply。
9) let和const關(guān)鍵字: 可以把let看成var，只是它定義的變量被限定在了特定范圍內(nèi)才能使用，而離開這個范圍則無效。const則很直觀，用來定義常量，即無法被更改值的變量。
10) for of值遍歷 每次循環(huán)它提供的不是序號而是值。
11) iterator, generator
12) 模塊
13) Map, Set, WeakMap, WeakSet
14) Proxy可以監(jiān)聽對象身上發(fā)生了什么事情，并在這些事情發(fā)生后執(zhí)行一些相應(yīng)的操作。一下子讓我們對一個對象有了很強的追蹤能力，同時在數(shù)據(jù)綁定方面也很有用處。
15) Symbols Symbol 通過調(diào)用symbol函數(shù)產(chǎn)生，它接收一個可選的名字參數(shù)，該函數(shù)返回的symbol是唯一的。之后就可以用這個返回值做為對象的鍵了。Symbol還可以用來創(chuàng)建私有屬性，外部無法直接訪問由symbol做為鍵的屬性值。
16) Math, Number, String, Object的新API
17) Promises是處理異步操作的一種模式
參考：ES6新特性概覽
30. 如何獲取某個DOM節(jié)點
獲取節(jié)點: getElementById() getElementsByTagName()
31. 用LESS如何給某些屬性加瀏覽器前綴?
可以自定義一個函數(shù)
.border-radius(@values) {
-webkit-border-radius: @values;
-moz-border-radius: @values;
border-radius: @values;
}
div {
.border-radius(10px);
}
32.eval是做什么的?
它的功能是把對應(yīng)的字符串解析成JS代碼并運行;
應(yīng)該避免使用eval，不安全，非常耗性能(2次，一次解析成js語句，一次執(zhí)行)。
33. 圖片預(yù)加載的實現(xiàn)
使用jQuery圖片預(yù)加載插件Lazy Load
1.加載jQuery, 與jquery.lazyload.js
2.設(shè)置圖片的占位符為data-original, 給圖片一個特別的標簽,比如class=".lazy"
3.然后延遲加載: $('img.lazy').lazyload();這個函數(shù)可以選擇一些參數(shù):
3.1.圖片預(yù)先加載距離：threshold，通過設(shè)置這個值，在圖片未出現(xiàn)在可視區(qū)域的頂部距離這個值時加載。
3.2.事件綁定加載的方式：event
3.3.圖片限定在某個容器內(nèi)：container
使用js實現(xiàn)圖片加載: 就是new一個圖片對象, 綁定onload函數(shù), 賦值url
用CSS實現(xiàn)圖片的預(yù)加載
寫一個CSS樣式設(shè)置一批背景圖片，然后將其隱藏
改進: 使用js來推遲預(yù)加載時間, 防止與頁面其他內(nèi)容一起加載
用Ajax實現(xiàn)預(yù)加載
其實就是通過ajax請求請求圖片地址. 還可以用這種方式加載css,js文件等
34. 如果在同一個元素上綁定了兩個click事件, 一個在捕獲階段執(zhí)行, 一個在冒泡階段執(zhí)行. 那么當觸發(fā)click條件時, 會執(zhí)行幾個事件? 執(zhí)行順序是什么?
我在回答這個題的時候說是兩個事件, 先執(zhí)行捕獲的后執(zhí)行冒泡的. 其實是不對的.
綁定在目標元素上的事件是按照綁定的順序執(zhí)行的!!!!
即: 綁定在被點擊元素的事件是按照代碼順序發(fā)生，其他元素通過冒泡或者捕獲“感知”的事件，按照W3C的標準，先發(fā)生捕獲事件，后發(fā)生冒泡事件。所有事件的順序是：其他元素捕獲階段事件 -> 本元素代碼順序事件 -> 其他元素冒泡階段事件 。
參考: JavaScript-父子dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡時執(zhí)行順序
35. js中怎么實現(xiàn)塊級作用域?
使用匿名函數(shù), (立即執(zhí)行函數(shù))
(function(){...})()
使用es6
塊級作用域引入了兩種新的聲明形式,可以用它們定義一個只存在于某個語句塊中的變量或常量.這兩種新的聲明關(guān)鍵字為:
let: 語法上非常類似于var, 但定義的變量只存在于當前的語句塊中
const: 和let類似,但聲明的是一個只讀的常量
使用let代替var可以更容易的定義一個只在某個語句塊中存在的局部變量,而不用擔心它和函數(shù)體中其他部分的同名變量有沖突.在let語句內(nèi)部用var聲明的變量和在let語句外部用var聲明的變量沒什么差別,它們都擁有函數(shù)作用域,而不是塊級作用域.
36. 構(gòu)造函數(shù)里定義function和使用prototype.func的區(qū)別?
1. 直接調(diào)用function，每一個類的實例都會拷貝這個函數(shù)，弊端就是浪費內(nèi)存(如上)。prototype方式定義的方式，函數(shù)不會拷貝到每一個實例中，所有的實例共享prototype中的定義，節(jié)省了內(nèi)存。
2. 但是如果prototype的屬性是對象的話，所有實例也會共享一個對象(這里問的是函數(shù)應(yīng)該不會出現(xiàn)這個情況)，如果其中一個實例改變了對象的值，則所有實例的值都會被改變。同理的話，如果使用prototype調(diào)用的函數(shù)，一旦改變，所有實例的方法都會改變。——不可以對實例使用prototype屬性，只能對類和函數(shù)用。
37. js實現(xiàn)對象的深克隆
因為js中數(shù)據(jù)類型分為基本數(shù)據(jù)類型(number, string, boolean, null, undefined)和引用類型值(對象, 數(shù)組, 函數(shù)). 這兩類對象在復(fù)制克隆的時候是有很大區(qū)別的. 原始類型存儲的是對象的實際數(shù)據(jù), 而對象類型存儲的是對象的引用地址(對象的實際內(nèi)容單獨存放, 為了減少數(shù)據(jù)開銷通常放在內(nèi)存中). 此外, 對象的原型也是引用對象, 它把原型的屬性和方法放在內(nèi)存中, 通過原型鏈的方式來指向這個內(nèi)存地址.
于是克隆也會分為兩類:
淺度克隆：原始類型為值傳遞, 對象類型仍為引用傳遞
深度克隆：所有元素或?qū)傩跃耆珡?fù)制, 與原對象完全脫離, 也就是說所有對于新對象的修改都不會反映到原對象中
西安尚學堂 http://www.xasxt.com/
?
Java零基礎(chǔ)就業(yè)班 最新開班日期：9月24日
上課地址：陜西省西安市高新區(qū)科技二路西安軟件園天澤大廈五樓
咨詢電話：029-62258374 QQ 2145598324
?
?
招生對象：
1. 零計算機編程基礎(chǔ)學
2. 對行業(yè)不滿意人士
3. 跨專業(yè)編程愛好者
4. 在校大學生實訓(xùn)
?
Java零基礎(chǔ)班，10年 Java 以上開發(fā)經(jīng)驗技術(shù)講師、架構(gòu)師、行業(yè)大牛，親自純面授課程，手把手教你寫編程。
?
9月新班免費試聽課程已就緒，7天免費聽課，體驗Java樂趣。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
