JavaScript modular Programming (1): Why use modular programming

Source: Internet
Author: User
Tags script tag

Recently want to learn while the whole of modular programming, then first from why to use modular programming, perhaps you just heard of the modular programming, there is no relationship, this article is about very basic things.

At the beginning of the code, we may only need a JS file, to implement a small function, such as the following:

<!DOCTYPE HTML><HTML>  <Head>    <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />    <title>JavaScript modularity</title>    <styletype= "Text/css">    </style>  </Head>  <Body>    <Script>      functionAdd (A, b) {returna+b; }      varans= [];  for(varI= 0; I< 5; I++) {        vara=Math.random (); varb=Math.random (); varC=Add (A, b);        Console.log (c);      Ans.push (c); }    </Script>  </Body></HTML>

This code initializes the data between the 5 -2~2 and stores it in the ANS array. As the amount of code increases, you will gradually find it cumbersome to write code in a JS file, so we wrote several JS files, such as the code to write the function in a script tag, and the initialization is written in another script tag, as follows:

<!DOCTYPE HTML><HTML>  <Head>    <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />    <title>JavaScript modularity</title>    <styletype= "Text/css">    </style>  </Head>  <Body>    <Script>      functionAdd (A, b) {returna+b; }    </Script>    <Script>      varans= [];  for(varI= 0; I< 5; I++) {        vara=Math.random (); varb=Math.random (); varC=Add (A, b);        Console.log (c);      Ans.push (c); }    </Script>  </Body></HTML>

We write two JS fragments in an HTML file, but usually we do not, we will write them in two JS file and then in the HTML reference, not mentioned here.

Is there any problem with the above code? Generally, the number of global variables in the code is as small as possible for us, but the code above exposes a, B, C, and I four global variables that we do not need, all we need is a successful ANS array to initialize for subsequent code use, That is, the second script fragment we only need a value of the ANS variable, how? A very simple method is to write an auto-execute function, because only the variables in the function are local variables:

<!DOCTYPE HTML><HTML>  <Head>    <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />    <title>JavaScript modularity</title>    <styletype= "Text/css">    </style>  </Head>  <Body>    <Script>      functionAdd (A, b) {returna+b; }    </Script>    <Script>      (function() {Window.ans= [];  for(varI= 0; I< 5; I++) {          vara=Math.random (); varb=Math.random (); varC=Add (A, b);        Ans.push (c);    }      }()); </Script>    <Script>Console.log (a);//ErrorConsole.log (b);//ErrorConsole.log (c);//ErrorConsole.log (i);//undefined       for(varI= 0; I< 5; I++) Console.log (Ans[i])</Script>  </Body></HTML>

The code in the second script tag is a simple modular mechanism, and the difference is that the actual production usually returns the desired value directly or exposes it to the interface, rather than the way the global variable is used. We see a modular way of writing, the world seems to be a lot cleaner, we just need to provide the necessary variables, not to tube other things.

Simply understand why you should use modularity, then the second one will learn some of the classic ways to do it in a modular format ~

JavaScript modular Programming (1): Why use modular programming

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.