前言：

以前，当然包括现在的大部分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. Django之--POST方法处理表单请求

    上一篇:Django之--MVC的Model 演示了如何使用GET方法处理表单请求,本文讲述直接在当前页面返回结果,并使用更常用的POST方法处理. 一.首先我们修改下page.html <!D ...

  2. Django + Uwsgi + Nginx 实现生产环境部署

    本节内容 uwsgi 介绍 uwsgi安装使用 nginx安装配置 django with nginx 如何在生产上部署Django? Django的部署可以有很多方式,采用nginx+uwsgi的方 ...

  3. c/c++ 标准顺序容器 容器的访问，删除 操作

    c/c++ 标准顺序容器 容器的访问,删除 操作 pop_front:vector,string不支持 pop_back:forward_list不支持 知识点 1,front, back, at 成 ...

  4. c/c++赋值函数（重载=号运算符）

    c/c++赋值函数(重载=号运算符) 首先c++里的各种运算符都是用函数实现的,比如=,就等号函数. 所以当用=给一个对象赋值的时候,实际调用的是=号所对应的=号函数. 分析下面的代码 #includ ...

  5. docker：版本变更

    在2017年之前的版本号: v1.4,  v1.5,  v1.6,  v1.7, v1.8, v1.9, v1.10, v1.11, v1.12, v1.13 从2017年开始版本后变更为:${yy} ...

  6. Java实现鼠标随机移动

    ---恢复内容开始--- 以前在公司工作的时候,电脑限制重重,不允许改锁屏时间,又不允许下载和安装软件. 需要在家办公support的时候,又没有什么事,但还是必须在线,所以就写了个小程序让鼠标自己随 ...

  7. 【vue】vue +element 搭建及开发中项目中，遇到的错误提示

    1. import Layout from '@/views/layout/Layout'; export default [ { // 配置路由,当路径为'/activePublic',使用组件ac ...

  8. python装饰器（备忘）

    # 装饰器decorator def deco1(fun): def PRINT(*args,**kwargs): print('------deco1------') fun(*args,**kwa ...

  9. 用java语言写一个简易版本的登录页面，包含用户注册、用户登录、用户注销、修改密码等功能

    package com.Summer_0421.cn; import java.util.Arrays; import java.util.Scanner; /** * @author Summer ...

  10. 项目Alpha冲刺4

    作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 介绍第四天冲刺的项目进展.问题困难和心得体会 1.团队信息 队名:火鸡堂 队 ...