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

Source: Internet
Author: User
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.

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.