zoukankan      html  css  js  c++  java
  • es6在网页中模块引入的方法

    前言:

    以前,当然包括现在的大部分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 这样控制要暴露的接口,这个待后续观看!

  • 相关阅读:
    浅谈缓存管理
    [Architecture Pattern] Database Migration (上)
    knockout.js的学习笔记4
    cenOS5.5安装oracle10g(傻瓜篇)
    SportsStore:管理 — 精通ASP.NET MVC 3
    ASP.NET MVC下的异步Action的定义和执行原理
    基于EF 4.3.1 Code First的领域驱动设计实践案例
    asp.net缓存
    《Pro ASP.NET MVC 3 Framework》部署
    Asp.Net MVC 3.0【Hello World!】
  • 原文地址:https://www.cnblogs.com/teamemory/p/9474713.html
Copyright © 2011-2022 走看看