Home > Developer > JavaScript
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
