前端面試題匯總
1啤呼、函數(shù)的創(chuàng)建方式有哪幾種卧秘？舉一個閉包的的例子，舉一個曾經(jīng)封裝過的函數(shù)媳友，簡單闡述一下原型鏈的使用斯议，談?wù)勀銓his的理解
答：三種，分別是：函數(shù)聲明醇锚、函數(shù)表達式哼御、函數(shù)對象方式
第一種（函數(shù)聲明）
function sum1 （n1, n2）{
return n1 + n2;
}
第二種（函數(shù)表達式）
var sum2 = function （n1, n2）{
Return n1 + n2;
}
第三種（函數(shù)對象方式）
var sum3 = new Function （‘n1’ , ‘n2’, ‘return n1 + n2’）
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)坯临，本質(zhì)上閉包就是函數(shù)內(nèi)部和函數(shù)外部架起來的一架橋梁。
function outer（）{
var num1 = 2;
function inner（）{
Var num2 = 1;
alert （num1 + num2）;
}
return inner;
}
Outer（）（）
原型鏈的使用：當我們創(chuàng)建一個新函數(shù)的時恋昼，都會自動為函數(shù)創(chuàng)建一個prototype的屬性看靠，這個prototype屬性是一個指針指向了這個函數(shù)的原型對象，而這個原型對象會自動創(chuàng)建一個constructor的屬性液肌，constructor屬性也是一個指針挟炬，指向prototype屬性所在的那個函數(shù)。
this的理解：
作為對象方法調(diào)用嗦哆，這個時候的this指向該對象
var obj = {
a:1,
getA:function （）{
alert(this===obj);//true
alert(this.a);//1
}
}
作為普通函數(shù)調(diào)用谤祖，這個時候this總是指向全局對象（在瀏覽器中既window對象)
window.name='zhangshan';
var getName=function（）{
console.log(this.name);//zhangshan
}
作為構(gòu)造器調(diào)用，這個時候this的指向就分情況了老速，主要是看構(gòu)造器有沒有顯式返回一個對象粥喜。
當用new 運算符調(diào)用函數(shù)時，該函數(shù)總會返回一個對象橘券，通常情況this就是指向這個對象的
但是如果構(gòu)造器顯式的返回一個object類的對象额湘，那么運算結(jié)果最終返回的事那個對象而不是this,所以這個時候this指向的對象就是顯式返回的那個對象
var MyClass1 = function（）{
? ? this.name = '111';
}var obj1 = new MyClass1（）;
alert(obj1.name); //111
var MyClass2 = function（）{
? ? this.name = '111';
? ? return { //顯式的返回一個對象
? ? ? ? name: '222';
? ? }
}var obj2 = new MyClass2（）;
alert(obj2.name); //222
2、瀏覽器渲染頁面的過程
答：瀏覽器會把HTML旁舰、SVG锋华、XHTML三種格式的文件會產(chǎn)生一個DOM樹；
Css箭窜，解析css會產(chǎn)生css規(guī)則樹
JavaScript會通過DOM apI 來操作DOM樹 和 css規(guī)則樹
3毯焕、簡單描述下同步和異步的區(qū)別，并舉例實際應用中哪些是同步绽快，哪些是異步芥丧？
答：同步是阻塞的，瀏覽器向服務(wù)器發(fā)送請求坊罢，服務(wù)器比較忙续担，瀏覽器一直等著（頁面白屏），直到服務(wù)器返回數(shù)據(jù)活孩，頁面才可以正常顯示物遇；
異步是非阻塞的，瀏覽器向服務(wù)器請求數(shù)據(jù)憾儒，服務(wù)器比較忙询兴，瀏覽器可以干自己原來的事情（顯示頁面），服務(wù)器返回數(shù)據(jù)的時候通知瀏覽器一聲起趾，瀏覽器把返回的數(shù)據(jù)再渲染到頁面诗舰，局部更新。
4训裆、舉一下jquery中的函數(shù)眶根，這些函數(shù)實現(xiàn)鏈式編程的原理蜀铲？
答：toggle（fn, fn）
$（“td”）.toggle（
function（）{
$（this）.addClass（“selected”）;
}，
function（）{
$（this）.removeClass（“selected”）;
）
實現(xiàn)函數(shù)鏈式編程的原理：返回自身属百，其他過程在函數(shù)內(nèi)部實現(xiàn)记劝，其好處是：節(jié)約js代碼，返回的是同一個對象，提高代碼的效率。
5拍谐、webpack是怎樣配置的，簡要描述一下過程
答：第一在項目文件創(chuàng)建一個webpack.config.js文件怒竿，配置文件創(chuàng)建好了，第二開始正式配置webpack了厘肮，首先下載好node.js愧口，因為webpack基于node.js,裝好node.js后，通過命令行窗口找到項目文件类茂，在項目文件webpack.config.js文件所在的目錄下輸入 npm install webpack -save dev? 下載webpack依賴文件到本地項目中，下載好后會在webpack.config.js文件下自動創(chuàng)建node_modules文件夾托嚣，文件夾里就是所有項目中用到的依賴插件巩检，現(xiàn)在只有一個webpack，項目中用到在下載示启！
6兢哭、npm有哪些常用的命令，請列舉并說明作用
答：$npm init? ? ? ? ? ? ? ? 項目初始化
$npm install -g <name>? ? 安裝并更新package.json中的版本配置
$npm run <name>? ? ? ? 執(zhí)行一段腳本
$npm update -n <name>? 更新模塊
7夫嗓、git的作用是什么迟螺，有哪些命令，這些命令的作用是什么舍咖？在pull時矩父，如果只想要文件的一部分而不是工程文件的整個，使用什么命令排霉？git的沖突如何解決窍株？
答：git是一個開源的分布式版本控制系統(tǒng)，用以有效攻柠、高速處理很小到非常大的項目版本管理球订。
常用的命令：? git init? 初始化倉庫
git config --global user.name? ? 配置用戶名
git config --global user.email? ? 配置郵箱
git add? ? ? 文件添加到暫存區(qū)
git commit? 文件添加到倉庫
git branch? ? 列出所有的分支
git status? ? 顯示有變更的文件
git log? ? ? 查看當前分支的版本歷史
git push? ? ? 提交本地代碼到遠程
git pull? ? ? 從遠程倉庫下載到本地
git checkout? 創(chuàng)建切換分支
解決git分支沖突：? 將本地dev刪除,在重新checkout一個dev分支(保證了此時我們的本地dev分支是最新的),在進行pull服務(wù)器分支,就這樣解決了.
下載一個文件不是整個文件的解決方法：當pull的時候，后面直接帶hash版本就可以下載對應的上傳文件版本瑰钮。
8冒滩、簡述一些vue項目中文件構(gòu)成？
答：build文件夾：主要就是webpack的配置浪谴；
Config文件夾：主要的就是index.js 這個文件進行配置代理服務(wù)器
Src文件夾：
“assets”共用的樣式和圖片
“components”業(yè)務(wù)代碼存放
“router”路由
“APP.vue”vue 文件入口界面
“main.js”對應App.vue創(chuàng)建的實例开睡，也是入口文件祈搜，對應 webpack.base.config.js里的入口配置
Static文件夾：靜態(tài)資源
Pack.json:scripts 里面設(shè)置命令，例如設(shè)置了dev用于調(diào)試則我們開發(fā)時輸入的是npm run dev 士八；例如設(shè)置了build 則是輸入 npm run build 用于打包;另一部分是這里可以看到我們需要的依賴包,在dependencies和devDependencies中容燕，分別對應全局下載和局部下載的依賴包
9、控制臺中使用哪些部分調(diào)試婚度？
答：主要用console來進行調(diào)試
1蘸秘、console.log 用于輸出普通信息
2、console.info 用于輸出提示性信息
3蝗茁、console.error用于輸出錯誤信息
4醋虏、console.warn用于輸出警示信息
5、console.debug用于輸出調(diào)試信息
10哮翘、簡述AJAX的工作原理
答：Ajax的原理簡單來說通過XmlHttpRequest對象來向服務(wù)器發(fā)異步請求颈嚼，從服務(wù)器獲得數(shù)據(jù)，然后用javascript來操作DOM而更新頁面饭寺。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請求數(shù)據(jù)阻课。
XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的艰匙，是一種支持異步請求的技術(shù)限煞。簡單的說，也就是javascript可以及時向服務(wù)器提出請求和處理響應员凝，而不阻塞用戶署驻。達到無刷新的效果。
11健霹、jsonp是如何實現(xiàn)前后數(shù)據(jù)交互旺上？
答：ajax請求受同源策略的影響，不允許進行跨域請求糖埋，而script標簽的src屬性中的鏈接卻可以訪問跨域的js腳本宣吱，利用這個特性，服務(wù)端不在返回json格式的數(shù)據(jù)阶捆，而是返回調(diào)用某個函數(shù)的js代碼凌节，在src中進行了調(diào)用，這樣就實現(xiàn)了跨域洒试，其原理就是動態(tài)創(chuàng)建script標簽倍奢，通過script標簽的src屬性進行調(diào)用
12、ajax中g(shù)et和post方式的區(qū)別垒棋？
答：GET：一般用于信息獲取卒煞，使用URL傳遞參數(shù)，對所發(fā)送信息的數(shù)量也有限制叼架，一般在2000個字符畔裕，有的瀏覽器是8000個字符
POST：一般用于修改服務(wù)器上的資源衣撬，對所發(fā)送的信息沒有限制
在以下情況中，請使用 POST 請求：
1. 無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
2. 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
3. 發(fā)送包含未知字符的用戶輸入時扮饶，POST 比 GET 更穩(wěn)定也更可靠
13具练、ajax中需要配置的參數(shù)有哪些？
參數(shù)名 類型 描述
url String (默認: 當前頁地址) 發(fā)送請求的地址甜无。
type String (默認: "GET") 請求方式 ("POST" 或 "GET")扛点， 默認為 "GET"。注意：其它 HTTP 請求方法岂丘，如 PUT 和 DELETE 也可以使用陵究，但僅部分瀏覽器支持。
timeout Number 設(shè)置請求超時時間（毫秒）奥帘。此設(shè)置將覆蓋全局設(shè)置铜邮。
async Boolean (默認: true) 默認設(shè)置下，所有請求均為異步請求寨蹋。如果需要發(fā)送同步請求松蒜，請將此選項設(shè)置為 false。注意钥庇，同步請求將鎖住瀏覽器牍鞠，用戶其它操作必須等待請求完成才可以執(zhí)行。
beforeSend Function 發(fā)送請求前可修改 XMLHttpRequest 對象的函數(shù)评姨，如添加自定義 HTTP 頭。XMLHttpRequest 對象是唯一的參數(shù)萤晴。
function (XMLHttpRequest) {
? this; // the options for this ajax request
}
cache Boolean (默認: true) jQuery 1.2 新功能吐句，設(shè)置為 false 將不會從瀏覽器緩存中加載請求信息。
complete Function 請求完成后回調(diào)函數(shù) (請求成功或失敗時均調(diào)用)店读。參數(shù)： XMLHttpRequest 對象嗦枢，成功信息字符串。
function (XMLHttpRequest, textStatus) {
? this; // the options for this ajax request
}
contentType String (默認: "application/x-www-form-urlencoded") 發(fā)送信息至服務(wù)器時內(nèi)容編碼類型屯断。默認值適合大多數(shù)應用場合文虏。
data Object,
String 發(fā) 送到服務(wù)器的數(shù)據(jù)。將自動轉(zhuǎn)換為請求字符串格式殖演。GET 請求中將附加在 URL 后氧秘。查看 processData 選項說明以禁止此自動轉(zhuǎn)換。必須為 Key/Value 格式趴久。如果為數(shù)組丸相，jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 '&foo=bar1&foo=bar2'彼棍。
dataType String 預期服務(wù)器返回的數(shù)據(jù)類型灭忠。如果不指定膳算，jQuery 將自動根據(jù) HTTP 包 MIME 信息返回 responseXML 或 responseText，并作為回調(diào)函數(shù)參數(shù)傳遞弛作，可用值:
"xml": 返回 XML 文檔涕蜂，可用 jQuery 處理。
"html": 返回純文本 HTML 信息映琳；包含 script 元素机隙。
"script": 返回純文本 JavaScript 代碼。不會自動緩存結(jié)果刊头。
"json": 返回 JSON 數(shù)據(jù) 黍瞧。
"jsonp": JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時原杂，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數(shù)名印颤，以執(zhí)行回調(diào)函數(shù)。
error Function (默認: 自動判斷 (xml 或 html)) 請求失敗時將調(diào)用此方法穿肄。這個方法有三個參數(shù)：XMLHttpRequest 對象年局，錯誤信息，（可能）捕獲的錯誤對象咸产。
function (XMLHttpRequest, textStatus, errorThrown) {
? // 通常情況下textStatus和errorThown只有其中一個有值
? this; // the options for this ajax request
}
global Boolean (默認: true) 是否觸發(fā)全局 AJAX 事件矢否。設(shè)置為 false 將不會觸發(fā)全局 AJAX 事件，如 ajaxStart 或 ajaxStop 脑溢〗├剩可用于控制不同的Ajax事件
ifModified Boolean (默認: false) 僅在服務(wù)器數(shù)據(jù)改變時獲取新數(shù)據(jù)。使用 HTTP 包 Last-Modified 頭信息判斷屑彻。
processData Boolean (默認: true) 默認情況下验庙，發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對象(技術(shù)上講并非字符串) 以配合默認內(nèi)容類型 "application/x-www-form-urlencoded"。如果要發(fā)送 DOM 樹信息或其它不希望轉(zhuǎn)換的信息社牲，請設(shè)置為 false粪薛。
success Function 請求成功后回調(diào)函數(shù)。這個方法有兩個參數(shù)：服務(wù)器返回數(shù)據(jù)搏恤，返回狀態(tài)
function (data, textStatus) {
? // data could be xmlDoc, jsonObj, html, text, etc...
? this; // the options for this ajax request
}
14违寿、 var btn = document.getElementsByTagName("button");?
for( var i=0; i<3; i++ ) {?
? btn[i].onclick = function() {?
? alert(i);?
}?
}?
}?
結(jié)果是什么？如果想要輸出結(jié)果為0 1 2怎么解決熟空？
答：結(jié)果是3藤巢，輸出結(jié)果0 1 2 的解決方法是把alert(i)放到點擊事件的外邊。
14痛阻、移動端touch事件判斷滑屏手勢的方向菌瘪？
答：當開始一個touchstart事件的時候，獲取此刻手指的橫坐標startX和縱坐標startY；
當觸發(fā)touchmove事件時俏扩，在獲取此時手指的橫坐標moveEndX和縱坐標moveEndY;最后糜工，通過這兩次獲取的坐標差值來判斷手指在手機屏幕上的滑動方向。
思路：用touchmove的最后坐標減去touchstart的起始坐標录淡，X的結(jié)果如果正數(shù)捌木，則說明手指是從左往右劃動；X的結(jié)果如果負數(shù)嫉戚，則說明手指是從右往左劃動刨裆；Y的結(jié)果如果正數(shù)，則說明手指是從上往下劃動彬檀；Y的結(jié)果如果負數(shù)帆啃，則說明手指是從下往上劃動。
具體代碼如下：
? ? var mybody = document.getElementsByTagName('body')[0];
? ? //滑動處理
? ? var startX, startY, moveEndX, moveEndY, X, Y;?
? ? mybody.addEventListener('touchstart', function(e) {
? ? ? ? e.preventDefault();
? ? ? ? startX = e.touches[0].pageX;
? ? ? ? startY = e.touches[0].pageY;
? ? });
? ? mybody.addEventListener('touchmove', function(e) {
? ? ? ? e.preventDefault();
? ? ? ? moveEndX = e.changedTouches[0].pageX;
? ? ? ? moveEndY = e.changedTouches[0].pageY;
? ? ? ? X = moveEndX - startX;
? ? ? ? Y = moveEndY - startY;
? ? ? ? if ( X > 0 ) {alert(‘向右’);}
? ? ? ? else if ( X < 0 ) {alert(‘向左’);}
? ? ? ? else if ( Y > 0) {alert(‘向下’);}
? ? ? ? else if ( Y < 0 ) { alert(‘向上’);}
? ? ? ? else{alert(‘沒滑動’); }
? ? });
15窍帝、怎么防止內(nèi)存泄露努潘？
答：1.減少不必要的全局變量，或者生命周期較長的對象坤学，及時對無用的數(shù)據(jù)進行垃圾回收
? 2.注意程序邏輯疯坤，避免“死循環(huán)”之類的
? 3.避免創(chuàng)建過多的對象 。
16深浮、$wtach監(jiān)聽怎么取消压怠？
答：watch的性能消耗挺大的，所以對于已經(jīng)不需要監(jiān)視的watch飞苇，記得定時取消掉菌瘫。
其實每個watch函數(shù)返回的結(jié)果就是這個watch的deregisterWatch()函數(shù)
//在chrome的控制臺上，斷點得到的$watch的返回值
function deregisterWatch() {
? ? arrayRemove(array, watcher);
? ? lastDirtyWatch = null;
}
所以啊布卡，要取消watch的話突梦，一開始將$watch的返回值保存就好啦，要取消watch的時候羽利，在調(diào)用。
var count=1;
var unbingWatch=$scope.$watch('todoList',function(){
? ? console.log('todoList change');
? ? count++;
? ? //相當于在todoList變化了4次之后刊懈，就調(diào)用unbingWatch()取消這個watch
? ? //在第5次todoList改變的時候,就不會輸出todoList change了这弧。
? ? if(count>4){
? ? ? ? unbingWatch();
? ? }
});
16、怎樣實現(xiàn)一個盒子垂直居中虚汛？
一匾浪、 盒子沒有固定的寬和高
方案1、Transforms 變形
這是最簡單的方法卷哩，不僅能實現(xiàn)絕對居中同樣的效果蛋辈，也支持聯(lián)合可變高度方式使用。內(nèi)容塊定義transform: translate(-50%,-50%)? 必須加上
top: 50%; left: 50%;
方案2、在父級元素上面加上上面3句話冷溶，就可以實現(xiàn)子元素水平垂直居中渐白。
<div class="wrapper">
? ? ? ? 我不知道我的寬度和高是多少，我要實現(xiàn)水平垂直居中逞频。
</div>
.wrapper {
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? background: orange;
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? /*只需要在父元素上加這三句*/
? ? ? ? ? ? justify-content: center; /*子元素水平居中*/
? ? ? ? ? ? align-items: center; /*子元素垂直居中*/
? ? ? ? ? ? display: -webkit-flex;
? ? ? ? }
二纯衍、盒子有固定的寬和高
方案1、margin 負間距
方案2苗胀、margin:auto實現(xiàn)絕對定位元素的居中（該方法兼容ie8以上瀏覽器）
17襟诸、怎樣實現(xiàn)三欄布局，兩邊寬度固定基协，中間自適應歌亲？
答：圣杯布局? 雙飛翼布局
<!DOCTYPE html>
? <html>
? ? ? <head>
? ? ? ? ? <meta charset="UTF-8">
? ? ? ? ? <title></title>
? ? ? ? ? <style type="text/css">
? ? ? ? ? ? ? ? ? *{
? ? ? ? ? ? ? ? ? ? ? margin: 0;
? ? ? ? ? ? ? ? ? ? ? padding: 0;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? #left{
? ? ? ? ? ? ? ? width: 200px;
? ? ? ? ? ? ? ? height: 200px;
? ? ? ? ? ? ? ? float: left;
? ? ? ? ? ? ? ? background-color: red;
? ? ? ? ? ? }
? ? ? ? ? ? #right{
? ? ? ? ? ? ? ? width: 150px;
? ? ? ? ? ? ? ? height: 200px;
? ? ? ? ? ? ? ? float: right;
? ? ? ? ? ? ? ? background-color: mistyrose;
? ? ? ? ? ? }
? ? ? ? ? ? #middle{
? ? ? ? ? ? ? ? height: 200px;
? ? ? ? ? ? ? ? margin: 0 150px 0 200px;
? ? ? ? ? ? ? ? background-color: saddlebrown;? ? ? ? ? ?
? ? ? ? ? ? ? ? word-break: break-word;? ?
? ? ? ? ? ? }
? ? ? ? </style>
? ? ? ? </head>
? ? <body>
? ? ? ? <div id="content">
? ? ? ? ? ? <div id="left">我是左側(cè)內(nèi)容我是左側(cè)內(nèi)容我是左側(cè)內(nèi)容我是左側(cè)內(nèi)容我是左側(cè)內(nèi)容</div>
? ? ? ? ? ? <div id="right">我是右側(cè)內(nèi)容我是右側(cè)內(nèi)容我是右側(cè)內(nèi)容我是右側(cè)內(nèi)容我是右側(cè)內(nèi)容我是右側(cè)內(nèi)容</div>
? ? ? ? ? ? <div id="middle">我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容</div>
? ? ? ? </div>
? ? </body>
</html>
18、移動端怎樣適配不同尺寸的屏幕澜驮？除了用媒體查詢設(shè)定范圍外還有什么方式陷揪？
答：通過js 來獲取不同屏幕的寬度
19、移動端對圖片優(yōu)化有哪些方式泉唁，怎么實現(xiàn)鹅龄？
答：懶加載，使用CSS Sprites合并為一張大圖亭畜，首先從圖片格式方面著手扮休，webp(google官方網(wǎng)址)是谷歌推出的一種圖片格式，優(yōu)點在于同等畫面質(zhì)量下拴鸵，體積比jpg玷坠、png少了25%以上，去掉無意義的修飾劲藐，使用矢量圖替代位圖八堡。
按照HTTP協(xié)議設(shè)置合理的緩存。
詳見鏈接 http://web.jobbole.com/81766/
20聘芜、移動端對小圖標有哪些好的處理方式兄渺？
答：轉(zhuǎn)換成字體圖標
21、對于移動端ICON怎么使用汰现，用過SVG嗎挂谍？它的優(yōu)勢在于？
答：在移動端中使用字體icon瞎饲，
? 可縮放性（Scalability）：
基于字體的icon是與分辨率無關(guān)并能縮放到任何想要程度的技術(shù)口叙。你的圖標看起來毫不關(guān)心retina,HDPI,XHDPI等等屏幕，但渲染時會根據(jù)目標設(shè)備自動調(diào)整嗅战，你將有能力應對任何當下妄田，未來，或大多數(shù)任意規(guī)格的設(shè)備
尺寸（Size ）：
裁剪到正確的比例，icon font的文件的大小要比起位圖小到難以置信的程度疟呐，使用icon font時脚曾，你不需要根據(jù)不同設(shè)備準備不同的圖片，你的APP只需要在啟動時加載一次icon font文件即可萨醒。
可維護性（Maintainability）：
自你的icon打包進一個字體文件斟珊，在項目自始至終你僅需要維護這個單一的字體文件。
通過管理字體文件你可以很自然的組織你的icon集合富纸，任意的進行修改或擴展
可推廣性（Adoption）：
然而囤踩，應用這樣的icon fonts可能會影響你和你同事之間的工作流程，但說服讓他們采用這樣的技術(shù)也非常簡單晓褪，有數(shù)款免費或收費的工具幫你輕松達到目的并能看到很好的應用結(jié)果堵漱，在幾乎任意（手機）移動平臺、瀏覽器或操作系統(tǒng)
靈活性（Flexibility）：
應用icon fonts技術(shù)中最有意義的一項能力是可以操縱icon fonts涣仿， 改變顏色勤庐，大小，僅僅幾行代碼就可以在瞬間改變外觀
可交互性(Interactivity)：
由于靈活性以及能夠通過代碼方便的操縱好港，icon fonts 是獨一無二的在運行時被操縱愉镰，通過應用icon fonts技術(shù)， 你能輕松的在不同狀態(tài)顯示對應的不同效果钧汹，創(chuàng)建動畫丈探。
SVG是矢量圖形文件，可以隨意改變大小拔莱，而不影響圖標質(zhì)量碗降。
可以用CSS樣式來自由定義圖標顏色，比如顏色/尺寸等效果塘秦。
所有的SVG可以全部在一個文件中讼渊，節(jié)省HTTP請求 。
使用SMIL尊剔、CSS或者是javascript可以制作充滿靈性的交互動畫效果爪幻。
由于SVG也是一種XML節(jié)點的文件，所以可以使用gzip的方式把文件壓縮到很小须误。
22笔咽、canvas是怎樣實現(xiàn)一個時鐘的？
答：實現(xiàn)代碼如下：
HTML代碼：
<!DOCTYPE html>
<html>
<head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? <title>Clock</title>
? ? <style type="text/css">
? ? *{
? ? ? ? margin: 0;
? ? ? ? padding: 0;
? ? }
? ? .canvas{
? ? ? ? margin-left: 20px;
? ? ? ? margin-top: 20px;
? ? ? ? border: solid 1px;
? ? }
? ? </style>
</head>
<body onload= "main()">
<canvas class = "canvas" id="canvasId" width = '500px' height = '400px'></canvas>
<script type= "text/javascript" src = "Clock.js"></script>
</body>
</html>
JS代碼:
var Canvas = {};
Canvas.cxt = document.getElementById('canvasId').getContext('2d');
Canvas.Point = function(x, y){
? ? this.x = x;
? ? this.y = y;
};
/*擦除canvas上的所有圖形*/
Canvas.clearCxt = function(){
? ? var me = this;
? ? var canvas = me.cxt.canvas;
? ? ? me.cxt.clearRect(0,0, canvas.offsetWidth, canvas.offsetHeight);
};
/*時鐘*/
Canvas.Clock = function(){
? ? var me = Canvas,
? ? ? ? c = me.cxt,
? ? ? ? radius = 150, /*半徑*/
? ? ? ? scale = 20, /*刻度長度*/
? ? ? ? minangle = (1/30)*Math.PI, /*一分鐘的弧度*/
? ? ? ? hourangle = (1/6)*Math.PI, /*一小時的弧度*/
? ? ? ? hourHandLength = radius/2, /*時針長度*/
? ? ? ? minHandLength = radius/3*2, /*分針長度*/
? ? ? ? secHandLength = radius/10*9, /*秒針長度*/
? ? ? ? center = new me.Point(c.canvas.width/2, c.canvas.height/2); /*圓心*/
? ? /*繪制圓心（表盤中心）*/
? ? function drawCenter(){
? ? ? ? c.save();
? ? ? ? c.translate(center.x, center.y);?
? ? ? ? c.fillStyle = 'black';
? ? ? ? c.beginPath();
? ? ? ? c.arc(0, 0, radius/20, 0, 2*Math.PI);
? ? ? ? c.closePath();
? ? ? ? c.fill();
? ? ? ? c.stroke();
? ? ? ? c.restore();
? ? };
? ? /*通過坐標變換繪制表盤*/
? ? function drawBackGround(){
? ? ? ? c.save();
? ? ? ? c.translate(center.x, center.y); /*平移變換*/
? ? ? ? /*繪制刻度*/
? ? ? ? function drawScale(){
? ? ? ? ? c.moveTo(radius - scale, 0);
? ? ? ? ? c.lineTo(radius, 0);?
? ? ? ? };
? ? ? ? c.beginPath();
? ? ? ? c.arc(0, 0, radius, 0, 2*Math.PI, true);
? ? ? ? c.closePath();
? ? ? ? for (var i = 1; i <= 12; i++) {
? ? ? ? ? drawScale();
? ? ? ? ? c.rotate(hourangle); /*旋轉(zhuǎn)變換*/
? ? ? ? };
? ? ? ? /*繪制時間(3,6,9,12)*/
? ? ? ? c.font = " bold 30px impack"
? ? ? ? c.fillText("3", 110, 10);
? ? ? ? c.fillText("6", -7, 120);
? ? ? ? c.fillText("9", -120, 10);
? ? ? ? c.fillText("12", -16, -100);
? ? ? ? c.stroke();
? ? ? ? c.restore();
? ? };
? ? /*繪制時針(h: 當前時（24小時制）)*/
? ? this.drawHourHand = function(h){
? ? ? ? h = h === 0? 24: h;
? ? ? ? c.save();
? ? ? ? c.translate(center.x, center.y);?
? ? ? ? c.rotate(3/2*Math.PI);
? ? ? ? c.rotate(h*hourangle);
? ? ? ? c.beginPath();
? ? ? ? c.moveTo(0, 0);
? ? ? ? c.lineTo(hourHandLength, 0);
? ? ? ? c.stroke();
? ? ? ? c.restore();
? ? };
? ? /*繪制分針（m: 當前分）*/
? ? this.drawMinHand = function(m){
? ? ? ? m = m === 0? 60: m;
? ? ? ? c.save();
? ? ? ? c.translate(center.x, center.y);?
? ? ? ? c.rotate(3/2*Math.PI);
? ? ? ? c.rotate(m*minangle);
? ? ? ? c.beginPath();
? ? ? ? c.moveTo(0, 0);
? ? ? ? c.lineTo(minHandLength, 0);
? ? ? ? c.stroke();
? ? ? ? c.restore();
? ? };
? ? /*繪制秒針（s：當前秒）*/
? ? this.drawSecHand = function(s){
? ? ? ? s = s === 0? 60: s;
? ? ? ? c.save();
? ? ? ? c.translate(center.x, center.y);?
? ? ? ? c.rotate(3/2*Math.PI);
? ? ? ? c.rotate(s*minangle);
? ? ? ? c.beginPath();
? ? ? ? c.moveTo(0, 0);
? ? ? ? c.lineTo(secHandLength, 0);
? ? ? ? c.stroke();
? ? ? ? c.restore();
? ? };
? ? /*依據(jù)本機時間繪制時鐘*/
? ? this.drawClock = function(){
? ? ? ? var me = this;
? ? ? ? function draw(){
? ? ? ? ? var date = new Date();
? ? ? ? ? Canvas.clearCxt();
? ? ? ? ? drawBackGround();
? ? ? ? ? drawCenter();
? ? ? ? ? me.drawHourHand(date.getHours() + date.getMinutes()/60);
? ? ? ? ? me.drawMinHand(date.getMinutes() + date.getSeconds()/60);
? ? ? ? ? me.drawSecHand(date.getSeconds());
? ? ? ? }
? ? ? ? draw();
? ? ? ? setInterval(draw, 1000);
? ? };?
};
var main = function(){
? ? var clock = new Canvas.Clock();
? ? clock.drawClock();
};
23霹期、rem布局中的尺寸是怎樣計算的，實際舉例說明一下拯田？
答：其實rem布局的本質(zhì)是等比縮放历造，一般是基于寬度，試想一下如果UE圖能夠等比縮放，假設(shè)我們將屏幕寬度平均分成100份吭产，每一份的寬度用x表示侣监，x = 屏幕寬度 / 100，如果將x作為單位臣淤，x前面的數(shù)值就代表屏幕寬度的百分比橄霉。
24、Rem 布局原理邑蒋？
答：rem和em很容易混淆姓蜂，其實兩個都是css的單位，并且也都是相對單位医吊，現(xiàn)有的em钱慢，css3才引入的rem，em可以讓我們的頁面更靈活卿堂，更健壯束莫，比起到處寫死的px值，em似乎更有張力草描，改動父元素的字體大小览绿，子元素會等比例變化，這一變化似乎預示了無限可能
rem布局的本質(zhì)是等比縮放穗慕，一般是基于寬度饿敲，試想一下如果UE圖能夠等比縮放，那假設(shè)我們將屏幕寬度平均分成100份揍诽，每一份的寬度用x表示诀蓉，x = 屏幕寬度 / 100，如果將x作為單位暑脆，x前面的數(shù)值就代表屏幕寬度的百分比
25渠啤、transform后面可以設(shè)置那些屬性？分別是干什么用的添吗？
答： transform的含義是：改變沥曹，使…變形；轉(zhuǎn)換
CSS3 transform常用屬性：rotate() / skew() / scale() / translate(,) 碟联，分別還有x妓美、y之分，比如：rotatex() 和 rotatey()
transform:rotate()：
含義：旋轉(zhuǎn)鲤孵；其中“deg”是“度”的意思壶栋，如“10deg”表示“10度”下同。
.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}
transform:skew()：
含義：傾斜普监；
.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}
transform:scale()：
含義：比例贵试；“1.5”表示以1.5的比例放大琉兜，如果要放大2倍，須寫成“2.0”毙玻，縮小則為負“-”豌蟋。
.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}
transform:translate()：
含義：變動，位移桑滩；如下表示向右位移120像素梧疲，如果向上位移，把后面的“0”改個值就行运准，向左向下位移則為負“-”幌氮。
.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}
26、實現(xiàn)兩個頁面跳轉(zhuǎn)的方式戳吝？
答：window.location.href='hello.html';
window.history.back(-1);?
window.navigate("top.jsp");
self.location=’top.htm’;
27浩销、寫一個去重的函數(shù)？
28听哭、寫一個排序的函數(shù)慢洋？
答：js中要實現(xiàn)數(shù)據(jù)排序，其實只需要用sort函數(shù)就可以解決了陆盘，如下代碼是sort和其他排序算法的區(qū)別和耗時普筹。
Sort = {}
Sort.prototype = {
? ? ? // 利用sort進行排序?
? ? ? systemSort:function(array){?
? ? ? ? ? return array.sort(function(a, b){?
? ? ? ? ? ? ? return a - b;?
? ? ? ? ? });?
? ? ? },?
? ? ? // 冒泡排序?
? ? ? bubbleSort:function(array){?
? ? ? ? ? var i = 0, len = array.length,?
? ? ? ? ? ? ? j, d;?
? ? ? ? ? for(; i<len; i++){?
? ? ? ? ? ? ? for(j=0; j<len; j++){?
? ? ? ? ? ? ? ? ? if(array[i] < array[j]){?
? ? ? ? ? ? ? ? ? ? ? d = array[j];?
? ? ? ? ? ? ? ? ? ? ? array[j] = array[i];?
? ? ? ? ? ? ? ? ? ? ? array[i] = d;?
? ? ? ? ? ? ? ? ? }?
? ? ? ? ? ? ? }?
? ? ? ? ? }?
? ? ? ? ? return array;?
? ? ? },
? ? ? // 快速排序?
? ? ? quickSort:function(array){?
? ? ? ? ? //var array = [8,4,6,2,7,9,3,5,74,5];?
? ? ? ? ? //var array =[0,1,2,44,4,324,5,65,6,6,34,4,5,6,2,43,5,6,62,43,5,1,4,51,56,76,7,7,2,1,45,4,6,7];?
? ? ? ? ? var i = 0;?
? ? ? ? ? var j = array.length - 1;?
? ? ? ? ? var Sort = function(i, j){?
? ? ? ? ? ? ? // 結(jié)束條件?
? ? ? ? ? ? ? if(i == j ){ return };
? ? ? ? ? ? ? var key = array[i];?
? ? ? ? ? ? ? var tempi = i; // 記錄開始位置?
? ? ? ? ? ? ? var tempj = j; // 記錄結(jié)束位置?
? ? ? ? ? ? ? while(j > i){?
? ? ? ? ? ? ? ? ? // j <<-------------- 向前查找?
? ? ? ? ? ? ? ? ? if(array[j] >= key){?
? ? ? ? ? ? ? ? ? ? ? j--;?
? ? ? ? ? ? ? ? ? }else{?
? ? ? ? ? ? ? ? ? ? ? array[i] = array[j]?
? ? ? ? ? ? ? ? ? ? ? //i++ ------------>>向后查找?
? ? ? ? ? ? ? ? ? ? ? while(j > ++i){?
? ? ? ? ? ? ? ? ? ? ? ? ? if(array[i] > key){?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? array[j] = array[i];?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;?
? ? ? ? ? ? ? ? ? ? ? ? ? }?
? ? ? ? ? ? ? ? ? ? ? }?
? ? ? ? ? ? ? ? ? }?
? ? ? ? ? ? ? }
? ? ? ? ? ? ? // 如果第一個取出的 key 是最小的數(shù)?
? ? ? ? ? ? ? if(tempi == i){?
? ? ? ? ? ? ? ? ? Sort(++i, tempj);?
? ? ? ? ? ? ? ? ? return ;?
? ? ? ? ? ? ? }
? ? ? ? ? ? ? // 最后一個空位留給 key?
? ? ? ? ? ? ? array[i] = key;?
? ? ? ? ? ? ? // 遞歸?
? ? ? ? ? ? ? Sort(tempi, i);?
? ? ? ? ? ? ? Sort(j, tempj);
? ? ? ? ? }?
? ? ? ? ? Sort(i, j);
? ? ? ? ? return array;?
? ? ? },? ?
? ? ? // 插入排序?
? ? ? insertSort:function(array){?
? ? ? ? ? // http://baike.baidu.com/image/d57e99942da24e5dd21b7080?
? ? ? ? ? // http://baike.baidu.com/view/396887.htm?
? ? ? ? ? // var array = [0,1,2,44,4,324,5,65,6,6,34,4,5,6,2,43,5,6,62,43,5,1,4,51,56,76,7,7,2,1,45,4,6,7];?
? ? ? ? ? var i = 1, j, temp, key, len = array.length;
? ? ? ? ? for(; i < len; i++){?
? ? ? ? ? ? ? temp = j = i;?
? ? ? ? ? ? ? key = array[j];?
? ? ? ? ? ? ? while(--j > -1){?
? ? ? ? ? ? ? ? ? if(array[j] > key){?
? ? ? ? ? ? ? ? ? ? ? array[j+1] = array[j];?
? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? ? ? array[j+1] = key;?
? ? ? ? ? }
? ? ? ? ? return array;?
? ? ? },?
? ? ? // 希爾排序?
? ? ? //Jun.array.shellSort(Jun.array.df(10000));?
? ? ? shellSort:function(array){?
? ? ? ? ? // http://zh.wikipedia.org/zh/%E5%B8%8C%E5%B0%94%E6%8E%92%E5%BA%8F?
? ? ? ? ? // var array = [13,14,94,33,82,25,59,94,65,23,45,27,73,25,39,10];
? ? ? ? ? // var tempArr = [1750, 701, 301, 132, 57, 23, 10, 4, 1];?
? ? ? ? ? // reverse() 在維基上看到這個最優(yōu)的步長 較小數(shù)組?
? ? ? ? ? var tempArr = [1031612713, 217378076, 45806244, 9651787, 2034035, 428481, 90358, 19001, 4025, 836, 182, 34, 9, 1]?
? ? ? ? ? ? ? //針對大數(shù)組的步長選擇?
? ? ? ? ? var i = 0;?
? ? ? ? ? var tempArrLength = tempArr.length;?
? ? ? ? ? var len = array.length;?
? ? ? ? ? var len2 =? parseInt(len/2);?
? ? ? ? ? for(;i < tempArrLength; i++){?
? ? ? ? ? ? ? if(tempArr[i] > len2){?
? ? ? ? ? ? ? ? ? continue;?
? ? ? ? ? ? ? }
? ? ? ? ? ? ? tempSort(tempArr[i]);?
? ? ? ? ? }
? ? ? ? ? // 排序一個步長?
? ? ? ? ? function tempSort(temp){?
? ? ? ? ? ? ? //console.log(temp) 使用的步長統(tǒng)計?
? ? ? ? ? ? ? var i = 0, j = 0, f, tem, key;?
? ? ? ? ? ? ? var tempLen = len%temp > 0 ?? parseInt(len/temp) + 1 : len/temp;? ? ? ? ?
? ? ? ? ? ? ? for(;i < temp; i++){// 依次循環(huán)列?
? ? ? ? ? ? ? ? ? for(j=1;/*j < tempLen && */temp * j + i < len; j++){
? ? ? ? ? ? ? ? ? ? ? ? //依次循環(huán)每列的每行?
? ? ? ? ? ? ? ? ? ? ? tem = f = temp * j + i;?
? ? ? ? ? ? ? ? ? ? ? key = array[f];? ?
? ? ? ? ? ? ? ? ? ? ? while((tem-=temp) >= 0){?
? ? ? ? ? ? ? ? ? ? ? ? ? ? // 依次向上查找
? ? ? ? ? ? ? ? ? ? ? ? ? if(array[tem] > key){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? array[tem+temp] = array[tem];
? ? ? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? array[tem + temp ] = key;
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ? return array;
? ? ? }
}
testArrs = [];
for (var i = 0; i < 5000; i++) {
? testArrs.push(Math.random());
};
console.log(+new Date());
Sort.prototype.systemSort(testArrs);
console.log(+new Date());
Sort.prototype.bubbleSort(testArrs);
console.log(+new Date());
Sort.prototype.quickSort(testArrs);
console.log(+new Date());
ss = Sort.prototype.insertSort(testArrs);
//console.log(ss.toString);
console.log(+new Date());
oo = Sort.prototype.shellSort(testArrs);
console.log(+new Date());
//console.log(oo.toString());個排序算法和sort函數(shù)的比較
29、vue是怎么傳值的
答：父子之間的傳值
父組件向子組件傳值 通過prop 子組件在props中創(chuàng)建一個屬性隘马，用以接收父組件傳過來的值 太防，子組件向父組件傳值 在響應該點擊事件的函數(shù)中使用$emit來觸發(fā)一個自定義事件 在父組件中注冊子組件并在子組件標簽上綁定對自定義事件的監(jiān)聽
? 非父子之間的通訊
可以通過eventBus來實現(xiàn)通信， 所謂eventBus就是創(chuàng)建一個事件中心酸员，相當于中轉(zhuǎn)站蜒车，可以用它來傳遞事件和接收事件，ventBus = new Vue();
? 組件1觸發(fā)：
<div @click="eve"></div>
methods: {
? ? eve() {
? ? ? ? eventBus.$emit('change','hehe'); //Hub觸發(fā)事件
? ? }
}123456
組件2接收:
<div></div>
created() {
? ? eventBus.$on('change', () => { //Hub接收事件
? ? ? ? this.msg = 'hehe';
? ? });
}123456
這樣就實現(xiàn)了非父子組件之間的通信了.原理就是把eventBus當作一個中轉(zhuǎn)站幔嗦！
30酿愧、網(wǎng)站優(yōu)化時怎么做數(shù)據(jù)分析？
? 答：網(wǎng)站優(yōu)化時邀泉，我們需要每天在百度統(tǒng)計中查看我們網(wǎng)站的每日流量嬉挡，還有在各大站長平臺中查看網(wǎng)站的收錄量，網(wǎng)站關(guān)鍵詞流量汇恤，還有就是每天要用站長工具查看網(wǎng)站的基本情況庞钢。這些數(shù)據(jù)都是最基礎(chǔ)的。
31因谎、外邊距合并怎么解決基括？
答：水平margin不會被合并，垂直margin會被合并
? ? ? 1.設(shè)置了的overflow屬性的盒模型财岔，則其與子元素之間的垂直margin不會合并阱穗，但其與父元素之間饭冬、與相鄰元素之間的margin會合并。（overflow取值為visible除外）
? ? ? 2.設(shè)置了float屬性的盒模型揪阶，則其與相鄰元素之間、其與父元素之間患朱、其與子元素之間的垂直margin都不會被合并鲁僚。
? ? ? 3.設(shè)置了絕對定位position:absolute的盒模型，則其與相鄰元素之間裁厅、其與父元素之間冰沙、其與子元素之間的垂直margin都不會被合并。（但應注意position:absolute對其后元素的position的影響）
4执虹、設(shè)置了display:inline-block的盒模型伴奥，則其與相鄰元素之間香嗓、其與父元素之間、其與子元素之間的垂直margin都不會被合并。
相鄰元素的margin是否被折疊會影響元素的位置狂巢。
防止外邊距合并解決方案：
? 1.防止元素與子元素margin重疊：
用內(nèi)層元素的margin通過外層元素的padding代替；
? ? ? ? ? ? 內(nèi)層元素透明邊框 border:20px solid transparent/父元素background-color;
? 外層元素 overflow:hidden;/overflow:auto;
2.防止元素與子元素虎谢、與父元素氏涩。與相鄰元素的重合：
? ? ? ? ? ? 設(shè)置元素絕對定位 postion:absolute;或float:left;或display:inline-block;
32、H5里面的跨域磺芭？
? 答：由于同源策略的限制赁炎，JavaScript 跨域的問題，一直是一個頗為棘手的問題钾腺。但是徙垫，HTML5 提供了在網(wǎng)頁文檔之間互相接收與發(fā)送信息的功能postMessage，IE8就開始支持了放棒。使用這個功能姻报，只要獲取到網(wǎng)頁所在窗口對象的實例，不僅同源（域 + 端口號）的 Web 網(wǎng)頁之間可以互相通信哨查，甚至可以實現(xiàn)跨域通信逗抑。
1、簡介：otherWindow.postMessage(message, targetOrigin);
要想接收從其他窗口發(fā)送來的信息寒亥，必須對窗口對象的 onmessage 事件進行監(jiān)聽邮府，其它窗口可以通過 postMessage 方法來傳遞數(shù)據(jù)。postMessage方法使用兩個參數(shù)：第一個參數(shù)為所發(fā)送的消息文本溉奕，但也可以是任何 JavaScript 對象（通過 JSON 轉(zhuǎn)換對象為文本）褂傀，第二個參數(shù)為接收消息的對象窗口的 URL 地址，可以在 URL 地址字符串中使用通配符'*'指定全部地加勤。
2仙辟、作用：允許程序員跨域在兩個窗口/frames間發(fā)送數(shù)據(jù)信息同波。基本上叠国，它就像是跨域的AJAX未檩，但不是瀏覽器跟服務(wù)器之間交互，而是在兩個客戶端之間通信粟焊。
3冤狡、postMessage語法
otherWindow.postMessage(msg,targetOrigin)
（1）otherWindow:對接收信息頁面的window的引用∠钐模可以是：
(a)悲雳、內(nèi)聯(lián)框架iframe的contentWindow屬性
(b)、通過window.open方法打開的新窗口的window
(c)香追、window.opener（父頁面）
(d)合瓢、通過name或window.frames[i]。
如果你使用postMessage時沒有帶window透典，默認你就是用的本頁面的window來調(diào)用了它晴楔。
（2）、參數(shù)說明
msg
這就是要傳遞的消息了滥崩。它可以是一切javascript參數(shù)，如字符串讹语，數(shù)字钙皮，對象，數(shù)組顽决，而不是和json一樣只局限于字符串短条，很強大！
targetOrigin
這個參數(shù)稱作“目標域”才菠，用于限制otherWindow茸时，“*”表示不作限制。
注意啦赋访，是目標域不是本域可都！比如，你想在2.com的網(wǎng)頁上往1.com網(wǎng)頁上傳消息蚓耽，那么這個參數(shù)就是“http://1.com/”渠牲，而不是2.com.
另外，一個完整的域包括：協(xié)議步悠，主機名签杈，端口號。如：http://g.cn:80/
（3）其他頁面獲取postMessage傳過來的消息
要對postMessage傳來的消息進行處理鼎兽，就要在其他頁面或子頁面上加一個onmessage事件答姥。如：
window.addEventListener('message',function(event){
console.log(event.data,event.origin,event.source);
｝）
注意：最好是通過addEventListener或attachEvent來加入onmessage事件铣除，而不要直接window.onmessage=function(){}，因為有的瀏覽器這樣加會識別不了（如低版Firefox）
這個onmessage事件接受一個參數(shù)鹦付，就是代碼里的e尚粘，實際上他就是一個event對象。但他里面有很明顯的3個參數(shù)與其他event對象不一樣敲长，即：
（a）data：顧名思義背苦，是傳遞來的message
（b）source：發(fā)送消息的窗口對象
（c）origin：發(fā)送消息窗口的源url（協(xié)議+主機+端口號）.比如從2.com往1.com發(fā)了消息，那么1.com收到消息時潘明，e.origin就是2.com
最重要的就是data了，你可以用e.data取得他秕噪，然后做后續(xù)操作了钳降。不過為了安全，你最好先判斷一下e.source和e.origin是不是正確來源腌巾，再作操作遂填。
33、你是怎么處理手機端適配的 如果橫屏的話怎么辦
? ? 答：在移動端中我們經(jīng)常碰到橫屏豎屏的問題澈蝙，那么我們應該如何去判斷或者針對橫屏吓坚、豎屏來寫不同的代碼呢。
首先在head中加入如下代碼：
1
<</code>meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
針對上述viewport標簽有如下說明
1)灯荧、content中的width指的是虛擬窗口的寬度礁击。
2)、user-scalable=no就一定可以保證頁面不可以縮放嗎逗载？NO哆窿，有些瀏覽器不吃這一套，還有一招就是minimum-scale=1.0, maximum-scale=1.0 最大與最小縮放比例都設(shè)為1.0就可以了厉斟。
3)挚躯、initial-scale=1.0 初始縮放比例受user-scalable控制嗎？不一定擦秽，有些瀏覽器會將user-scalable理解為用戶手動縮放码荔，如果user-scalable=no，initial-scale將無法生效感挥。
4)缩搅、手機頁面可以觸摸移動，但是如果有需要禁止此操作链快，就是頁面寬度等于屏幕寬度是頁面正好適應屏幕才可以保證頁面不能移動誉己。
5)、如果頁面是經(jīng)過縮小適應屏幕寬度的域蜗，會出現(xiàn)一個問題巨双，當文本框被激活（獲取焦點）時噪猾，頁面會放大至原來尺寸。
一：CSS判斷橫屏豎屏
寫在同一個CSS中
@media screen and (orientation: portrait) {
}
@media screen and (orientation: landscape) {
}
分開寫在2個CSS中
豎屏
1
<</code>link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
橫屏
1
<</code>link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
一：JS判斷橫屏豎屏
//判斷手機橫豎屏狀態(tài)：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
? ? ? ? if (window.orientation === 180 || window.orientation === 0) {
? ? ? ? ? ? alert('豎屏狀態(tài)筑累！');
? ? ? ? }
? ? ? ? if (window.orientation === 90 || window.orientation === -90 ){
? ? ? ? ? ? alert('橫屏狀態(tài)袱蜡！');
? ? ? ? }
? ? }, false);
//移動端的瀏覽器一般都支持window.orientation這個參數(shù)，通過這個參數(shù)可以判斷出手機是處在橫屏還是豎屏狀態(tài)慢宗。
34坪蚁、MVC模式的意思是，軟件可以分成三個部分镜沽？
答：視圖（View）：用戶界面敏晤。
控制器（Controller）：業(yè)務(wù)邏輯
模型（Model）：數(shù)據(jù)保存
35、各部分之間的通信方式是什么缅茉？
答： View 傳送指令到 Controller
Controller 完成業(yè)務(wù)邏輯后嘴脾，要求 Model 改變狀態(tài)
Model 將新的數(shù)據(jù)發(fā)送到 View，用戶得到反饋
36蔬墩、Vue.js特點
答：簡潔：頁面由HTML模板+Json數(shù)據(jù)+Vue實例組成數(shù)據(jù)驅(qū)動：自動計算屬性和追蹤依賴的模板表達式組件化：用可復用译打、解耦的組件來構(gòu)造頁面輕量：代碼量小，不依賴其他庫快速：精確有效批量DOM更新模板友好：可通過npm拇颅，bower等多種方式安裝奏司，很容易融入
