谷粒商城28 - 前端基础 ES6 模块化

た入场券 2023-03-02 14:58 52阅读 0赞

### 模块化 ###

模块化概念:  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]

### 代码示例 ###

hello.js 如下

//声明方法的时候, 直接导出 
    // export const util = { 
    // sum(a, b) { 
    // return a + b;
    // }
    // }
    
    //导出对象
    export default { 
        sum(a, b) { 
            return a + b;
        }
    }
    // export {util}
    
    //`export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。

user.js 如下

var name = "jack"
    var age = 21
    
    function add(a,b){ 
        return a + b;
    }
    // 导出
    export { name,age,add}

main.js 导入的代码如下  
使用import 关键字 导入  
对导入的 变量, 可以直接进行使用

// 由于导出的是对象, 可以任意起名字 ,例如此处为abc
    import abc from "./hello.js"
    import { name,add} from "./user.js"
    
    //对导入的模块, 进行调用使用, 传入参数即可
    abc.sum(1,2);
    console.log(name);
    add(1,3);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20230208/58300bf3bf8147e4a63ca8b97f89a214.png

发表评论取消回复

表情：

评论列表（有 0 条评论，52人围观）

还没有评论，来说两句吧...

相关阅读

相关谷粒商城 (八) --------- 前端基础 ES6 篇

目录一、简介二、什么是 ECMAScript 三、ES6 新特性 1. let 声明变量 2. const 声明常量

曾经终败给现在/ 2024年04月07日 12:50/ 0 赞/ 83 阅读

相关谷粒商城22- 前端基础 es6解构表达式

文章目录数组解构对象解构解构表达式数组解构 let arr = [1,2,3];

女爷i/ 2023年03月04日 06:47/ 0 赞/ 15 阅读

相关谷粒商城21- 前端基础 es6 let&const

let&const let具有作用域的代码示例. <!DOCTYPE html> <html lang="en"> <head>

Myth丶恋晨/ 2023年03月04日 06:47/ 0 赞/ 22 阅读

相关谷粒商城20- 前端基础 ES6介绍

前端技术与后端技术的对比 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZ

川长思鸟来/ 2023年03月04日 06:46/ 0 赞/ 18 阅读

相关谷粒商城28 - 前端基础 ES6 模块化

模块化模块化概念: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

た入场券/ 2023年03月02日 14:58/ 0 赞/ 53 阅读

相关谷粒商城 27- 前端基础 ES6 promise 异步编排

promise promise 的介绍 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

╰+哭是因爲堅強的太久メ/ 2023年03月02日 14:52/ 0 赞/ 36 阅读

相关谷粒商城26 - 前端基础 ES6 map&reduce

map map() 用于接收一个函数, 将原数组中的所有元素用这个函数处理后,放入新数组返回 <script> let arr = ['

Bertha 。/ 2023年03月02日 13:29/ 0 赞/ 40 阅读

相关谷粒商城25 - 前端基础 ES6 对象优化

文章目录对象优化对象的复制声明对象简写对象扩展运算符(...) 对象优化

╰半夏微凉°/ 2023年03月02日 10:24/ 0 赞/ 27 阅读

相关谷粒商城24 - 前端基础 ES6 函数优化(箭头函数)

文章目录参数默认值不定参数箭头函数函数只传递一个参数的情况

Myth丶恋晨/ 2023年03月02日 10:22/ 0 赞/ 23 阅读

相关谷粒商城-前端基础

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

傷城~/ 2022年11月09日 12:35/ 0 赞/ 215 阅读