Shulou(Shulou.com)06/01 Report--

This article will explain in detail the example analysis of the strategy pattern in the front end of web. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Policy Mode (Strategy Pattern)

The simple description of the policy pattern is that the object has a behavior, but in different scenarios, the behavior has different implementation algorithms. Package them one by one so that they can replace each other.

Policy mode-verify form username: password: mobile number: submit / / Policy object const strategies = {isNoEmpty: function (value, errorMsg) {if (value =') {return errorMsg }, isNoSpace: function (value, errorMsg) {if (value.trim () = =') {return errorMsg;}}, minLength: function (value, length, errorMsg) {if (value.trim (). Length

Length) {return errorMsg;}}, isMobile: function (value, errorMsg) {if (! / ^ (13 [0-9] | 14 [5 | 7] | 15 [0 | 1 | 2 | 3 | 6 | 7 | 9] | 17 [7] | 18 [0 | 1 | 2 | 3 | 5 | 6 | 8 | 9])\ d {8} $/ .test (value)) {return errorMsg } / / Verification class class Validator {constructor () {this.cache = []} add (dom, rules) {for (let I = 0, rule; rule = rules [iTunes +]) ) {let strategyAry = rule.strategy.split (':') let errorMsg = rule.errorMsg this.cache.push (() = > {let strategy = strategyAry.shift () strategyAry.unshift (dom.value) strategyAry.push (errorMsg) return strategies [strategy] .apply (dom StrategyAry)})}} start () {for (let I = 0, validatorFunc ValidatorFunc = this.cache [iTunes +] ) {let errorMsg = validatorFunc () if (errorMsg) {return errorMsg} / / call code let registerForm = document.getElementById ('registerForm') let validataFunc = function () {let validator = new Validator () validator.add (registerForm.userName [{strategy: 'isNoEmpty', errorMsg:' username cannot be empty'}, {strategy: 'isNoSpace', errorMsg:' not allowed to be named with blank characters'}, {strategy: 'minLength:2' ErrorMsg: 'username length cannot be less than 2 digits'}]) validator.add (registerForm.password, [{strategy: 'minLength:6', errorMsg:' password length cannot be less than 6 digits'}]) validator.add (registerForm.phoneNumber, [{strategy: 'isMobile' ErrorMsg: 'enter the correct mobile phone number format'}]) return validator.start ()} registerForm.onsubmit = function () {let errorMsg = validataFunc () if (errorMsg) {alert (errorMsg) return false}}

Scenario example

If there are many classes in a system, and the only difference between them is their 'behavior', then using the policy pattern can dynamically make an object choose one behavior among many behaviors.

A system needs to choose one of several algorithms dynamically.

Form validation

Advantages

By using the techniques and ideas of combination, delegation and polymorphism, multiple conditional selection statements can be effectively avoided.

It provides perfect support for the open-closed principle and encapsulates the algorithms in a separate strategy, making them easy to switch, understand and expand.

Using composition and delegation to give Context the ability to execute algorithms, which is also a lighter alternative to inheritance

Shortcoming

Many policy classes or policy objects will be added to the program

To use the policy mode, you must know all the strategy and the differences between each strategy so that you can choose an appropriate strategy

This is the end of the article on "sample analysis of policy patterns in the front end of web". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.