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?
#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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1381
52
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS
Dec 17, 2023 pm 06:55 PM
Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price
How to Optimize the Maintainability of Java Code: Experience and Advice
Nov 22, 2023 pm 05:18 PM
How to Optimize the Maintainability of Java Code: Experience and Advice In the software development process, writing code with good maintainability is crucial. Maintainability means that code can be easily understood, modified, and extended without causing unexpected problems or additional effort. For Java developers, how to optimize the maintainability of code is an important issue. This article will share some experiences and suggestions to help Java developers improve the maintainability of their code. Following standardized naming rules can make the code more readable.
How to create a stock candlestick chart using PHP and JS
Dec 17, 2023 am 08:08 AM
How to use PHP and JS to create a stock candle chart. A stock candle chart is a common technical analysis graphic in the stock market. It helps investors understand stocks more intuitively by drawing data such as the opening price, closing price, highest price and lowest price of the stock. price fluctuations. This article will teach you how to create stock candle charts using PHP and JS, with specific code examples. 1. Preparation Before starting, we need to prepare the following environment: 1. A server running PHP 2. A browser that supports HTML5 and Canvas 3
PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts
Dec 18, 2023 pm 03:39 PM
With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese
The relationship between js and vue
Mar 11, 2024 pm 05:21 PM
The relationship between js and vue: 1. JS as the cornerstone of Web development; 2. The rise of Vue.js as a front-end framework; 3. The complementary relationship between JS and Vue; 4. The practical application of JS and Vue.
How to use JS and Baidu Maps to add custom location markers to the map
Nov 21, 2023 am 11:58 AM
How to use JS and Baidu Map to implement the function of adding custom place markers to the map. Introduction: Baidu Map is a very commonly used map service. It provides a wealth of map display and interactive functions, including adding custom place markers. Using JS and Baidu Map API, we can easily implement the function of adding custom location markers on the map. The following is a specific code example: Step 1: Preparation First, import the Baidu Map API file in your HTML file, as follows Shown: <scripttype
js method to refresh current page
Jan 24, 2024 pm 03:58 PM
js methods to refresh the current page: 1. location.reload(); 2. location.href; 3. location.assign(); 4. window.location. Detailed introduction: 1. location.reload(), use the location.reload() method to reload the current page; 2. location.href, you can refresh the current page by setting the location.href attribute, etc.
