当前位置: 首页 > news >正文

ECMAScript入门(七)--Module语法

你带着你的同事联调的时候
????
图片描述

从古至今,Javascript都没有自带的模块体系,能做的,也就只是将不同作用的代码写在不同的JS文件中,然后通过<script>分别引入。这样做又一个非常致命的问题,那就是我们要定位一个方法变得非常的困难。

一个灵活的模块体系,能让你的代码之间的依赖关系更加直观,一个好的模块式的写法让没个方法都能很快的找到声明位置所在。

在NODE中是有这种写法的,我们称为CMD语法,就是通过require关键词,引入所要依赖的文件。

当然,随着前端在WEB开发中占据的比重越来越高,客户端JS的模块化也尤为重要。其实已经有比较成熟的前端框架来实现这个功能,比如RequireJsSeajs。ES6的出现,让JS实现模块功能变得更�加简单。

//requirejs的语法
define(['moudleA'], function(){
  function foo(){
    doSomething();
  }
  return {
    foo : foo
  };
});

//seajs的用法
// 所有模块都通过 define 来定义
define(function(require, exports, module) {
  // 通过 require 引入依赖
  var $ = require('jquery');
  var Spinning = require('./spinning');
  // 通过 exports 对外提供接口
  exports.doSomething = ...
  // 或者通过 module.exports 提供整个接口
  module.exports = ...
});

ES6的Module语法

ES6的模块功能主要通过两个关键字来实现exportimport

从字面上不难看出,export是输出,即用来将模块内部的方法暴露出来,而import是输入,即引入其他模块的方法,便于在本模块中调用其他模块的方法。

export关键字

正常来讲,我们可以将每个模块都写成一个独立的文件,由于Javascript作用域的问题,每个模块内部的变量及方法都是私有的,即只能内部访问,外部无法访问。要想使模块内部的方法可以从外部访问,就必须使用export关键字。

//moduleA.js
var moduleA1 = "a";
var moduleA2 = "aa";
function moduleFunc(){
    console.log(moduleA2);
}
export {
    moduleA1,
    moduleA2 as moduleA,
    moduleFunc as module
};

如上面的代码所示,在模块中声明了变量和方法,我们只需要将变量名或者方法名,置于export的作用下,就可以被其他模块使用。

as关键词可以用来重命名,上面的例子中moduleA就等于moduleA2

这里需要注意的是,export定义的是对外的接口,接口必须在模块内部被声明或实现过,不然就会报错。

var a = 1;
export a;//不报错

export b;//报错
import关键字

使用export定义了模块的接口之后,其他模块就可以通过import命令来引入这个模块

//moduleB.js
import {moduleA1, moduleA} from './moduleA.js';

import {module as moduleFunc} from './moduleA.js';

moduleFunc();

如上面的代码所示,通过import关键字从moduleA.js中引入了moduleA1moduleA2moduleFunc()三个变量,这样在这个模块中就能使用A模块中的变量了。

需要注意的是,import关键字有提升效果,也就是无论写在哪个位置,都和写在模块顶部效果一样。import加载模块的过程是在编译阶段执行的,代码运行之前就已经完成了加载过程。

如果我们需要引入一个模块中的所有变量,可以用下面的方法

//moduleC.js
import * as module from './moduleA.js';

module.moduleA;//"a"
module.moduleFunc();//"aa"

另外,import加载的文件是不会重复加载的

//moduleD.js
import {moduleA1} from './moduleA.js';
import {moduleA2} from './moduleA.js';

//等同于
import {moduleA1, moduleA2} from './moduleA.js';

moduleA.js只会加载一次。

export default

export default是用来声明模块的默认接口的。

//hello.js
var name = "dahan";
function sayHello(){
    console.log("Hello");
}

export default sayHello;

//person.js
import hello from './hello.js';
hello();
//"Hello"

使用export default声明的接口,引入的时候不需要使用大括号,也不用指定特定的变量名。

图片描述

相关文章:

  • Vista下显示XP下编辑的Word文档异常
  • grunt 报错:Cannot find module 'imagemin-gifsicle'
  • CCM管理员密码恢复
  • 神级程序猿用HTML5代码画出恐龙求欢图,想象力太丰富!
  • 考完NP了,现把相关的资料题库发给正在奋斗的朋友们
  • mysql binlog row模式日志查看
  • 哪个英文字母和数字最受 Google 宠爱?
  • ExtJs实践(5)——解决在GridPanel中使用bbar或者tbar的分页条的宽度自适应问题...
  • 【Java】【高精度】【递推】UVA - 11375 - Matches
  • c# 允许服务与桌面交互(已补充)
  • 让你的分享飞起来——极光推出社会化分享组件
  • Call指令和Ret指令讲解02 - 零基础入门学习汇编语言49
  • dubbo 入门
  • CentOS下rpm包与yum安装与卸载 更新系统源
  • Angular Service入门
  • [分享]iOS开发 - 实现UITableView Plain SectionView和table不停留一起滑动
  • 【挥舞JS】JS实现继承,封装一个extends方法
  • HashMap ConcurrentHashMap
  • JS字符串转数字方法总结
  • PHP的类修饰符与访问修饰符
  • Redis提升并发能力 | 从0开始构建SpringCloud微服务(2)
  • Wamp集成环境 添加PHP的新版本
  • 浮动相关
  • 面试总结JavaScript篇
  • 入门到放弃node系列之Hello Word篇
  • 原生js练习题---第五课
  • linux 淘宝开源监控工具tsar
  • 扩展资源服务器解决oauth2 性能瓶颈
  • ​一些不规范的GTID使用场景
  • #Linux(make工具和makefile文件以及makefile语法)
  • $.ajax()方法详解
  • (C++20) consteval立即函数
  • (Forward) Music Player: From UI Proposal to Code
  • (Spark3.2.0)Spark SQL 初探: 使用大数据分析2000万KF数据
  • (二)PySpark3:SparkSQL编程
  • (附源码)spring boot建达集团公司平台 毕业设计 141538
  • (免费领源码)python+django+mysql线上兼职平台系统83320-计算机毕业设计项目选题推荐
  • (强烈推荐)移动端音视频从零到上手(上)
  • (数据结构)顺序表的定义
  • (算法)Game
  • (已更新)关于Visual Studio 2019安装时VS installer无法下载文件,进度条为0,显示网络有问题的解决办法
  • (源码版)2024美国大学生数学建模E题财产保险的可持续模型详解思路+具体代码季节性时序预测SARIMA天气预测建模
  • *** 2003
  • .“空心村”成因分析及解决对策122344
  • .aanva
  • .gitignore文件—git忽略文件
  • .net core 依赖注入的基本用发
  • .net core 源码_ASP.NET Core之Identity源码学习
  • .NET Core、DNX、DNU、DNVM、MVC6学习资料
  • .NET Micro Framework初体验(二)
  • .net 生成二级域名
  • .net 桌面开发 运行一阵子就自动关闭_聊城旋转门家用价格大约是多少,全自动旋转门,期待合作...
  • .NET/C# 编译期间能确定的相同字符串,在运行期间是相同的实例
  • ::before和::after 常见的用法
  • @基于大模型的旅游路线推荐方案