[TOC]
#### 模塊化概念
歷史上,JavaScript 一直沒有模塊(module)體系,無法將一個大程序拆分成互相依賴的小文件,再用簡單的方法拼裝起來。其他語言都有這項功能,比如 Ruby的require、Python 的import,甚至就連 CSS 都有@import,但是 JavaScript 任
何這方面的支持都沒有,這對開發大型的、復雜的項目形成了巨大障礙。在 ES6 之前,社區制定了一些模塊加載方案,最主要的有 CommonJS 和 AMD 兩種。前者用于服務器,后者用于瀏覽器。ES6 在語言標準的層面上,實現了模塊功能,而且實現得相當簡單,完全可以取代 CommonJS 和 AMD 規范,成為瀏覽器和服務器通用的模塊解決方案。ES6 模塊的設計思想,是盡量的靜態化,使得編譯時就能確定模塊的依賴關系,以及輸入和輸出的變量。CommonJS 和 AMD 模塊,都只能在運行時確定這些東西。比如,CommonJS 模塊就是對象,輸入時必須查找對象屬性。
? 模塊功能主要由兩個命令構成:export和import。export命令用于規定模塊的對外接口,import命令用于輸入其他模塊提供的功能。
? 一個模塊就是一個獨立的文件。該文件內部的所有變量,外部無法獲取。如果你希望外部能夠讀取模塊內部的某個變量,就必須使用export關鍵字輸出該變量。
#### 瀏覽器中引入模塊文件
瀏覽器中引入模塊文件的時候要注意:
1. 需要對script標簽指定 type='module' 屬性
2. 需要通過http協議訪問頁面才可以正常引入模塊文件
3. 最好通過最新版谷歌瀏覽器(chrome)進行測試
<script src="a.js" type="module"></script>
#### export用法示例
export用法1:
export var hd = '后盾人';
export用法2:
var url = 'www.houdunren.com';
export {url};
export用法3:
var hd = '后盾人';
var url = 'www.houdunren.com';
export {hd,url};
導出函數:
export function foo(x, y) {
return x * y;
};
#### 別名
1.通常情況下,export輸出的變量就是本來的名字,但是可以使用as關鍵字重命名。
var hd = '后盾人';
var url = 'www.houdunren.com';
export {hd as houdun,url as website};
2.export語句輸出的接口,與其對應的值是動態綁定關系,即通過該接口,可以取到模塊內部實時的值。
//a.js
import {hd} from './b.js';
console.log(hd);
setTimeout(function(){
console.log(hd);
},2000)
//b.js
let hd = '后盾人';
setTimeout(function(){
hd = 'houdunren.com';
},1000)
export {hd};
結果:
后盾人
houdunren.com
#### import導入模塊
1.使用export命令定義了模塊的對外接口以后,其他 JS 文件就可以通過import命令加載這個模塊。注意,導入時路徑要完整,./不可省略import {hd,url,foo} from './b.js'。
2.如果想為輸入的變量重新取一個名字,import命令要使用as關鍵字,將輸入的變量重命名。import {hd as houdun,url} from './b.js'。
#### export default命令
? 從前面的例子可以看出,使用import命令的時候,用戶需要知道所要加載的變量名或函數名,否則無法加載。但是,用戶肯定希望快速上手,未必愿意閱讀文檔,去了解模塊有哪些屬性和方法。
? 為了給用戶提供方便,讓他們不用閱讀文檔就能加載模塊,就要用到export default命令,為模塊指定默認輸出。
export default hd() {
console.log('foo');
}
? export default命令用于指定模塊的默認輸出。顯然,一個模塊只能有一個默認輸出,因此export default命令只能使用一次。所以,import命令后面才不用加大括號,因為只可能對應一個方法。
? 本質上,export default就是輸出一個叫做default的變量或方法,然后系統允許你為它取任意名字。
? 通過export default命令導出的數據不屬于數據接口,在導入的時候必須指定名稱,且不需要加花括號。
//a.js
import y,{hd,url} from './b.js';
console.log(y);
console.log(hd);
console.log(url);
//b.js
let hd = '后盾人';
let url = 'houdunren.com';
let year = 2018;
export {hd,url};
export default year;
- html&jquery網頁特效
- 標簽分類及特點
- 關于文字標簽
- 網頁定時跳轉
- css透明度和插件
- 0.前端常用工具
- 1.tab切換效果
- 2.tab切換效果多個代碼復用
- 3.百度新聞導航條效果
- 4.解決鼠標移入過快的問題
- 5.滾動條位置
- 6.元素尺寸
- 7.全選反選操作
- 8.固定定位
- 9.開關效果
- 10.節點操作
- 11.仿小米商品展示效果
- 12.仿小米商品展示效果復用
- 13.固定導航欄效果
- 14.凡客輪播圖效果
- 15.頂部下滑廣告效果
- 16.京東左右滑動輪播圖
- 17.京東左右滑動無縫輪播圖
- 18.選擇器
- 19.篩選
- 20.開關效果
- 21.滑動效果
- 22.小米商品效果css實現
- 23.元素水平垂直居中
- laravel5.6
- LARAVEL 介紹&安裝
- javascript & css 腳手架
- php常用工具類
- 安裝laravel-ide-helper增強代碼提示
- 使用migration創建表和數據填充
- 解決mysql5.7以下laravel不能執行數據遷移的問題
- 路由
- 登陸操作自定義模型
- 使用中間件middleware進行登錄權限驗證
- 進行表單驗證處理
- 使用laracasts-flash定制消息提示
- 資源路由
- 寶塔面板安裝fileinfo擴展
- laravel上傳處理與使用hdjs快速實現前端上傳組件
- thinkphp
- phpstorm
- phpstorm安裝插件
- 定義快捷鍵
- 關閉提示
- 將代碼實時同步到遠程服務器
- sublime
- composer
- git使用
- git安裝和配置作者信息
- git新建項目和維護項目
- git日志操作
- git別名操作
- git分支操作
- git生成發布壓縮包
- git系統別名
- gitrebase操作
- 使用SSH與GITHUB遠程服務器進行無密碼連接
- 本地版本庫主動使用remote與遠程GITHUB進行關聯
- 本地分支與GITHUB遠程分支同步
- 項目實戰-新入職員工參與項目開發時分支使用
- 自動部署
- ios開發
- linux
- 1.centos6.5 mysql忘記登入密碼
- html5
- 標簽
- 表單
- 音頻與視頻
- webstorage儲存
- canvas
- css3
- 01.CSS3布局
- 02.transition動畫
- 03.animation動畫
- 04.flex彈性盒模型
- Less
- gulpjs
- es6
- ES6模塊化
- let和const命令
- ES6函數擴展&解構賦值
- JavaScript之數據遍歷
- class類
- Set和Map數據結構
- Vue
- 1.創建第一個應用
- 2.屬性動態綁定
- 3.表達式
- 4.解決phpstorm不識別ECMASCRIPT6語法的問題
- 5.watch監聽屬性
- 6.使用object與array控制class
- 7.條件渲染
- 8.循環
- 9.變異方法
- 10.事件
- 11.表單
- 12.組件
- 13.css過渡動
- 14.js庫控制vue過渡動作
- 15.自定義指令directive
- 16.使用vue-cli初始化單頁面應用
- 17.Vue-router路由
- 18.vuex
- 19.vue-cli
- webpack
- zanui
- nodejs