国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Home Web Front-end JS Tutorial javascript design pattern - single mode object-oriented learning basics_js object-oriented

javascript design pattern - single mode object-oriented learning basics_js object-oriented

May 16, 2016 pm 06:29 PM
Design Patterns

Singleton mode (singleton)

A singleton is created when the script is loaded. It can organize a series of related variables and methods into a logical unit, and the content in the logical unit is passed through A single variable is used for access;

A single entity is mainly divided into three parts

Entry variables used to access internal information (such as: Sky)
Attributes ( Such as: nickName/age/timeInfo)
Method (such as: sayHello)

Basic structure

Copy Code The code is as follows:

var Sky = {

/*
* Function 1, variable management
*/

nickName: "sky",
age: "26",

/*
* Function 2, initialize variables during loading
* Execute and initialize Sky during the loading process .info
*/

timeInfo: function()
{
var _year = new Date().getFullYear();
return _year;
}(),

/*
* Function three, function management, making your functions no longer look so scattered
*/

sayHello: function()
{
alert("hello, world!");
}

}
//All internal information is accessed through the variable Sky;
alert(Sky.timeInfo);


The following is a more detailed explanation. After reading this article, I believe you should almost understand. There are many experts on the Internet who have written js, and the single mode is very commonly used.

A singleton is an object used to divide a namespace and organize a group of related properties and methods together. If it can be instantiated, it can only be instantiated once.
Single mode is one of the most basic but also most useful modes in JavaScript.
Features:

. Can divide the namespace to eliminate the dangers caused by global variables.
. Use branching technology to encapsulate differences between browsers.
. The code can be organized more integrated, making it easier to read and maintain.

Basic structure of the monomer (correct writing):

Copy code The code is as follows:

/*Basic Singleton*/
var Singleton = {
attribute1: true,
attribute2:10,
method1:function(){}
Copy the code

The code is as follows:

var box = {
width:0,
height:0, getArea:function(){ return this.width*this.height; //Access to objects in js must be explicit, that is, this cannot be omitted }, init:function(w,h){ // width = w; // height = h; This method is equivalent to defining two global variables (variables declared without var are global variables)
// It is not the object width and Assignment of height
//The following is correct
this.width = w;
this.height = h;
}
}//box divides a namespace, in the namespace The variables are only valid in the space


All members and methods in the above monomer are public, that is, they can be changed arbitrarily outside the monomer. So why is it said that the singleton provides a namespace?


Let’s continue:





Copy the code


The code is as follows:
var box = {
width:0, }
}//Width and height in init are not actually single variables
window.onload = function(){
var init = box.getArea();
alert(init );
}


Since the width and height in init are not initialized, an error will be reported. Change it like this:




Copy the code


The code is as follows:

var box = {
width:0,
height:0, getArea:function(){ return width*height; }, init:function(w,h){ width = w; height = h;
}
}
window.onload = function(){
width = 0;
height = 0;
//or box.init(0,0);
var init = box.getArea();
alert(init);
}


I found that it is ok. Since the width and height used by init and getArea are not variables owned by the monomer, but a global variable, we can make random calls outside the monomer without being affected

It will be clearer if we write it like this:

Copy the code The code is as follows:

var box = {
width:0,
height:0,
getArea:function(){
return width*height;//Access to objects in js must be displayed, That is, this cannot be omitted
},
init:function(w,h){
width = w;
height = h;
}
}//The width here , height is not actually a single object
window.onload = function(){
width = 0;
height = 0;
var width = box.getArea();
alert (width);
}

Writing this way will report an error. It can be seen that our above method does not establish a namespace for global variables, and global variables bring us danger. So the top writing is correct, let’s verify it:
Copy the code The code is as follows:

var box = {
width:2,
height:2,
getArea:function(){
return this.width*this.height; // Access to objects in js is required is displayed, that is, this cannot be omitted
},
init:function(w,h){
this.width = w;
this.height = h;
}
}
window.onload = function(){
width = 0;
height = 0;
var width = box.getArea();
alert(width);
}

It can be seen that the width and height in window.onload have no interference, because the singleton has established a namespace for the width and height in the singleton.

Attributes of members:

