Ajax 是什么? 如何創建一個Ajax？
AJAX全稱是Asychronous JavaScript And Xml（異步的 JavaScript 和 XML）
它的作用是用來實作客戶端與服務器端的異步通信效果，實作頁面的區域重繪，早期的瀏覽器并不能原生支持ajax，可以使用隱藏幀（iframe）方式變相實作異步效果，后來的瀏覽器提供了對ajax的原生支持
其主要通過XMLHttpRequest(標準瀏覽器)、ActiveXObject(IE瀏覽器)物件實作異步通信效果
實作方式（gitee上的案例）：
var xhr =null;//創建物件
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(“方式”,”地址”,”標志位”);//初始化請求
xhr.setRequestHeader(“”,””);//設定http頭資訊
xhr.onreadystatechange =function(){}//指定回呼函式
xhr.send();//發送請求
Ajax的優缺點
優點：
- 通過異步模式，提升了用戶體驗
- 優化了瀏覽器和服務器之間的傳輸，按需獲取資料，減少不必要的資料往返，減少了帶寬占用
- Ajax在客戶端運行，承擔了一部分本來由服務器承擔的作業，減少了大用戶量下的服務器負載，
缺點：
- ajax不支持瀏覽器back按鈕
- 安全問題 AJAX暴露了與服務器互動的細節
- 對搜索引擎的支持比較弱
- 破壞了程式的例外機制，
一個頁面從輸入 URL 到頁面加載顯示完成，發生了什么？
- 當發送一個 URL 請求時，不管這個 URL 是 Web 頁面的 URL 還是 Web 頁面上每個資源的 URL，瀏覽器都會開啟一個執行緒來處理這個請求，同時在遠程 DNS 服務器上啟動一個 DNS 查詢，這能使瀏覽器獲得請求對應的 IP 地址，
- 瀏覽器與遠程 Web 服務器通過 TCP 三次握手協商來建立一個 TCP/IP 連接，該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞，該握手首先由客戶端嘗試建立起通信，而后服務器應答并接受客戶端的請求，最后由客戶端發出該請求已經被接受的報文，
- 一旦 TCP/IP 連接建立，瀏覽器會通過該連接向遠程服務器發送 HTTP 的 GET 請求，遠程服務器找到資源并使用 HTTP 回應回傳該資源，值為 200 的 HTTP 回應狀態表示一個正確的回應，
- 此時，Web 服務器提供資源服務，客戶端開始下載資源，
- 后續HTML頁面決議參照前端面試題整合（JS進階篇）（一）的 “html頁面怎么決議的？它加載順序是什么？”
JQuery一個物件為何可以同時系結多個事件
低層實作方式是使用addEventListner或attachEvent兼容不同的瀏覽器實作事件的系結，這樣可以給同一個物件注冊多個事件
對頁面某個節點的拖曳
1. 給需要拖拽的節點系結mousedown, mousemove, mouseup事件
2. mousedown事件觸發后，開始拖拽
3. mousemove時，需要通過event.clientX和clientY獲取拖拽位置，并實時更新位置
4. mouseup時，拖拽結束
5. 需要注意瀏覽器邊界的情況
gitee上的案例
function mouseMove(ele, parent) {
ele.addEventListener('mousedown', moveHandler);
ele.style.position = 'absolute'
function moveHandler(e) {
if (e.type === 'mousedown') {
parent.ele = this;
parent.point = {
x: e.offsetX,
y: e.offsetY
}
parent.addEventListener('mousemove', moveHandler);
parent.addEventListener('mouseup', moveHandler);
} else if (e.type === 'mousemove') {
this.ele.style.left = e.x - this.point.x + "px";
this.ele.style.top = e.y - this.point.y + "px";
} else if (e.type === 'mouseup') {
parent.removeEventListener("mousemove", moveHandler);
parent.ele = null;
parent.point = null;
}
}
}new運算子具體干了什么
- 創建一個空物件，并且 this 變數參考該物件，同時還繼承了該函式的原型，
- 屬性和方法被加入到 this 參考的物件中，
- 新創建的物件由 this 所參考，并且最后隱式的回傳 this
以下是模擬操作：
new TestObj('str')=function(){
let obj={}; //創建一個空物件
obj.__proto__=TestObj.prototype;
//把該物件的原型指向建構式的原型物件，就建立起原型了：obj->Animal.prototype->Object.prototype->null
return TestObj.call(obj,arguments);// 系結this到實體化的物件上
}前端開發的優化問題
（1） 減少http請求次數：CSS Sprites, JS、CSS原始碼壓縮、圖片大小控制合適；網頁Gzip，CDN托管，data快取 ，圖片服務器，
（2） 前端模板 JS+資料，減少由于HTML標簽導致的帶寬浪費，前端用變數保存AJAX請求結果，每次操作本地變數，不用請求，減少請求次數
（3） 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能，
（4） 當需要設定的樣式很多時設定className而不是直接操作style，
（5） 少用全域變數、快取DOM節點查找的結果，減少IO讀取操作，
（6） 避免使用CSS Expression（css運算式)又稱Dynamic properties(動態屬性)，
（7） 圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳，
（8） 避免在頁面的主體布局中使用table，table要等其中的內容完全下載之后才會顯示出來，顯示比div+css布局慢，
fetch和Ajax有什么不同
- XMLHttpRequest 是一個設計粗糙的 API，不符合關注分離（Separation of Concerns）的原則，配置和呼叫方式非常混亂，而且基于事件的異步模型寫起來也沒有現代的 Promise，generator/yield，async/await 友好
- fetch 是瀏覽器提供的一個新的 web API，它用來代替 Ajax（XMLHttpRequest），其提供了更優雅的介面，更靈活強大的功能，
- Fetch 優點主要有：語法簡潔，更加語意化，基于標準 Promise 實作，支持 async/await
如何撰寫高性能的Javascript
- 使用 DocumentFragment 優化多次 append
- 通過模板元素 clone，替代 createElement
- 使用一次 innerHTML 賦值代替構建 dom 元素
- 使用 firstChild 和 nextSibling 代替 childNodes 遍歷 dom 元素
- 使用 Array 做為 StringBuffer ，代替字串拼接的操作
- 將回圈控制量保存到區域變數
- 順序無關的遍歷時，用 while 替代 for
- 將條件分支，按可能性順序從高到低排列
- 在同一條件子的多（ >2 ）條件分支時，使用 switch 優于 if
- 使用三目運算子替代條件分支
- 需要不斷執行的時候，優先考慮使用 setInterval
定時器setInterval有一個有名函式fn，setInterval（fn,500）與setInterval（fn(),500）有什么區別？
第一個是重復執行每500毫秒執行一次，后面一個只執行一次，
簡述一下瀏覽器內核
瀏覽器內核又可以分成兩部分：渲染引擎和 JS 引擎，它負責取得網頁的內容（HTML、XML、影像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然后會輸出至顯示幕或列印機，JS 引擎則是決議 Javascript 語言，執行 javascript 語言來實作網頁的動態效果，
JavaScript的資料物件有哪些屬性值？
writable：這個屬性的值是否可以改
configurable：這個屬性的配置是否可以洗掉，修改
enumerable：這個屬性是否能在for…in回圈中遍歷出來或在Object.keys中列舉出來
value：屬性值，
懶加載（瀑布流）的實作原理
意義：懶加載的主要目的是作為服務器前端優化，減少請求數或延遲請求數實作原理：先加載一部分資料，當觸發某個條件時利用異步加載剩余的資料，新得到的資料，不會影響有資料的顯示，同時最大程度上減少服務器的資源消耗
實作方式：
（1）延遲加載，使用setTimeOut或setInterval進行加載延遲
（2）符合某些條件，或觸發了某些事件才開始異步下載
（3）可視區加載
我的懶加載文章，以及原始碼地址
js實作陣列去重
雙層回圈，外層回圈元素，內層回圈時比較值，如果有相同的值則跳過，不相同則push進陣列
class MyArray extends Array {
constructor() {
super(...arguments)
}
distinct() {
var myArr = this,
list = []
for (var i = 0; i < myArr.length; i++) {
for (var j = i + 1; j < myArr.length; j++) {
if (myArr[i] === myArr[j]) {
j = ++i;
}
}
list.push(myArr[i]);
}
return list;
}
}
var _arr = new MyArray(4, 5, 6, 7, 7, 7, 1, 1, 1, 2, 2, 2, 5, 8, 5, 2, 4, 4, 4, 6, 9);
console.log(_arr.distinct()); //[7, 1, 8, 5, 2, 4, 6, 9]利用物件的屬性不能相同的特點進行去重
class MyArray extends Array {
constructor() {
super(...arguments)
}
distinct() {
var myArr = this,
list = [],
obj = {}
for (var i = 0; i < myArr.length; i++) {
obj[myArr[i]] || (obj[myArr[i]] = 1,
list.push(myArr[i])) //如果能查找到，證明陣列元素重復了
}
return list;
}
}
var _arr = new MyArray(4, 5, 6, 7, 7, 7, 1, 1, 1, 2, 2, 2, 5, 8, 5, 2, 4, 4, 4, 6, 9);
console.log(_arr.distinct()); //[4, 5, 6, 7, 1, 2, 8, 9]Set資料結構，它類似于陣列，其成員的值都是唯一的
function dedupe(array) {
return Array.from(new Set(array));
}
console.log(dedupe([1, 1, 2, 3])) //[1,2,3]實作快速排序和冒泡排序
快速排序：選取位置在陣列中間的一個數，然后比它小的放在left[]的一個新陣列里面，比他大的放在right[]的一個新陣列里面，以此類推，重復執行這個程序，利用遞回的思想，直至執行到left[]和right[]里面都只有一個數
冒泡排序：兩兩比較，前面的比后面的大，則換位，第一輪list.length-1次，挑出最大的；第二輪list.length-1-1次，挑出第二大的，以此往復
class MyArray extends Array {
constructor() {
super(...arguments)
}
quickSort(list) { //快速排序
var myArr = this,
listConfig = {
midItem: myArr[parseInt(myArr.length / 2)],
leftList: new MyArray(),
rightList: new MyArray()
}
if (myArr.length <= 1) {
return myArr
};
for (var i = 0; i < myArr.length; i++) {
myArr[i] < listConfig.midItem ? listConfig.leftList.push(myArr[i]) : myArr[i] > listConfig
.midItem ? listConfig.rightList.push(myArr[i]) : '';
}
return listConfig.leftList.quickSort().concat([listConfig.midItem], listConfig.rightList
.quickSort()); //遞回
}
bubbleSort() { //冒泡排序
for (var i = 0; i < this.length - 1; i++) {
for (var j = 0; j < this.length - 1 - i; j++) {
if (this[j] > this[j + 1]) {
var item = this[j];
this[j] = this[j + 1];
this[j + 1] = item;
}
}
}
return this
}
}
var quickSortArray = new MyArray(19, 15, 18, 17, 11, 21, 14, 61, 13, 10, 25);
var bubbleSortArray = new MyArray(9, 5, 8, 7, 1, 2, 4, 6, 3, 10, 25);
console.log(quickSortArray.quickSort()); //[10, 11, 13, 14, 15, 17, 18, 19, 21, 25, 61]
console.log(bubbleSortArray.bubbleSort()); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 25]談談節流和防抖，如何實作
節流：使頻繁執行的函式，定時執行，高頻率函式執行時，使執行率減少，每n秒才能執行一次，打個比方：每隔1秒鐘，會執行5次滾動條滾動事件，我只讓它每一秒執行一次（案例：網站中的回傳頂部）
防抖：使頻繁執行的函式，延時執行，高頻率函式執行時，n秒內只執行一次，在事件內多次執行會延時，打個比方：用戶在輸入框中輸入字符，當用戶一直在輸入時，我們做個延時，當用戶輸入完畢后會有一段時間停頓，若這個停頓時間大于我們的我們延時時間，我們就進行下一步操作，反之則不進行并且一直延時（案例：搜索引擎搜索輸入框）
區別：對于高頻率執行函式，節流是每隔規定時間都會執行一次，防抖是只在規定時間外的最后一次執行
實作程序：
var count = 0
class OptimizeEvent {
constructor() {}
throttle(fn, time) { //節流
var canDo = true
return function (e) {
if (!canDo) {
return false
}
canDo = false
setTimeout(() => {
fn.call(this)
canDo = true
}, time)
}
}
debounce(fn, time) { //防抖
var _timer = null
return function () {
if (_timer) {
clearTimeout(_timer)
_timer = null
}
_timer = setTimeout(fn, time)
}
}
}
var _event = new OptimizeEvent()
inputBox.addEventListener('input', _event.debounce(function () {
showBox.textContent = inputBox.value
}, 1000))
document.addEventListener('scroll', _event.throttle(function () {
console.log(count++)
}, 1000))談談深拷貝的實作
深拷貝相對淺拷貝不同的是，深拷貝內所有參考型別屬性值都是在新開辟的記憶體地址，被拷貝的原資料發生改變時不會影響復制后的物件，
常見方法
- JSON.parse(),JSON.stringify()
- jQury的$.extend(true,{},obj)
- lodash的_.cloneDeep
- 我的深復制文章
function deepClone(org, tag) { var tag = tag || {}; //初始化要復制的物件 var name = Object.getOwnPropertyNames(org); //獲取該物件的屬性名，以字串陣列回傳 for (var i = 0; i < name.length; i++) { //遍歷物件 var desc = Object.getOwnPropertyDescriptor(org, name[i]); //獲取物件的屬性描述物件，無參考關系，回傳另一個物件，改變時原物件不發生變化(復制的關鍵) if (typeof desc.value === 'object' && desc.value !== null) { //若遍歷的每一項非空且為物件，則為參考值，則進行下一步 var obj = desc.value.toString() === '[object Object]' ? {} : []; //判斷是陣列還是物件 Object.defineProperty(tag, name[i], { //設定物件屬性值，前三個的值是回傳true或false configurable: desc.configurable, //是否可洗掉可替換 enumerable: desc.enumerable, //是否可列舉可遍歷 writable: desc.writable, //是否可寫入 value: obj //物件的值 }); copyObj(desc.value, obj); //再次執行函式 } else { Object.defineProperty(tag, name[i], desc); //否則直接將該物件的屬性值進行復制(原始值) } } return tag; }
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/206519.html
標籤：java
上一篇：ES 6新特性（Day07）
下一篇：檔案流、盒子模型、內邊距、外邊距、盒子模型水平方向的布局、盒子模型垂直方向的布局、盒子模型外邊距的折疊、行內元素的盒模型（萌新必看，大佬隨便）