JavaScript design pattern encapsulation and information hiding (top) _javascript tips

Source: Internet
Author: User
Tags class definition closure
This article is divided into two parts, the upper part of the basic mode (fundamental patterns): Full exposure method, underline marking method and the use of closures, the lower level of advanced mode (Advanced patterns), how to implement static methods and properties, constants and other knowledge points.
Encapsulation is an object-oriented language is very basic and useful features, although JavaScript can also be called object-oriented language, but his support for encapsulation is not very good, unlike other languages, as long as the use of private, protected can be achieved. But that's not to say there's no way out, so I'll explain how to implement encapsulation in JavaScript.
(basic patterns),There are three main ways: complete exposure method, underline marking method and use closure. (Closure is a very important and difficult concept, interested friends can go to the Internet to find information, I blog also reproduced in other people's articles).
Here we take the book class as an example and need to create and initialize the book class.
Copy Code code as follows:

Book (ISBN, title, author)
var thehobbit = new book (' 0-395-07122-4 ', ' The Hobbit ', ' J. R. Tolkien ');
Thehobbit.display (); Outputs the data by creating and populating as HTML element.

1. Complete Exposure Method:
The book class can be created using the most traditional constructor methods,
Copy Code code as follows:

var book = function (ISBN, title, author) {
if (!THIS.CHECKISBN (ISBN)) throw new Error (' Book:invalid ISBN. ');
THIS.ISBN = ISBN;
Code in | | The role is if title no value, will be ' no title specified ' assigned to This.title. This approach works well and can be used in your own code.
this.title = Title | | ' No title specified ';
This.author = Author | | ' No author specified ';
}
Book.prototype = {
Verifying the ISBN function
Checkisbn:function (ISBN) {
...
},
Get ISBN
Getisbn:function () {
return THIS.ISBN;
},
Set ISBN
Setisbn:function (ISBN) {
if (!THIS.CHECKISBN (ISBN)) throw new Error (' Book:invalid ISBN. ');
THIS.ISBN = ISBN;
},
Get title
Gettitle:function () {
return this.title;
},
Set Title
Settitle:function (title) {
this.title = Title | | ' No title specified ';
},
Get author
Getauthor:function () {
return this.author;
},
Set author
Setauthor:function (author) {
This.author = Author | | ' No author specified ';
},
Display function
Display:function () {
...
}
};

The code is a bit much, I'll explain it here briefly. Creating classes and C#,java in JavaScript is a bit different, C#,java will wrap all the methods and attributes in a class file, such as
Copy Code code as follows:

public class book ()
{
private string ISBN;
public string ISBN
{
Set
{
This.isbn=value;
}
Get
{
return THIS.ISBN;
}
}
...
private bool CHECKISBN (String ISDN)
{
......
}
......
public void Display ()
{
......
}
}

JavaScript can also be used in this way, but it is recommended that you use the attribute defined to the class definition function (or constructor) that I use above, and the method is defined in the prototype object, which is better for the reason that you can go to Google.
The above JS code to achieve the function is to define a book class, the class contains three private variables (or called attributes) Isbn,title,author, a private method CHECKISBN, several public methods Getisdn,setisdn,...display. The idea is good, but the reality is brutal, in fact those private properties or methods are not at all private. For example, THEHOBBIT.ISBN = ' 978-0261103283 ' You can assign a value to ISBN in this way, without error and absolutely successful. The reason is that JavaScript has no private way of privatizing a particular object. In addition, this implementation is also confusing when it is used, what attributes and methods do the creator of the class want to expose? The first method of improvement is described below, with the underline notation.
2. Underline marking Method:
Copy Code code as follows:

var book = function (ISBN, title, author) {
Constructor code.
THIS.SETISBN (ISBN);
This.settitle (title);
This.setauthor (author);
}
Book.prototype = {
Verifying the ISBN function
_checkisbn:function (ISBN) {
...
},
Get ISBN
Getisbn:function () {
return THIS._ISBN;
},
Set ISBN
Setisbn:function (ISBN) {
if (!THIS._CHECKISBN (ISBN)) throw new Error (' Book:invalid ISBN. ');
THIS._ISBN = ISBN;
},
...
Display function
Display:function () {
...
}
};

In fact, all of the properties or methods that want to implement private are underlined _, no other action. This approach does not achieve real privatization, THEHOBBIT._ISBN = ' 978-0261103283 '; So the success of this operation, the most important thing is to tell the class of users, the author intended to expose which objects, do not want to expose which. But the author does not control whether the user is following the author's ideas.
There is no way to achieve real privatization, the answer is yes, is the use of closures.
3. Use closures:
JavaScript is able to implement real encapsulation, and his unique function scope, function support internal functions, and closures are inseparable. You can go online to collect relevant knowledge to deepen understanding.
The first thing to say here is the function scope, in JavaScript, if a variable is defined inside a function, then there is no way to access the function outside. In fact, implementing a private property or method in JavaScript is taking advantage of this particular attribute. Example:
Copy Code code as follows:

function foo () {
var a = 10;
function Bar () {
A *= 2;
}
Bar ();
return A;
}

In the example above, function foo internally defines the variable A and method bar, and cannot access a and bar outside of Foo, but because both a and bar are defined inside Foo, bar is accessible to a. Then there is no way to access to bar outside Foo, the answer is yes, is the use of closures.
Copy Code code as follows:

function foo () {
var a = 10;
function Bar () {
A *= 2;
return A;
}
return bar;
}
var baz = foo (); Baz is now a reference to function bar.
Baz (); Returns 20.
Baz (); Returns 40.
Baz (); Returns 80.
var blat = foo (); Blat is another reference to bar.
Blat (); Returns because a new copy of A is being used.

This is where the JavaScript functions mentioned earlier support intrinsic functions. The internal function bar can access the private variable A, and function Foo throws the internal function bar to the Baz,baz to access the internal variable A, which implements the closure. Everyone can see it, so in fact, the implementation of the private variables and methods. Back to the book example in front of us, implemented as follows:
Copy Code code as follows:

var book = function (NEWISBN, Newtitle, Newauthor) {
Implements publication
Private attributes.
var ISBN, title, author;
Private method.
Function Checkisbn (ISBN) {
...
}
Privileged methods.
THIS.GETISBN = function () {
return ISBN;
};
THIS.SETISBN = function (NEWISBN) {
if (!CHECKISBN (NEWISBN)) throw new Error (' Book:invalid ISBN. ');
ISBN = NEWISBN;
};
This.gettitle = function () {
return title;
};
This.settitle = function (newtitle) {
title = Newtitle | | ' No title specified ';
};
This.getauthor = function () {
return author;
};
This.setauthor = function (Newauthor) {
Author = Newauthor | | ' No author specified ';
};
Constructor code.
THIS.SETISBN (NEWISBN);
This.settitle (Newtitle);
This.setauthor (Newauthor);
};
Public, non-privileged methods.
Book.prototype = {
Display:function () {
...
}
};

The above code realized the ISBN, title, author and Checkisbn privatization, outside is decided not directly to access. If you want to access ISBN, title, author only through the object-level method Gettitle,settitle .... For example, to assign value to ISBN, can only use THEHOBBIT.SETISBN = ' 978-0261103283 ', if you still use THEHOBBIT._ISBN = ' 978-0261103283 '; Sorry to give an error.

Well, today's content is here, I hope to help.
Author: Next stop

Related Article

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.