Module package 1. ===
<script src="js/app.js"></script>
Traditional writing Web pages often just write a js file, all the special effects are added to the list
Disadvantages: the coupling is too high, the code correlation too, repairing troubles will cause global pollution
<script src="js/nav.js"></script>
<script src="js/banner.js"></script>
<script src="js/lazy.js"></script>
The number of requests sent too dependent blur. Difficult to maintain.
These are the traditional forms of development, it has been abandoned.
2. Modular Development
Why Modular?
Reduce the correlation between code, ease of deployment, better separation, demand loading, avoid naming conflicts, easy to maintain.
3. What is modular?
Node comes with the specification commonjs specification
Commonjs is the node specification, running on the server, not the browser, if you use the browser side, you need to use the file packaged compilation (reference tool Browserify , WebPACK , GULP , etc.)
When writing module, the interface exposed to the external module.exports = {} exports.xxx =
Injection module require ( path )
Commonjs nature of exposure is called the exports target
Module.export={}和exports.xxx=
Both the nature of the exposure is the same, we are exposed to a exports target
Commonjs is the node specification, but he is a synchronous load, synchronous load in the browser is a pit, as long as a link stuck behind would not be able to perform. It is not recommended, if you must use it to edit package.
Web terminal
Each js is a module, each module must have an exposed interfaces, each js file has a global approach called require () for the introduction of modules.
Module
1.node carrying module ( package ) path url fs
2. The third-party modules weui jquery axios zepto
Npm full name node packsge manager node package management tool additions and deletions to change search
If npm operation is too slow
You can install npm mirror
download
Npm install jquery
Download storage location
Global download can use this package in any folder global installation directory
C:\Users\Administrator\AppData\Roaming\npm\node_modules
How to install Global
Npm install -g jquery
Local installation
Npm install jquery
It will generate a directory in the current node_modules folder inside
Npm install jquery --save
This is to download the operating environment ( production environment ) packages such as jquery
Npm install jquery --save -dev
So this is a development environment to download packages such as npm browserify
Difference between the two
The former --save will be compressed when the pack on the line which --save-dev will be abandoned when the package on the line
Download the specified version
Npm install [email protected] --save
delete
Npm uninstall jquery
Check the version
Npm search jquery
Update
UPDATE altitude jquery
3. custom modules we write
1. The configuration module description file npm init will generate a package.json file
{
"name":"cui",
"version":"1.0.0",
"description":"study",
"main":"index.js",
"scripts":{
"test":"echo\"Error :no test specified\" && exit 1"
},
"author":"",
"license":"ISC"
}
main : index.js our main file is index.js
Index.js is the output file for this package, even if deleted package.json they do not change index.js file name on the right, once changed on the error. Because the default output file package is index.js
2.var obj=require("cui")
Default node_modules find this package folder
On the browser side, say require is not defined explanation browser does not support CommonJS , needs to learn packing tools
1.browserify
Node
Node is the javascript environment, the node can run inside the js file. Instruction node file name