javascript模塊
JavaScript模塊 (JavaScript Modules)
One of the key features of programming fundamentals is breaking down your code into fragments. These fragments depending on its functionality have been coined various terms like functions, components, modules, etc. Today we'll understand what modules are, why they are needed and how to create modules in JavaScript?
編程基礎知識的關鍵特征之一就是將您的代碼分解為多個片段。 這些片段取決于其功能，是用不同的術語創造的，例如功能，組件，模塊等。今天，我們將了解什么是模塊 ，為什么需要它們以及如何在JavaScript中創建模塊？
Imagine you're working on an application that seamlessly gets bigger and bigger in terms of lines of code. Of course, the first thing you did was create that hefty code a bit modular by breaking it down in functions. Good, but now you have a lot of functions. Wouldn't it make sense to organize your code into different scripts? These scripts are called "modules". You're dividing your script into numerous other scripts to keep the code more modular and organized. Modularity is a key concept for object-oriented programming too and it sort of follows the same pattern.
想象一下，您正在開發的應用程序在代碼行方面可以無縫地變得越來越大。 當然，您要做的第一件事就是通過按功能分解將大量代碼模塊化。 很好，但是現在您有很多功能。 將代碼組織成不同的腳本是否有意義？ 這些腳本稱為“模塊” 。 您正在將腳本劃分為許多其他腳本，以保持代碼更加模塊化和更有條理。 模塊化也是面向對象編程的關鍵概念，它遵循相同的模式。
The three major advantages of Modules in JavaScript are maintainability which simply distributed codebase, Namespacing which implies that unrelated code do not share global variables and reusability, which is quite self-explanatory. That piece of code can be reused for other projects too.
JavaScript模塊的三個主要優點是可維護性 ，它簡單地分布在代碼庫中； Namespacing ，它表示不相關的代碼不共享全局變量和可重用性 ，這是不言而喻的。 這段代碼也可以重用于其他項目。
The first way of writing modular JS is using closures.
編寫模塊化JS的第一種方法是使用閉包。
Closures help us create anonymous functions and hide variables from parent scope. We can use local variables inside our function without collision with the same variables (having same name) outside because of their scope.
閉包可以幫助我們創建匿名函數，并在父范圍內隱藏變量。 我們可以在函數內部使用局部變量，而不會因范圍而與外部的相同變量(具有相同的名稱)發生沖突。
<script>
(function() {
// We keep these variables private
// inside this closure scope
var HP = [10, 40, 87, 66, 45, 90];
var defeating = function() {
var defeated = HP.filter(function(item) {
return item < 50;
});
return 'You were defeated ' + defeated.length + ' times.';
}
console.log(defeating());
}());
</script>
Output
輸出量
You were defeated 3 times.
Another approach is to create modules using an object like interface. Let's modify the above code only,
另一種方法是使用類似接口的對象創建模塊 。 讓我們只修改上面的代碼，
const pokebattle=(function () {
var HP = [10, 40, 87, 66, 45, 90];
return{
defeating: function(){
var defeated = HP.filter(function(item) {
return item < 50;});
return 'You were defeated ' + defeated.length + ' times.';
}
}
}());
console.log(pokebattle.defeating());
</script>
Output
輸出量
You were defeated 3 times.
使用CommonJS (Using CommonJS)
Using CommonJS, we can have each script as a module and use the keywords module.exports to export a module and require to import them.
使用CommonJS ，我們可以將每個腳本作為一個模塊，并使用關鍵字module.exports導出模塊并要求導入它們。
function Pokemon() {
this.greet = function() {
return 'Hey this is squirtle';
}
this.catchPhrase = function() {
return 'Squirtle Squirtle';
}
}
module.exports = Pokemon;
And when someone wants to use our pokemon module inside their local js file they can simply do,
當有人想在他們的本地js文件中使用我們的pokemon模塊時，他們可以輕松地做到這一點，
var pokeModule = require('Pokemon');
var pokeInstance = new Pokemon();
pokeInstance.greet();
pokeInstance.catchphrase();
Output
輸出量
Hey this is squirtle
Squirtle Squirtle
Most web frameworks make use of modules extensively. If you have used Node.Js ever you must have noticed very frequently you're importing a module from the core Node.js and then using it. For ex using the fs module for writing and reading from a file,
大多數Web框架廣泛使用模塊。 如果您曾經使用過Node.J，那么您一定會非常頻繁地注意到您是從核心Node.js導入模塊，然后再使用它。 例如，使用fs模塊進行文件讀寫時，
const fs=require('fs');
The above syntax states that you're importing a node module called fs inside the fs variable so now you can use it anywhere in that file.
上面的語法表明您正在fs變量中導入名為fs的節點模塊，因此現在可以在該文件中的任何位置使用它。
Or if you use express to create a server in Node.js,
或者，如果您使用express在Node.js中創建服務器，
const express = require('express');
const app = express();
app.listen(3000, () => {
console.log('Listening on port 3000...');
});
If you've worked with frontend frameworks like Angular, Vue or React; the modular code pattern is the crux behind their component based architecture. In fact, the first few lines you write every time you're coding in React are,
如果您使用過Angular，Vue或React等前端框架， 模塊化代碼模式是其基于組件的體系結構背后的關鍵。 實際上，您每次在React中編寫代碼時，前幾行就是
Import React, {Component} from 'React';
Thus modular patterns are very widely used today and almost everywhere. Massive libraries that utilise and make packages for JS are also modules. We have packages for bundling these modules like Webpack.
因此，模塊化模式在當今以及幾乎所有地方都得到了廣泛的使用。 利用和制作JS軟件包的大量庫也是模塊。 我們有捆綁這些模塊的軟件包，例如Webpack。
翻譯自: https://www.includehelp.com/code-snippets/modules-in-javascript.aspx
javascript模塊
