日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > javascript >内容正文

javascript

五、Vue模块化开发学习笔记——JavaScript原始功能、匿名函数的解决方案、使用模块作为出口、CommonJS、ES6 export和import的使用

發布時間：2024/7/5 javascript 24 豆豆

一、JavaScript原始功能

-在網頁開發的早期，js制作作為一種腳本語言，做一些簡單的表單驗證或動畫實現等，那個時候代碼還是很少的。 那個時候的代碼是怎么寫的呢？
直接將代碼寫在<script>標簽中即可

隨著ajax異步請求的出現，慢慢形成了前后端的分離 客戶端需要完成的事情越來越多，代碼量也是與日俱增。
為了應對代碼量的劇增，我們通常會將代碼組織在多個js文件中，進行維護。 但是這種維護方式，依然不能避免一些災難性的問題。
比如全局變量同名問題：看下邊的例子

另外，這種代碼的編寫方式對js文件的依賴順序幾乎是強制性的
但是當js文件過多，比如有幾十個的時候，弄清楚它們的順序是一件比較同時的事情。
而且即使你弄清楚順序了，也不能避免上面出現的這種尷尬問題的發生。

二、匿名函數的解決方案

我們可以使用匿名函數來解決方面的重名問題
在aaa.js文件中，我們使用匿名函數

但是如果我們希望在main.js文件中，用到flag，應該如何處理呢？
顯然，另外一個文件中不容易使用，因為flag是一個局部變量。

三、使用模塊作為出口

我們可以使用將需要暴露到外面的變量，使用一個模塊作為出口，什么意思呢？
來看下對應的代碼：

我們做了什么事情呢？
非常簡單，在匿名函數內部，定義一個對象。
給對象添加各種需要暴露到外面的屬性和方法(不需要暴露的直接定義即可)。
最后將這個對象返回，并且在外面使用了一個MoudleA接受。

接下來，我們在man.js中怎么使用呢？
我們只需要使用屬于自己模塊的屬性和方法即可

這就是模塊最基礎的封裝，事實上模塊的封裝還有很多高級的話題：

  • 但是我們這里就是要認識一下為什么需要模塊，以及模塊的原始雛形。
  • 幸運的是，前端模塊化開發已經有了很多既有的規范，以及對應的實現方案。
  • 常見的模塊化規范：
    CommonJS、AMD、CMD，也有ES6的Modules

四、CommonJS（了解）

模塊化有兩個核心：導出和導入

  • CommonJS的導出：
  • CommonJS的導入：

五、ES6 export基本使用

  • export指令用于導出變量，比如下面的代碼：

    上面的代碼還有另外一種寫法：
  • 上面我們主要是輸出變量，也可以輸出函數或者輸出類：
    上面的代碼也可以寫成這種形式：

  • export default
    某些情況下，一個模塊中包含某個的功能，我們并不希望給這個功能命名，而且讓導入者可以自己來命名
    • 這個時候就可以使用export default

      我們來到main.js中，這樣使用就可以了
      這里的myFunc是我自己命名的，你可以根據需要命名它對應的名字

      另外，需要注意：
      export default在同一個模塊中，不允許同時存在多個。

    六、ES6 import使用

    我們使用export指令導出了模塊對外提供的接口，下面我們就可以通過import命令來加載對應的這個模塊了

    • 首先，我們需要在HTML代碼中引入兩個js文件，并且類型需要設置為module
    • import指令用于導入模塊中的內容，比如main.js的代碼：
    • 如果我們希望某個模塊中所有的信息都導入，一個個導入顯然有些麻煩：
  • 通過*可以導入模塊中所有的export變量
  • 但是通常情況下我們需要給*起一個別名，方便后續的使用
    • <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script src="aaa.js" type="module"></script> <script src="bbb.js" type="module"></script> <script src="mmm.js" type="module"></script> </body> </html> var name = '小明' var age = 18 var flag = truefunction sum(num1,num2) {return num1 + num2 }if (flag) {console.log(sum(20, 30)); }// 1.導出方式一 export {flag,sum }// 2.導出方式二 export var num1 = 1000; export var height = 188;// 3.導出函數/類 export function mul(num1, num2) {return num1 + num2; }export class Person {run() {console.log('在奔跑');} }// 5.export default /* const address = '深圳市' export {address } *//*export const address = '北京市'*//* const address = '深圳市' export default address*/export default function (argument) {console.log(argument); } // 1.導入{}中定義的變量 import {flag,sum} from "./aaa.js";if (flag) {console.log('小明是天才');console.log(sum(10,20)); }// 2.直接導入export定義的變量 import {num1,height} from "./aaa.js";console.log(height); console.log(num1);// 3.導入 export的function import {mul, Person} from "./aaa.js";console.log(mul(30, 50));const p = new Person(); p.run();/*import addr from "./aaa.js" console.log(addr)*/// 4.導入export default中的內容 import arg from "./aaa.js" arg("你好啊")// 5.統一全部導入 /* import {flag,num,num1,height,Person,mul,sum} from "./aaa.js" */import * as aaa from './aaa.js' console.log(aaa.flag) console.log(aaa.height) var name = '小紅' var flag = false

    總結

    以上是生活随笔為你收集整理的五、Vue模块化开发学习笔记——JavaScript原始功能、匿名函数的解决方案、使用模块作为出口、CommonJS、ES6 export和import的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。