Factory application in JavaScript mode _ javascript skills

Source: Internet
Author: User
The factory mode is also one of the object creation modes. It is usually implemented in static methods of classes or classes. This article will introduce in detail the factory mode of the JavaScript factory mode is also one of the object creation modes, it is usually implemented in static methods of classes or classes. One way to construct an object is to use the new operator. However, when using the new operator, it is intended to implement programming, which will cause the "coupling" problem, which is closely related to the specific class. As a result, the code is more fragile and less elastic. In complex logic projects, we recommend that you use interface-oriented programming.
First look at the simple factory Model

The Code is as follows:


Person (name, age ){
Var obj = {}
Obj. name = name
Obj. age = age
Return obj
}
Var p1 = Person ('jack', 25)
Var p2 = Person ('lily', 22)


The difference between writing a class with the constructor method is that it does not use this, but constructs an empty object every time and adds attributes to it. You can create an object by calling a function instead of using new. This method is basically used to replace a class (object with the same attribute), while complicated factories can create different types of objects.
The following is an example of a fruit factory.

The Code is as follows:


Function Banana (){
This. price = '$1.5'
}
Function Apple (){
This. price = '$1.2'
}
Function Orange (){
This. price = '$2.2'
}
// Static factory type
Function Fruit (){}
Fruit. factory = function (type ){
If (! Window [type]) {
Return
}
Var fruit = new window [type]
Return fruit
}
// Make different fruits
Var banana = Fruit. factory ('bana ')
Var apple = Fruit. factory ('apple ')
Var orange = Fruit. factory ('Orange ')


There are three Fruit class Banana, Apple, Orange, and a Fruit factory class Fruit. Different Fruit class objects can be created each time using the static factory method.
The factory mode is also reflected in JavaScript native Object objects, such

The Code is as follows:


Var obj = Object (),
Num = Object (1 ),
Str = Object ('s '),
Boo = Object (false );


An Object is a factory. Different objects are constructed based on different parameters. Obj is an empty object, num is a Number type object, str is a String type object, and boo is a Boolean type object.
JQuery. Callbacks is also a factory. Every time you call it, it returns an object with methods such as add, remove, and fire. You can also construct objects of different properties based on parameters such as "once" and "memory.

The so-called factory mode refers to the method that can return an object.
What can we do with this model? Assume that I do not meet the existing methods in the DOM object. I want to add a custom method named sayHello. We can do this:

The Code is as follows:


Function RemouldNodeObj (DomNode ){
// First, determine whether the passed parameter is a Dom node.
If (typeof DomNode = "object" & DomNode. nodeType = 1 ){
DomNode. say = function (){
Alert ("Hello !! ");
}
} Else {
Alert ("the parameter you passed in is incorrect! ");
}
}

// Call this method as follows:
Window. onload = function (){
Var oDiv = RemouldNodeObj (document. getElementById ("test "));
// Through this step, oDiv has a new method of say
ODiv. say ();
}


With the above foundation, we can implement the complex functions of points. We need to generate a simple form as long as we call Javascript. See the Code:

The Code is as follows:




Factory mode of JavaScript

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.