Some of the syntax for JS components

Source: Internet
Author: User

Today, I looked at Rank's JavaScript Script control topic, suddenly want to summarize some of the methods of writing JS components, or some different people's different coding style.

Today, I looked at Rank's JavaScript Script control topic, suddenly want to summarize some of the methods of writing JS components, or some different people's different coding style.

First look at the wording of the prototype:

Copy the Code code as follows:


var Class = {
Create:function () {
return function () {this.init.apply (this, arguments);}
}
}
var A = Class.create ();
A.prototype = {
Init:function (msg) {
this.msg = msg;
},
Fn:function () {
alert (this.msg);
}
}
var a = new A ("mymsg");
A.fn ();


If you don't like the whole bunch of class.create, you can do the same thing:

Copy the Code code as follows:


function A () {}//var a = function () {}
A.prototype = {
Init:function (msg) {
this.msg = msg;
},
Fn:function () {
alert (this.msg);
}
}
var a = new A ();
A.init ("mymsg");
A.fn ();


Of course, the initialization of this.msg can also be put to function A (msg) {this.msg=msg;} In In short you will find that such calls are cumbersome and the parameters are fixed to correspond well.
If you do not want to make a lot of class.create, and do not want to call inconvenient, then the prototype in the var Class = {...} and var A = Class.create (); Merge together. Get:

Copy the Code code as follows:


function A () {
This.init.apply (this, arguments);
}
A.prototype = {
Init:function (msg) {
this.msg = msg;
},
Fn:function () {
alert (this.msg);
}
}
var a = new A ("mymsg");
A.fn ();


It looks a lot cleaner, but if you have a lot of components in your library, then each component has to be written once this.init.apply (this, arguments); If you use Class.create, just write a class, and then each component executes the next class.create (). Of course, each component is written once this.init.apply (this, arguments); there is nothing bad about it, or to see a person's liking. Another way to write the prototype method is to fit together or separate to write is a person's preference, out of the packaging angle, the unity of good, but the separate sometimes more clear. For example A.prototype.init=function (msg) {...} A.prototype.fn=function () {...}

And then someone likes to write components like this:

Copy the Code code as follows:


var A = function (msg) {
this.msg = msg;
var _this = this;
var privateFn1 = function () {
alert (_this.msg);
}
var privateFn2 = function () {
alert (_this.msg);
}
return {fn1:privatefn1, fn2:privatefn2};
}
var a = new A ("mymsg");
A.fn1 ();


This way, you must put the object of the a construct into the temporary variable _this Oh, because at run time, PrivateFn1 's function body This is actually {fn1:...,fn2: ...} Such an anonymous object, you can use This.hasownproperty ("FN1") to test. This is a thing that makes sense at run time. In addition to this method, each object will have a copy of PrivateFn1 and PRIVATEFN2, which is not very good.


Some of the syntax for JS components

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.