JS modular

What is modularity

To package a complex program into blocks (files) according to certain rules (specifications) and combine them together
The internal functions/implementations of the block are private, only exposing some interfaces (methods) to the outside to harmonize with other modules.

Benefits of modularity

Avoid naming conflicts
Better separation, load on demand
Higher reusability
High maintainability

The page introduces the loading script

Request too much
Relying on the fuzzy
Difficult to maintain

Classification of modular specifications

CommonJS – specification

Description:
1. Each file can be treated as a module
2. On the server side: modules are loaded synchronously at runtime
3. On the browser side: modules need to be compiled and packaged ahead of time
Basic syntax:
1. Exposed to the module
- module.exports = value
- exports.xxx = value
- Question: What exactly is the exposed module?
1. The introduction of the module
- require(xxx)
  1. Third-party module: XXX module name
  2. Custom module: XXX is the module file path

CommonJS – implementation

Server-side implementation
1. Node.js
2. nodejs.cn/
Browser-side implementation
1. Browerify
2. browserify.org/
3. Also known as CommonJs browser-side packaging tool
Distinguish Node from Browserify

Node.js modularity tutorial

Download and install Node.js
Creating a project structure

| - modules | - module1. Js | - module2. Js | - module3. Js | - app. Js | - package. Json {" name ":" commonJs - node ", "version" : "1.0.0"}Copy the code

Downloading third-party Modules

NPM install uniq –save // deduplicate algorithm

Modular coding

module1.js module.exports = { msg:'module1' foo(){ console.log(this.mgs); } } module2.js module.exports = function() { console.log('module2'); } module3.js exports.foo = function() { console.log('foo() module3'); }; exports.bar = function() { console.log('bar() module3'); } app.js // let module1 = require('./modules/module1'); let module2 = require('./modules/module2'); let module3 = require('./modules/module3'); module1.foo(); module2(); module3.foo(); module3.foot();Copy the code

Browserify modular use tutorial

| 1. Create a project structure - js | - dist / / packaging generated file directory | - SRC / / source directory | - module1. Js | - module2. Js | - module3. Js | - app. Js / / application main source file | - index. HTML | - package. Json {" name ":" browserify - test ", "version" : "1.0.0"} 2. Download browserify * NPM install browserify --save-dev 3. Module1.js module.exports = {foo(){console.log('module1 foo()'); } } * module2.js module.exports = function() { console.log('module2 foo()'); } * module3.js exports.foo = function() { console.log('module3 foo()'); } exports.bar = function() { console.log('module3 bar()'); } app.js let uniq = require('uniq'); let module1 = require('./module1'); let module2 = require('./module2'); let module3 = require('./module3'); module1.foo(); module2(); module3.foo(); module3.bar(); The console. The log (uniq (,2,4,6,3,5,2,3 [1])); * Browserify js/ SRC /app.js -o js/dist/bundle.js *  <script type="text/javascript" src="js/dist/bundle.js"></script>Copy the code

AMD – specification

instructions
- Asynchronous Module Definition
- Github.com/amdjs/amdjs…
- Designed for use in browsers, modules are loaded asynchronously
The basic grammar
- Defining exposure modules

Funtction (){return module}) 2. Function (m1,m2){return module})Copy the code

Introducing usage modules

