包:是指有權(quán)訪問另外一個函數(shù)作用域中的變量的函數(shù).JavaScript創(chuàng)建閉包的常見方式就是在一個函數(shù)內(nèi)部創(chuàng)建另外一個函數(shù).
JavaScript的閉包類似于Java類中使用get/set方法操作類的私有變量,JavaScript閉包是函數(shù)的嵌套,內(nèi)部的函數(shù)可以操作上一層的變量屬性,同時此函數(shù)可以被外部所調(diào)用.
在javascript中沒有塊級作用域,一般為了給某個函數(shù)申明一些只有該函數(shù)才能使用的局部變量時,我們就會用到閉包,這樣我們可以很大程度上減少全局作用域中的變量,凈化全局作用域。閉包是一種設(shè)計原則,它通過分析上下文,來簡化用戶的調(diào)用,讓用戶在不知曉的情況下,達(dá)到他的目的。使用閉包有好處,也有壞處,濫用閉包會造成內(nèi)存的大量消耗。
代碼示例
代碼1:
function foo(x) {
var tmp=3;
return function (y) {
alert(x + y + (++tmp));
}
}
var bar=foo(2); // bar 現(xiàn)在是一個閉包
bar(10);
代碼2:
var add=(function () {
var counter=0;
return function () {return counter +=1;}
})();
add();
add();
add();
// 計數(shù)器為 3
代碼3:
var App=function() {
var isRTL=false;
var isIE8=false;
var isIE9=false;
var isIE10=false;
return {
init: function() {},
initAjax: function() {}
}
}();
jQuery(document).ready(function() {
App.init(); // init
});
apply()方法和call()方法
每個函數(shù)都包含兩個非繼承而來的方法:apply()和call()。
它們的用途相同,都是在特定的作用域中調(diào)用函數(shù)。
接收參數(shù)方面不同,apply()接收兩個參數(shù),一個是函數(shù)運行的作用域(this),另一個是參數(shù)數(shù)組。call()方法第一個參數(shù)與apply()方法相同,但傳遞給函數(shù)的參數(shù)必須列舉出來。
代碼示例
代碼1:
function sum(num1, num2) {
return num1 + num2;
}
console.log(sum.call(window, 10, 10)); //20
console.log(sum.apply(window,[10,20])); //30
代碼2:
window.firstName="diz";
window.lastName="song";
var myObject={ firstName: "my", lastName: "Object" };
function HelloName() {
console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
}
HelloName.call(window); //或 .call(this);
HelloName.call(myObject);
運行結(jié)果為:
Hello diz song glad to meet you!
Hello my Object glad to meet you!
從示例中可以看出apply()和call()能夠擴充函數(shù)賴以運行的作用域
方法的覆蓋和重寫
JavaScript中沒有方法的重載這種概念,只有覆蓋,不管方法的參數(shù)個數(shù)多少,同名的最后一個方法會將前面的方法覆蓋掉.
<script type="text/javascript">
function sayHello() {
console.log("Hello----1");
}
function sayHello() {
console.log("Hello----2");
}
function sayHello() {
console.log("Hello----3");
}
sayHello();
</script>
如果要實現(xiàn)重載,可采用此種方法
<script type="text/javascript">
function sayHi() {
if (arguments.length==1) {
console.log(arguments[0] + "sayHi---1");
} else if (arguments.length==2) {
console.log(arguments[0] + "," + arguments[1] + "sayHi---2");
} else if (arguments.length==3) {
console.log(arguments[0] + "," + arguments[1]+","+arguments[2] + "sayHi---3");
}
}
sayHi("Tom");
sayHi("Tom", "lucy");
sayHi("Tom","lucy","jame");
</script>
回調(diào)函數(shù)
回調(diào)函數(shù)示例
<script language="javascript" type="text/javascript">
// 2.傳入要回調(diào)的方法名
function main(callBack) {
console.log("I am main function");
console.log("Invoke callback function..");
// 3.參數(shù)名稱和此處的方法名稱對應(yīng)
callBack();
}
function b() {
console.log("function:b");
}
function c() {
console.log("function:c");
}
// 1.要回調(diào)的函數(shù)作為參數(shù)
main(b);
main(c);
</script>
protocol 屬性
定義和用法
protocol 屬性是一個可讀可寫的字符串,可設(shè)置或返回當(dāng)前 URL 的協(xié)議。
圖示
代碼示例
<script type="text/javascript">
document.write(location.protocol);
</script>
輸出:
http:
兩個等號和三個等號的區(qū)別
===規(guī)則:
如果類型不同,就[不相等]
如果兩個都是數(shù)值,并且是同一個值,那么[相等];(!例外)的是,如果其中至少一個是NaN,那么[不相等]。(判斷一個值是否是NaN,只能用isNaN()來判斷)
如果兩個都是字符串,每個位置的字符都一樣,那么[相等];否則[不相等]。
如果兩個值都是true,或者都是false,那么[相等]。
如果兩個值都引用同一個對象或函數(shù),那么[相等];否則[不相等]。
如果兩個值都是null,或者都是undefined,那么[相等]。
==規(guī)則:
如果兩個值類型相同,進行===比較。
如果兩個值類型不同,他們可能相等。根據(jù)下面規(guī)則進行類型轉(zhuǎn)換再比較:
a. 如果一個是null. 一個是undefined,那么[相等]。
b. 如果一個是字符串,一個是數(shù)值,把字符串轉(zhuǎn)換成數(shù)值再進行比較。
c. 如果任一值是 true,把它轉(zhuǎn)換成 1 再比較;如果任一值是 false,把它轉(zhuǎn)換成 0 再比較。
d. 如果一個是對象,另一個是數(shù)值或字符串,把對象轉(zhuǎn)換成基礎(chǔ)類型的值再比較。對象轉(zhuǎn)換成基礎(chǔ)類型,利用它的toString或者valueOf方法。 js核心內(nèi)置類,會嘗試valueOf先于toString;例外的是Date,Date利用的是toString轉(zhuǎn)換。非js核心的對象,令說(比較麻 煩,我也不大懂)
e. 任何其他組合,都[不相等]。
其他瑣碎
1. window.parent和window.opener
window.parent針對frame
window.opener針對的是打開子窗口的父窗口
可操作響應(yīng)頁面的屬性和調(diào)用相關(guān)方法
2. instanceof 運算符
在 JavaScript 中,判斷一個變量的類型嘗嘗會用 typeof 運算符,在使用 typeof 運算符時采用引用類型存儲值會出現(xiàn)一個問題,無論引用的是什么類型的對象,它都返回 “object”。
判斷是否為數(shù)組
if(dataList instanceof Array){}console.log(Object instanceof Object);//true
console.log(Function instanceof Function);//true
console.log(Number instanceof Number);//false
console.log(String instanceof String);//false
console.log(Function instanceof Object);//true
console.log(Foo instanceof Function);//true
console.log(Foo instanceof Foo);//false
3. 判斷是否為空對象
function isEmptyObject(obj) { for (var key in obj) { return false; } return true;}
TML即一切,所有打算進行Web編程的人都應(yīng)該熟悉HTML,并了解如何解析HTML。尤其對前端工程師來說這更是基礎(chǔ),本文我們就來介紹一下JS下常見的HTML解析庫。
JavaScript和jQuery的DOM操作功能非常適合簡單HTML片段的解析。在實際編程中,如果要以編程方式解析DOM完整HTML或XML,則需要一個更好的解決方案,那就是DOMParser,它是所有現(xiàn)代數(shù)瀏覽器都支持的功能。
通過使用DOMParser,可以輕松解析HTML文檔。但是,一般需要通過欺騙瀏覽器來實現(xiàn)解析,比如,通過向當(dāng)前文檔添加新元素。
DOMParser的用法非常簡單明了:
let domParser=new DOMParser();
let doc=domParser.parseFromString(stringContainingXMLSource, "application/xml");
domParser=new DOMParser();
doc=domParser.parseFromString(stringContainingSVGSource, "image/svg+xml");
domParser=new DOMParser();
doc=domParser.parseFromString(stringContainingHTMLSource, "text/html");
專為服務(wù)器設(shè)計的核心jQuery的快速,靈活和精致的實現(xiàn)。
Cheerio看起來像jQuery,但是不支持瀏覽器。Cheerio可以解析HTML并使其易于操作,但不會像瀏覽器中那樣解釋HTML,解析出與瀏覽器不同的內(nèi)容,并且解析的結(jié)果不會直接發(fā)送給用戶。
Cheerio實現(xiàn)了jQuery子集,去掉了jQuery中所有與DOM不一致或者是用來填補瀏覽器的東西,重現(xiàn)了jQuery最美妙的API
由于使用了極其簡潔而又標(biāo)準(zhǔn)的DOM模型, Cheerio對文檔的轉(zhuǎn)換,操作,渲染都極其的高效。
JavaScript開發(fā)人員都應(yīng)該熟悉Cheerio的語法和用法:
var chro=require('cheerio'),
$=chio.load('<h1 class="title">Hello World!</h1>');
$('h1.title').text('Hello Chongchong!');
$('h1').attr('id', 'welcome');
$.html();
結(jié)果:
<h1 class="title" id=" welcome ">Hello Chongchong!</h1>
jsdom是很多Web標(biāo)準(zhǔn)(尤其是WHATWG DOM和 HTML 標(biāo)準(zhǔn))純JavaScript實現(xiàn),可與Node.js結(jié)合使用。jsdom項目的目標(biāo)是模擬Web瀏覽器的子集,從而滿足測試和抓取實際的Web應(yīng)用程序。
jsdom不僅僅是HTML解析器,它還可以當(dāng)成瀏覽器。在解析的上下文中,如果要解析的數(shù)據(jù)中省略了必要的標(biāo)記,它會自動添加必要的標(biāo)記。例如,如果沒有html標(biāo)簽,它將像瀏覽器一樣隱式地添加它。
還可以選擇指定一些屬性,例如文檔,引薦來源網(wǎng)址或用戶代理的URL。如果需要解析包含本地URL的鏈接,則該URL特別有用。
由于它實際上與解析無關(guān),因此只提到j(luò)sdom具有(虛擬)控制臺,對cookie的支持等。總之,需要模擬瀏覽器環(huán)境
它還可以處理外部資源。如有需求jsdom可以用來加載并執(zhí)行JS腳本。
const jsdom=require("jsdom");
const { JSDOM }=jsdom;
const dom=new JSDOM('<!DOCTYPE html><p>Hello, Chongchong!</p>');
console.log(dom.window.document.querySelector("p").textContent);
結(jié)果:
"Hello, Chongchong!"
parse5
parse5提供了處理HTML時所需的幾乎所有內(nèi)容。Parse5庫,目標(biāo)是構(gòu)建其他工具,但也可以實現(xiàn)HTML解析以完成簡單任務(wù)。Parse5易于使用,但是并不提供瀏覽器為提供的操作DOM的方法(例如getElementById)。
parse5衍生出了一系列采用它的令人印象深刻的項目:jsdom,Angular2和Polymer。如果需求為對HTML的高級操作或解析的可靠基礎(chǔ),那么顯然這是一個不錯的選擇。
const parse5=require('parse5');
const document=parse5.parse('<!DOCTYPE html><html><head></head><body>Hello Chongchong!</body></html>');
console.log(document.childNodes[1].tagName);
本文我們介紹幾個JS下常見的Html解析庫。根據(jù)標(biāo)準(zhǔn),實際的HTML格式語法格式是需要容錯的。當(dāng)時這在庫很難簡單完美的實現(xiàn)。如果你有更好的推薦,歡迎和大家一起分享。
1、jQuery 提供一系列與 DOM 相關(guān)的方法,這使訪問和操作元素和屬性變得很容易
1、text() - 設(shè)置或返回所選元素的文本內(nèi)容
2、html() - 設(shè)置或返回所選元素的內(nèi)容(包括 HTML 標(biāo)記)
3、val() - 設(shè)置或返回表單字段的值
4、獲取屬性
1、text() - 設(shè)置或返回所選元素的文本內(nèi)容
2、html() - 設(shè)置或返回所選元素的內(nèi)容(包括 HTML 標(biāo)記)
3、val() - 設(shè)置或返回表單字段的值
1、通過 jQuery,可以很容易地添加新元素/內(nèi)容
2、append() - 在被選元素的結(jié)尾插入內(nèi)容
3、prepend() - 在被選元素的開頭插入內(nèi)容
4、after() - 在被選元素之后插入內(nèi)容
5、before() - 在被選元素之前插入內(nèi)容
1、通過 jQuery,可以很容易地刪除已有的 HTML 元素
2、remove() - 刪除被選元素(及其子元素)
3、empty() - 從被選元素中刪除子元素
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。