前言：

以前，当然包括现在的大部分js引入，我们都是利用<script></script>这种全局的方式进行引入，当然这种弊端还是用的，比如这样直接利用script引入的话，会导致全局暴露，会有变量冲突的可能。

基于此，es6引入了模块引用，具体就是利用import 和 export来进行操作。（当然，大部分后台语言早已经实现了模块引入，甚至包括css这种样式）。

1、那么网页中如何引入js模块呢？ 请看下面小案例。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <script type="module">

        import es6 from './es6.js';

        let bb = es6.test.start();

        console.log(bb);

    </script>

</body>

</html>

注意：1、type="module"必须要写，否则，目前的浏览器不支持/2、必须要用访问服务器方式打开浏览器，不能直接打开浏览器，否则报错 from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

2、被引入的js如何写的呢？请看下面案例。

class Num{

  constructor(x,y){

    this.x = x;

    this.y = y;

  }

  start(){

    return this.x+this.y;

  }

}

let test = new Num(2,98980);

export default{

  test

}

总结：通过以上两个文件的引用，我们就可以很明晰地了解到es6的模块引入方式怎么使用了。

php,python的模块引入和js有相似之处。但是，貌似只有js的模块被引用时需要export default 这样控制要暴露的接口，这个待后续观看！

es6在网页中模块引入的方法的更多相关文章

  1. 查看python中模块的所有方法

    查看python中模块的所有方法     安装的python模块,现将查看方法总结如下 一.CMD命令行下使用pydoc命令 在命令行下运行$ pydoc modules即可查看 二.在python交 ...

  2. 网页中显示pdf的方法

    非常好的在网页中显示pdf的方法 今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunki ...

  3. .NET混合开发解决方案11 WebView2加载的网页中JS调用C#方法

    系列目录     [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...

  4. 使用CKplayer插件在网页中嵌入视频的方法（常用笔记2）

    在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...

  5. 非常好的在网页中显示pdf的方法

    今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunkie/web_designers_g ...

  6. 【CKplayer】使用CKplayer插件在网页中嵌入视频的方法

    在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...

  7. 转：HTML网页中插入视频各种方法

    现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...

  8. 【转】HTML网页中插入视频各种方法

    现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...

  9. php include，require 主要是向网页中引入文件

随机推荐

  1. Javascript 高级程序设计--总结【四】

    *******************************  Chapter 11 DOM扩展  ******************************* 主要的扩展是 选择符API 和 H ...

  2. Window快捷键

    1.带windows 键 Win + E 打开文件夹 Win + R 调出运行命令 Win + T 显示任务栏,并在在其中切换 Win +Pause 显示系统属性 Win + Home 最小化 / 还 ...

  3. 【2018.08.13 C与C++基础】C++语言的设计与演化读书笔记

    先占坑 老实说看这本书的时候,有很多地方都很迷糊,但却说不清楚问题到底在哪里,只能和Effective C++联系起来,更深层次的东西就想不到了. 链接: https://blog.csdn.net/ ...

  4. vbs脚本,电脑说出指定内容

    新建文件, 输入一下脚本, 然后保存文件为 .vbs 文件, 双击脚本, 电脑就能听到电脑发出 你好 的声音 CreateObject("SAPI.SpVoice").Speak& ...

  5. Django forms 关于select和checkbox设置初始选中值

    Django的forms和models一样很牛逼.他有两种功能,一是生成form表单,还有就是form表单的验证. 这里主要说一下生成form表单时经常用到的需要设置 初始值 / 默认值 的情况. 1 ...

  6. spark on yarn 集群部署

    概述 hadoop2.7.1 spark 1.5.1 192.168.31.62   resourcemanager, namenode, master 192.168.31.63   nodeman ...

  7. ant.design React使用Echarts，实力踩坑

    最近项目用到Echarts(以下用ec代替),于是照猫画虎得引入到团队的antd项目中,但是遇到2个棘手问题: 1. ec对dom不渲染,检查后发现,原来是全局存在id重复,所以使用React时,最好 ...

  8. Grid布局指南

    简介 CSS网格布局(又称“网格”),是一种二维网格布局系统.CSS在处理网页布局方面一直做的不是很好.一开始我们用的是table(表格)布局,然后用float(浮动),position(定位)和in ...

  9. springboot--bean交给容器

    1.把bean交给springboot管理 springboot也是一个spring容器.把一个bean交给springboot的容器有三种方法,前两种是先把bean交给spring容器再把sprin ...

  10. 002_pip安装失败

    一.安装cmdb的驱动遇到了如下问题 [root@localhost 003_pyenv]# pip2.7 install cmdb_sdk==0.3.1 -i http://cmdb.elenet. ...