當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript 高级程序设计_重读《JavaScript高级程序设计》

發布時間：2023/12/4 javascript 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript 高级程序设计_重读《JavaScript高级程序设计》小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近自己在休假，打算閉門幾天將《JavaScript高級程序設計》(第3版)這本良心教材再回顧一遍。目前自己進入前端領域兩年多，現在重讀并記錄下這本教材的“硬”知識點。

本文原文鏈接請戳

重讀《JavaScript高級程序設計》?link.jianshu.com

函數沒有重載

ECMAScript 函數不能像傳統意義上那樣實現重載。而在其他語言（如Java）中，可以為一個函數編寫兩個定義，只要這兩個定義的簽名（接受的參數類型和數量）不同即可[p66]。ECMAScript的類型是松散形的，沒有簽名，所以是沒有重載的。

function load(num){return num + 100; } function load(num,name){return num + 200; } var result = load(100); // 300 # 后面的函數聲明覆蓋掉前面的函數聲明

基本的數據類型

基本類型值指的是簡單的數據段，而引用類型指那些可能由多個值構成的對象[p68]。這里指出來的基本的數據類型是說的es5的哈：Undefined,Null,Boolean,Number和String。

傳遞參數

ECMAScript 中所有的函數的參數都是按值傳遞的[p70]。也就是說，把函數外部的值復制給函數內部的參數，就是把值從一個變量復制到另一個變量一樣。基本類型值的傳遞如同基本類型變量的復制一樣，而引用類型值的傳遞，則如同引用類型變量的復制一樣。下面分開例子介紹兩種不同類型為什么是按值傳遞。

基本類型值

基本類型這個按值傳遞比較好理解，直接復制變量的值傳遞：

function addTen(num){num += 10;return num; } var count = 20; var result = addTen(10); console.log(count); // 20 ，沒有變化哈 console.log(result); // 30

引用類型值

有些人認為引用類型的傳參是按照引用來傳的，那暫且認為他們的理解是正確的，那下面的示例結果怎么解析呢？

function setName(obj){obj.name = '嘉明';obj = new Object();obj.name = '龐嘉明'; } var person = new Object(); setName(person); console.log(person.name); // '嘉明'，為啥不是'龐嘉明'呢？

如果是按照引用傳的話，那么新建的對象obj = new Object()應該是指向堆內容的對象啊，那么改變它本有的name屬性值應該生效，然而并沒有生效。所以它也是按值傳遞滴。

函數聲明與函數表達式

解析器在向執行環境中加載數據時，對函數聲明和函數表達式并非一視同仁[p111]。解析器會率先讀取函數聲明，并使其執行任何代碼之前可用（可以訪問）；至于函數表達式，則必須等到解析器執行到它所在的代碼行，才會真正被解析。

console.log(sum(10 , 10)); // 20 function sum(num1 , num2){return num1 + num2; } console.log(sum(10 , 10)); //TypeError: sum is not a function var sum = function(num1 , num2){return num1 + num2; }

apply和call

每個函數都包含兩個非繼承而來的方法：apply()和call()。這兩個方法的用途都是在特定的作用域中調用函數，實際上等于設置函數體內this對象的值[116]。call和apply在對象中還是挺有用處的。

apply()方法和call()方法的作用是相同的，區別在于接收參數的方式不同。

apply

apply()方法接收兩個參數：一個是在其中運行函數的作用域，另一個是參數數組，這里的參數數組可以是Array的實例，也可以是arguments對象（類數組對象）。

call

call()方法接收的第一個參數和apply()方法接收的一樣，變化的是其余的參數直接傳遞給函數。換句話說，在使用call()方法時，傳遞給函數的參數必須逐個列舉出來。

function sum(num1 , num2){return num1 + num2; } function callSum(num1 , num2){return sum.call(this , sum1 , sum2); } console.log(callSum(10 , 10)); // 20

創建對象

