JavaScript design Pattern The first chapter of flexible JavaScript

JavaScript design Pattern The 1th Chapter flexible Language--javascript

The novice programmer receives a task that verifies the form function, needs to verify the user name, the mailbox, the password and so on

* * The content of this article is mostly from the JavaScript design mode, please support the genuine. **

1. Simple Verification Check.js

The code is as follows:

function checkName(){    //验证姓名}function checkEmail(){    //验证邮箱}function checkPassword(){    //验证密码}

This code can be implemented, but 3 global variables are created, which increases the vulnerability of the code. There are probably only these 3 variables in the Check.js file. If you introduce someone else's class library, or your JS file for others to use, it increases the possibility that global variables will be overwritten. Maybe you cover someone else's or maybe someone else overrides your function.

2. Another form of the function

The code is as follows:

var checkName = function(){    //验证姓名}var checkEmail = function(){    //验证邮箱}var checkPassword = function(){    //验证密码}

This is a more variable promotion, but it does not change the problem of creating 3 global variables.

3. Using objects to incorporate variables

The code is as follows:

var CheckObject = {    checkName:function(){        //验证姓名    },    checkEmail:function(){        //验证邮箱    },    checkPassword:function(){        //验证密码    }}

This kind of object incorporation method greatly reduces the problem that the object is overwritten, using CheckObject.checkName() the direct point of the way can.

4. Another form of the object

var CheckObject = function(){}CheckObject.checkName = function(){    //验证姓名}checkObject.CheckEmail = function(){    //验证邮箱}checkObject.checkPassword = function(){    //验证密码}

The two ways of 3 and 4 are problematic, and when someone wants to use the object method you write, it can be a bit of a hassle, because the object cannot be copied, or the object class will new not inherit these methods when it creates new objects with keywords.

As an example:
A colleague wrote an operation to get the user name, B colleague felt the default name "Zhang San" inappropriate, he wanted to change the other. Because there is only one copy of the object B. Any other person may use this as "John Doe" after the modification. This means that it is easy to cover a common method.

//获取用户名var MyMethod = {    getDefaultName:function(){        var defaultName = ‘张三‘;        return defaultName;    },}MyMethod.getDefaultName();//张三//B同事修改了MyMethodMyMethod.getDefaultName = function(){    var defaultName = ‘李四‘;    return defaultName;}MyMethod.getDefaultName();//李四

5. True and False objects

var CheckObject = function(){    return {        checkName:function(){            //验证姓名        },        checkEmail:function(){            //验证邮箱        },        checkPassword:function(){            //验证密码        }    }}

This code simply duplicates the object, and each time the function is called, the previous object is returned, and a completely new object is returned each time someone calls the function. Such as:

var a = CheckObject();a.checkEmail();

In fact, he is not a real way of creating a class, and the object that is created a CheckObject has no relation to the object, and the returned object is itself independent of the CheckObject object.

6. Class

var CheckObject = function(){    this.checkName = function(){        //验证姓名    }    this.checkEmail = function(){        //验证邮箱    }    this.checkPassword = function(){        //验证密码    }}var a = new CheckObject();a.checkEmail();

This can be thought of as a class, and each time a new new object is created with a keyword, the newly created object will replicate the properties on the class, and the this newly created objects will have their own set of methods, but it is expensive to do so, since each time it is created it new will be copied CheckObjectall the methods inside.

7. A test class

var CheckObject = function(){}CheckObject.prototype.checkName = function(){    //验证姓名}CheckObject.prototype.checkEmail = function(){    //验证邮箱}CheckObject.prototype.checkPassword = function(){    //验证密码}

Or

var CheckObject = function(){}CheckObject.prototype = {    constructor:CheckObject,    checkName:function(){        //验证姓名    },    checkEmail:function(){        //验证邮箱    },    checkPassword:function(){        //验证密码    }}

Use them:

var a = new CheckObject();a.checkName();a.checkEmail();a.checkPassword();

When you create an object instance, the objects that are created have one of the methods, because they all rely on prototype prototypes to look for each other, and the methods found are the same, and they are all bound to the CheckObject prototype of the object class.

8. This method can also be used

The above code can be seen multiple times using this time a we can think of link calls, at the end of each method to return the current object.

var CheckObject = function(){}CheckObject.prototype = {    constructor:CheckObject,    checkName:function(){        //验证姓名        return this;    },    checkEmail:function(){        //验证邮箱        return this;    },    checkPassword:function(){        //验证密码        return this;    }}

Use them:

var a = new CheckObject();a.checkName().checkEmail().checkPassword();

9. Ancestors of functions

Imitation prototype.js of the practice for each function to add a detection mailbox method can do so.

Function.prototype.checkEmail = function(){    //验证邮箱}

How to use:

var f = function(){};f.checkEmail();// 或者使用类的方式var f= new Function();f.checkEmial();

The disadvantage of this is that the native object function is contaminated, and the functions created by others are created checkEmail , causing unnecessary overhead. Use this method as follows:

Function.prototype.addMethod = function(name,fn){    this[name] = fn;}

How to use:

var methods = function(){}//或者var methods = new Function();methods.addMethod(‘checkName‘,funciton(){    //验证姓名});methods.addMethod(‘checkEmail‘,funciton(){    //验证邮箱});methods.checkName();methods.checkEmail();

10. Also add chain

Function.prototype.addMethod = function(){    this[name] = fn;    return this;}

This makes it easier to add a method

var methods = new Function();methods.addMethod(‘checkName‘,funciton(){    //验证姓名}).addMethod(‘checkEmail‘,funciton(){    //验证邮箱});

Each method that is added at the same time can also be chain-returned

var methods = new Function();methods.addMethod(‘checkName‘,funciton(){    //验证姓名    return this;}).addMethod(‘checkEmail‘,funciton(){    //验证邮箱    return this;});methods.checkName().checkEmail();

11. Use the class to implement

The above is a function call, the method for the customary class invocation is as follows:

Function.prototype.addMethod = function(){    this.prototype[name] = fn;    return this;}

How to use:

var methods = function(){}:methods.addMethod(‘checkName‘,funciton(){    //验证姓名    return this;}).addMethod(‘checkEmail‘,funciton(){    //验证邮箱    return this;});

Note here. It methods is not possible to use it directly, but to new create a new object by keyword.

var m = new Methods();m.checkEmail();

JavaScript design Pattern The first chapter of flexible JavaScript