Example of Rule pattern in JavaScript design pattern and javascript Design Pattern

Example of Rule pattern in JavaScript design pattern and javascript Design Pattern

Policy patterns define a series of algorithms, encapsulate them one by one, and make them replaceable.
A small example will show us at a glance.

Recall the animate method in jquery.

Copy codeThe Code is as follows:
$ (Div). animate ({"left: 200px"}, 1000, 'linear '); // Uniform Motion
$ (Div). animate ({"left: 200px"}, 1000, 'cubic '); // cubic easing

These two codes allow div to move 200 pixels to the right within Ms. linear (uniform speed) and cubic (cubic power easing) are encapsulation of a policy mode.

Another example is the dev.qplus.com I wrote in the first half of the year. Many pages will have a form for instant verification. Each member of the form will have different verification rules.

For example, in the Name box, you need to verify non-null, sensitive words, and long characters. Of course, three if else codes can be written, but the scalability and maintainability of codes can be imagined. If there are more elements in the form, there are more verification cases. It is not impossible to add up to hundreds of if else statements.

Therefore, it is better to encapsulate each verification rule in a policy mode. You only need to provide the name of the policy for which authentication is required. Like this:

Copy codeThe Code is as follows:
NameInput. addValidata ({
NotNull: true,
DirtyWords: true,
MaxLength: 30
})
NotNull, maxLength, and other methods only need to return true or false in a uniform manner to indicate whether the verification has passed.
Copy codeThe Code is as follows: validataList = {
NotNull: function (value ){
Return value! = ";
},
MaxLength: function (value, maxLen ){
Return value. length ()> maxLen;
}
}

As you can see, various verification rules are easily modified and replaced. If the product manager recommends changing the length to 60 characters for a day. It takes 0.5 seconds to complete the job.

What is the policy design model?

Strategy Pattern defines a series of algorithms that encapsulate each algorithm and can be replaced with each other, the policy mode allows algorithms to change independently of the customer applications that use them.

Policy mode is a behavior mode that processes different variants of an algorithm. by defining an algorithm interface or encapsulating an algorithm identifier in an abstract policy, a specific subclass of this abstract policy is implemented as a separate algorithm, that is, the specific policy. Rule mode uses multiple classes to differentiate different behaviors, and uses rule mode to avoid exposing complicated internal data structures related to algorithms. When an operation in a class appears in the form of multiple condition branch statements, you can use the policy mode to move the related condition branches into their specific policy classes to replace these condition statements, this reduces the complexity of system processing.

We recommend you to read an authoritative book on design patterns: "software secrets-the point of design patterns" Edited by Zheng AQI. The descriptions are in place, and the instances are easy to understand!

I wish you an early learning of the design model!

Is the design pattern very useful in JavaScript development?

The design pattern is a set of summary of code design experiences that are repeatedly used, known by most people, classified and catalogued.
Since it is a summary of experience, it must be the result of the previous work. It is applicable everywhere, not only in java programming, but now C # follows up with the design pattern in many places.