資訊專欄INFORMATION COLUMN
摘要：所謂的模塊也叫元件或者組件，可以理解為可以服用的功能代碼。如遵循規范的和遵循規范的中的模塊化。是在文件中引模塊的。如果引用一個以上的組件，就可以用把這一組組件放在數組中就可以了，如下，，，二中的模塊化。
所謂的模塊也叫元件或者組件，可以理解為可以服用的功能代碼。比如說a頁面用功能了，b頁面用到了這功能了，所以我們可以把這個功能抽為組件，便于服用。那么javascript中的組件化如何使用呢，那么不得不提到下面的三種類型。
1.民間的庫。如遵循CMD規范的sea.js和遵循AMD規范的require.js.
2.node中的模塊化。
3.ES6中的模塊化。
我們來先講sea.js。雖然現在這個庫有些過時了。但是思想和理念還是不錯的。
組件的定義：
在js文件中，使用define方法可定義組件。這個方法的參數是一個函數，里面有三個參數，依次分別是require，exports，medule。
require:是在js文件中引模塊的。
如
var a= require（“./a.js”）
exports:輸出的變量都掛載這exports上，這樣做的好處是減少對外暴露的變量。
如
exports.mun=1;
exports.name="lee;
exports.show = function(){
renturn a+b;
}
module：可以把返回的所以變量都寫在module里。可返回一組。
如
module.exports={
a:12,
b:5,
show:function(){
}
//當然了在es6中，json里的函數可以把“：函數名”去掉，簡寫為
// show（）{
// }
}
當然了es6中json中要是有函數，可以省略
組件的使用：
在html中，當然先是引用sea.js了，在使用，在script中通過seajs.use()使用。
如果引用一個以上的組件，就可以用把這一組組件放在數組中就可以了，如下：
seajs.use(["./index1.js"，"./index2.js",.....],function(index1，index，....){
console.log(module.add())
})
二.node中的模塊化。
1，沒有define；
2，有exports，require，module
module.exports={a，b，c} 批量導出
3，引用自定義模塊，為了不和系統模塊沖突，
自定義模塊放在node_modules里，
或者前面加./強制指導加載的目錄。
定義模塊：
可以一個一個定義:
exports.a=12; exports.b=5;
可以定義一組:
let a=12；
let b=5；
module.exports = {a,b}
引用模塊：
node.js 也是js，遵循cmd規范，使用require引用模塊。
let mod=require("./aaa.js"); 后綴.js可簡寫不寫。前面的./如果不寫，就需要把這個模塊放在node_modules文件夾里，不然會以node里的系統模塊有影響。
三.ES6：模塊（Module）
概述 ：
歷史上，JavaScript 一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項功能，比如 Ruby 的require、Python 的import，甚至就連 CSS 都有@import，但是 JavaScript 任何這方面的支持都沒有，這對開發大型的、復雜的項目形成了巨大障礙。
在 ES6 之前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用于服務器，后者用于瀏覽器。ES6 在語言標準的層面上，實現了模塊功能，而且實現得相當簡單，完全可以取代 CommonJS 和 AMD 規范，成為瀏覽器和服務器通用的模塊解決方案。
ES6 模塊的設計思想是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運行時確定這些東西。比如，CommonJS 模塊就是對象，輸入時必須查找對象屬性。
命名導出：
可以直接在任何變量或者函數前面加export關鍵字，就可以將它導出。這種寫法非常簡潔，和平時幾乎沒有區別，唯一的區別就是在需要導出的地方加上一個 export 關鍵字。
比如：
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
然后在另一個文件中這樣引用：
import { square, diag } from "lib";
console.log(square(11)); // 121
console.log(diag(4, 3));
你可能會注意到這個奇怪的語法 { square, diag } 不就是前面講過的 destructing嗎。所以你會以為還可以這樣寫：
import lib from "lib"; square = lib.square;
但是其實這樣是錯的，因為 import { square, diag } from "lib’; 是import的特有語法，并不是 destructing 語法，所以其實import的時候并不是直接把整個模塊以對象的形式引入的。
如果你希望能通過 lib.square 的形式來寫，你應該這樣導入：
import * as lib from "lib"; square = lib.square;
不過值得注意的一點是，如果你直接用babel編譯，執行是會報錯的。因為 babel 并不會完全編譯 modules，他只是把 ES6 的modules語法編譯成了 CMD 的語法，所以還需要用 browserify 之類的工具再次編譯一遍。
如果你發現 browserify 找不到 lib，可以改成 from ‘./lib’ 試試。
本質上，export default就是輸出一個叫做default的變量或方法，然后系統允許你為它取任意名字。所以，下面的寫法是有效的。
大家會發現上面的寫法比較麻煩，因為必須要指定一個名字。其實很多時候一個模塊只導出了一個變量，根本沒必要指定一個名字。
還有一種用法叫默認導出，就是指定一個變量作為默認值導出：
//------ myFunc.js ------
export default function () { ... };
//------ main1.js ------
import myFunc from "myFunc";
myFunc();
默認導出的時候不需要指定一個變量名，它默認就是文件名。
這里的區別不僅僅是不用寫名字，而是 導出的默認值就是模塊本身，而不是模塊下面的一個屬性，即是 import myFunc from "myFunc’; 而不是 import {myFunc} from "myFunc’;
默認導出同樣可以結合命名導出來使用：
如果想在一條import語句中，同時輸入默認方法和其他接口，可以寫成下面這樣。
import _, { each, each as forEach } from "lodash";
對應上面代碼的export語句如下。
export default function (obj) {
// ···
}
export function each(obj, iterator, context) {
// ···
}
export { each as forEach };
上面代碼的最后一行的意思是，暴露出forEach接口，默認指向each接口，即forEach和each指向同一個方法。
僅支持靜態導入導出
ES6規范只支持靜態的導入和導出，也就是必須要在編譯時就能確定，在運行時才能確定的是不行的，比如下面的代碼就是不對的：
//動態導入
var mylib;
if (Math.random()) {
mylib = require("foo");
} else {
mylib = require("bar");
}
//動態導出
if (Math.random()) {
exports.baz = ...;
}
各種導入和導出方式總結
總結一下，ES6提供了如下幾種導入方式：
// Default exports and named exports
import theDefault, { named1, named2 } from "src/mylib";
import theDefault from "src/mylib";
import { named1, named2 } from "src/mylib";
// Renaming: import named1 as myNamed1
import { named1 as myNamed1, named2 } from "src/mylib";
// Importing the module as an object
// (with one property per named export)
import * as mylib from "src/mylib";
// Only load the module, don’t import anything
import "src/mylib";
如下幾種導出方式：
//命名導出
export var myVar1 = ...;
export let myVar2 = ...;
export const MY_CONST = ...;
export function myFunc() {
...
}
export function* myGeneratorFunc() {
...
}
export class MyClass {
...
}
// default 導出
export default 123;
export default function (x) {
return x
};
export default x => x;
export default class {
constructor(x, y) {
this.x = x;
this.y = y;
}
};
//也可以自己列出所有導出內容
const MY_CONST = ...;
function myFunc() {
...
}
export { MY_CONST, myFunc };
//或者在導出的時候給他們改個名字
export { MY_CONST as THE_CONST, myFunc as theFunc };
//還可以導出從其他地方導入的模塊
export * from "src/other_module";
export { foo, bar } from "src/other_module";
export { foo as myFoo, bar } from "src/other_module";
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95099.html
摘要：原文鏈接這是系列文章第一篇使用創建一個模塊的實例。將會創建模塊的實例。一旦模塊實例化完成，主進程就會拿到返回的實例。如果創建一個實例，你還需要其它的參數。使用這些低級裝備這些來構建實例。模塊本身沒有任何狀態。 原文鏈接：https://fanmingfei.com/posts/... 這是系列文章第一篇： 使用 JavaScript 創建一個 WebAssembly 模塊的實例。 W...
摘要：我們可以認為，宏任務中還有微任務這里不再多做解釋可能會執行的代碼包括腳本模塊和函數體。聲明聲明永遠作用于腳本模塊和函數體這個級別，在預處理階段，不關心賦值的部分，只管在當前作用域聲明這個變量。 相信很多人最開始時都有過這樣的疑問假如我的項目目錄下有一個 index.html, index.js 于是我像這樣寫 在瀏覽器之間打開index.html，發現showImg(https://...
摘要：簡介項目命名為就是一個服務器單純開發一個服務器的想法，變成構建網絡應用的一個基本框架發展為一個強制不共享任何資源的單線程，單進程系統。單線程弱點無法利用多核錯誤會引起整個應用退出，應用的健壯性大量計算占用導致無法繼續調用異步。 NodeJs簡介 Ryan Dahl項目命名為：web.js 就是一個Web服務器.單純開發一個Web服務器的想法，變成構建網絡應用的一個基本框架.Node發展...
閱讀 1883·2021-11-22 09:34
閱讀 3009·2021-09-28 09:35
閱讀 13374·2021-09-09 11:34
閱讀 3594·2019-08-29 16:25
閱讀 2820·2019-08-29 15:23
閱讀 2035·2019-08-28 17:55
閱讀 2424·2019-08-26 17:04
閱讀 3044·2019-08-26 12:21
