JavaScript Modular Development Programming

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.