In traditional object-oriented languages, adding functions to objects often uses inheritance, but the inheritance method will bring problems: when the parent class changes, all its subclasses will change accordingly.
When a JavaScript script is running, adding behavior in an object (or on its prototype) affects all instances of that object.
The decorator is an alternative to implementing inheritance, which adds new features through the form of overloaded methods. This pattern can add its own behavior before or after the decorator to achieve a specific purpose.
The decorator pattern is a way to dynamically add more functions to existing functions. Each function to be decorated is placed in a separate function, and then use this function to wrap the existing function object to be decorated. Therefore, when special behavior needs to be performed, the calling code can selectively and sequentially use the decorating function to wrap the object as needed. The advantage is that it distinguishes the core responsibilities of the class (function) from the decorative function.
We can define tool functions as follows:
Function.prototype.before = function (beforeFn) { var self = this; //Save the reference of the original function return function () { //Return the proxy function that contains the new function and the original function beforeFn.apply(this,arguments); //Execute the new function and ensure that this is not hijacked return self.apply(this,arguments); //Execute the original function and return the execution result of the original function and ensure 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 return; }};The parameters beforeFn and afterFn here are new functions (add decoration) to extend new functions for the original function. The only difference between them is the different execution order. If you don't want to contaminate the prototype of the Function, 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: Put a parameter in the HTTP request to prevent CSRF attacks
var ajax = function (type, url, param) { console.log(param); //Send ajax request code a little...};var beforeFn = function (type, url, param) { param.Token = 'Token';};ajax = ajax.before(beforeFn);ajax('get','http://...com/userinfo',{name:'SuFa'});//{ name: 'SuFa', Token: 'Token' }By dynamically decorating the token parameters to the ajax function, instead of directly modifying the parameters on the original function, the ajax function is still a pure function, improving its reusability, and it can be directly used in other projects without any modifications.
Example: Form verification (separate the verification input from the form submitted code, and then dynamically decorate the verification input function before the form submitted. In this way, we can write the verification input part into a plug-in form for use in different projects)
//Verify the input function var validata = function () { if(username.value === ''){ alert('Username cannot be empty'); return false; } if(password.value === ''){ alert('Password cannot be empty'); 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();};References: "JavaScript Pattern" "JavaScript Design Pattern and Development Practice"
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.