2017/8/7
1.ajax與後臺之間通訊的原理
AJAX全稱為“Asynchronous JavaScript and Xml”（非同步JavaScript和Xml），是指一種建立互動式網頁應用的網頁開發技術
使用AJAX技術最重要的就是建立XmlHttpRequest物件,關於如何建立該物件網上有很多資料.本人最常用的一個方法是
<input type="button" value="非同步呼叫" onclick="XMLRq();" />
這裡響應事件函式是XMLRq()，那XMLRq()的函式程式碼片段如下
function XMLRq()
{
var xmlHttpreq = null;
if (window.ActiveXObject)
{
xmlHttpreq = new ActiveXObject("Microsoft.XMLHTTP");
//alert("xmlrequest物件建立成功")
}
else if (window.XMLHttpRequest) //除了IE5與IE6以外的瀏覽器
{
xmlHttpreq = new XMLHttpRequest();
//alert("c");
}
if (xmlHttpreq != null) {
xmlHttpreq.open("GET", "Ajax_response1.aspx", true);
xmlHttpreq.onreadystatechange = setCallback;
xmlHttpreq.send(null);
}
function setCallback()
{
if (xmlHttpreq.readyState == 4)
{
if (xmlHttpreq.status == 200)
{
document.getElementById("getext").innerHTML = xmlHttpreq.responseText;
}
}
}
}
2.css 優先順序
詳細解釋：http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html
外部樣式、內部樣式和內聯樣式同時應用於同一個元素，就是使多重樣式的情況。
一般情況下，優先順序如下： （外部樣式）External style sheet <（內部樣式）Internal style sheet <（內聯樣式）Inline style
*內聯樣式表的權值最高 1000；
*ID 選擇器的權值為 100
*Class 類選擇器的權值為 10
*HTML 標籤選擇器的權值為 1
*選擇器都有一個權值，權值越大越優先；
*當權值相等時，後出現的樣式表設定要優於先出現的樣式表設定；
*創作者的規則高於瀏覽者：即網頁編寫者設定的CSS 樣式的優先權高於瀏覽器所設定的樣式；
*繼承的CSS 樣式不如後來指定的CSS 樣式；
*在同一組屬性設定中標有“!important”規則的優先順序最大
IE 瀏覽器下載或者渲染的順序可能如下：
● IE 下載的順序是從上到下；
● JavaScript 函式的執行會阻塞IE 的下載；
● IE 渲染的順序也是從上到下；
● IE 的下載和渲染是同時進行的；
● 在渲染到頁面的某一部分時，其上面的所有部分都已經下載完成（但並不是說所有相關聯的元素都已經下載完。）
● 在下載過程中，如果遇到某一標籤是嵌入檔案，並且檔案是具有語義解釋性的（例如：JS指令碼，CSS樣式），那麼此時IE的下載過程會啟用單獨連線進行下載。並且在下載後進行解析，如果JS、CSS中如有重定義，後面定義的函式將覆蓋前面定義的函式。
● 解析過程中，停止頁面所有往下元素的下載。樣式表檔案比較特殊，在其下載完成後，將和以前下載的所有樣式表一起進行解析，解析完成後，將對此前所有元素（含以前已經渲染的）重新進行樣式渲染。並以此方式一直渲染下去，直到整個頁面渲染完成。
● Firefox 處理下載和渲染的順序大體相同，只是在細微之處有些差別，例如：iframe 的渲染。
3.css 新增偽類
p:last-of-type 選擇其父元素的最後的一個P元
p:last-child 選擇其父元素的最後子元素(一定是P才行)
p:first-of-type 選擇其父元素的首個P元素
p:first-child 選擇其父元素的首個p元素(一定是p才行)
p:only-child 選擇其父元素的只有一個元素(而且這個元素只能是p元素，不能有其他元素)
p:only-of-type 選擇其父元素的只有一個p元素(不能有第二個P元素，其他元素可以有)
p:nth-child(n) 選擇其父元素的第N個 剛好是p的元素
p:nth-last-child(n) ..............................................從最後一個子元素開始計數
p:nth-of-type(n) 選擇其父元素的n個元素
p:nth-last-of-type(n) ........................從最後一個子元素開始計數
input 使用 :enabled
4.居中 一個浮動元素
div{
width: 500px;
height: 300px;
margin: -150px 0 0 -250px;
position: absolute;
left: 50%;
top: 50%;
background-color: yellow;
}
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
}
5.列出display 的值，說出它們的作用 relative 和absolute 定位原點
display 的值的作用：
block 象塊型別元素一樣顯示。
inline 預設值。象行內元素型別一樣顯示。
inline-block 象行內元素一樣顯示，但其內容象塊型別元素一樣顯示。
list-item 象塊型別元素一樣顯示，並新增樣式列表標記。
position 的值的定位區別：
absolute 生成絕對定位的元素，相對於 static 定位以外的第一個祖先元素進行定位。
fixed 生成絕對定位的元素，相對於瀏覽器視窗進行定位（老IE不支援）。
relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。
static 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 宣告）。
inherit 規定從父元素繼承 position 屬性的值。
6.css3 有哪些新特性
CSS3實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜
增加了更多的CSS選擇器 多背景 rgba
在CSS3中唯一引入的偽元素是 ::selection.
媒體查詢，多欄佈局
border-image
7.一個滿屏 品子佈局如何設計
問題詳細地址：http://blog.csdn.net/lxcao/article/details/52688993
<div class="main">
<div class="wrapper-up">
<div class="div-square-up"></div>
</div>
<div class="wrapper-down">
<div class="div-square-left"></div>
<div class="div-square-right"></div>
</div>
</div>
body{
height: 1200px;
}
.main {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.wrapper-up {
height: 50%;
}
.wrapper-down {
height: 50%;
position: relative;
}
.div-square-up {
width: 50%;
margin: 0 auto;
border: 2px solid red;
height: 96%;
box-sizing: border-box;
}
.div-square-left {
position: absolute;
left: 0;
width: 48%;
height: 100%;
box-sizing: border-box;
border: 2px solid red;
}
.div-square-right {
position: absolute;
right: 0;
width: 48%;
height: 100%;
border: 2px solid red;
box-sizing: border-box;
}
8.為什麼要初始化css 樣式
問題詳細地址：http://blog.csdn.net/lxcao/article/details/52678973
因為瀏覽器的相容的問題，不同瀏覽器有些標籤的預設值是不同的，如果沒有CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
淘寶初始化程式碼
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
9.javascript原型 原型鏈 ？有什麼特點？
問題詳細地址：http://blog.csdn.net/lxcao/article/details/52743088
http://blog.csdn.net/camillea/article/details/50635998
在JavaScript中原型是一個prototype物件，用於表示型別之間的關係。
JavaScript萬物都是物件，物件和物件之間也有關係，並不是孤立存在的。物件之間的繼承關係，在JavaScript中是通過prototype物件指向父類物件，直到指向Object物件為止，這樣就形成了一個原型指向的鏈條，專業術語稱之為原型鏈。
關係：instance.constructor.prototype = instance.__proto__
特點： javascript物件是通過引用來傳遞的，我們建立的每個新物件實體中並沒有一份屬於自己的原型副本。當我們修改原型時，與之相關的物件也會繼承這一改變。
10. null ,undefined 的區別
問題詳細地址：http://www.cnblogs.com/shazhou-blog/p/5315948.html
null是一個表示"無"的物件，轉為數值時為0；undefined是一個表示"無"的原始值，轉為數值時為NaN
null表示"沒有物件"，即該處不應該有值。
作為函式的引數，表示該函式的引數不是物件。
作為物件原型鏈的終點。
undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義。典型用法是：
變數被宣告瞭，但沒有賦值時，就等於undefined。
呼叫函式時，應該提供的引數沒有提供，該引數等於undefined。
物件沒有賦值的屬性，該屬性的值為undefined。
函式沒有返回值時，預設返回undefined。
11.寫一個通用的事件監聽器函式
問題詳細地址 http://blog.csdn.net/jiaqingge/article/details/54866144
// event(事件)工具集，來源：github.com/markyun
markyun.Event = {
// 頁面載入完成後
readyEvent : function(fn) {
if (fn==null) {
fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != `function`) {
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
};
}
},
// 視能力分別使用dom0||dom2||IE方式 來繫結事件
// 引數： 操作的元素,事件名稱 ,事件處理程式
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件型別、需要執行的函式、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent(`on` + type, function() {
handler.call(element);
});
} else {
element[`on` + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent(`on` + type, handler);
} else {
element[`on` + type] = null;
}
},
// 阻止事件 (主要是事件冒泡，因為IE不支援事件捕獲)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的預設行為
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 獲取事件目標
getTarget : function(event) {
return event.target || event.srcElement;
},
// 獲取event物件的引用，取到事件的所有資訊，確保隨時能使用event；
getEvent : function(e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};
12.事件是？IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？
問題詳細地址 ：http://blog.csdn.net/lxcao/article/details/52733737
事件用於監聽瀏覽器的操作行為，瀏覽器觸發動作時被捕捉到而呼叫相應的函式。
事件執行三個階段
① 事件捕獲階段
② 處於目標階段
③ 事件冒泡階段
捕獲型事件是自上而下，而冒泡型事件是自下而上的，而我們程式設計師通常要做的就是第二階段，完成事件的動作。而第一、三階段由系統封裝自動呼叫完成。
冒泡阻止 event.stopPropagation() IE瀏覽器 event.cancelBubble = true;
一般在IE環境下可以省略掉（var e=arguments.callee.caller.arguments[0]||event;）直接執行即可，但是在FF下不行了，它會報e.stopPropagation沒有定義，所以要事先定義，才能相容
13.什麼是閉包？ 為什麼要用它？
function outer(){
var num=0;//內部變數
return function add(){//通過return返回add函式，就可以在outer函式外訪問了。
num++;//內部函式有引用，作為add函式的一部分了
console.log(num);
};
}
var func1=outer();//
func1();//實際上是呼叫add函式， 輸出1
func1();//輸出2
var func2=outer();
func2();// 輸出1
func2();// 輸出2
閉包是就是函式中的函式，裡面的函式可以訪問外面函式的變數，外面的變數的是這個內部函式的一部分。
使用閉包可以訪問函式中的變數。
可以使變數長期儲存在記憶體中，生命週期比較長。
14.如何判斷一個物件是否屬於某個類？
javascript中檢測物件的型別的運算子有：typeof、constructor、instanceof
typeof：typeof是一個一元運算子，返回結果是一個說明運算數型別的字串。如："number"，"string"，"boolean"，"object"，"function"，"undefined"（可用於判斷變數是否存在）。 但 typeof 的能力有限，其對於Date、RegExp、Array型別返回的都是"object"。所以它只在區別物件和原始型別的時候才有用
instanceof 運算子：instanceof 運算子要求其左邊的運算數是一個物件，右邊的運算數是物件類的名字或建構函式。如果 object 是 class 或建構函式的例項，則 instanceof 運算子返回 true。如果 object 不是指定類或函式的例項，或者 object 為 null，則返回 false。instanceof方法可以判斷變數是否是陣列型別，但是隻限同一全域性環境之內，在一個頁面有多個iframe的情況下，instanceof失效
constructor 屬性: JavaScript中，每個物件都有一個constructor屬性，它引用了初始化該物件的建構函式，常用於判斷未知物件的型別。如給定一個求知的值 通過typeof運算子來判斷它是原始的值還是物件。如果是物件，就可以使用constructor屬性來判斷其型別
判斷一個物件是否屬於某個類
Object.prototype.toString.call(obj) == "[object " + type + "]";
15.html5 有哪些新特性、移除了那些元素，如何處理html5新標籤的瀏覽器相容問題？如何區分html和html5 ？
16.css選擇符有哪些？那些屬性可以繼承 ？優化級演算法如何計算？
17.html5 離線快取？
問題詳解地址：http://www.cnblogs.com/lovesong/p/5021992.html
HTML5離線快取又名Application Cache，是從瀏覽器的快取中分出來的一塊快取區，要想在這個快取中儲存資料，可以使用一個描述檔案（manifest file），列出要下載和快取的資源
manifest
CACHE MANIFEST
#chrome瀏覽器支援，火狐瀏覽器支援度不夠好
#version 1
#author by guoquanyou
#CACHE:其後列出的是需要快取的內容
CACHE:
index.html
css/index.css
img/girl.jpg
#NETWORK:其後列出的是不進行快取的內容，每次都需要從伺服器端獲取
NETWORK:
*
FALLBACK:
img/pirate1.png img/pirate_back.png
applicationCache.addEventListener(`updateready`, function(e) {
if (applicationCache.status == applicationCache.UPDATEREADY) {
applicationCache.swapCache(); //使用新版本資源
window.location.reload(); //重新整理頁面
}
}, false);
使用Tomcat伺服器，確認C:apache-tomcat-8.0.28conf目錄下的web.xml中已經包含以下配置：
<mime-mapping>
<extension>appcache</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
18.請描述一下 cookies sessionstorage localstorage 的區別？
問題詳細地址：http://www.cnblogs.com/ellar/p/5532213.html
Web Storage有兩種形式：LocalStorage（本地儲存）和sessionStorage（會話儲存）。這兩種方式都允許開發者使用js設定的鍵值對進行操作，在在重新載入不同的頁面的時候讀出它們。這一點與cookie類似。
與cookie不同的是：Web Storage資料完全儲存在客戶端，不需要通過瀏覽器的請求將資料傳給伺服器，因此x相比cookie來說能夠儲存更多的資料，大概5M左右。
LocalStorage和sessionStorage功能上是一樣的，但是儲存持久時間不一樣。
LocalStorage：瀏覽器關閉了資料仍然可以儲存下來，並可用於所有同源（相同的域名、協議和埠）視窗（或標籤頁），
sessionStorage：資料儲存在視窗物件中，視窗關閉後對應的視窗物件消失，儲存的資料也會丟失。
注意：sessionStorage 都可以用localStorage 來代替，但需要記住的是，在視窗或者標籤頁關閉時，使用sessionStorage 儲存的資料會丟失。
使用 local storage和session storage主要通過在js中操作這兩個物件來實現，分別為window.localStorage和window.sessionStorage. 這兩個物件均是Storage類的兩個例項，自然也具有Storage類的屬性和方法。
19. 介紹一下 css的盒子模型？
問題詳細地址：http://blog.csdn.net/wzqnls/article/details/38109745
W3C 盒子模型的範圍包括 margin、border、padding、content，並且 content 部分不包含其他部分
IE 盒子模型的範圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding
2017-08-04
1.vue 與 react 的區別？
其實都是model driven思想的嚴格踐行者，以及通過component拆分完整整個系統的分治
1.1react基本上已經有一套遵循Flux的完整開發方案（基本上也就這一套大家預設的方式），而vue雖然有配合vuex使用，但是還有其他很多組織方式來解決，所以並不算是有固定模式，相對靈活很多，當然這個你可以看作是優勢，也可以看作是不足
1.2.react社群還是要比vue大很多
1.3.react在view層侵入性還是要比vue大很多的
1.4.首次渲染效能，對於大量資料來說react還是比vue有優勢
1.5.對於component的寫法，react偏向於all in js，語法學習上需要下一些功夫，而vue配合vue-loader，其實在很大程度上讓你不會覺得陌生--這不就是web component麼。
vue
* mvvm架構的核心及價值是 資料的雙向繫結 ，引入mvvm框架應該要看下業務上是否有這類需求。目前看商家端的後臺業務是比較合適的。
* vue 不適合持續工程迭代，是因為資料是可以在view 和 model進行雙向流動的，資料雙向流動會帶來一個問題是：當工程規模比較大時，如果處理不當，前端的行為將變得難以預測，進而就難以除錯和維護了
* 對於簡單頁面、小型應用，vue開發則非常高效，只需要處理好view，然後傳入data就可以了。
* vue的模組化更接近於 web component 的實現，同時與xtemplate（天貓內部nodejs模板渲染語言）的結合有更多的可能性。
* vue原始碼相對簡單，同時也有內部團隊（手淘團隊）支撐，後續業務上的調整也會更得心應手。
react
* react 其實也出來一段時間了，在國內真正火起來則藉助於react native。而vue如果與weex（手淘正在開發的，並計劃16年中旬開源）配合是否也會引爆熱點？值得期待一下
vue與react的選擇，可以理解為<
* 雙向繫結及單向資料流的選擇。
* web component 與 virtual dom 的選擇。
*React 團隊雄心勃勃，計劃讓 React 成為通用平臺的 UI 開發工具，而 Vue 專注於為 Web 提供實用的解決方案
*React，由於它的函式式特質，可以很好地使用函數語言程式設計模式。但是對於初級開發者和初學者這也導致較大的學習難度。Vue 更易學習並能快速投入開發。
*對於大型應用，React 社群已經創造了大量的狀態管理方案，例如 Flux/Redux。Vue 本身不解決這個問題（React 核心也是），但是可以輕鬆地修改狀態管理模式，實現一個類似的架構。Vue 有自己的狀態管理方案 Vuex，而且 Vue 也可以與 Redux 一起用。
*React 的開發趨勢是將所有東西都放在 JavaScript 中，包括 CSS。已經有許多 CSS-in-JS 方案，但是所有的方案多多少少都有它的問題。而且更重要的是，這麼做脫離了標準的 CSS 開發經驗，並且很難和 CSS 社群的已有工作配合。Vue 的 單檔案元件 在把 CSS 封裝到元件模組的同時仍然允許你使用你喜歡的前處理器
*vue上手比較快， 如果有AngularJS或React經驗上手會更快，vue從angularjs借鑑了MVVM和directives， 從react借鑑了Component和Flux架構（vuex）, 還借鑑了W3C的Web Component。
vue
// HTML
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
// JS
new Vue({
el: `#app`,
data: {
message: `Hello Vue.js!`
},
methods: {
reverseMessage: function () {
this.message = this.message.split(``).reverse().join(``);
}
}
});
react
// HTML
<div id="app"></div>
// JS (pre-transpilation)
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
message: `Hello React.js!`
};
}
reverseMessage() {
this.setState({
message: this.state.message.split(``).reverse().join(``)
});
}
render() {
return (
<div>
<p>{this.state.message}</p>
<button onClick={() => this.reverseMessage()}>
Reverse Message
</button>
</div>
)
}
}
ReactDOM.render(App, document.getElementById(`app`));
*想要一個同時適用於Web端和原生APP的框架，請選擇React
Vue的優勢是：
模板和渲染函式的彈性選擇
簡單的語法和專案配置
更快的渲染速度和更小的體積
React的優勢是：
更適合大型應用和更好的可測試性
Web端和移動端原生APP通吃
更大的生態系統，更多的支援和好用的工具
然而，React和Vue都是很優秀的框架，它們之間的相似之處多過不同之處，並且大部分的優秀功能是相通的：
用虛擬DOM實現快速渲染
輕量級
響應式元件
服務端渲染
整合路由工具，打包工具，狀態管理工具的難度低
優秀的支援和社群
2.移動端下拉重新整理的做法？
<div id="wrap">
<!-- #pull-down為下拉載入更多的提醒 -->
<div id="pull-down" class="pull-down">
<div class="pull-down-content">
鬆手載入更多內容
</div>
</div>
<!-- .list是正文內容 -->
<ul class="list">
<!-- 好長的li內容 -->
</ul>
</div>
.pull-down{
position:relative;overflow:hidden;height:0;
}
.pull-down-content{
position:absolute;bottom:0;
}
$dom.addEventListener("touchmove", function(e){
if($dom.scrollTop > 0){
// 讓 $dom 元素可以正常滾動
return true;
}
// 阻止預設的滾動事件
e.preventDefault();
// 1. 計算 touchmove 的距離
// 2. 重設 $elem 的高度
});
$dom.addEventListener("touchend", function(e){
// 1. 判定 touchmove 的移動值，是否達到了可重新整理的設定
// 2. 執行重新整理 | 不重新整理 的回撥
});
更詳細的各種狀態值的演變
https://github.com/caijf/pull
https://github.com/dailc/pullToRefresh-h5-iscroll
3.es6 中的 let 與 var 的區別？
http://blog.csdn.net/hsany330/article/details/53199615
首先需要明確的是let、const、var都是用來定義變數的
在ES6之前，我們一般都用var來定義變數，例如 ：
function test(){
var i=1;
console.log(i);
console.log(j);
var j=2;
}
test();
console.log(i);
在上面的程式碼中，我們可以預計到第一個console輸出的是1，第二個由於變數提升輸出的是undefine,而不是產生ReferenceError錯誤，第三個輸出的還是1；也就是說在函式中定義的一個變數，在函式外部仍然是可以使用的，那麼我們再來看看這一段程式碼：
function test(){
let i=1;
console.log(i);
console.log(j);
let j=2;
}
test();
console.log(i);
執行完後，我們會發現第一個console仍然輸出了1，第二個和第三個產生了ReferenceError錯誤！對比之下我們會發現let的作用域比var更加嚴格了，有點類似於Java中的變數定義，1、必須先定義再使用，2、有著嚴格的作用域，變數只作用域當前隸屬的程式碼塊
在新的ES6標準中let完全可以替代var,在ES6中另外一個定義變數的關鍵字是 const,const 代表一個值的 常量索引 ，也就是說，變數名字在記憶體中的指標不能夠改變，但是指向這個變數的值 可能 改變。例如：
const names=[] ;
names.push(“1”) ;
console.log (names) ;
我們建立了一個擁有常量索引的陣列變數，然後新增值到這個陣列中，但是並不改變它的索引，所以上面的程式碼完全可以執行。
但是當我們想修改索引到一個新的陣列中，就會產生一個錯誤TypeError：
//陣列
const names = [ ] ;
names=[];//Uncaught TypeError: Assignment to constant variable.
//number或String
const i=1;
i=2;//Uncaught TypeError: Assignment to constant variable.
4. 輪播圖的原理？
setInterval(autoplay,1000);
動畫部分包括：
4.1.滑鼠經過第幾個小圓點，就要展示第幾張圖片，並且小圓點的顏色也發生變化
4.2.圖片自動輪播，（這需要一個定時器）
4.3.滑鼠經過圖片，圖片停止自動播放（這需要清除定時器）
4.4.滑鼠離開圖片，圖片繼續自動輪播 （重新開始定時器）
// 動畫函式 第一個引數，代表誰動 第二個引數 動多少
// 讓圖片做勻速運動，勻速動畫的原理是 當前的位置 + 速度 即 offsetLeft + speed
function animate(obj,target){
// 首先清除掉定時器
clearInterval(obj.timer);
// 用來判斷 是+ 還是 - 即說明向左走還是向右走
var speed = obj.offsetLeft < target ? 15 : -15;
obj.timer = setInterval(function(){
var result = target - obj.offsetLeft;//它們的差值不會超過speed
obj.style.left = obj.offsetLeft + speed + "px";
// 有可能有小數的存在，所以在這裡要做個判斷
if (Math.abs(result) <= Math.abs(speed)) {
clearInterval(obj.timer);
obj.style.left = target + "px";
}
},10);
}
var timer = null; // 輪播圖的定時器
var key = 0;// 控制播放的張數
var circle = 0;// 控制小圓點
timer = setInterval(autoplay,1000);// 自動輪播
function autoplay(){
/*自動輪播時,要對播放的張數key進行一個判斷,如果播放的張數超過ulLis.length-1,
就要重頭開始播放. 因為我們克隆了第一張並將其放在最後面,所以我們要從第二張圖片開始播放*/
key++; // 先++
if(key > ulLis.length-1){// 後判斷
ul.style.left = 0; // 迅速調回
key = 1; // 因為第6張是第一張，所以播放的時候是從第2張開始播放
}
// 動畫部分
animate(ul,-key*liWidth);
// 小圓點circle 當顯示第幾張圖片是，對應的小圓點的顏色也發生變化
/*同理,對小圓點也要有一個判斷*/
circle++;
if (circle > olLis.length-1) {
circle = 0;
}
// 小圓點顏色發生變化
for (var i = 0 ; i < olLis.length;i++) {
// 先清除掉所用的小圓點類名
olLis[i].className = "";
}
// 給當前的小圓點 新增一個類名
olLis[circle].className = "current";
}
5.同步與非同步的區別？
async: false, false為同步
var options = {
type: `POST`,
url: "test.ashx",
data: { "i": i },
async:false,
success: function (result) {
if (result.code > 0) {
returnvalue = "odd";
}
else {
returnvalue = "even";
}
},
dataType: "json",
error: function (result) {
alert("error");
}
};
$.ajax(options);
http://www.jb51.net/article/86013.htm
同時執行多個$.getJSON() 資料混亂的問題的解決
在執行之前加$.ajaxSettings.async = false; (同步執行)
執行你的程式碼之後及時恢復為$.ajaxSettings.async = true； （非同步執行）
6.jsonp 後臺跨域問題？
根據同源策略，我自己做的一個網頁 http://localhost:8080/test.html 就無法通過ajax直接獲取 http://google.com 的資料
<img>的src（獲取圖片），<link>的href（獲取css），<script>的src（獲取javascript）這三個都不符合同源策略，它們可以跨域獲取資料。因此，你可以直接從一些cdn上獲取jQuery，並且你網站上的圖片也隨時可能被別人盜用，所有最好加上水印！
詳細解說 http://www.360doc.com/content/14/1030/09/5054188_421070813.shtml
http://blog.csdn.net/saytime/article/details/51540876
$.ajax({
async : true,
url : "https://api.douban.com/v2/book/search",
type : "GET",
dataType : "jsonp", // 返回的資料型別，設定為JSONP方式
jsonp : `callback`, //指定一個查詢引數名稱來覆蓋預設的 jsonp 回撥引數名 callback
jsonpCallback: `handleResponse`, //設定回撥函式名
data : {
q : "javascript",
count : 1
},
success: function(response, status, xhr){
console.log(`狀態為：` + status + `,狀態是：` + xhr.statusText);
console.log(response);
}
});
JSONP目前還是比較流行的跨域方式，雖然JSONP使用起來方便，但是也存在一些問題：
首先， JSONP 是從其他域中載入程式碼執行。如果其他域不安全，很可能會在響應中夾帶一些惡意程式碼，而此時除了完全放棄 JSONP 呼叫之外，沒有辦法追究。因此在使用不是你自己運維的 Web 服務時，一定得保證它安全可靠。
其次，要確定 JSONP 請求是否失敗並不容易。雖然 HTML5 給<script>元素新增了一個 onerror事件處理程式，但目前還沒有得到任何瀏覽器支援。為此，開發人員不得不使用計時器檢測指定時間內是否接收到了響應。
利用jsonp訪問百度天氣
$(function () {
// 傳送jsonp請求
$.ajax({
type:"get",
url:`http://api.map.baidu.com/telematics/v3/weather?output=json&ak=0A5bc3c4fb543c8f9bc54b77bc155724`,
data:{
location:$("#city").val()||"上海"
},
dataType:"jsonp",
success: function (data) {
//渲染模版
var html = template(`template`,{list:data.results[0].weather_data})
$(`tbody`).html(html);
}
});
});
7.nodejs 的用法？
8.專案中用啥 ？
vue +webpack ...
9.為什麼辭職？
詳細解說 ：https://www.zhihu.com/question/19658349
面試時直接，或者拐彎抹角，這都是面試官會問到的一個問題。我建議的回答方式是：
1.不要涉及到自己能力的，不涉及到自己人品，把真實理由講出來就是。
2.最好有不可抗事件發生。比如公司遷外地了之類，比如公司被越南人燒了之類。
需要提醒的是：
圍繞這個話題，點到為止，絕不多談。因為你說的故事，不同的人會有不同的理解，不要給人家曲解的機會。絕不！
1、企業組織架構變動，輪崗，職位與自己的職業規劃不相符
2、專業技能希望能夠更好地運用於工作，當前從事的工作儘管合情但不合理
3、任何人都希望能夠快速運轉且前途廣闊的平臺，螺母和螺絲釘墨守陳規不是每個人都喜歡。
一般好一點的公司的面試官主要是想通過這個問題了解可能會有哪些因素會導致你離開公司，或者你在哪些方面可能弱一些，進而在工作中可以對你的部門領導給予一些人事方面的建議。比如關注你的工資，多跟你溝通，儘量安排接近你實現人生價值的工作。
你可以說你們公司被收購，流程變得複雜，工資漲不上去，一直在加班等等，實話實說
10.未來的發展？
詳細解說 https://www.zhihu.com/question/27141414
11.對自己的評價？
面試自我介紹 https://www.zhihu.com/question/20055939
簡歷中的自我評價 https://www.zhihu.com/question/20632491
客觀的自我評價 https://www.zhihu.com/question/22938512?sort=created
捐助開發者
在興趣的驅動下,寫一個免費的東西，有欣喜，也還有汗水，希望你喜歡我的作品，同時也能支援一下。 當然，有錢捧個錢場（支援支付寶和微信 以及扣扣群），沒錢捧個人場，謝謝各位。
個人主頁：http://knight-black-bob.iteye.com/
謝謝您的贊助，我會做的更好！