Some related modular basics

This article will explain in detail the basics of modularization and how to understand relevant knowledge in this area.

Why use modularity?

Resolve naming conflicts and avoid global pollution

Resolve dependency management

Improve code readability

Code decoupling and improve reusability

What do the CMD, AMD, and CommonJS specifications refer to? What are the applications?

CMD is Common Module Definition. It is mainly the standardized output of modular definition in the promotion process of sea.js. It advocates one file and one module, often using the file name. For the module ID, and to promote nearby dependencies, the main application is sea.js, example:

define(function(require,exports,module){
    var $ = require('jquery.js')
    $('div').addClass('active');

});//cmd promotes nearby dependencies, so dependencies are written in functions, require is a method, and exports is a Object provides an external interface. Module is an object that stores properties and methods related to the current module.

AMD is Asynchronous Module Definition. It is mainly the standardized output of module definition during the promotion process of require.js. It solves the dependency problem of multiple js files and the loading of js files. For frequent page waiting problems, dependency prefixing is recommended. The main application is require.js, example:

define('modal',['jQuery'],function($){
    $('modal').show();

})//define is the definition keyword, modal is the defined module name, which can generally be omitted, [ ] is the dependent module to be loaded, followed by the callback function.

CommonJS mainly refers to the module specification that runs on the browser side, and its main application is node.js.

A file corresponds to a module, each module is a separate scope, and the loaded modules are loaded synchronously.

There is only one outlet in a module, the moudle.exports object. Put the objects that the module wants to output into the module.

Load modules using the require method. Example:

//模块定义  myMode.jsvar name = 'jiuyi';function printName(){    console.log(name);
}
functionprintFullName(firstName){
    consoele.log(firstName+name);
}module.erports = {    printName: printName,    printFullName: printFullName
}//加载模块var nameModule = require('./myMode.js')
nameModule.printName();

In the following requirejs configuration, what is the role of baseUrl? What is the basis? What is the role and usage of paths?

requirejs.config({  baseUrl: "src/js",  
  paths: {    'jquery': 'lib/bower_components/jquery/dist/jquery.min'
  }
});

The role of baseUrl is to set the base path for require to load JS files, based on the path where html is located, and the role of paths is to set the base path of baseUrl. , set the path of some specific files, based on the baseUrl path.

What is baseUrl in the following r.js packaging configuration? What is name

({
    baseUrl: "./src/js",
    paths: {        'jquery': 'lib/bower_components/jquery/dist/jquery.min'
    },
    name: "main",
    out: "dist/js/merge.js"})

Here baseUrl refers to the baseUrl of the configuration file of require.js based on its own file path.

name refers to the name of the main module of the entrance

out refers to the path of the packaged output

This article explains the basic knowledge related to modularization, and I want to know more about it For knowledge, please pay attention to php Chinese website.

Related recommendations:

What is the difference between innerText and innerHTML of dom objects?

Some basic questions about JS

#How to modularize require.js with front-end js

The above is the detailed content of Some related modular basics. For more information, please follow other related articles on the PHP Chinese website!