Learn about the decoration mode and JavaScript design mode of the javascript design mode.

Learn about the decoration mode and JavaScript design mode of the javascript design mode.

Sometimes we don't want a class to be very huge in nature, and it contains many responsibilities at a time. Then we can use the decorative mode.
Decorated with the pattern, you can dynamically add some additional responsibilities to an object without affecting other objects derived from this class.
The decoration mode embeds an object into another object. In fact, this object is encapsulated by another object to form a packaging chain.

1. Add some additional functions to the function without modifying the original function

1. Save the original reference

window.onload = function() {  console.log(1);};var _onload = window.onload || function() {};window.onload = function() {  _onload();  console.log(2);}

Problem:
(1) The intermediate variable must be maintained.
(2) this hijacking may occur.
In the example of window. onload, there is no such annoyance because this also points to window when the common function _ onload is called, just like when window. onload is called.

2. this is hijacked:

Var _ getElementById = document. getElementById; document. getElementById = function (id) {console. log (1); return _ getElementById (id);} return _ getElementById (id); // The error "Uncaught TypeError: Illegal invocation" is reported"

Because _ getElementById is a global function, when calling a global function, this points to window, and this in document. getElementById is expected to point to document.

3. Solve this hijacking:

var _getElementById = document.getElementById;document.getElementById = function(id) {  console.log(1);  return _getElementById.call(document, id);}

Ii. Use AOP to describe functions

/* Run the new Function before the original Function (pre-decoration) */Function. prototype. before = function (beforefn) {var _ self = this; return function () {beforefn. apply (this, arguments); // parameters received by the new function will be passed into the original function return _ self. apply (this, arguments );};};

/* Run the new Function after the original Function (post decoration) */Function. prototype. after = function (afterfn) {var _ self = this; return function () {var ret = _ self. apply (this, arguments); afterfn. apply (this, arguments); return ret ;};};

document.getElementById = document.getElementById.before(function() {  console.log(1);});

3. Avoid contamination of Prototype

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;  };};document.getElementById = before(document.getElementById, function(){  console.log(1);});

Iv. Example-plug-in Form Verification

IntegrationLearning the rule mode of JavaScript Design PatternsIn [Form Verification], used for ajax to submit data verification, the effect is great!

Modify the before Method

Var before = function (fn, beforefn) {return function () {if (beforefn. apply (this, arguments) === false) {// beforefn returns false, return directly, and do not execute the original function return;} return fn. apply (this, arguments );};};

/* Simulate data verification */var validate = function () {if (username = "") {console. log ("Verification Failed! "); Return false;} return true;}/* simulate ajax submission */var formSubmit = function () {console. log (" Submit !!! ");}

Username = 1; formSubmit = before (formSubmit, validate); // submit !!! FormSubmit (); username = ""; formSubmit = before (formSubmit, validate); // Verification Failed! FormSubmit ();

5. decorator mode and Agent Mode

Similarities: both modes describe how to provide indirect references to an object to a certain extent, and their implementations Retain references to another object, and send a request to that object.
Differences:
(1) proxy mode: provides a replacement for the ontology when direct access to the local environment is inconvenient or does not meet the requirements. Define the key functions locally, and the proxy provides or rejects access to the function, or takes some additional steps before accessing the ontology. (It does the same thing as the ontology)
(2) modifier mode: dynamically add behavior to an object. (You cannot determine all functions of an object at the beginning, but add new responsibilities and actions to the object)

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

Articles you may be interested in:

• Introduction to the decorator mode of JavaScript Design Patterns
• In-depth understanding of the JavaScript series (29): Detailed description of the decoration mode in the Design Mode