(a) How is the file introduced in the first place
(two) it is understood that before the concept of modularization, JS in the project development, the status of the station is very low
- Before IE6, there was no JS engine, js was supposed to be in the rendering engine, write a little JS code at that time, and the browser crashed
- After IE6 came the javascript engine, which was a separate list of JS interpreters, written at the time as
<script type="text/javascript">
..xxxx...
<script>
Copy the code- Browsers later developed more functions, more JS code, this writing method is not good, the page will write a bunch of JS, not easy to maintain, this is to use the beginning of the method, all the logic into a file to maintain, and then only introduce this file
(three) With the increase of front-end technology, asynchronous Ajax cookie….. Js code will be more and more
- At first we said all the logic is in one JS, but what about multiple pages? Every page needs to be imported once. Isn’t that a repeat import
- So thought of, a page to use a JS to maintain, (to the page for the idea of module js file) but still not reasonable
- Think of a program to partition modules, that page uses the program to introduce the program
(4) Problems arise
- That happens when you introduce a lot of programs
- Contamination global –> variable duplication –> variable override
- The files depend on each other and an error is reported if the order is out of order
- So the problem that modularity solves is:
- Load order
- Global pollution
(5) So we think of creating scope when solving modular files, who creates scope is a function
- Here we think we’ll create a named function, call it, and write the logic to the function
- But this is so troublesome that I want to use the immediate execution function
- We put it in scope, but we need to get the data outside, we need to return and we need to write it as an object, so we can export a lot of data
- So that’s solved, but, you see that there’s a dependency on B here, so there’s the thing to receive whatever each module throws
A module is A:
Module B:
- See here for module injection
- The overall situation of pollution has been solved
- Modules are independent and interdependent
(6) The discussion so far is to use the immediate execution of functions to do modularization, using javascript syntax itself to achieve [modularization, plug-in]
Then Nodejs was born, bringing an unprecedented modular experience called CommonJs
CommonJs -> is not JS, is a specification -> it is not a JS method, collection, library, or framework, is a specification -> derived from nodeJs -> it is synchronous
- require(‘…. ‘) importing modules
- Mdule. Exports Export modules
At this point we are no longer relying on HTML pages, we are relying on real JS implementation modularity but it runs on a Node environment
(8) Client “CommonJS” === AMD
Asynchronous Module Definition Asynchronous Module Definition
- Define (moudleName, [module], factory); // Define the module
- require([module], callback); // Import modules
In fact, AMD, the browser is not supported, is through require.js implementation
Module A
Module B
- Index.js configures the require.config file path. It does not automatically look for files like Node does
- The callback function is not executed until all previous modules have been loaded. This is also called a pre-dependency
- The execution of a module’s callback function must depend on the completion of the previous module’s execution
HTML into
Look at the console found the introduction module through async to achieve asynchronous loading
CMD – he’s Ali’s contribution to modularity
Common Module Definition Common Module Definition
- define(function (require, export, module) {}); Definition module
- Seajs. use([Module path], function (moduleA, moduleB, moduleC) {}); seajs.use([Module path], function (moduleA, moduleB, moduleC) {}); Use the module
Difference between CMD and AMD
- AMD import first load module, rely on the front (do not understand the above)
- CMD dependencies are loaded immediately on demand, although import is written first, but when is it loaded when it is used
ES6 modular
ES6 and commonJS are different
export
Es6 import
CommonJS import
You can see the differences in the results
(1)
- The commonJS module outputs a copy of the value
- ES6 prints references to values
(2)
- CommonJS modules are loaded at run time (since commomJS is run on the server, the program is compiled and loaded when the require function is encountered at run time)
- Es6 modules are loaded at compile time (es6 modules are loaded at compile time)