After discussing the namespace, let’s set the attributes of single variables and methods. People who have studied other languages ????(java, c, c#...) should be very familiar with the public and private of class members.
Although there is no such strict object-oriented (oop) in javascript, we can use closures to package to perform an imitation. After all, it is very bad to set some variables to public.

Copy code The code is as follows:

var circle = (function(){
//pravite member!
var r = 5;
var pi = 3.1416;//Use semicolon afterward
return{//public member
getArea:function(){
return r*r*pi;//Do not add this when accessing private members
}, //Use a comma afterward
//If you want to change the values ??of r and pi, you can only do it by setting a public function
init:function(setR){
r = setR;
}
}
})()
window.onload = function(){
circle.r = 0 ;//Unable to access private members, it is equivalent to creating a public member r for circle
alert(circle.getArea());
circle.init(0);//You can use public utility functions Visited.
alert(circle.getArea());
};

Private variables and methods are read-only, while public variables and methods are readable and writable
Access:
For private members, you can access them directly without any modification in front.
For public access, you need to add "this." in front of it within the single scope, and outside the single scope. "circle." (single name.) should be added in front

Haha, it seems to have some flavor!
. Use branching technology to encapsulate the differences between browsers
Notes:
a Be sure to use closures to achieve instant binding
b Separate each branch with a semicolon Opening
c finally returns the name of the branch
d. When calling, use the method name of the branch with the singleton name;
Copy codeThe code is as follows:

//Use single branching technology to define the XHR (XMLHttpRequest) object, which must be implemented using closures
var XHR = (function(){
//The three branches
var standard = {
cXHR:function(){
return new XMLHttpRequest();
}
};
var activeXNew = {
cXHR:function(){
return new ActiveXObject('Msxml2.XMLHttp');
}
};
var activeXOld = {
cXHR:function(){
return new ActiveXObject('Microsoft.XMLHttp' );
}
};
//To assign (assign) the branch, try each method; return whatever doesn't fail
var testObject;
try{
testObject = standard.cXHR();
return standard;// return this branch if no error was thrown
}catch(e){
try{
testObject = activeXNew.cXHR();
return activeXNew;
}catch(e){
try{
testObject = activeXOld.cXHR();
return activeXOld;
}catch(e){
throw new Error( 'Create the XMLHttpRequestObject failed!');
}
}
}
})();
window.onload = function(){
alert(XHR.cXHR() ; Since I am also a beginner, I don’t have much say. I am not enough to point out and forget to give advice from experts.
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

The difference between design patterns and architectural patterns in Java framework The difference between design patterns and architectural patterns in Java framework Jun 02, 2024 pm 12:59 PM

In the Java framework, the difference between design patterns and architectural patterns is that design patterns define abstract solutions to common problems in software design, focusing on the interaction between classes and objects, such as factory patterns. Architectural patterns define the relationship between system structures and modules, focusing on the organization and interaction of system components, such as layered architecture.

PHP Design Patterns: Test Driven Development in Practice PHP Design Patterns: Test Driven Development in Practice Jun 03, 2024 pm 02:14 PM

TDD is used to write high-quality PHP code. The steps include: writing test cases, describing the expected functionality and making them fail. Write code so that only the test cases pass without excessive optimization or detailed design. After the test cases pass, optimize and refactor the code to improve readability, maintainability, and scalability.

Application of design patterns in Guice framework Application of design patterns in Guice framework Jun 02, 2024 pm 10:49 PM

The Guice framework applies a number of design patterns, including: Singleton pattern: ensuring that a class has only one instance through the @Singleton annotation. Factory method pattern: Create a factory method through the @Provides annotation and obtain the object instance during dependency injection. Strategy mode: Encapsulate the algorithm into different strategy classes and specify the specific strategy through the @Named annotation.

How design patterns deal with code maintenance challenges How design patterns deal with code maintenance challenges May 09, 2024 pm 12:45 PM

Design patterns solve code maintenance challenges by providing reusable and extensible solutions: Observer Pattern: Allows objects to subscribe to events and receive notifications when they occur. Factory Pattern: Provides a centralized way to create objects without relying on concrete classes. Singleton pattern: ensures that a class has only one instance, which is used to create globally accessible objects.

Analysis of the Decorator Pattern in Java Design Patterns Analysis of the Decorator Pattern in Java Design Patterns May 09, 2024 pm 03:12 PM

The decorator pattern is a structural design pattern that allows dynamic addition of object functionality without modifying the original class. It is implemented through the collaboration of abstract components, concrete components, abstract decorators and concrete decorators, and can flexibly expand class functions to meet changing needs. In this example, milk and mocha decorators are added to Espresso for a total price of $2.29, demonstrating the power of the decorator pattern in dynamically modifying the behavior of objects.

The wonderful use of the adapter pattern in Java design patterns The wonderful use of the adapter pattern in Java design patterns May 09, 2024 pm 12:54 PM

The Adapter pattern is a structural design pattern that allows incompatible objects to work together. It converts one interface into another so that the objects can interact smoothly. The object adapter implements the adapter pattern by creating an adapter object containing the adapted object and implementing the target interface. In a practical case, through the adapter mode, the client (such as MediaPlayer) can play advanced format media (such as VLC), although it itself only supports ordinary media formats (such as MP3).

Application of design patterns in Spring MVC framework Application of design patterns in Spring MVC framework Jun 02, 2024 am 10:35 AM

The SpringMVC framework uses the following design patterns: 1. Singleton mode: manages the Spring container; 2. Facade mode: coordinates controller, view and model interaction; 3. Strategy mode: selects a request handler based on the request; 4. Observer mode: publishes and listen for application events. These design patterns enhance the functionality and flexibility of SpringMVC, allowing developers to create efficient and maintainable applications.

What are the advantages and disadvantages of using design patterns in java framework? What are the advantages and disadvantages of using design patterns in java framework? Jun 01, 2024 pm 02:13 PM

The advantages of using design patterns in Java frameworks include: enhanced code readability, maintainability, and scalability. Disadvantages include complexity, performance overhead, and steep learning curve due to overuse. Practical case: Proxy mode is used to lazy load objects. Use design patterns wisely to take advantage of their advantages and minimize their disadvantages.

See all articles