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