Shulou(Shulou.com)06/03 Report--

This article focuses on "the usage of advanced feature examples of javascript". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "the usage of advanced feature examples of javascript".

There is no concept of class in js, we can use function to simulate.

Lazy load function

For example, we typically use the following js code to create an ajax:

Function createXHR () {var xhr = null; try {xhr = new XMLHttpRequest (); / FF, Opera, Safari, IE7} catch (e) {handlerError (e); try {xhr = new ActiveXObject ('Msxml2.XMLHTTP');} catch (e) {try {xhr = ActiveXObject (' Microsoft.XMLHTTP');} catch (e) {xhr = null;}} return xhr;} function handlerError (err) {var errXHR = err; / /.}

In modern network technology, ajax technology has long been a bad street, a web page usually contains a lot of ajax--, which leads to frequent creation of xhr, resulting in memory leaks. We can use lazy loading functions to generate xhr dynamically.

/ * inert function (effective for the second time) * / function createXHR () {var xhr = null; if (typeof XMLHttpRequest! = 'undefined') {xhr = new XMLHttpRequest (); createXHR = function () {return new XMLHttpRequest ();}} else {try {xhr = new ActiveXObject (' Msxml2.XMLHTTP'); createXHR = function () {return new ActiveXObject ('Msxml2.XMLHTTP') }} catch (e) {try {xhr = new ActiveXObject ('Microsoft.XMLHTTP'); createXHR = function () {return new ActiveXObject (' Microsoft.XMLHTTP');}} catch (e) {createXHR = function () {return null;} return xhr;}

We call the above method to create xhr, and instead of judging each time when we run it the second time, we return xhr directly.

Corialization of function

Curry of a function transforms a function that accepts multiple parameters into a function that accepts a single parameter (the first parameter of the original function) and returns a new function that accepts the remaining parameters and returns the result. In short, it is the merging of the parameters of two functions. For example:

Function curry (fn) {var args = Array.prototype.slice.call (arguments,1); / / take the parameter of curry and change it into an array [100] console.log (args); / / [100] return function () {var innerArgs = Array.prototype.slice.call (arguments); / / the parameter list of anonymous functions [1m 2] console.log (innerArgs); / / [1m 2] var finalArgs = args.concat (innerArgs) / / merge arrays (parameter merging) console.log (finalArgs); / / [100curry 1d2] return fn.apply (null, finalArgs);}} function add (num1,num2,num3) {return num1 + num2 + num3;} var t = curry (add,100); console.info (t)

Cascade function

Cascading is an object that connects all its related things together. Such as: the following objects.

/ person: hands, legs, mouth function classPerson () {this.hand = "; this.foot ="; this.leg = "";} classPerson.prototype = {setHand:function () {this.hand = 'big hand';}, setLeg:function () {this.leg = 'Brother long legs';}, setMouse:function () {this.mouse = 'cherry mouth';}} var person = new classPerson (); person.setHand (); person.setMouse (); person.setLeg () Console.log (person)

We know that human creation is a whole (it is impossible to make hands, legs, and finally mouths), and what we need now is that once we instantiate the object of human beings, we have everything we need.

Simply modify the above code:

Function classPerson () {this.hand = "; this.foot ="; this.leg =";} classPerson.prototype = {setHand:function () {this.hand = 'big hand'; return this;}, setLeg:function () {this.leg = 'Brother with long legs'; return this;}, setMouse:function () {this.mouse = 'cherry mouth'; return this;}} var person = new classPerson (); person.setHand (). SetMouse (). SetLeg () / / call the function console.log (person)

We added return this to each setter to return the original object (to avoid undefined after the execution of the function with no return value). We can be surprised to find that the commonly used chain call to JQuery is a cascading call:

$('# id'). Show (). Hide (). Show (). Hide (). Show (). Hide ()

Regular expressions in javascript

Generally speaking, / / represents a single-line comment in js, but once we put something in the middle of the slash, for example: / TEST/, it magically becomes regular.

Declaration of pattern string

Var patt1 = new RegExp ('hello'); / / method one var patt2 = / word/; / / method two

Test method

After we get the pattern string (pattern object), we can call this method to match the string and return the specified value (true or false).

Var patt = / my/;var str = 'this is my code...';console.log (patt.test (str)); / / true

Exec method

Similar to the match method of a string, but the two behave differently when the pattern string is specified as global, and no match returns null.

/ hello/.exec ('oh hello world'); / / ["hello"]

Both of the above methods are methods of the string object itself, and the following methods are regular methods in the string.

Match method

Pattern matching. The function prototype is str.mattch (pattern), which returns the matching results as an array.

Console.log ('test 123'.match (/ test/g)); / / [test]

Replace method

String substitution, note: this method generates a new temporary copy of the string. As shown in the figure:

Split method

Splits a string into an array according to the pattern.

Console.log ('Hello world,hello everyone'.split (/\ slots /)); / / ["Hello", "world,hello", "everyone"] console.log (' Hello world,hello everyone'.split (')); / / equivalent to the above method

Regular type

/ pattern/attributes

Attributes is an optional string, and the commonly used properties are "g" (global match), "I" (case insensitive), and "m" (multi-line match)

Console.log ('Hello world,hello everyone'.match (/ hEllO/gi)); / / find hello globally and ignore case ["Hello", "hello"]

In actual development, we can use online regular debugging tools to debug our regularities, in fact, there are a large number of commonly used regularities built into it. If we can not analyze the regular meaning of others in the development, we can use the regular analysis website, which will be displayed in the way of finite automata.

Metacharacters in regularization

Metacharacters in a regular must be escaped:

([{^ $|)? * +.]}

It is important to note that regularities have two forms of creation: literal string and new RegExp (). Because the constructor of RegExp is a string, double escape is required in some cases.

_ _ PROTO__

_ _ proto__ makes inheritance easier:

Function Super () {}; function Sub () {}; Sub.prototype.__proto__ = Super.prototype

This is a very useful feature that eliminates the following tasks:

With the help of intermediate constructors

There is no need to introduce third-party modules for declaration based on prototype inheritance

Accessor

You can call a method to define properties, such as: _ _ defineGetter__, _ _ defineSetter__. For example, define an ago property for the Date object that returns the date interval described in natural language (for example, something happened 3 seconds ago). For example:

Date.prototype.__defineGetter__ ('ago' Function () {var diff = ((Date.now ()-this.getTime ()) / 1000) day_diff = Math.floor (diff / 86400) return day_diff = 0 & & (diff < 60 & & 'just now') | | diff < 120 & &' 1 minute ago' | | diff < 3600 & & Math.floor (diff / 60) + 'minutes ago' | | diff < 7200 & &' 1 hour ago' | diff < 86400 & Math.floor (diff / 3600) ) + 'hours ago' | | day_diff = = 1 & &' Yesterday' | | diff < 7 & & day_diff + 'days ago' | | Math.ceil (day_diff / 7) +' weeks ago'}) var d = new Date ('12 var 1990') console.log (d.ago) so far I believe that you have a deeper understanding of "the example usage of advanced features of javascript", so you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.