Ⅰ Web前端崗位面試題有哪些
前端面試題匯總，基本上會有四大類問題，具體如下：
一、HTML
1、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?
2、HTML5 為什麼只需要寫 <!DOCTYPE HTML>？
3、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
4、頁面導入樣式時，使用link和@import有什麼區別？
5、介紹一下你對瀏覽器內核的理解？
6、常見的瀏覽器內核有哪些？
7、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
8、簡述一下你對HTML語義化的理解？
9、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
10、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
11、請描述一下 cookies，sessionStorage 和 localStorage 的區別？
12、iframe有那些缺點？
13、Label的作用是什麼？是怎麼用的？（加 for 或 包裹）
14、HTML5的form如何關閉自動完成功能？
15、如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
16、webSocket如何兼容低瀏覽器？(阿里)
17、頁面可見性（Page Visibility）API 可以有哪些用途？
18、如何在頁面上實現一個圓形的可點擊區域？
19、實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、網頁驗證碼是幹嘛的，是為了解決什麼安全問題？
21、tite與h1的區別、b與strong的區別、i與em的區別？
二、css
1、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
2、CSS選擇符有哪些？哪些屬性可以繼承？
3、CSS優先順序演算法如何計算？
4、CSS3新增偽類有那些？
5、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
6、display有哪些值？說明他們的作用。
7、position的值relative和absolute定位原點是？
8、CSS3有哪些新特性？
9、請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
11、一個滿屏 品 字布局 如何設計?
三、常見兼容性問題？
1、li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
2、經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧 ？
3、為什麼要初始化CSS樣式。
4、absolute的containing block計算方式跟正常流有什麼不同？
5、CSS里的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？
6、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
7、對BFC規范(塊級格式化上下文：block formatting context)的理解？
8、CSS權重優先順序是如何計算的？
9、請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式
10、移動端的布局用過媒體查詢嗎？
11、使用 CSS 預處理器嗎？喜歡那個？
12、CSS優化、提高性能的方法有哪些？
13、瀏覽器是怎樣解析CSS選擇器的？
14、在網頁中的應該使用奇數還是偶數的字體？為什麼呢？
15、margin和padding分別適合什麼場景使用？
16、抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
17、元素豎向的百分比設定是相對於容器的高度嗎？
18、全屏滾動的原理是什麼？用到了CSS的那些屬性？
19、什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
20、視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）
21、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。
22、如何修改chrome記住密碼後自動填充表單的黃色背景 ？
23、你對line-height是如何理解的？
24、設置元素浮動後，該元素的display值是多少？（自動變成display:block）
25、怎麼讓Chrome支持小於12px 的文字？
26、讓頁面里的字體變清晰，變細用CSS怎麼做？（-webkit-font-smoothing: antialiased;）
27、font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思？
28、position:fixed;在android下無效怎麼處理？
29、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）
30、display:inline-block 什麼時候會顯示間隙？(攜程)
31、overflow: scroll時不能平滑滾動的問題怎麼處理？
32、有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
33、png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？
34、什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）
35、style標簽寫在body後與body前有什麼區別？
四、JavaScript
1、介紹JavaScript的基本數據類型。
2、說說寫JavaScript的基本規范？
3、JavaScript原型，原型鏈 ? 有什麼特點？
4、JavaScript有幾種類型的值？（堆：原始數據類型和 棧：引用數據類型），你能畫一下他們的內存圖嗎？
5、Javascript如何實現繼承？
6、Javascript創建對象的幾種方式？
7、Javascript作用鏈域?
8、談談This對象的理解。
9、eval是做什麼的？
10、什麼是window對象? 什麼是document對象?
11、null，undefined的區別？
12、寫一個通用的事件偵聽器函數(機試題)。
13、[「1」, 「2」, 「3」].map(parseInt) 答案是多少？
14、關於事件，IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？
15、什麼是閉包（closure），為什麼要用它？
16、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？
17、如何判斷一個對象是否屬於某個類？
18、new操作符具體幹了什麼呢?
19、用原生JavaScript的實現過什麼功能嗎？
20、Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？
21、對JSON的了解？
22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎？
23、js延遲載入的方式有哪些？
24、Ajax 是什麼? 如何創建一個Ajax？
25、同步和非同步的區別?
26、如何解決跨域問題?
27、頁面編碼和被請求的資源編碼如果不一致如何處理？
28、模塊化開發怎麼做？
29、AMD（Moles/Asynchronous-Definition）、CMD（Common MoleDefinition）規范區別？
30、requireJS的核心原理是什麼？（如何動態載入的？如何避免多次載入的？如何 緩存的？）
31、讓你自己設計實現一個requireJS，你會怎麼做？
32、談一談你對ECMAScript6的了解？
33、ECMAScript6 怎麼寫class么，為什麼會出現class這種東西?
34、非同步載入的方式有哪些？
35、documen.write和 innerHTML的區別?
36、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?
37、.call() 和 .apply() 的含義和區別？
38、數組和對象有哪些原生方法，列舉一下？
39、JS 怎麼實現一個類。怎麼實例化這個類
40、JavaScript中的作用域與變數聲明提升？
41、如何編寫高性能的Javascript？
42、那些操作會造成內存泄漏？
43、JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？
44、jQuery.fn的init方法返回的this指的是什麼對象？為什麼要返回this？
45、jquery中如何將數組轉化為json字元串，然後再轉化回來？
46、jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？
47、jquery.extend 與 jquery.fn.extend的區別？
48、jQuery 的隊列是如何實現的？隊列可以用在哪些地方？
49、談一下Jquery中的bind(),live(),delegate(),on()的區別？
50、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
51、是否知道自定義事件。jQuery里的fire函數是什麼意思，什麼時候用？
52、jQuery 是通過哪個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）
53、針對 jQuery性能的優化方法？
54、Jquery與jQuery UI有啥區別？
55、JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？
56、jquery 中如何將數組轉化為json字元串，然後再轉化回來？
57、jQuery和Zepto的區別？各自的使用場景？
58、針對 jQuery 的優化方法？
59、Zepto的點透問題如何解決？
60、jQueryUI如何自定義組件?
61、需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？
62、如何判斷當前腳本運行在瀏覽器還是node環境中？（阿里）
63、移動端最小觸控區域是多大？
64、jQuery 的 slideUp動畫 ，如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反復執行，該如何處理呢?
65、把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別？瀏覽器會如何解析它們？
66、移動端的點擊事件的有延遲，時間是多久，為什麼會有？ 怎麼解決這個延時？（click 有 300ms 延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）
67、知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?
68、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？
69、解釋JavaScript中的作用域與變數聲明提升？
70、那些操作會造成內存泄漏？
71、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
72、Node.js的適用場景？
(如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
73、解釋一下 Backbone 的 MVC 實現方式？
74、什麼是「前端路由」?什麼時候適合使用「前端路由」? 「前端路由」有哪些優點和缺點?
75、知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
76、如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
77、前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?
78、簡述一下 Handlebars 的基本用法？
79、簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？
80、用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)
檢測瀏覽器版本版本有哪些方式？
81、我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲
Ⅱ javascript 中有哪些對象
描述 語言要素
啟用並返回一個 Automation 對象的引用。 ActiveXObject 對象
提供對創建任何數據類型的數組的支持。 Array 對象
創建一個新的 Boolean 值。 Boolean 對象
提供日期和時間的基本存儲和檢索。 Date 對象
存儲數據鍵、項對的對象。 Dictionary 對象
提供集合中的項的枚舉。 Enumerator 對象
包含在運行 JScript 代碼時發生的錯誤的有關信息。 Error 對象
提供對計算機文件系統的訪問。 FileSystemObject 對象
創建一個新的函數。 Function 對象
是一個內部對象，目的是將全局方法集中在一個對象中。 Global 對象
一個內部對象，提供基本的數學函數和常數。 Math 對象
表示數值數據類型和提供數值常數的對象。 Number 對象
提供所有的 JScript 對象的公共功能。 Object 對象
存儲有關正則表達式模式查找的信息。 RegExp 對象
包含一個正則表達式模式。 正則表達式對象提供對文本字元串的操作和格式處理，判定在字元串中是否存在某個子字元串及確定其位置。 String 對象
提供對 Visual Basic 安全數組的訪問。 VBArray 對象
純手打，希望能幫到你~~~~
Ⅲ web前端主要包含了哪些技術
前端前景是很不錯的，像前端這樣的專業還是一線城市比較好，師資力量跟得上、就業的薪資也是可觀的，學習前端可以按照路線圖的順序，
0基礎學習前端是沒有問題的，關鍵是找到靠譜的前端培訓機構，你可以深度了解機構的口碑情況，問問周圍知道這家機構的人，除了口碑再了解機構的以下幾方面：
1. 師資力量雄厚
要想有1+1>2的實際效果，很關鍵的一點是師資隊伍，你接下來無論是找個工作還是工作中出任哪些的人物角色，都越來越愛你本身的技術專業前端技術性，也許的技術專業前端技術性則絕大多數來自你的技術專業前端教師，一個好的前端培訓機構必須具備雄厚的師資力量。
2. 就業保障完善
實現1+1>2效果的關鍵在於能夠為你提供良好的發展平台，即能夠為你提供良好的就業保障，讓學員能夠學到實在實在的知識，並向前端學員提供一對一的就業指導，確保學員找到自己的心理工作。
3. 學費性價比高
一個好的前端培訓機構肯定能給你帶來1+1>2的效果，如果你在一個由專業的前端教師領導並由前端培訓機構自己提供的平台上工作，你將獲得比以往更多的投資。
希望你早日學有所成。
Ⅳ 前端頁面的插件有哪些
工具類
方便操作對象，數組等的工具庫
underscore.js
lo-dash與underscore.js的api基本一致。與underscore比其優勢是，效率高；可自定義構建
Sugar在原生對象上增加一些工具方法
functional.js提夠了一些Curry的支持
Watch.js監視對象或屬性的變化
bacon.js函數式編程，cool
streamjs用流的方式來對數組，對象進行系列操作
非同步流程式控制制
eventproxy朴靈出品
Arbiter.js詳細
發布訂閱
qPromise風格的
Async.js
mock
Mock.js生成隨機數據和mock Ajax 請求
jquery-mockjaxmockajax請求
時間庫
moment
datejs
瀏覽器探測
Bowser探測具體瀏覽器和版本
ua-parser-js探測具體瀏覽器和版本，操作系統，設備類型等
調試
console-polyfill能放心的使用 console.log()之類的console方法
log讓控制台輸出的log有樣式
Konsole.js在頁面的一個元素里輸出log信息詳細
uri.jsuri操作
cookie增刪改cookie的工具庫
director前端路由庫詳細
BigDecimal.js提高精度的數字操作
JSDoc根據javascript文件中注釋的信息，生成API文檔詳細
hotkeys鍵盤事件的封裝
MD5用 MD5 的方式加密文件的庫
瀏覽器增強類
讓一些舊瀏覽器變牛逼的庫
Selectivizr讓IE 6-8一些的css3選擇器
ieBetter讓ie6-8有高級瀏覽器的特性
ExplorerCanvas讓IE8-的瀏覽器支持canvas
CSS3 Pie讓IE6-9支持border-radious,box-shadow,linear-gradient。 可以使用.htc文件（注意Mine type）或.js文件。在用Pie.js時，box-radious的元素有背景色時，不顯示背景色。。。
formFive讓舊的瀏覽器支持HTML5表單的一些特性，如 placeholder,autofocus
https://github.com/anselmh/object-fit讓瀏覽器支持object-fit這css規則
HTML5 Cross Browser Polyfills一堆Polyfills
flexibility讓舊的 IE 也支持 Flexbox
選擇器增強
Lining.js讓瀏覽器實現類似::nth-line(), ::nth-last-line()的效果
未歸類
prefixfree用了它，寫css時，就不需要加瀏覽器的前綴了
表單類
jquery-file-upload上傳文件組件詳細
zTree文件樹形視圖控制項
Treed樹編輯器。感覺展示的感覺很像思維導圖
FileAPI對文件選擇框內的文件的一些處理
表單驗證
.Validate詳細
jQuery-Validation-Engine
表單元素美化
uniform提供對下拉框，單，復選框，按鈕等表單元素的美化
select2多選下拉框
selectivity和unfirom比較類似
DropKick下拉框，單，多選。外觀比uniform好
switcheryios7風格的開關組件
nouislider用滾動條來設置/控制（音量等）
range.css美化input[type=range]元素的外觀
圖片類
holderjs生成占點陣圖片
lazyload
imagesLoaded選取的圖片都載入好後執行調回
CSSgram用CSS3的Filter實現Instagram濾鏡的庫
圖標類
Icon Font匯總
SVG做的圖標
svgicons
iconic
HYBICON帶交互效果。如 hover, click
HTML字元實體圖標
http://www.amp-what.com/
transformicons圖標點擊時，會有一些變換效果。如，加號變成叉號
css3patternscss3 做的可平鋪紋理。瀏覽器兼容性不好。
瀏覽圖片
fancybox彈出查看圖片，視屏等等demo
yoxview彈出查看圖片，圖片尺寸縮放很自然
圖片牆
wookmark
UI 框架
WeUI由微信官方設計團隊為微信 Web 開發量身設計。
Framework7
UI 組件類
拖拽
dragula支持Draggable，Dropable和Sortable。感覺比jqueryUI的輕量級，好用的樣子
angular-draguladragular 官方的 angular 版本
數據可視化(圖表)
Echarts網路出品
highcharts功能強大。是收費的。
Plottable.JS基於D3的一個圖表庫
flot文檔不給力
chartJs中文文檔demo很漂亮，很清晰。比較輕量級。
ichartJs中國的一個傢伙搞的，感覺還不錯。
時間選取組件
foundation-datepicker
DatePicker一個簡單的日歷詳細
full calendar支持脫放的方式來改變待辦事宜的時間
Simple Events Calendar外觀很喜歡。收費 5$
jQuery ui datepicker經典，不是很好看
pickadate輕量級，手機友好的，漂亮。但貌似只能在彈出層中顯示，而沒有下拉這種方式顯示。
zebra-datepicker可配置性很強。但貌似只能在彈出在右上方。。。
bootstrap-datepickerbootstrap風格。
dateRangePicker選取時間段。bootstrap風格。該組件依賴Twitter Bootstrap, Moment.js和jQuery.
自定義滾動條
perfect scrollbar輕量級的滾動條。外觀與mac上chrome的滾動條一樣。
iscroll在移動設備上用不錯
載入(Loding)效果
CSS SpinnersCSS做的
Loaders.cssCSS做的
表格組件
jsGridData Grid。詳細
backgrid基於Backbone.js的DataGrid
excellentexport把表格的內容生成excel。兼容 Firefox, Chrome, IE6+
datatables表格可交互（對內容進行排序，刪除等）
handsontable生成Excel外觀的數據
JSpreadsheets表格數據的組件庫
選取顏色
Spectrum
分享到SNS
JiaThis生成分享代碼。
編輯器
ace代碼編輯器，可以用來做demo演示
ckeditor
ueditor網路做的
tinymce對html內容進行實時的編輯
summernote在移動設備上用不錯
通知組件
notie.js
HTML5播放器
jwplayer被大量網站使用
html5media簡單的h5player，輕量級
jplayer功能強太，可換膚
展示
Impress.js各種旋轉，和奇特的體驗
fullPage全屏顯示。用滾輪來翻頁詳細
zepto.fullpage專注於移動端的fullPage.js，依賴Zepto
pagePiling和fullPage類似
turn.js做一本書，帶漂亮的翻頁的效果
幻燈
slidesjs挺好用的，只是那幻燈導航的CSS都要自己寫，呵呵詳細
iSlider無任何插件依賴的手機平台javascript滑動組件詳細
bgstretcher全屏幻燈，會隨著頁面大小的變化而變化。
Swiper開源、免費、強大的移動端觸摸滑動插件Swiper中文網
coin-slider兼容IE6。蠻好的~。不過其切換方式是一塊塊的。不能配置切換方式。。。
wowslider幻燈切換時各種很炫的效果。收費。
cycle2普通的幻燈，竟然不支持垂直滾動。。。
jcarousel普通的幻燈，不兼容IE6
reveal3d滾動。做ppt相當不錯
nodePPT國人做的，做ppt也相當不錯。有些方面比 reveal做的還好。但生成導出的html有些問題
roundabout3d切換，看的後面圖片的邊
彈出框
Magnific-Popup兼容PC，Mobile。還不錯，有5k+的star
layer國人開發的，兼容ie6+。不喜歡其調用方式。
動畫效果
mixitup用漂亮的動畫效果來完成排序和篩選
jQuery.Marquee跑馬燈效果
quickflip卡片翻轉效果
卡片翻轉效果2兼容性可以。寫的比較簡單：1，只支持x方向翻轉 2,類名都是規定好的 3，只能被調用一次。 需要改寫一下。我的改進版見這里
TheaterJS模擬兩個人在屏幕上對話
midnight.js文字顏色隨著背景變，屌炸了
color-animationjquery的顏色漸變動畫插件。jquery的動畫不支持顏色值的變化。改庫提供了這個支持。
transit對元素進行css的變換
tagcanvas3D標簽雲效果詳細
iconate圖片切換動畫
Snap.js左/右側導航的出現效果
CSS shake抖動動畫
ClickSpark.js點擊後的一些酷炫的效果
視覺差插件
scrollorama比較簡單
superscrollorama能做的效果更多，但要用第三方Tween的庫，使用起來比較復雜。
scrolldeck
flash
swfobj能夠自動檢測PC、Mac機器上各種主流瀏覽器對Flash插件的支持情況。它使得插入Flash媒體資源盡量簡捷、安全。而且它是非常符合搜索引擎優化的原則的。此外，它能夠避免您的HTML、XHTML中出現object、embed等非標准標簽，從而符合更加標准。詳細
抽獎
wScratchPad刮刮卡刮獎效果
jqueryrotate旋轉插件。可以用來做轉盤抽獎效果
Intro.js用來介紹網站的功能很不錯。也可以做新手引導。
blockUILolding組件。
simple-hint提示信息。用css做的。兼容性IE 9+。
dotdotdot文字溢出時，添加在文字末尾加省略號
jQuery-menu-aim二級菜單的切換如Amazon主頁上一樣迅速
AnythingZoomer放大鏡功能
美化/高亮語法代碼
google-code-prettify
DlHighlight僅支持JavaScript、CSS、XML、HTML 這4語法高亮
please按要求隨機舒服的顏色
Awesomplete輸入的智能提示，自動補全
proTip提示。感覺比 Bootstrap 的 tip 好
Hammerjs手勢庫。封裝了 Swipe, Tap, Pinch, Pan等手勢
用戶體驗增強類
動畫
velocity提高Jquery動畫的性能。以及顏色動畫之類的新特性。
Snap.svg操作 SVG 的 JS 庫。號稱 SVG 的 jQuery。demo
walkway以動畫的方式，漸漸地畫出 SVG 的路徑。
SVG
測試
Mocha
Chai
Should
Snoion
DeviceMock.jsmock 設備。
其他類
ZeroClipboard將內容復制到剪切板兼容主流瀏覽器的解決方案詳細
html2canvashtml轉化成canvas，可以用來做截圖。詳細
Ink響應式html郵件框架
性能測試
抓取，解析RSS內容（不能跨域，所以後台要做代理，所謂的解析Rss其實就是解析xml）
jFeed
jRss簡單版的jFeed
scriptcam與攝像頭交互
cylon.js機器人框架，支持35個平台
Masonry一個瀑布流框架
devices.css移動設備邊框的外觀。做原型的時候用不錯。
Bootbox.js對bootstrap的彈出框做的一些封裝
免費皮膚
AdminLTE
Bootstrap相關類
JS Plugins倉庫
jQuery Cards高質量的 jQuery 插件網站
jster
node moles
npmrankSort npm packages by page rank
YOU MIGHT NOT NEED JQUERY PLUGINS不依賴 jQuery 的 js 插件。
awesome-nodejs
Libraries.io各種語言的庫
OniUI去哪兒網做的一套基於Avalon的框架
常用的移動端框架
zepto.js
語法與jquery幾乎一樣，會jquery基本會zepto~
最新版本已經更新到1.16
iscroll.js
解決頁面不支持彈性滾動，不支持fixed引起的問題~
實現下拉刷新，滑屏，縮放等功能~
最新版本已經更新到5.0
underscore.js
筆者沒用過，不過聽說好用，推薦給大家~
該庫提供了一整套函數式編程的實用功能，但是沒有擴展任何JavaScript內置對象。
最新版本已經更新到1.8.2
滑屏框架
適合上下滑屏、左右滑屏等滑屏切換頁面的效果
slip.js
iSlider.js
fullpage.js
swiper.js
flex布局
flex布局目前可使用在移動中，並非所有的語法都全兼容，效果良好~
Ⅳ 前端跨域解決方案有哪些
處理跨域方法一——JSONP
1.JSONP原理
利用script元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 數據。JSONP請求一定需要對方的伺服器做支持才可以。
2.JSONP和AJAX對比
JSONP和AJAX相同，都是客戶端向伺服器端發送請求，從伺服器端獲取數據的方式。但AJAX屬於同源策略，JSONP屬於非同源策略（跨域請求）
3.JSONP優缺點
JSONP優點是兼容性好，可用於解決主流瀏覽器的跨域數據訪問的問題。缺點是僅支持get方法具有局限性。
4.JSONP的流程(以第三方API地址為例，不必考慮後台程序)
聲明一個回調函數，其函數名(如fn)當作參數值，要傳遞給跨域請求數據的伺服器，函數形參為要獲取目標數據(伺服器返回的data)。
創建一個
伺服器接收到請求後，需要進行特殊的處理：把傳遞進來的函數名和它需要給你的數據拼接成一個字元串,例如：傳遞進去的函數名是fn，它准備好的數據是fn([{「name」:「jianshu」}]）。
最後伺服器把准備的數據通過HTTP協議返回給客戶端，客戶端再調用執行之前聲明的回調函數（fn），對返回的數據進行操作。
處理跨域方法二——CORS
1.CORS原理
整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對於開發者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。因此，實現CORS通信的關鍵是伺服器。只要伺服器實現了CORS介面，就可以跨源通信。
2.CORS優缺點
CORS要求瀏覽器(>IE10)和伺服器的同時支持，是跨域的根本解決方法，由瀏覽器自動完成。
優點在於功能更加強大支持各種HTTP Method，缺點是兼容性不如JSONP。
處理跨域方法三——WebSocket
Websocket是HTML5的一個持久化的協議，它實現了瀏覽器與伺服器的全雙工通信，同時也是跨域的一種解決方案。WebSocket和HTTP都是應用層協議，都基於 TCP 協議。但是 WebSocket 是一種雙向通信協議，在建立連接之後，WebSocket 的 server 與 client 都能主動向對方發送或接收數據。同時，WebSocket 在建立連接時需要藉助 HTTP 協議，連接建立好了之後 client 與 server 之間的雙向通信就與 HTTP 無關了。
原生WebSocket API使用起來不太方便，我們使用Socket.io，它很好地封裝了webSocket介面，提供了更簡單、靈活的介面，也對不支持webSocket的瀏覽器提供了向下兼容。
處理跨域方法四——postMessage
如果兩個網頁不同源，就無法拿到對方的DOM。典型的例子是iframe窗口和window.open方法打開的窗口，它們與父窗口無法通信。HTML5為了解決這個問題，引入了一個全新的API：跨文檔通信 API（Cross-document messaging）。這個API為window對象新增了一個window.postMessage方法，允許跨窗口通信，不論這兩個窗口是否同源。postMessage方法的第一個參數是具體的信息內容，第二個參數是接收消息的窗口的源（origin），即"協議 + 域名 + 埠"。也可以設為*，表示不限制域名，向所有窗口發送。
Ⅵ 如何用JS調用幾十萬原生API
《近匠》HBuilder：如何用JS調用幾十萬原生API？
近匠訪談開發工具HBuilder王安DCloudHTML5
摘要：《近匠》第25期：HBuilder是DCloud開發的一套Web開發IDE，它通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、JS、css的開發效率。更有意思的是，它可以利用JS調用原生API。
CSDN：請講講團隊和您以往的從業經歷？
DCloud CEO王安：我們團隊從03年起開始做手機App，從J2me、Symbian、Win mobile、Brew一直做到現在的Android、iOS和WP。之前一直在為企業市場提供跨平台手機App的無線中間件。
後來我們看好HTML5的前途，而且也經不住toC市場的誘惑，就毅然出來二次創業。成立了 DCloud.io，開始做基於HTML5的生態系統服務，包括開發工具和雲服務。
我們是W3C的會員，也是HTML5中國產業聯盟的發起單位。我們是一個典型的輕團隊，人不多，但極客化。我們的合夥人之一王淮也在Facebook工作了很久，給我們帶來了很多矽谷的模式。
CSDN：為什麼要做HBuilder這樣一款工具？
王安：人稱HTML5是「性、工、能」缺失，其中「工」指工具不給力，確實如此。
任何主流編程語言，都有優秀的開發IDE，不管是java、.net、Obj-C，但HTML5領域卻一直在用低效的文本編輯器開發。我個人用了十幾年文本編輯器，對比我熟悉的其他語言的IDE，效率也實在讓我受不了。我們就動手開發了HBuilder。
HTML十幾年前初生時，是簡單的標記語言，確實文本編輯器足矣。那時候寫頁面的人都不被視為真正的程序員。但時代不同了，現在JS、css已經發展為真正的編程語言，一個工程會非常龐大，此時沒有IDE會很低效。就像用文本編輯器寫java或Obj-C一樣，效率比專業IDE差很多。
過去也確實沒有太好的HTML5 IDE，更不用提免費的好工具。因為web IDE開發確實很困難，web語法庫沒有統一標准，月月更新，JS是無類型的動態語言……
但是有問題，就會有解決問題的人。所以我們花費大力氣，建立最全的語法庫和瀏覽器兼容資料庫，開發動態JS解析引擎，開源框架語法庫。並且我們在開發效率提升上下了非常大的功夫，快是HBuilder最大的特點，能提升數倍開發效率。
另一方面，HTML5的重要價值是開發手機App，HBuilder為開發者提供移動App開發的全套支持，支持插上數據線真機聯調，不需xcode等原生開發環境就能打包手機App。此外，我們有項創新的技術是JS調用幾十萬原生API。
CSDN：HBuilder是針對移動應用的哪一個環節？在這個環節中，現在是一種什麼狀況？格局是什麼樣的？
王安：使用HTML5、JS、css開發跨平台手機App，這類工具其實之前已經有Phonegap、Titanium。從品類相比，Phonegap只有Runtime沒有IDE，Titanuim的IDE是為其特殊API而製作的專有工具。但HBuilder是一個通用的HTML5開發IDE且又內置了手機runtime。也就是開發者只需要HBuilder就夠了，PC web、Mobile web、App，一個工具一套代碼。
我們推崇一個理念叫「響應式應用」：一套代碼根據不同運行環境調用不同能力來優化用戶體驗。比如文本框，在普通瀏覽器下就是一個文本輸入框，在Chrome瀏覽器下運行時加個判斷調Chrome的語音輸入，而運行在App模式下，則再加一個判斷調用原生的語音識別SDK，比如plus.speech。這樣一個應用可以根據設備的不同而最大化的優化用戶體驗，這種模式很有魅力，對用戶而言體驗更好，對開發者而言成本更低。
當然，比其他同類產品更神奇的一點是，HBuilder里能通過JS代碼的寫法操作幾十萬原生API，即Obj-C和Android原生的對象。
CSDN：HTML5在跨平台App開發上有哪些問題？
王安：前景美好，但卻有四個致命缺點阻礙它的爆發，就是「性、工、能」缺失，碎片化嚴重。相對於原生，HTML5的App性能低，工具差，能力弱。原生雖然不跨平台，但HTML5的瀏覽器兼容性也讓開發者撓頭。HBuilder為了解決這些難題做了很多努力。
1. 先說工具
HBuilder大幅提升了HTML5開發效率。並且也擁有最全且實時更新的HTML5新語法庫。瀏覽器更新版本後一周內其新增的語法就可以被HBuilder提示出來。
HBuilder追求快，還有一個目的，就是降低開發者對框架的依賴。PC Web里框架非常流行，很多框架簡化了開發。但是框架的簡化開發建立在性能下降的基礎上，手機上HTML5本來就慢，層層封裝後只會越來越慢。但開發者使用HBuilder會發現，在HBuilder里不用框架開發的速度，比用其他開發編輯器配合框架的速度，更快。
目前主流HTML5開發工具都更新在沒有手機真機聯調等功能，HBuilder提供了這些功能才能有效的語法庫里幫助開發者開發手機App。
2. 瀏覽器兼容性
由於瀏覽器內核不同，自有擴展語法多，新語法增加速度快，導致碎片化很嚴重，而且是持續性的給開發者造成困擾。HBuilder里每個語法，都有瀏覽器兼容性說明，是目前最全的瀏覽器兼容資料庫。見下圖，-webkit-user-select這個屬性的值域all，IE和Firefox自然不支持，圖標為灰色。但同為webkit內核，Chrome支持；而Android瀏覽器不支持，圖標為灰色；Safari也只有7.0以上才支持，圖標是半亮。
有人說手機上都是webkit內核瀏覽器，應該沒有兼容性問題。但上圖告訴開發者殘酷的真相：iOS、Safari、Android瀏覽器、Chrome安卓版，主流的3款手機瀏覽器一樣有兼容性問題。Google和Apple聯手打破IE的壟斷後，又開始分裂，Chrome去年另起了Blink引擎，開始獨立擴展語法。另外雖然Safari的Mac版和iOS版有點差別，但不多；而Chrome的Android版和Android系統自帶的瀏覽器完全是2個產品。作為開發者，我甚至有點懷念IE壟斷市場的日子。
我們努力做出這個瀏覽器兼容庫，希望可以幫助到廣大開發者。
3. 能力
HTML5規范的好處是跨平台的，但壞處是規范能力比原生差非常多。為了解決這個問題，我們推出了兩套方案：HTML5+的跨平台規范和JS直調原生API。
HTML5+的跨平台規范：開發者常用的手機能力，封裝在HTMLplus.org規范里，包括二維碼、語音輸入等，比如在JS里輸入plus.barcode調用二維碼，plus.speech調用語音輸入。開發一次在不同手機上都可以運行。JS直調原生API：我們提供了plus.ios和plus.android這2個很神奇的對象，使得web開發者不用學習Obj-C，不用買Mac設備，就能在JS里調用原生對象。我們可以這么定義一個JS變數，但實際上是Obj-C對象：我們可以這么定義一個JS變數，但實際上是Obj-C對象：JS直調原生API：我們提供了plus.ios和plus.android這2個很神奇的對象，使得web開發者不用學習Obj-C，不用買Mac設備，就能在JS里調用原生對象。我們可以這么定義一個JS變數，但實際上是Obj-C對象：
var a = plus.ios.implements("NSObject",{"authenticationChanged:":authenticationChanged});
或者如下圖中的：var Intent = plus.android.import("android.content.Intent");其中的"android.content.Intent"是Android的原生類。這段代碼就是使用JS方式給在安卓手機桌面創建一個App快捷方式。這樣，使用HTML5編程的App，在能力方面就和原生一樣強大了。 以前用HTML5做的游戲都無法調用Game Center，O2O應用也調不了Passbook，現在這些都輕而易舉。我們相信這對於web工程師而言，是極大的能力解放，充滿機會的一扇新窗口！
4. 性能
HTML5應用的性能一直是這個產業發展的瓶頸。
手機硬體比PC差、HTML5作為解釋性語言比原生的編譯型語言性能差、手機瀏覽器的默認控制項樣式未優化導致需要在應用層重新封裝UI。這一系列問題疊加在一起，使得性能成為所有HTML5開發者心頭的痛。
另外前端工程師大多長於UI，相比伺服器工程師，他們的代碼性能也要低不少。比如前端工程師很習慣使用框架，框架層層封裝越來越慢，性能如何上的去。HBuilder在解決這個問題上也花費了很多心血：
a. 調用原生繪制界面
在HTML5+規范里有一個plus.ui的子集。一些原生樣式或動畫，比如翻頁動畫或下拉刷新，使用HTML5+JS+css模擬要寫很多代碼，執行起來很慢，此時通過plus.ui擴展就可以在窗體上設置一塊區域，交給原生繪制。性能可大幅提升。
b. 性能第一的UI庫
以前宣稱為手機優化的框架，其實都不是把性能作為產品取捨的第一優先，或者為了框架使用者方便、或者為了框架維護者方便而犧牲了執行性能。我們決定自己做一個。這個項目我們還在開發中，不久會上線。
我們沒有把它稱為框架而是叫UI庫，是因為這里的控制項都是使用最簡單的css樣式的，直接寫class=」xxx」。相比於寫成data-role，然後在JS運行時才替換Dom，使用class的方式要高效的多。
控制項含有的必要的JS代碼，也是本著性能優先的原則開發的，代碼極其精簡高效，沒有$等三方框架，但又可以跨手機瀏覽器。並且這套UI庫會和HBuilder的打包機、Runtime深度整合，做到更高性能的優化。
CSDN：相對於編寫大量JS實現來說，HBuilder利用JS調用原生API，有哪些優點？
王安：JS調用原生API，最大的優點，是大大強化了HTML5的能力，突破了瀏覽器的限制，原生有幾十萬API，數量遠多於HTML5。比如攔截Android來電。
JS的執行效率肯定還是低於原生的，提升性能需要使用前述方案。
這項技術對於JS程序員來講是非常友好易學的，他不需要學習原生語言和配置開發環境，只需要查詢每個原生對象是做什麼用的，然後在JS的plus.ios或plus.andriod里把原生類名作為參數傳進去，就可以通過JS調用該原生對象的方法。
我們還製作了一批常用原生代碼模板，包括創建快捷方式、登錄game center的樣例代碼已經預置在HBuilder里。
CSDN：JS調用原生API，是如何實現的？
王安：這個非常復雜，不同的api需要不同的方法，手機、雲、IDE的共同配合。IDE的顯示代碼、打包機編譯、runtime實際運行這幾種情況下執行碼是不同的。
CSDN：HTML5跨平台開發領域的趨勢是怎麼的？
王安：HTML5的光明前途是毋庸置疑的，當Java被攔在iOS門外時、當終端和屏幕越來越多樣時，HTML5的簡單易用和跨平台這些特點都代表了未來的方向。
現在的問題僅僅是阻礙HTML5發展的那幾個難題，會在何時、會被哪些人解決。當性能、工具、能力、兼容性得到有效突破時，HTML5必將迎來發展爆發。
CSDN：接下來針對HBuilder，Dcloud還有哪些計劃？
王安：除了上面提到的高性能手機UI框架，HBuilder下一步會引入SNS和UGC，強化插件體系，聯合眾多開發者打造大家更滿意的工具和服務。我們很認真的開發著這個免費工具，也希望所有開發者都參與到這個工具的打造中來。目前HBuilder已經在 github.com/dcloudio上設立了3個開源項目，歡迎大家一起打造自己滿意的工具。
轉載僅供參考，版權屬於原作者。祝你愉快，滿意請採納哦
Ⅶ 前端開發移動端有哪些
給大家介紹幾個移動端框架
1、Redbeard
TouchstoneJS是一個由react.js開發混合移動應用程序UI框架。它包括表單組件、導航、轉換、本地觸摸行為等等，還有更多的功能。
Ⅷ 0基礎學習前端，需要掌握什麼
如今學習Web前端的人越來越多，作為一個初入行的新手，一定要想清楚為什麼要學習Web前端，出於一種什麼樣的心態去學習，然後給自己做好定位。
零基礎新手在學習Web前端時應該掌握哪些知識點。我給你總結幾點：
1、HTML學習
超文本標記語言(HyperText Mark-up Language 簡稱HTML)是一個網頁的骨架，無論是靜態網頁還是動態網頁，最終返回到瀏覽器端的都是HTML代碼，瀏覽器將HTML代碼解釋渲染後呈現給用戶。因此，我們必須掌握HTML的基本結構和常用標記及屬性。
2、CSS學習
CSS是英文Cascading Style Sheets的縮寫，叫做層疊樣式表，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言其樣式是可以復用的，這樣就極大地提高了我們開發的速度，降低了維護的成本。
3、JavaScript學習
JavaScript是一種在客戶端廣泛使用的腳步語言，在JavaScript當中為我們提供了一些內置函數、對象和DOM操作，藉助這些內容我們可以來實現一些客戶端的特效、驗證、交互等，使我們的頁面看起來不那麼呆板。
4、jQuery學習
jQuery 是一個免費、開源的輕量級的JavaScript庫，並且兼容各種瀏覽器(jQuery2.0及後續版本放棄了對IE6/7/8瀏覽器的支持)，同時現在有很多基於jQuery的插件可供選擇，這樣在我們實現一些豐富的動態效果時更方便快捷，大大節省了我們開發的時間，提高了開發速度，這也充分體現了其 write less,do more的核心宗旨
5、bootstrap
Bootstrap是Twitter推出的一個開源的用於前端開發的工具包，是一個CSS/HTML框架，並且支持響應式布局。一經推出後頗受歡迎，一直是GitHub上的熱門開源項目。
6、實戰
人生學習的態度是：不急不躁，不快不慢。持之以恆，相信自己。不求能改變世界，但求能改變自己的生活。我們學習Web前端最終的目的是為了找到一份滿意的高薪工作，那麼實戰經驗對於我們就至關重要，所以，在學習的過程中除了學習各種基礎知識，我們還應該積累自己的實戰項目經驗。
基本是一個搞web前端開發工程師需要掌握的技術，然後我也盡量的把自己的一點點經驗告訴了大家，但是大家不要以為上面6點就只有我說的那麼容易,不,他們之所以被人使用，之所以這么火，就是因為強大！
Ⅸ 常用的API有哪些
簡訊API
簡訊API(簡訊應用程序介面)是用來實現簡訊觸發的一種介面。可應用於驗證碼觸發，通知提醒，或者營銷活動等。聚合數據簡訊API，三網合一簡訊通道，3秒可達；電信級運營保障，99%到達率，支持大容量高並發；超低資費，多種階梯套餐任選。
身份證實名認證
身份證實名認證是對資料真實性的一種驗證，通過傳遞姓名+身份證號碼，校驗信息是否一致。聚合數據身份證實名認證API，支持信息加密傳輸方式，數據安全、合規、質量高。適用於電商、游戲、直播、金融等需要用戶實名認證的場景。
三網手機實名制認證
三網手機實名制認證是對資料真實性的一種驗證，通過傳遞手機號、姓名和身份證號碼，校驗信息是否一致。聚合數據三網手機實名制認證API，支持移動、聯通、電信三網手機號實名驗證，數據實時更新，准確率高。
銀行卡四元素校驗
銀行卡四元素校驗是對資料真實性的一種驗證。通過傳遞姓名+身份證號碼+手機號+銀行卡號，針對全國所有銀聯卡，毫秒級驗校姓名、手機號碼、身份證號碼、銀行卡號是否一致。聚合數據銀行卡四元素校驗API，支持身份證、護照、港澳通行證等證件，適用於電商、第三方支付、互聯網金融等需要核驗銀行卡真偽信息的平台，保障用戶真實及資金安全。
常用快遞
常用快遞API是幫助查詢快遞的一種介面。聚合數據常用快遞API，支持國內外1500+家快遞物流公司跟蹤服務，包括順豐、圓通、申通、韻達等主流快遞公司。自動識別快遞公司及單號，伺服器毫秒響應，數據及時准確。專人維護，隨時暢快溝通。
手機在網時長
手機在網時長API是一種通過傳遞手機號，反饋手機卡開通到現在的使用時間(非上網時間)的介面。聚合數據手機在網時長API，毫秒級響應、直聯保障，三網合一，支持信息加密傳輸方式。適用於互聯網金融、汽車租賃等需要通過對用戶手機號碼使用時間長短來評估風險的場景。
全國違章直聯查詢
全國違章直聯查詢API是一種根據車牌號查詢車輛是否有違章信息的介面。聚合數據全國違章直聯查詢API，支持小型車、大型車等多車型，現已覆蓋全國300多個城市，適用於保險公司、共享出行、貨運平台、車主服務平台等需要查詢車輛違章情況的平台。
手機在網狀態
手機在網狀態API是通過傳入手機號碼，查詢該手機號的在網狀態的一種介面。返回內容有正常使用、停機、在網但不可用、不在網（銷號/未啟用/異常）、預銷戶等多種狀態。聚合數據手機在網狀態API，支持攜號轉網號碼查詢，官方直連，權威校驗。全實時優質介面，不參緩存，品質保證。多通道冗餘切換，穩定可靠。適用於互聯網金融、汽車租賃等需要通過對用戶手機號碼的狀態來評估風險的場景。
推薦上聚合數據看看，裡面有很多API種類，附上官網鏈接：網頁鏈接