Require ([' module1 ', 'module2], function (m1, m2) {/ / use the m1 / m2})Copy the code

AMD- Implementation (Browser side)

Require.js
www.requirejs.cn/
www.ruanyifeng.com/blog/2012/1…

Function (window){let name = 'dataservice.js '; function getName(){ return name; } window.dataService = {getName}; })(function(window,dataService){let MSG = 'alerter.js'; function showMsg(){ console.log(msg,dataService.getName); } window.alerter = {showMsg}; })(windwo,dataService) app.js (function(alerter){ alerter.showMsg(); })(alereter) <script type="text/javascript" scipt="./js/dataService.js"></script> <script type="text/javascript" scipt="./js/alerter.js"></script> <script type="text/javascript" scipt="./app.js"></script>Copy the code

Require.js tutorial to use

Download require.js and import

Website: www.requirejs.cn/
Github:github.com/requirejs/r…
Import require.js into the project: js/libs/require.js

Creating a project structure

|-js
  |-libs
    |-require.js
  |-modules
    |-alerter.js
    |-dataService.js
  |-main.js
|-index.html
Copy the code

Defines the module code for require.js

Function (){let name = 'dataservice.js '; function getName(){ return name; } // expose module return {getName}; }); Function ('dataService'){let MSG = 'alerter.js'; function showMsg(){ console.log(msg,dataService.getName); } return {showMsg} }); main.js (function(){ requirejs.config({ //baseUrl:'js/', // Paths in the root directory :{// Configure path dataService:'./modules/dataService', alerter:'./modules/alerter', jquery: '/ libs/juqery - 1.10.1', presents: '/ libs/presents'}, shim: {presents: {exports:' presents'}}}); requirejs(['alerter'],function(alerter){ alerter.showMsg(); }); <script data-main="js/main.js" SRC ="js/libs/require.js"></script>Copy the code

CMD

instructions
- Common Module Definition
- Github.com/seajs/seajs…
- Designed for use in browsers, the loading of certain objects is asynchronous
- Modules are loaded and executed only when they are in use
The basic grammar
- Defining exposure modules

/ / define a dependent module define (function (the require, exports, exports, the module) {/ / introduce dependent module (synchronous) var module2 = the require ('. / module2 '); Async ('./module3',function(m3){}) // exposed module exports.xxx=value})Copy the code

Introducing usage modules

define(function(require){
    var m1 = require('./module1');
    var m4 = require('./module4');
    m1.show();
    m4.show();
})
Copy the code

Cmd-implementation (browser side)

Sea.js
www.zhangxinxu.com/sp/seajs/

Sea-.js easy to use tutorial

Download sea-.js and import

Liverpoolfc.tv: seajs.org/
github:github.com/seajs/seajs
Import sea-.js into the project: js/libs/ sea-.js

Creating a project structure

|-js
  |-libs
    |-sea.js
  |-modules
    |-module1.js
    |-module2.js
    |-module3.js
    |-module4.js
    |-main.js
|-index.html
Copy the code

Define modules that have no dependencies

define(function(require,exports,module){ let msg = 'module1'; function foo(){ retrun msg; Exports = {foo}; // exports = {foo}; }); define(function(require,exports,module){ let msg = 'module2'; function bar(){ retrun msg; } // exports = bar; }); define(function(require,exports,module){ let data = 'module3'; function bar(){ console.log(data); } // exports.module3 = bar; }); define(function(require){ let data = 'module4'; // let module2 = require('./module2'); module2(); // Async ('./module3',function(module3){module3.module3.fun(); }); function fun2(){ console.log(msg); } // exports.fun2 = fun2; }); define(function(require){ let module1 = require('./module1'); module1.foo(); let module4 = require('./module4'); module4 }) <script type = 'text/javascript' src="js/libs/sea.js"></script> <script type = 'text/javascript'> seajs.use('./js/modules/main.js'); </script>Copy the code

ES6 – specification

instructions
- Es6.ruanyifeng.com/#docs/modul…
- Dependent modules need to be compiled and packaged
grammar
- Export module: export
- Import module: Import

ES6- Implementation (Browser)

Compile ES6 into ES5 code using Base
Compile and package JS using Browserify

Es6-babel-browserify use tutorial

Json {"name":"es6-babel-browerify", "version":"1.0.0"} 2. Install Babel -cli,balel-preset-es2015 and Browerify * NPM install Babel -cli browserify -g //cli: Command line interface * NPM Install balel-preset- ES2015 --save-dev * preset (all plug-ins to convert ES6 to ES5 are packaged) 3. Jbabelrc {"presets":["es2015"]} 4. Export function foo(){console.log('foo() module1'); } export function bar(){ console.log('bar() module1'); } export let arr = [1,2,3,4,5]; Function fun(){console.log('fun() module2'); } function fun2(){ console.log('fun2() module2'); } export {fun,fun2}; // Introduce other modules // syntax: inport XXX from 'path' import {foo,bar} from './module1'; import {fun,fun2} from './module2'; console.log(module1,module2); Compile * Compile ES6 to ES5 code using Babel (but with CommonJSy syntax) : Babel js/ SRC -d js/lib * use Browerify to compile js:browserify js/lib/app.js -o js/lib/bundle.js <script type="text/javascript" SRC ="js/lib/bundle.js" > 7 NPM install jquery@1 --save * In app.js, use // default exposure to expose 0 arbitrary data types, //export default value; module3.js <! --export defalult () => {console.log(" I am the default exposed arrow function "); }--> export default {MSG :' default exposure ', foo(){console.log(this.msg); }} <! --import module3 from './module3'; --> module3.foo(); import $ from 'jqurey'; $('body').css('background','green');Copy the code

What is modularity

Benefits of modularity

The page introduces the loading script

Classification of modular specifications

CommonJS – specification

CommonJS – implementation

Node.js modularity tutorial

Browserify modular use tutorial

AMD – specification

AMD- Implementation (Browser side)

Require.js tutorial to use

CMD

Cmd-implementation (browser side)

Sea-.js easy to use tutorial

ES6 – specification

ES6- Implementation (Browser)

Es6-babel-browserify use tutorial

Related Posts

Summary of basic concepts in the JavaScript object-oriented series

MarkDown basic syntax

Use the Typescript compiler to parse and retrieve types in your code