Introduction to JavaScript Pattern Factory Pattern Application_Javascript Skills

Factory pattern is also one of the object creation patterns. It is usually implemented in a class or a static method of a class. One way to construct an object is to use the new operator, but using new is precisely for implementation programming, which will cause "coupling" problems and is closely related to the specific class. This makes the code more fragile and lacks flexibility. In projects with complex logic, it is recommended to interface-oriented programming.
Look at the simple factory pattern first

Copy the code 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 in the constructor way is that you do not use this, but construct an empty object every time and then give it Add properties. The way to create an object is not to use new, but to use function calling. This approach is basically used to replace a class (objects with the same properties), while more complex factories can create different types of objects.
The following is an example of a fruit factory

Copy the code 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 class
function Fruit() {}
Fruit.factory = function(type) {
if (!window[type]) {
return
}
var fruit = new window[type]
return fruit
}
// Make different fruits
var banana = Fruit.factory('Banana ')
var apple = Fruit.factory('Apple')
var orange = Fruit.factory('Orange')

There are three fruit classes Banana, Apple, and Orange, one The fruit factory class Fruit can create different fruit objects each time through the static method factory.
The factory pattern is also reflected in the JavaScript native object Object, such as

Copy code The code is as follows:

var obj = Object(),
num = Object(1),
str = Object('s'),
boo = Object(false);

Object is a factory, which will construct different objects according to 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. Each time it is called, it will return an object with methods such as add, remove, fire, etc. Objects with different properties can also be constructed based on parameters such as "once", "memory", etc.

The so-called factory pattern refers to a method that can return an object.
What can we do using this model? Suppose I am not satisfied with the methods in the existing DOM objects and I want to add a custom method called sayHello. We can do this:

Copy code The code is as follows:

function RemouldNodeObj(DomNode){
//First determine whether the parameter passed in is a Dom node
if(typeof DomNode == "object" && DomNode.nodeType == 1){
DomNode.say = function(){
alert("Hello!!");
}
}else{
alert("The parameters you passed in are incorrect!");
}
}

//Call like this:
window.onload = function(){
var oDiv = RemouldNodeObj(document.getElementById("test"));
//With this step, oDiv has a new method say
oDiv.say();
}

After having the above foundation, let's implement some complex functions. We want to generate a simple form by calling js. Look at the code:

Copy the code The code is as follows:

###

Did you see it? Is this calling method very similar to jQuery? If we can solve the cross-browser problem, we can actually make a search bar plug-in!