On the realization _javascript skill of object and promise object in JavaScript

Everything in JavaScript is an object: A string, a value, an array, a function. The following small series for everyone to collect and organize some JavaScript objects and promise object implementation. The specific contents are as follows:

The objects are everywhere.

Window object

Introduction to Common properties and methods

Location

Contains the URL of the page, and if this property is changed, the browser accesses the new URL

Status

Contains a string that will be displayed in the browser state. Generally in the bottom left corner of the browser

OnLoad

Contains functions that need to be called after the page has been fully loaded

Document

Include Dom

Alert Method:

Display a reminder

Prompt method:

Similar to alert, but will get information from the user

Open

Open a new window

Close

Close window

SetTimeout:

Call a handler function after the specified time interval

Setlnterval

Calls a handler function repeatedly at a specified time interval

Talk about Window.onload.

By assigning a function to the OnLoad property of the window, you can ensure that the code does not run until the page loads and the DOM is fully established.

Functions to change the DOM

 Window.onload = Functions () {
   //code 
 here}
 //function is an anonymous function assigned to the onload

The reason we don't say window.inload = init () is because we're not calling a function, but using its value.

Assigns the value of a function to the Inload property of the Window object, allowing it to execute after the page has finished loading.

There are two ways to create a window.onload handler-----use the name of the function and use the anonymous function.

These two methods basically do the same thing, but if the functions assigned to window.onload are used elsewhere, select the use of the function name

Document Object

Introduction to Common properties and methods

Domain

The domain of the server that provides the document, such as kelion.com.

Title

The title of the document can be obtained by document.title

Url:

The URL of the document

getElementById Method:

Get this element based on the element ID

getElementsByTagName,

Getelementsbyclassname:

These two methods are similar to the previous one, except that they use tags and classes to get the elements

CreateElement:

Create a new element for inclusion in the DOM

Talk about createelement.

 Create <li> element,
 var li = document.createelement ("li"); 
 Assign a value to the element you just created
 li.innerhtml = "Songname";
 Get <ul> element
 var ul = document.getElementById ("playlist")
 //Add <li> element to ul
 Ul.appendchild (li )

Note: The LI element is always independent of the DOM before the 8th line of code

Element Object

Introduction to Common Properties and methods:

InnerHTML:

Contains the contents of an element

Childelementcount:

Save the number of elements

FirstChild

First child element

AppendChild Method:

InsertBefore Method:

Used to insert elements as child elements of an element

GetAttribute method
SetAttribute method

The user two methods are used to set and get attributes in the element: "src", "id", "class", and so on.

Finally, look at the button object.

The button object has a frequently used attribute:

OnClick (for monitoring whether a button is pressed).

var button = document.getElementById ("button"); button is just a variable name, can be button1,button2 and so on, but essentially a button
Button.onclick = Handlebuttonclick;

PS: On the realization of promise object in JavaScript

Many people who do the front end should have heard of promise (or deferred) objects, today I will tell about my understanding of promise

What?

Promise is one of the COMMONJS specifications, with resolve, reject, done, fail, then and other methods, can help us control the flow of code, to avoid the multi-level nesting of functions. Now asynchronous is becoming more and more important in web development, for developers, this non-linear execution of the programming will make the developers feel difficult to control, and promise can let us better control the execution process of the code, jquery and other popular JS library has achieved this object, ES6 to be released at the end of the year will also realize promise

Why

Imagine a scenario where two asynchronous requests, and the second requires the first successful data, then our code can write

  Ajax ({
    url:url1,
    success:function (data) {
      ajax ({
        url:url2,
        data:data,
        success:function ( ) {
        }
      });
    }
  });

If you continue to do the next step in the callback function, the number of nested layers will be more and more. We can make appropriate improvements and write the callback function outside.

 function A () {
    ajax ({
      url:url1,
      success:function (data) {
        B (data);
      }
    });
  function B (data) {
    ajax ({
      url:url2,
      success:function (data) {
        ...}}}
    );
  

Even if this is rewritten, the code is not intuitive enough, but if you have a Promise object, the code can be written very clearly, at a glance, please see

New Promise (A). Done (B);

So function B doesn't have to be written in a callback.

How

The current ES standard has not yet supported promise objects, then we will do their own, and ample. The idea is roughly this, using 2 arrays (Donelist and faillist) to store the callback function queues when successful and the callback queues when they fail
* State: Current execution status, with pending, resolved, rejected3 values
* Done: Add a successful callback function to the Donelist
* Fail: Add a failed callback function to the Faillist
* Then: Add callback functions to Donelist and faillist respectively
* Always: Add a callback function that will be invoked regardless of success or failure
* Resolve: Change the state to resolved and trigger all successful callback functions for the binding
* Reject: Change the state to rejected and trigger all failed callback functions for the binding
* When: parameter is a plurality of asynchronous or delay functions, the return value is a promise cash, when all functions are executed successfully executes the Resolve method of the object, and vice versa The Reject method of the object

Here is my specific implementation process:

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 to this;
    }, Fail:function (func) {if (typeof func = = ' function ') {This.failList.push (func);
  return to 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; } Improve

Currently only implements Promise's basic functionality, but there are still cases that cannot be handled, such as to implement serial of 3 or more asynchronous requests, and currently my Promise has no way to support new Promise (A). Then (B). Then (C) in such a form, jquery implements the pipe function for the deferred (Promise) object in version 1.7, which can be implemented using this function, and the code is $. Deferred (A). Pipe (B). Then (C), I tried to read the jquery part of the code, but failed to read, I hope that the great God can give some ideas to realize