Alles in JavaScript ist ein Objekt: Zeichenfolgen, Zahlen, Arrays, Funktionen. Der folgende Editor sammelt und sortiert einige Objekte in JavaScript und implementiert Promise-Objekte. Der spezifische Inhalt lautet wie folgt:
Objekte überall
Fensterobjekt
Einführung in häufig verwendete Attribute und Methoden
Standort
Enthält die URL der Seite. Wenn Sie dieses Attribut ändern, greift der Browser auf die neue URL
zu
Status
Enthält eine Zeichenfolge, die im Browserstatus angezeigt wird. Normalerweise in der unteren linken Ecke des Browsers
onload:
Enthält Funktionen, die aufgerufen werden müssen, nachdem die Seite vollständig geladen ist
Dokument:
Enthält DOM
Alarmmethode:
Erinnerung anzeigen
Prompt-Methode:
Ähnlich wie eine Warnung, es werden jedoch Informationen vom Benutzer eingeholt
geöffnet
Neues Fenster öffnen
schließen
Fenster schließen
setTimeout:
Rufen Sie nach dem angegebenen Zeitintervall eine Verarbeitungsfunktion auf
setlnterval
Rufen Sie eine Verarbeitungsfunktion wiederholt in einem bestimmten Zeitintervall auf
Sprechen Sie über window.onload
Durch die Angabe einer Funktion für das Onload-Attribut des Fensters können Sie sicherstellen, dass kein Code ausgeführt wird, bis die Seite geladen und das DOM vollständig erstellt ist.
Funktionen zum Ändern des DOM
window.onload = function(){
//code here
}
//function是一个匿名函数，赋给onloadNach dem Login kopieren
Der Grund, warum wir nicht window.inload = init() sagen, liegt darin, dass wir keine Funktion aufrufen, sondern ihren Wert verwenden.
Weisen Sie dem Inload-Attribut des Fensterobjekts den Wert einer Funktion zu und lassen Sie sie nach dem Laden der Seite ausführen.
Es gibt zwei Möglichkeiten, einen window.onload-Handler zu erstellen: Verwenden eines Funktionsnamens und Verwenden einer anonymen Funktion.
Diese beiden Methoden machen im Grunde dasselbe, aber wenn die Funktion, die window.onload zugewiesen ist, an anderer Stelle verwendet werden soll, wählen Sie die Verwendung des Funktionsnamens
Dokumentobjekt
Einführung in häufig verwendete Attribute und Methoden
Domäne:
Die Domäne des Servers, der das Dokument bereitstellt, z. B. kelion.com.
Titel:
Über document.title können Sie den Titel des Dokuments abrufen
URL:
URL des Dokuments
getElementById-Methode:
Rufen Sie dieses Element basierend auf der Element-ID
ab
getElementsByTagName,
getElementsByClassName:
Diese beiden Methoden ähneln der vorherigen, außer dass sie Tags und Klassen verwenden, um Elemente abzurufen
createElement:
Erstellen Sie neue Elemente, die für die Aufnahme in das DOM geeignet sind
Sprechen Sie über createElement
//创建<li>元素，
var li = document.createElement("li");
//给刚创建的元素赋值
li.innerHTML = "songName";
//获取<ul>元素
var ul = document.getElementById("playlist")
//把<li>元素增加到ul中
ul.appendChild(li)Nach dem Login kopieren
Hinweis: Vor der Eingabe der 8. Codezeile ist das li-Element immer unabhängig vom DOM
Elementobjekt
Einführung in häufig verwendete Attribute und Methoden:
innerHTML:
Enthält den Inhalt des Elements
childElementCount:
Speichern Sie die Anzahl der Elemente
firstChild
Das erste untergeordnete Element
appendChild-Methode:
InsertBefore-Methode:
Wird verwendet, um Elemente als untergeordnetes Element eines Elements einzufügen
getAttribute-Methode
setAttribute-Methode
Benutzer haben zwei Methoden zum Festlegen und Abrufen von Attributen in Elementen: wie „src“, „id“, „class“ usw.
Schließlich lernen wir etwas über das Schaltflächenobjekt
Das Schaltflächenobjekt hat ein häufig verwendetes Attribut:
onclick (wird verwendet, um zu überwachen, ob eine Taste gedrückt wird).
var button = document.getElementById("Button"); //button ist nur ein Variablenname, der button1, button2 usw. sein kann, aber im Wesentlichen eine Schaltfläche
button.onclick = handleButtonClick;
ps: Eine kurze Diskussion über die Implementierung von Promise-Objekten in Javascript
Viele Front-End-Freunde sollten von Promise-Objekten (oder Deferred-Objekten) gehört haben. Heute werde ich über mein Verständnis von Promise sprechen
Was?
Promise ist eine der Spezifikationen von CommonJS. Es verfügt über die Methoden „Resolve“, „Reject“, „Done“, „Fail“, „Then“ und andere, die uns helfen können, den Codefluss zu steuern und eine mehrschichtige Verschachtelung von Funktionen zu vermeiden. Heutzutage wird Asynchronität in der Webentwicklung immer wichtiger. Diese Art der nichtlinearen Ausführungsprogrammierung wird es für Entwickler schwierig machen, den Ausführungsprozess des beliebten js besser zu kontrollieren Als jQuery Alle Bibliotheken haben dieses Objekt bereits implementiert, und ES6, das Ende des Jahres veröffentlicht wird, wird Promise auch nativ implementieren
Warum
Stellen Sie sich ein Szenario vor, in dem es zwei asynchrone Anfragen gibt, die die erfolgreichen Daten der ersten Anfrage verwenden müssen. Dann kann unser Code so geschrieben werden
ajax({
url: url1,
success: function(data) {
ajax({
url: url2,
data: data,
success: function() {
}
});
}
});Nach dem Login kopieren
如果继续下去在回调函数中进行下一步操作，嵌套的层数会越来越多。我们可以进行适当的改进，把回调函数写到外面
function A() {
ajax({
url: url1,
success: function(data) {
B(data);
}
});
}
function B(data) {
ajax({
url: url2,
success: function(data) {
......
}
});
}Nach dem Login kopieren
即使是改写成这样，代码还是不够直观，但是如果有了Promise对象，代码就可以写得非常清晰，一目了然，请看
new Promise(A).done(B);
这样函数B就不用写在A的回调中了
How
目前的ES标准中还未支持Promise对象，那么我们就自己动手，丰衣足食吧。思路大致是这样的，用2个数组(doneList和failList)分别存储成功时的回调函数队列和失败时的回调队列
* state: 当前执行状态，有pending、resolved、rejected3种取值
* done: 向doneList中添加一个成功回调函数
* fail: 向failList中添加一个失败回调函数
* then: 分别向doneList和failList中添加回调函数
* always: 添加一个无论成功还是失败都会调用的回调函数
* resolve: 将状态更改为resolved,并触发绑定的所有成功的回调函数
* reject: 将状态更改为rejected,并触发绑定的所有失败的回调函数
* when: 参数是多个异步或者延迟函数，返回值是一个Promise兑现，当所有函数都执行成功的时候执行该对象的resolve方法，反之执行该对象的reject方法
下面是我的具体实现过程：
var Promise = function() {
this.doneList = [];
this.failList = [];
this.state = 'pending';
};
Promise.prototype = {
constructor: 'Promise',
resolve: function() {
this.state = 'resolved';
var list = this.doneList;
for(var i = 0, len = list.length; i < len; i++) {
list[0].call(this);
list.shift();
}
},
reject: function() {
this.state = 'rejected';
var list = this.failList;
for(var i = 0, len = list.length; i < len; i++){
list[0].call(this);
list.shift();
}
},
done: function(func) {
if(typeof func === 'function') {
this.doneList.push(func);
}
return this;
},
fail: function(func) {
if(typeof func === 'function') {
this.failList.push(func);
}
return this;
},
then: function(doneFn, failFn) {
this.done(doneFn).fail(failFn);
return this;
},
always: function(fn) {
this.done(fn).fail(fn);
return this;
}
};
function when() {
var p = new Promise();
var success = true;
var len = arguments.length;
for(var i = 0; i < len; i++) {
if(!(arguments[i] instanceof Promise)) {
return false;
}
else {
arguments[i].always(function() {
if(this.state != 'resolved'){
success = false;
}
len--;
if(len == 0) {
success ? p.resolve() : p.reject();
}
});
}
}
return p;
}
ImproveNach dem Login kopieren
目前只是实现了Promise的基础功能，但仍然还有无法处理的情况，例如要实现3个或3个以上的异步请求的串行，目前我的Promise没有办法支持new Promise(A).then(B).then(C)这样的形式，jQuery在1.7的版本中为Deferred(Promise)对象实现了pipe函数，可以通过这个函数实现上述功能，代码为$.Deferred(A).pipe(B).then(C)，我尝试去读了jQuery这部分的代码，但是没能读懂，希望有大神能够给一些实现思路
