JavaScript annotator Mode

This article helps you easily master the JavaScript annotator mode and tell you what the js annotator mode is. If you are interested, refer to the traditional object-oriented language, the method of inheritance is often used to add functions to objects, but the method of inheritance brings about a problem: when the parent class changes, all its child classes will change accordingly.

When a JavaScript script is run, adding behavior to an object (or its prototype) will affect all instances of the object,

The decorator is an alternative to implement inheritance. It adds new features in the form of a reload method, which can be placed before or after the decorator) add your own behaviors for specific purposes.

The modifier mode dynamically adds more functions to existing functions. Each function to be decorated is placed in a separate function, then, use this function to wrap the existing function objects to be decorated. Therefore, when special behavior is required, you can use the decoration function to wrap objects selectively and sequentially as needed. The advantage is that the core responsibilities of classes (functions) are separated from the functional area.

You can define tool functions as follows:

Function. prototype. before = function (beforeFn) {var self = this; // Save the original function reference return function () {// return the proxy function beforeFn that contains the new function and the original function. apply (this, arguments); // execute the new function and ensure that this is not hijacked return self. apply (this, arguments); // executes the original Function, returns the execution result of the original Function, and ensures that this is not hijacked}; Function. prototype. after = function (afterFn) {var self = this; return function () {var ret = self. apply (this, arguments); afterFn. apply (this, arguments); return ret ;}};

Here, the beforeFn and afterFn parameters are the new functions (Add decoration) to expand new functions for the original function. The only difference between them is the execution order. If you do not want to pollute the Function prototype, you can use the following method:

var before = function (fn, beforeFn) {  return function () {    beforeFn.apply(this,arguments);    return fn.apply(this,arguments);  }};var after = function (fn, afterFn) {  return function () {    var ret = fn.apply(this,arguments);    afterFn.apply(this,arguments);    return ret;  }};

Example: Add a parameter to an HTTP request to prevent CSRF attacks

Var ajax = function (type, url, param) {console. log (param); // code for sending an ajax request ...}; var beforeFn = function (type, url, param) {param. token = 'Token';}; ajax = ajax. before (beforeFn); ajax ('get', 'HTTP: // ..com/userinfo', Region name:'sufa'}); // {name: 'sufa ', Token: 'Token '}

By dynamically decorating the Token parameter for ajax functions, instead of directly modifying the parameter on the original function, it ensures that ajax functions are still pure functions and improve their reusability, it can be directly used in other projects without any modifications.

Example: Form Verification (separate the verification input from the Code submitted by the form, and dynamically describe the verification input function before the form is submitted. As a result, we can write the verification input part as a plug-in for different projects)

// Verify the input function var validata = function () {if (username. value = '') {alert ('user name cannot be blank '); return false;} if (password. value = '') {alert ('password cannot be blank '); return false ;}}; // form submission function var formSubmit = function () {var param = {username: username. value, password: password. value}; ajax ('HTTP: // xxx.com/login', PARAM) ;}; formSubmit = formSubmit. before (validata); submitBtn. onclick = function () {formSubmit ();};

The above is all the content of this article. I hope it will help you learn and support PHP.

For more articles about the JavaScript annotator mode, refer to the PHP Chinese website!