前言：

以前，当然包括现在的大部分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. Linux用户抢占和内核抢占详解(概念, 实现和触发时机)--Linux进程的管理与调度(二十）

    1 非抢占式和可抢占式内核 为了简化问题,我使用嵌入式实时系统uC/OS作为例子 首先要指出的是,uC/OS只有内核态,没有用户态,这和Linux不一样 多任务系统中, 内核负责管理各个任务, 或者说 ...

  2. Linux中shell和子shell一点点理解

    Linux执行脚本有两种方式,主要区别在于是否建立子shell   1.像sh,bash,./命令是用来执行shell脚本的,在bash/sh命令下,脚本文件可以无"执行权限",即 ...

  3. 代码管理工具：Git 和 Svn 的简单操作

    1. git 先注册git config --global user.name "name" git config --global user.email "email& ...

  4. June 4. 2018 Week 23rd Monday

    Don't criticize what you can't understand. 不懂的,不要随意批判. From Bob Dylan. Don't criticize what you can' ...

  5. February 20th, 2018 Week 8th Tuesday

    Receive without conceit, release without struggle. 接受时,不狂妄:放手时,不犹豫. How to understand this quote? Do ...

  6. MyBatis动态SQL之一使用 if 标签和 choose标签

    bootstrap react https://segmentfault.com/a/1190000010383464 xml 中 < 转义 to thi tha <if test=&qu ...

  7. bootstrap的datepicker在选择日期后调用某个方法

    bootstrap的datepicker在选择日期后调用某个方法 2016-11-08 15:14 1311人阅读 评论(0) 收藏 举报 首先感谢网易LOFTER博主Ivy的博客,我才顿悟了问题所在 ...

  8. 一个特别好用的属性：inline-block

    说起inline-block,大家都不陌生,如果我要保证:有一个内联元素,保证它换行时,不被截断,而要整体换行,那么设置:display:inline-block 即可

  9. node基础—概述与安装

    什么是Nodejs 简单的说 Node.js 就是运行在服务端的 JavaScrip(编写高性能网络服务器的JavaScript工具包(用js开发服务端程序))t. JS是脚本语言,脚本语言都需要一个 ...

  10. python 列表 元祖

    # # 1,写代码,有如下列列表,按照要求实现每⼀一个功能li = ["alex", "WuSir", "ritian", "ba ...