JavaScript Modular Development Programming

As the site continues to iterate, the JS code is getting more and more, so the problem comes

• The code is a bit messy
• Naming conflicts
• File dependencies more complicated

In order to solve these problems, modular development has emerged

1. A simple demo, maintenance and expansion module

Maintenance and expansion of modules must abide by a convention: open and close principle

Open to add, closed for modification

<! DOCTYPE html>/** * Isolate private variables using function scope mechanisms through anonymous self-executing functions*/  varCalculator = (function() {    //for _count, if you do not pass the return, the external is inaccessible and cannot be modified    var_count = 10; functionAdd (x, y) {returnParsefloat (x) +parsefloat (y);    }; functionsubstract (x, y) {returnparsefloat (x)-parsefloat (y);    }; functionmultiply (x, y) {returnparsefloat (x) *parsefloat (y);    }; functiondivide (x, y) {returnparsefloat (x)/parsefloat (y);    }; return{add:add, substract:substract, multiply:multiply, divide:divide};  })(); varCalculator = (function(CAL) {Cal.mod=function(x, y) {returnX%y;    }; returnCal; }) (Window.calculator|| {}); //take a look at the global there is no Calculator the object, if any, directly use the object can be  //if not, give a default empty object, a more robust approach, higher fault tolerance, never trust the user's input    varOX = document.getElementById (' x '); varOY = document.getElementById (' y '); varoopt = document.getElementById (' opt '); varOBTN = document.getElementById (' btn ')); varOresult = document.getElementById (' result '); Obtn.addeventlistener (' Click ',function(e) {varx =OX.value.trim (); vary =OY.value.trim (); varopt =Oopt.value; varresult = 0; Switch(opt) { Case' 0 ': Result=calculator.add (x, y);  Break;  Case' 1 ': Result=calculator.substract (x, y);  Break;  Case' 2 ': Result=calculator.multiply (x, y);  Break;  Case' 3 ': Result=calculator.divide (x, y);  Break;  Case' 4 ': Result=calculator.mod (x, y);  Break; } oresult.value=result;  }); </script></body>
2, third-party package dependency resolution

Do not use third-party dependencies directly inside the module, because the dependencies between modules and modules are not obvious enough, preferably by addressing third-party dependencies in the form of dependency injection
<! DOCTYPE html>module-dependent issues1Manual mode loading: inconvenient2. Module load Order: Error may occur--<script src= ". /js/jquery-1.11.3.js "></script> <script>/** * Isolate private variables using function scope mechanisms through anonymous self-calling functions*/  varCalculator = (function() {    //for _count, if you do not pass the return, the external is inaccessible and cannot be modified    var_count = 10; functionAdd (x, y) {returnParsefloat (x) +parsefloat (y);    }; functionsubstract (x, y) {returnparsefloat (x)-parsefloat (y);    }; functionmultiply (x, y) {returnparsefloat (x) *parsefloat (y);    }; functiondivide (x, y) {returnparsefloat (x)/parsefloat (y);    }; return{add:add, substract:substract, multiply:multiply, divide:divide};  })(); varCalculator = (function(cal,$) {Cal.changecolor=function() {      $(' #x '). CSS (' backgroundcolor ', ' Red '); $(' #y '). CSS (' backgroundcolor ', ' green ');    }; returnCal; //do not use $ or other third-party packages directly, be sure to inject the dependencies through the parameters, and then use the injected properties internally    //Benefits:    //1. Dependency becomes obvious and facilitates the reading of code    //2. Improved performance: Reduced scope lookup}) (Window.calculator | |{}, window.$); varOX = document.getElementById (' x '); varOY = document.getElementById (' y '); varoopt = document.getElementById (' opt '); varOBTN = document.getElementById (' btn ')); varOresult = document.getElementById (' result '); Obtn.addeventlistener (' Click ',function(e) {calculator.changecolor (); varx =OX.value.trim (); vary =OY.value.trim (); varopt =Oopt.value; varresult = 0; Switch(opt) { Case' 0 ': Result=calculator.add (x, y);  Break;  Case' 1 ': Result=calculator.substract (x, y);  Break;  Case' 2 ': Result=calculator.multiply (x, y);  Break;  Case' 3 ': Result=calculator.divide (x, y);  Break;  Case' 4 ': Result=calculator.mod (x, y);  Break; } oresult.value=result;  }); </script></body>
A summary of modular development:
The biggest problem, namely the norm problem, especially in the multi-person collaborative development process, therefore in the multi-person collaborative development process, must pay attention to the code style unification.
In order to solve the modular specification problem, there are third-party libraries, based on the AMD specification Require.js and CMD-based sea.js, specific use methods, reference their documentation, as for the difference between the AMD and CMD specifications can refer to the following blog
Http://www.cnblogs.com/dojo-lzz/p/4707725.html
Http://blog.chinaunix.net/uid-26672038-id-4112229.html

JavaScript Modular Development Programming