ES6模块化及优点,简单案例让你秒懂

Wesley13
• 阅读 429
模块化:模块是一个文件
    好处:
        1.减少命名冲突
        2.避免引入时的层层依赖
        3.可以提升执行效率
    **第一种方法***********************
        1.如何导出(暴露)
            export let run =function(){
                console.log("run-->fun")
            }
            export let userName = "jinglijuan"
        2.如何引入(依赖)
<script type="module">  //设置为module类型
                import {run,userName} from "./mo.js" //内部名字要与暴露出来的名字一致

                run();
                console.log(userName)
</script>
    **第二种方法 :暴露的数据过多时使用
        1. 导出时正常导出
            export let run =function(){
                console.log("run-->fun")
            }
            export let userName = "jinglijuan"
        2. 导入时
<script type = "module">
                import * as 别名 from './mo.js'
                console.log(别名.暴露的方法或者变量名)
                console.log(mo.run)
</script>
    **第三种方法:直接导出对象
        1. 导出:
            let run = function(){
                console.log("jinglijuan")
            }
            let userName = "jinglijuan"
            let age = 21
            let sex = "woman"

            export {
                run,
                userName,
                age,
                sex
            }
        2. 如何导入(接收):
            import {userName,age} from "./mo.js"
            console.log(userName,age)
    **第四种方法:导出的数据起个别名
      导出时通过as给导出的内容起个别名,接收时需要以别名为依据
        1. 导出:
            let age = 21
            let sex = "woman"

            export {
                age as a,
                sex
            }
        2. 如何导入(接收):
            import {userName,a} from "./mo.js"
            console.log(userName,a)
     **第五种,引入时增加别名(从不同文件中的引入的变量名或者方法名可能是重名的,引入时使用会报错)
        1.引入
           import {userName as moUserName} from './mo4.js'
           import {userName} from './mo5.js'
           console.log(moUserName,userName)
     **第六种:默认导出(使用频率最高)
        只能有一个默认对象
        1.导出(暴露)
            export default {
                userName:'jinglijuan',
                age:20
            }
        2.引入(接收)
            import mo from "./mo.js"
            console.log(mo.userName)
     **第七种:混合导出
        1.导出(暴露)
            export default{
                userName:'jinglijuan',
                age:20
            }
            export let sex = '男'
         2.引入
            import mo,{sex} from './mo7.js'
            console(mo.userName,mo.age,sex)

      模块的特点:
        1.可以相互依赖
        2.当你的模块被多次引入时,只执行一次
            在多处引入相同的js文件,那么这个js文件只会执行一次
点赞
收藏
评论区
推荐文章
小嫌 小嫌
2年前
解决node环境下SyntaxError: Cannot use import statement outside a module的问题
问题:vscode中无法利用import进行模块引入解决方式:终端执行npminity生成package.json文件,在json文件中设置"type":"module"最后执行,问题解决问题原因:node早先只支持CommonJS的模块化方案,所以ES6的模块化特性用不了。但是在NodeV13.2.0之后开始实验性的支持ESM模块化,不过需要
Souleigh ✨ Souleigh ✨
2年前
前端性能优化 - 雅虎军规
无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢?可以遵循雅虎的前端优化35条军规,这样对于优化有一个比较清晰的方向.35条军规1.尽量减少HTTP请求个数——须权衡2.使用CDN(内容分发网络)3.为文件头指定Expires或CacheControl,使内容具有缓存性。4.避免空的
Bill78 Bill78
3年前
python基础知识总结
一、Python的优缺点优点:1.简单,易学,免费,开源2.高级语言,解释型语言3.可移植性,可拓展性,可读性4.面向对象,丰富的库缺点:1.执行效率慢2.GIL锁限制并发3.源代码加密困难二、Python的注释
Stella981 Stella981
2年前
JS 中的require 和 import 区别
在研究react和webpack的时候,经常看到在js文件中出现require,还有import,这两个都是为了JS模块化编程使用。CSS的是@import1.ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。Require是CommonJS的语法,CommonJS的模块是对象,输入时
Stella981 Stella981
2年前
ES6 模块化(Module)export和import详解
ES6模块化(Module)export和import详解ES6在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能
Stella981 Stella981
2年前
Javascript模块化开发-轻巧自制
一、前言现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端。模块化是必不可少的,这样不仅能够提高代码的可维护性、可扩展性以及鲁棒性,更大的好处就是能够提升整个团队的开发效率,也能够让新进的程序员更快的接手工作。今天晚上根据前辈们的经验,写啦一个简单的模块定义的封装组件,当是练手吧。不过感觉还是蛮好用的。
Stella981 Stella981
2年前
Android模块化初体验及教程
Android模块化一直是Android开发届一个很火的话题,因为公司业务太多,代码越来越臃肿,越来越难维护,为了提升开发效率,减低代码的维护成本,所以采取了模块化开发方案。我们知道,模块化其实就是讲每个业务,拆分成每个独立的模块,然后通过某种协议来达到模块与模块之间的通信。一般公司的项目的结构大概的如下:!(h
京东云开发者 京东云开发者
5个月前
Java模块化应用实践之精简JRE | 京东云技术团队
Java9及以后的版本引入了模块化特性,实际实践了一段时间之后发现“真香!”现在把“利用Java模块化精简JRE”的方法和经验分享给大家。
京东云开发者 京东云开发者
5个月前
jar包的精细化运营,Java模块化简介 | 京东云技术团队
图:模块化手机概念一、什么是Java模块化Java模块化(module)是Java9及以后版本引入的新特性。官方对模块的定义为:一个被命名的,代码和数据的自描述集合。(themodule,whichisanamed,selfdescribingcollec
金旋 金旋
2个月前
饥人谷-ES6深入浅出
//下仔のke:https://yeziit.cn/13998/ES6,也被称为ECMAScript2015,是JavaScript语言的最新版本。它引入了许多新特性,包括但不限于:模块化:ES6引入了内置的模块支持,允许你将代码划分为可重用的模块。解构赋