"JavaScript programming essence" Reading Notes-Chapter 7: Modularization

Module 7.1

JS itself does not actually have the concept of a class. Therefore, JS writing in general is arbitrary in a global environment. Of course, this is a general practice for beginners. In this case, the code is messy, and many problems such as function call errors and variable redefinition may occur. modularization is required to solve the problem. Put the variables or functions associated with a certain degree in a 'location '. The 'local' here can be a function, a JS file, or a folder. In short, let the code be separated and don't get stuck together.

Let's start with the simplest example, for example, the following two independent functions:

  function forEachIn(object,action){        for(var property in object){            if(Object.prototype.hasOwnProperty.call(object,property)){                action(property,object[property]);            }        }  }  function forEach(array,action){         for(var i = 0; i<array.length; i++){              action(array[i]);         } }

The above two are typical independent functions that we will often use, but we feel that there is no dependency on our JS files. If such a function is defined in JS, it will not only increase the labor volume by writing duplicate code, but also make the original code messy. The best way is to put all the code in a separate file and then reference it.

In addition, file modularization refers to writing different modules into different files. Middle (this is your application site ). Then, the two scripts introduced can access each other's content.

The code above contains three areas for defining functions. 1. defined in A. JS, 2. defined in B. JS, 3. defined in the current <SCRIPT> </SCRIPT> label.AndScripts in these three regions can access each other.
7.2 module form
When variables are defined in a global environmentNamespace pollution. Js will not report errors for repeatedly Defined variables, so you should be more cautious when dealing with global variables, and try not to do so. The following code encapsulates a module:
// Common Code Writing Method var names = ["Jan", "FEB", "Mar", "APR", "may", "Jun", "Jul ", "Aug", "Sep", "Oct", "Nov", "dec"]; function getmonthname (number) {If (arguments. length> 0) {If (number> = 1) return Names [number-1];} else {return "have no this month" ;}} function getmonthnumber (name) {for (VAR I = 0; I <names. length; I ++) {If (Names [I] = Name) return I + 1 ;}// -------------------------------------------------------- // Ames global variables are encapsulated to expose calls of only two functions. Function buildmonthnamemodule () {var names = ["Jan", "FEB", "Mar", "APR ", "may", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "dec"]; function getmonthname (number) {If (arguments. length> 0) {If (number> = 1) return Names [number-1];} else {return "have no this month" ;}} function getmonthnumber (name) {for (VAR I = 0; I <names. length; I ++) {If (Names [I] = Name) return I + 1 ;}} window. getmo Nthname = getmonthname; window. getmonthnumber = getmonthnumber;} function getmonthname () {return "zhangran";} buildmonthnamemodule (); // bind it to the window object alert (getmonthname ()); // after this operation, the same name function in buildmonthnamemodule () will be called first.
7.3 Interface Design
There are a lot of concepts in the book.
However, there is still an example in the book that the code is well written. I didn't respond to it at the moment. In JS, the function is a value. This is not enough to understand. The Code is as follows:
// This function is used to find the elements in the array that comply with certain rules. Of course, the 'rules' are dynamically specified. If not given, the default value is "="
Function positionof (element, array, compare, start, end) {If (START = NULL) Start = 0; If (END = NULL) End = array. length; For (; Start <end; Start ++) {var current = array [start]; If (compare? Compare (element, current): Element = Current) // return start ;}}
7.4js Library
Lists several common JS libraries. Jquery is the most commonly used method. There is no doubt that many other libraries are based on jquery. In addition, let's take a look at the recommendations of dwz, jqueryui, bootstrap, and knockout.