How to Learn JavaScript design patterns-javascript tips-js tutorial

This article mainly introduces the rule mode in the JavaScript design mode, if you are interested in the JavaScript design pattern, you can refer to separating the unchanged parts and the changed parts as the subject of each design pattern.

• All the way to Rome. We often encounter a variety of solutions to solve one thing, such as compressing files. We can use the zip algorithm or gzip algorithm. It is flexible and diverse, and we can adopt a policy model to solve the problem.

I. Definition

Define a series of algorithms, encapsulate them one by one, and make them replace each other.
A policy-based program consists of at least two parts. The first part is a set of policies that encapsulate specific algorithms and are responsible for specific computing processes. The second part is the environment Context. Context receives the customer's request and then delegates the request to a certain strategy class.

Ii. Example

Calculate the bonus. The performance is 4 times the salary of S, the performance is 3 times the salary of A, and the performance is 2 times the salary of B.

Var strategies = {"S": function (salary) {return salary * 4 ;}, "A": function (salary) {return salary * 3 ;}, "B ": function (salary) {return salary * 2 ;}}; // receives the request var calculateBonus = function (level, salary) {return strategies [level] (salary );}; // test the console. log (calculateBonus ("S", 20000); console. log (calculateBonus ("A", 20000); console. log (calculateBonus ("B", 20000 ));

Iii. Extension: Form Verification

/* Verify the policy object */var validateStrategies = {isEmpty: function (val, errorMsg) {if (! Val) {return errorMsg ;}}, isURL: function (val, errorMsg) {if (! New RegExp ("^ (http: \/| https :\\/\\/)? ([\ W \-] + \\.) + [\ w \-] + (\/[\ w \\-\\. \\/? \\@\% \\! \\&=\+ \\~ \\:\#\\\\\,] *)? $ "). Test (val) {return errorMsg ;}}, isEmail: function (val, errorMsg) {if (! New RegExp ('\ w + (-\ w +) | (\\. \ w +) * \ @ [A-Za-z0-9] + ((\\. |-) [A-Za-z0-9] + )*\\. [A-Za-z0-9] + '). test (val) {return errorMsg ;}, isMaxLength: function (val, length, errorMsg) {if (val. length> length) {return errorMsg ;}, isMinLength: function (val, length, errorMsg) {if (val. length <length) {return errorMsg ;}};/* validator class */var validator = function () {// cache verification policy this. cache = [] ;};/*** Add the policy to be verified * @ param dom the dom element to be verified * @ param rules validation Rule */validator. prototype. add = function (dom, rules) {var self = this; for (var I = 0, rule; rule = rules [I ++];) {(function (rule) {var strategyAry = rule. strategy. split (":"); // ["isMaxLength", "10"] var errorMsg = rule. errorMsg; // "the content length cannot exceed 10" self. cache. push (function () {var strategy = strategyAry. shift (); // "isMaxLength" strategyAry. unshift (dom. value); // ["1 @ qq", "10"] strategyAry. push (errorMsg); // ["1 @ qq", "10", "content length cannot exceed 10"] return validateStrategies [strategy]. apply (dom, strategyAry) ;}) ;}( rule) ;};/* Start verification */validator. prototype. start = function () {for (var I = 0, validateFunc; validateFunc = this. cache [I ++];) {var errorMsg = validateFunc (); if (errorMsg) {return errorMsg ;}}; // TestEmail:Var validatorInstance = new validator (); validatorInstance. add (document. getElementsByName ("email") [0], [{strategy: "isEmpty", errorMsg: "content cannot be blank"}, {strategy: "isMaxLength: 10", errorMsg: "content length cannot exceed 10"}, {strategy: "isEmail", errorMsg: "Incorrect email format"}]); errorMsg = validatorInstance. start ();

I hope this article will help you learn about javascript programming.