This is the seventh day of my participation in the August More text Challenge. For details, see: August More Text Challenge

[Node.js Actual combat – Building an automated development environment] – Basic introduction, [Tool preparation], [Start], [Detailed Steps (4)], [Module processing tool (5)],

As for modularity, this article is a detailed study of the specific concepts and operating principles of modularity

Dry goods first! Understanding and applying modularity

Work in daily development must be used!!

  • require: node 和 ES6All support
  • export / import: onlyES6Supports export and import
  • module.exports / exports: onlynodeSupported exports

Work in the use of small chestnut: quickly get to the knowledge point, into the team development!

// Define and export the module
const app = {}
module.exports = app
// Introduce the use module:
const app = require('App location')
Copy the code
// ↓↓ Returns the module function
exports.[functionName] = [functionName]
// exports.getTime = getTime

// ↓↓ Returns the module object itself
module.exports = [functionName]
// module.exports = getTime
Copy the code

The differences between export and export default are as follows:

  1. Can export constants/functions/files/modules, etc
  2. In a file or moduleexport/ importMultiple can be imported;export defaultYou can only export one
  3. exportExport, you need to add when importing{}.export defaultYou do not need to add when importing{}
  4. exportCan directly derive variable expressions,export defaultNo way!

Modular (js)

1. Modular concept:

The way to separate the function of a system into independent functional parts is modularity

Modularity is a way of taking a complex system and breaking it down into better manageable modules

System code can be divided into a series of highly decoupled, replaceable modules with a single responsibility

How will changes in one part of the system affect other parts become apparent

The maintainability of the system is easier to obtain

2. Modular programming: How module loading works

Decouple complex projects

Both resource management and scheduling are required

  • AMD: Asynchronous module definition, for dependent modules: execute ahead of time
  • CMD: generic module definition, (as lazy as possible): delayed execution
  • CommonJS defines modules:
      1. Module identifier: (module)
      1. Module definition: (exports)
      1. Module reference:require)

Each separate part can be regarded as a module, that is to say, a JS file has certain functions, this JS file can be said to be a module

3. Advantages of modularity:

Low development cost/easy to coordinate cooperation/high development efficiency, easy to reuse and maintenance and testing,

(Eight words: code reuse, easy to maintain)

When you do modularity, you eventually need to put the modules together, so you need an entry file

There are many methods and tools to help us do this when merging modules. All of these methods and tools provide a modular specification, and we need to combine modules according to a unified specification

Note: variables/objects, etc. in a module are private. The only way to introduce a module is to allow the module’s code to run, but not to use the module’s private variables… If you need to instantiate something in a module, you must have the module expose it. What is the value of module.exports when exposed, and what is the return value of require when introduced

4. There are many commonly used JS modularity specifications, such as:

The modularity specification addresses only two issues,

  1. How to import modules
  2. How to export a module

  1. Node.js uses CommonJS, synchronizes, runs on the server, modules are local, module import speed = disk read speed

    Import the module using require method and export the contents of the module using module.exports

  2. ES6 module synchronous

    Import modules using import from; Export the module using export

SASS/LESS/styluss CSS preprocessing language

We write sass and then use tools to compile it into CSS. Sass has many more functions than CSS, such as defining variables/looping/blending/nesting…

There are two language versions of sass. The old version has a.sass suffix, and the new version has a.scss suffix

Update the trailer below, keep up with the rhythm

I’ll move on to code versioning, most commonly Git, and SVN

Improve development efficiency and empower our development efficiency!

Keep up with the pace of progress, forward refueling

Come on!! go~