整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
包：是指有權(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)系。
