If you write a library or plugin in typescript one day, or when using a framework and library, if you look at its declaration file or define the declaration file yourself. The first step is to understand the existing modular methods of the front end.
1. Recognize several ways of js modularity
Use methods and their source code to identify the type of library. Judging is based on the documentation and organizational structure of the library
Global libraries: Many libraries simply expose one or more global variables. Currently, most popular globally accessible libraries are actually written in the form of umd libraries (see below). Documents for umd libraries are difficult to distinguish between global library documents. Before writing a global declaration file, be sure to confirm that the library is really not umd.
Since it is very easy to convert a global library into an umd library, few popular libraries still use the global style. However, small libraries that require dom (or no dependencies) may still be globally typed.
Modular library
Many popular node .js libraries are modular, such as express, gulp, and request.
umd
Umd modules are those that can be used both as modules (by importing) and globally (in environments without a module loader). Many popular libraries, such as moment .js, are in this form. For example, in node.js or requirejs, you can write:
However, in a pure browser environment you can also write:
The umd module checks for the presence of a module loader environment. This is a very descriptive observed module, and they will look like this:
If you see a test like typeof define, typeof window, or typeof module in the library's source code, especially at the top of the file, then it's almost a umd library.
Most popular libraries can now be used as umd packages. Like jquery, moment.js, lodash and many others.
es6 modularity
Historically, JavaScript has not had a module system, and it is impossible to split a large program into small interdependent files and assemble them in a simple way. Other languages have this feature, such as ruby's require, Python's import, and even css have @import, but JavaScript doesn't have any support for this, which creates a huge obstacle to developing large, complex projects.
Commonjs is used for servers and amd is used for browsers. At the level of language standards, es6 implements module functionality, and the implementation is quite simple, completely replacing the commonjs and amd specifications as a module solution common to browsers and servers.
The es6 module is designed to be as static as possible, so that the dependencies of the module, as well as the input and output variables, can be determined at compile time. Both commonjs and amd modules can only determine these things at runtime. Like what
The essence of the above code is to load the fs module as a whole (i.e. all the methods that load fs), generate an object (_fs), and then read 3 methods from this object. This loading is called "runtime loading" because only the runtime can get this object, resulting in no "static optimization" at compile time.
The es6 module is not an object, but explicitly specifies the code of output via the export command and then inputs it through the import command.
Second, amd, cmd, commonjs three modular code styles
require.js (amd) modular loading
amd, or (asynchronous module definition), this specification is an asynchronous loading module, and requirejs applies this specification. Define all dependencies first, and then execute them in the callback function after loading:
For details, please refer to the https://www.runoob.com/w3cnote/requirejs-tutorial-2.html
Code writing
commonjs
The node application consists of modules, using the commonjs module specification. For details, please refer to it
http://javascript.ruanyifeng.com/nodejs/module.html
cmd(sea.js)
For details, please refer to it
https://www.zhangxinxu.com/sp/seajs/docs/zh-cn/module-definition.html
ES6's import and export
Other writing styles can be found
https://es6.ruanyifeng.com/#docs/module#export-%e5%91%bd%e4%bb%a4
reference
Fourth, get to know umd
(1) What is it (what problem is solved, and application scenarios)
umd is called universal module definition, which can be run by running the same code module at runtime or compile time in a project that uses commonjs, cmd, or even amd. In the future, the same JavaScript package runs on the browser side, the server side and even the app side only need to comply with the same writing method
(2) Code structure
(3) An example of handwriting
1. Create a new umd-module .js
2. The case of mounting on the window