雖然Object構造函數或者對象字面量都可以用來創建單個對象，但是這些方式有個明顯的缺點：使用同一個接口創建很多對象，會產生大量的重復代碼。[p144]

工廠模式

工廠模式就是造一個模子產生一個個對象。

function createPerson(name , age ,job){var o = new Object();o.name = name;o.age = age;o.job = job;o.sayName = function(){alert(this.name);};return o;}var person1 = createPerson('nicholas' , 29 , 'software engineer');var person2 = createPerson('greg' , 27 , 'doctor');

工廠模式解決了創建多個相似對象的問題（解決創建對象時產生大量重復代碼），但是沒有解決對象識別的問題（即怎么知道一個對象的類型，是Person還是Animal啊）。

構造函數模式

下面使用構造函數創建特定類型的對象。這里是Person類型：

function Person(name , age , job){ // 注意構造函數的首字母為大寫哦this.name = name;this.age = age;this.job = job;this.sayName = function(){alert(this.name);} }var person1 = new Person('nicholas' , 29 , 'software engineer'); var person2 = new Person('greg' , 27 , 'doctor');alert(person1.constructor == Person); // true 可以理解為person1的創造者是Person，也就是對象的類型Person

在創建Person的新實例，必須使用new操作符。以這種方式調用構造函數實際上會經歷以下4個步驟：

創建一個新對象

將構造函數的作用域賦給新對象（因此this指向了這個新對象）

執行構造函數中的代碼（為這個新對象添加屬性）

返回新對象

構造函數解決了重復實例話問題（也就是創建多個相似對象的問題）和解決了對象識別的問題。但是，像上面那樣，person1和person2共有的方法，實例化的時候都創建了，這未免多余了。當然可以將共有的方法提取到外面，像這樣：

function Person(name , age , job){this.name = name;this.age = age;this.job = job;this.sayName = sayName; } function sayName(){alert(this.name); } var person1 = new Person('nicholas' , 29 , 'software engineer'); var person2 = new Person('greg' , 27 , 'doctor');

將sayName提取出來，就成了全局的方法了，然而這里只有Person類創建對象的時候才使用到，這樣就大才小用了吧，所以提取出來到全局方法這種操作不推薦。

原型模式

創建的每個函數都有一個prototype（原型）屬性，這個屬性就是一個指針，指向一個對象，而這個對象的用途就是包含可以由特定類型的所有實例共享的屬性和方法。

function Person(){ } Person.prototype.name = 'nicholas'; Person.prototype.age = 29; Person.prototype.sayName = function(){alert(this.name); };var person1 = new Person(); person1.sayName(); // nicholasvar person2 = new Person(); person2.sayName(); // nicholasconsole.log(person1.sayName == person2.sayName); // true

可以有關系圖如下：

life/learn/read/javascript/prototype_object

上面的Person.prototype不建議使用字面量來寫Person.prototype={},雖讓效果一樣，但是這里重寫了原本Person.prototype的對象，因此constructor屬性會指向Ohject而不是Person。當然也是可以處理的啦，將指向指正確并指定'construtor'的枚舉屬性為enumerable: false。

原型模式解決了函數共享的問題，但是也帶了一個問題：實例化中對象的屬性是獨立的，而原型模式這里共享了。

組合使用構造函數模式和原型模式

創建自定義類型的最常見的方式，就是組合使用構造函數模式和原型模式。構造函數模式用于定義實例屬性，而原型模式用于定義方法和共享屬性。

function Person(name , age ,job){this.name = name;this.age = age;this.job = job;this.friends = ['shelby' , 'court']; } Person.prototype.sayName = function(){alert(this.name); }var person1 = new Person('nicholas' , 29 , 'software engineer'); var person2 = new Person('greg' , 27 , 'doctor');person1.friends.push('van'); console.log(person1.friends); // 'shelby,court,van' console.log(person2.friends); // 'shelby,court' console.log(person1.friends === person2.friends); // false console.log(person1.sayName === person2.sayName); // true

動態原型模式

其他的OO語言，比如java，創建對象的類中是包含了自身的屬性、方法和共有的屬性、方法，如下小狗的例子：

public class Dog{int age;public Dog(String name ){this.age = age;System.out.println('小狗的名字是: ' + name);}public void setAge(int age){age = age;}public int getAge(){System.out.println('小狗的年齡為: ' + age);return age;}public static void main(String []args){/* 創建對象 */Dog dog = new Dog('tom');/* 通過方法來設定age */dog.setAge(2);/* 調用另外一個方法獲取age */dog.getAge();/* 也可以通過對象.屬性名獲取 */System.out.println('變量值: ' + dog.age);} }

為了看起來是類那么一會事，動態原型模式把所有信息都封裝在了構造函數中，而通過在構造函數中初始化原型（僅在必要的情況下），又保持了同時使用構造函數和原型的優點。如下:

寄生構造函數模式

在前面幾種模式都不適應的情況下，可以用寄生構造函數模式（數據結構中就使用到哈），寄生構造函數模式可以看成是工廠模式和構造函數模式的結合體。其基本思想是創建一個函數，該函數的作用僅僅是封裝創建對象的代碼，然后再返回新創建的對象。

function Person(name , age , job){var o = new Object();o.name = name;o.age = age;o.job = job;o.sayName = function(){alert(this.name);}return o; }var friend = new Person('nicholas', 29 , 'software engineer'); friend.sayName(); // nicholas

關于寄生構造函數模式，需要說明：返回的對象與構造函數或者與構造函數的原型屬性直接沒有什么關系；也就是說，構造函數返回的對象與構造函數外部創建的對象沒有什么區別。為此，不能依賴instanceof操作符來確定對象類型。由于存在上面的問題，建議在可以使用其他模式的情況下，不要使用這種模式。

穩妥構造函數模式

穩妥對象適合在一些安全的環境中（這些環境中會禁止使用this和new），或者防止數據被其他應用程序（如Mashup程序）改動時使用。穩妥構造函數遵循與寄生構造函數類似的模式，但是有兩點不同：意識新創建對象的實例方法不引用this，二是不使用new操作符調用構造函數。

function Person(name , age , job){// 創建要返回的對象var o = new Object();// 可以在這里定義私有的變量和函數// 添加方法o.sayName = function(){alert(name); // 不使用this.name};// 返回對象return o; }var friend = Person('nicholas', 29 , 'software engineer'); // 不使用new friend.sayName(); // 'nicholas'

繼承

許多的OO語言都支持兩種繼承方法：接口繼承和實現繼承。接口繼承只繼承方法簽名，而實現繼承則繼承實際的方法。由于函數沒有簽名，在ECMAScript中無法實現接口繼承。ECMAScript只支持實現繼承，而且實現主要是依靠原型鏈來實現的。[p162]

原型鏈

原型鏈的基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。回顧下構造函數、原型和實例的關系: 每個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，而實例都包含一個指向原型對象的內部指針。

上面代碼中原型鏈如下：

life/learn/read/javascript/prototype_chain

原型鏈繼承帶來兩個問題：一是原型實際上變成了另一個類型的實例，于是，原先的實例屬性也就變成了現在原型的屬性，共享了屬性。二是在創建子類型的實例時，不能在沒有影響所有對象實例的情況下向超類型的構造函數傳遞參數。

借用構造函數

借用構造函數解決原型鏈繼承帶來的不能向構造函數傳遞倉鼠的問題。這里使用到了apply()或者call()方法在新創建的對象上執行構造函數。

function SuperType(){this.colors = ['red','blue','green']; } function SubType(){// 繼承SuperTypeSuperType.call(this); // 使用SuperType.apply(this)同效 }var instance1 = new SubType(); instance1.color.push('black'); console.log(instance1.colors); // 'red,blue,green,black'var instance2 = new SubType(); console.log(instance2.colors); // 'red,blue,green'

上面的例子中，我在父類型構造函數中沒有傳參數，看者感興趣的話可以自己加下參數來實驗一番咯。

借用構造函數解決了原型鏈繼承的確定，但是又沒有接納原型鏈的優點：共享。下面的組合繼承結合了原型鏈和借用構造函數，容納了兩者的優點。

組合繼承

組合繼承的思路是使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承。

組合繼承避免了原型鏈和借用構造函數的缺陷，融合了它們的優點，成為了JavaScript中最常用的繼承模式。而且，instanceof和isPrototypeOf()也能夠用于識別基于組合繼承創建的對象。

原型式繼承

原型式繼承是借助原型可以基于已有的對象創建新對象，同時還不必因此創建自定義的類型。

寄生式繼承

寄生式繼承是與原型繼承緊密相關的一種思路。寄生式繼承的思路與寄生構造函數和工廠模式類似，即是創建了一個僅用于封裝繼承過程的函數，該函數在內部以某種方式來增強對象，最后再像真的做了所有工作一樣返回對象。

上面的例子中，新對象anotherPerson不僅具有person的所有屬性和方法，而且還有了自己的sayHi()方法。

寄生組合式繼承

組合繼承是JavaScript最常用的繼承模式；不過，它也有自己的不足。組合繼承最大的問題就是無論什么情況下，都會調用兩次超類型構造函數：一次是在創建子類型原型的時候，另一次是在子類型構造函數內部。寄生組合式繼承能夠解決這個問題。

所謂寄生組合式繼承，即通過借用構造函數來繼承屬性，通過原型鏈的混成形式來繼承方法。其背后的基本思路是不必為了指定子類型的原型而調用超類型的構造函數，我們所需要的無非就是超類型的原型的一個副本而已。寄生組合式繼承的基本模式如下：

function inheritPrototype(subType,superType){var prototype = Object(superType.prototype); // 創建對象prototype.constructor = subType; // 增強對象，防止下面重寫constructor屬性subType.prototype = prototype; // 指定對象}

一個完整的例子如下,相關插圖見書[p173]:

上面的例子的高效處體現在它只調用了一次SuperType構造函數，并且避免了在SubType.prototype上創建不必要的，多余的屬性。與此同時，原型鏈還能保持不變；因此還能正常使用instanceof和inPrototypeOf()。開發人員普遍認為寄生組合式繼承是引用類型最理想的繼承范式。

閉包

閉包是指有權訪問另一個函數作用域中的變量的函數。我的理解是，函數內的函數使用到外層函數的變量延長變量的生存時間，造成常駐內存。例子見下：

function foo(){var a = 2;return function(){a += 1;console.log(a);} }var baz = foo();baz(); // 3 baz(); // 4 baz(); // 5 baz(); // 6

上面的例子中，外部的函數foo()執行完成之后，正常的情況下應該銷毀a變量的，但是內部的返回的匿名函數使用到該變量，不能銷毀。如果需要銷毀的話，可以改寫成下面：

function foo(){var a = 2;return function(){a += 1;console.log(a);} } var baz = foo(); baz(); // 3baz = null; // 將內部的匿名函數賦值為空

從閉包說起

談到了閉包，這讓我想起了不久前刷知乎看到一篇文章。自己整理如下：

for(var i = 0 ; i < 5; i++){setTimeout(function(){console.log(i);},1000) } console.log(i);// 5,5,5,5,5,5

上面的代碼是輸出了6個5，而這6個5是這樣執行的，先輸出全局中的console.log(i)，然后是過了1秒種后，瞬間輸出了5個5（為什么用瞬間這個詞呢，怕看者理解為每過一秒輸出一個5）。解讀上面的代碼的話，可以通過狹義范圍(es5)的理解：同步 => 異步 => 回調（回調也是屬于異步的范疇，所以我這里指明了狹義啦）。先是執行同步的for,遇到異步的setTimeout(setTimeout和setInterval屬于異步哈)后將其放入隊列中等待，接著往下執行全局的console.log(i)，將其執行完成后執行異步的隊列。

追問1:閉包

改寫上面的代碼，期望輸出的結果為：5 => 0,1,2,3,4。改造的方式一：

for(var i = 0; i < 5; i++){(function(j){setTimeout(function(){console.log(j);},1000);})(i); } console.log(i);// 5,0,1,2,3,4

上面的代碼巧妙的利用IIFE(Immediately Invoked Function Expression:聲明即執行的函數表達式)來解決閉包造成的問題，閉包的解析看上面。

方法二：利用js中基本類型的參數傳遞是按值傳遞的特征，改造代碼如下

var output = function(i){setTimeout(function(){console.log(i);},1000); }; for(var i = 0; i < 5; i++){output(i); // 這里傳過去的i值被復制了 } console.log(i);// 5,0,1,2,3,4

上面改造的兩個方法都是執行代碼后先輸出5，然后過了一秒種依次輸出0,1,2,3,4。

如果不要考慮全局中的console.log(i)輸出的5，而是循環中輸出的0,1,2,3,4。你還可以使用ES6的let塊級作用域語法,實現超級簡單:

for(let i = 0; i < 5; i++){setTimeout(function(){console.log(i);},1000); }// 0,1,2,3,4

上面是過了一秒鐘后，依次輸出0,1,2,3,4。這種做法類似于無形中添加了閉包。那么，如果使用ES6語法的話，會怎樣實現5,0,1,2,3,4呢？

追問2:ES6

改造剛開始的代碼使得輸出的結果是每隔一秒輸出0,1,2,3,4，大概第五秒輸出5。

在不使用ES6的情況下：

for(var i = 0; i < 5; i++){(function(j){setTimeout(function(){console.log(j);},1000*j);})(i); } setTimeout(function(){console.log(i); },1000*i);// 0,1,2,3,4,5

上面的代碼簡單粗暴，但是不推薦。看題目是每隔一秒輸出一個值，再回調實現最后的5輸出，這個時候應該使用ES6語法來考慮，應該使用Promise方案：

如果是使用let，我的改造如下：

上面的代碼比較龐雜，可以將其顆粒話，模塊化。對上面兩段代碼的帶var那段進行改造后如下：

追問3:ES7

既然ES6的Promise可以寫，那么ES7是否可以寫呢，從而讓代碼更加簡潔易讀？那就使用到到了異步操作的async await特性啦。

// 模擬其他語言中的sleep，實際上可以是任何異步操作 const sleep = (time) => new Promise((resolve) => {setTimeout(resolve , time); });(async () => {for(var i = 0; i < 5; i++){await sleep(1000);console.log(i);}await sleep(1000);console.log(i); })();// 符合要求的每隔一秒輸出 // 0,1,2,3,4,5

瀏覽器窗口位置

IE、Safari、Opera和Chrome都提供了screenLeft和screenTop屬性，分別表示瀏覽器窗口相對于屏幕左上角和上邊的位置[p197]。Firefox則以screenX和screenY屬性來表示。為了兼容各個瀏覽器，可以入下面這樣寫：

var leftPos = (typeof window.screenLeft == "number")?window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == "number")? window.screenTop : window.screenY;

瀏覽器窗口大小

由于瀏覽器廠商以及歷史的問題，無法確認瀏覽器本身的大小，但是可以取得視口的大小[p198]。如下：

上面的示例可以簡寫成下面這樣：

var pageWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientHeight; var pageHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

canvas中的變換

為繪制上下文應用變換，會導致使用不同的變換矩陣應用處理，從而產生不同的結果。[p453]

可通過下面的方法來修改變換矩陣:

rotation(angle):圍繞原點旋轉圖像angle弧度
scale(scaleX,scaleY)
translate(x,y): 將坐標原點移動到(x,y)。執行這個變換后，坐標(0,0)會變成之前由(x,y)表示的點。

JSON

關于JSON，最重要的是要理解它是一種數據格式，不是一種編程語言。

對象字面量和JSON格式比較

先來看下對象字面量demo寫法：

var person = {name : "nicholas",age : 29 };# 上面的代碼也可以寫成下面的 var person = {"name" : "nicholas","age" : 29 };

而上面的對象寫成數據的話，就是下面這樣了：

{"name": "nicholas ","age": 29 }# 可到網站 https://www.bejson.com/ 驗證

?? 與JavaScript對象字面量相比，JSON對象又兩個地方不一樣。首先，沒有聲明變量(JSON中沒有變量的概念)。其次，沒有分號(因為這不是JavaScript語句，所以不需要分號)。留意的是，對象的屬性必須加雙引號(不是單引號哦)，這在JSON中是必須的。

stringify()和parse()

可以這么理解：JSON.stringify()是從一個object中解析成JSON數據格式，而JSON.parse()是從一個字符串中解析成JSON數據格式。

XMLHttpRequest對象

XMLHttpRequest對象用于在后臺與服務器交換數據。它是Ajax技術的核心[p571]。

XMLHttpRequest對象能夠使你：

在不重新加載頁面的情況下更新網頁
在頁面已加載后從服務器請求數據
在頁面已加載后從服務器接收數據
在后臺向服務器發送數據

XMLHttpRequest的使用：

# 創建XHR對象 => open()準備發送 => send()傳送數據// 創建對象，對瀏覽器做兼容 function createXHR(){if(typeof XMLHttpRequest != 'undefined'){ // IE7+和其他瀏覽器支持return new XMLHttpRequest();}else if(typeof ActiveXObject != 'undefined'){if(typeof arguments.callee.activeXString != 'string'){var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp']; // 低版的ie可能遇到三種不同版本的XMR對象var i , len;for(i = 0,len = versions.length; i < len ; i++){try{new ActiveXObject(version[i]);arguments.callee.activeXString = versions[i];break;}catch (ex){// 跳過}}}return new ActiveXObject(arguments.callee.activeXString);}else{throw new Error("No XHR object available.");} } var xhr = createXHR();// 準備發送數據 xhr.open("get","path/to/example.txt",false);// 非異步，異步的話第三個參數改為true// 傳送數據 xhr.send(null); // get方法不需要傳數據// 判斷狀態嘛，獲取服務器返回的數據 if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){console.log(xhr.responseText); }else{console.log("Request was nsuccessful : " + xhr.status); }

跨域解決方案

何為跨域呢？只要訪問的資源的協議、域名、端口三個不全相同，就可以說是非同源策略而產生了跨域了，這是狹義的說法。廣義的說法：通過XHR實現Ajax通信的一個主要限制，來源于跨域的安全策略；默認情況下,XHR對象只能訪問包含它的頁面位于同一個域中的資源[p582]。注：部分文字和代碼引用自前端常見跨域解決方案（全）

CORS

CORS（Cross-Origin Resource Sharing，跨資源共享）定義了在必須訪問跨資源時，瀏覽器與服務器應該如何溝通。其背后的基本思想，就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功，還是應該失敗。復雜的跨域請求應當考慮使用它。

普通跨域請求：只服務端設置Access-Control-Allow-Origin即可，前端無需設置，如果要帶cookie請求：前后端都要設置。

1.前端設置

1.) 原生ajax

2.)jquery ajax

上面寫了一大堆原生的，看得頭都有點大了，還是使用jquery ajax 比較舒服:

$.ajax({...xhrFields: {withCredentials: true // 前端設置是否帶cookie},crossDomain: true, // 會讓請求頭中包含跨域的額外信息，但不會含cookie... });

3.) vue框架

在vue-resource封裝的ajax組建中加入以下代碼:

Vue.http.options.credentials = true;

2.服務器設置

若后端設置成功，前端瀏覽器控制臺上就不會出現跨域報錯的信息，反之，說明沒有成功。

1.） java后臺

/** 導入包：import javax.servlet.http.HttpServletResponse;* 接口參數中定義：HttpServletResponse response*/ response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); // 若有端口需寫全（協議+域名+端口） response.setHeader("Access-Control-Allow-Credentials", "true");

2.) node后臺

JSONP

JSONP是JSON with padding(填充式JSON或參數式JSON)的簡寫，是應用JSON的一種新方法，在后來的web服務中非常流行。簡單的跨域請求用JSONP即可。

通常為了減輕web服務器的負載，我們把js,css,img等靜態資源分離到另一臺獨立域名的服務器，在html頁面中再通過相應的標簽從不同域名下加載靜態資源，而被瀏覽器允許，基于此原理，我們可以通過動態創建script，再請求一個帶參網址實現跨域通信。

1.前端實現

1.）原生實現

服務器返回如下（返回時即執行全局函數）：

onBack({"status": true,"user":"admin"})

2.）jquery ajax

$.ajax({url: 'http://www.domain2.com:8080/login',type: 'get',dataType: 'jsonp', // 請求方式為jsonp jsonpCallback: 'onBack', // 自定義回調函數名data: {} });

3.）vue.js

this.$http.jsonp('http://www.domain2.com:8080/login',{params: {},jsonp: 'onBack ' }).then((res)=>{console.log(res); });

2.后端nodejs代碼的示范：

var qs = require('querystring'); var http = require('http'); var server = http.createServer();server.on('request',function(req,res){var params = qs.parse(req.url.split('?')[1]);var fn = params.callback;// jsonp返回設置res.writeHead(200,{"Content-Type":"text/javascript"});res.write(fn + '('+JSON.stringify(params)+')');res.end(); });server.listen('8080'); console.log('Server is running at port 8080 ...');

?? jsonp缺點：只能實現get一種請求。

WebSocket協議跨域

WebSocket protocol 是 HTML5一種新的協議。它實現了瀏覽器與服務器全雙工通信，同時允許跨域通訊。

原生的WebSocket API使用起來不太方便，示例中使用了socket.io，它很好的封裝了webSocket接口，提供了更簡單、靈活的接口，也對不支持webSocket的瀏覽器提供了向下兼容。

1.前端代碼

<div>user input：<input type="text"></div> <script src="./socket.io.js"></script> <script> var socket = io('http://www.domain2.com:8080');// 連接成功處理 socket.on('connect', function() {// 監聽服務端消息socket.on('message', function(msg) {console.log('data from server: ---> ' + msg); });// 監聽服務端關閉socket.on('disconnect', function() { console.log('Server socket has closed.'); }); });document.getElementsByTagName('input')[0].onblur = function() {socket.send(this.value); }; </script>

2.node socket后臺

requestAnimationFrame()幀動畫

requestAnimationFrame 創建平滑的動畫[p682]。在此之前都是使用setTimeout或者setInterval實現，requestAnimationFrame與它們相比：

不需要時間間隔，會貼切瀏覽器的刷新頻率
在切換到另外的頁面時，會停止運行

使用的示范如下：

<div id="num">1</div> // 兼容瀏覽器 (function(){var lastTime = 0;var vendors = ['webkit','moz','ms','-o'];for(var x = 0;x <vendors.length && !window.requestAnimationFrame; ++x){window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];window.cancelAnimationFrame = window[vendors[x] + 'cancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];}if(!window.requestAnimationFrame){window.requestAnimationFrame = function(callback){var currTime = new Date().getTime();var timeToCall = Math.max(0, 16 - (currTime - lastTime));var id = window.setTimeout(function(){callback;},timeToCall);lastTime = currTime - timeToCall;return id;}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame = function (id){clearTimeout(id);}} })();// 簡單的計數 var num = 1,timer; fn(); function fn(){document.getElementById('num').innerText = ++num;timer = requestAnimationFrame(fn); } document.onclick = function(){cancelAnimationFrame(timer); }

原文鏈接請戳這里

總結

以上是生活随笔為你收集整理的javascript 高级程序设计_重读《JavaScript高级程序设计》的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： tomcat出现5个using_当猫咪出
下一篇：快速排序算法_Python实现快速排序算