1.目录结构

2.类语法与导出

class food {

}

//定义常量

let c = "苹果";

//正确的函数写法

food.prototype.getfood = function (str) {

    if (!str) {

        return "吃" + this.g;

    }

    return "吃" + str

}

//定义常量

food.prototype.g = "荔枝";

class food2 {

    //定义常量

    c2 = "苹果";

    //无法这个定义函数，错误写法

    // function kk(){

    //

    // }

    //正确的函数写法

    getfood2 = function (str) {

        if (!str) {

            return "吃" + c;

        }

        return "吃" + str

    }

}

//默认导出 ，如果事由一个类用这个方法修方便，

// export {food as default };

export {food, food2}

源码

写了两种定义类方法和属性变量的写法

注意：类名.prototype.【变量名或者方法】=  。。。这种写法是扩展写法，

或者说prototype就是用于扩展类里的变量名或者方法的

3.html 导入 与使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>组件引入测试</title>

<!--    &lt;!&ndash;导入脚本&ndash;&gt;-->

<!--    <script type="text/javascript" src="../../../plug/vue/devVue.js"></script>-->

<!--    &lt;!&ndash;导入样式&ndash;&gt;-->

<!--    <link rel="stylesheet" type="text/css" href="../../../css/myStyle.css">-->

<!--    &lt;!&ndash;layui 界面组件&ndash;&gt;-->

<!--    <link rel="stylesheet" type="text/css" href="../../../plug/layui/css/layui.css">-->

</head>

<body>

<div id="aut">

</div>

<!--模块加载需要将类型设置为module-->

<script type="module" >

    //http://localhost:57/html/pc/test/h1.html

    //正常导入类

    import {food,food2} from "./js/classTest1.js"

    //导入类换别名

    // import {food as f,food2 as f2} from "./js/classTest1.js"

    console.log(food)

    let c_food = new food();

    console.log(c_food.getfood())

    console.log(c_food.getfood("西瓜"))

    console.log(c_food.g)

    // console.log(mc.getfood())

    // console.log(mc.getfood("西瓜6655东方航空"))

    let c_food2 = new food2();

    console.log(c_food2.c2)

    console.log(c_food2.getfood2())

    console.log(c_food.getfood("芒果"))

</script>

</body>

</html>

源码

核心部分是

4.测试

打印结果如下

5.跨域提示

静态文件要么放在工程里、要么放在.net站点、要么配置nginx路由到本地的静态文件、要么修改浏览器的权限，否则会报CROS跨域异常

js 模块化 -- 基本的导出与引入class模块的更多相关文章

  1. 面试指南」JS 模块化、组件化、工程化相关的 15 道面试题

    JS 模块化.组件化.工程化相关的 15 道面试题 1.什么是模块化? 2.简述模块化的发展历程? 3.AMD.CMD.CommonJS 与 ES6 模块化的区别? 4.它们是如何使用的? 5.exp ...

  2. js模块化规范—CMD规范

    CMD规范说明 专门用于浏览器端, 模块的加载是异步的 ,模块使用时才会加载执行,github地址 CMD基本语法 定义暴露模块 //定义有依赖的模块 define(function(require, ...

  3. JS模块化开发：使用SeaJs高效构建页面

    一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...

  4. js模块化历程

    这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来.经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史. 无模块时代 在ajax还未提出 ...

  5. js 模块化历程

    作者:吕大豹 网址:http://www.cnblogs.com/lvdabao/p/js-modules-develop.html 这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生 ...

  6. js模块化/js模块加载器/js模块打包器

    之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...

  7. 再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6

    Javascript模块化编程,已经成为一个迫切的需求.理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. Javascript社区做了很多努力,在现有的运行环境中,实现” ...

  8. 一览js模块化：从CommonJS到ES6

    本文由云+社区发表 模块化是指把一个复杂的系统分解到一个一个的模块. 模块化开发的优点: (1)代码复用,让我们更方便地进行代码管理.同时也便于后面代码的修改和维护. (2)一个单独的文件就是一个模块 ...

  9. js模块化编程之彻底弄懂CommonJS和AMD/CMD！

    先回答我:为什么模块很重要? 答:因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块.但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写 ...

随机推荐

  1. ubuntu qq/微信

    Ubuntu qq&微信安装/启动脚本. Docker 本脚本依赖Docker,需要提前安装好Docker环境.参考https://yeasy.gitbooks.io/docker_pract ...

  2. 【C/C++】从矩阵左上角走到右下角

    tx的笔试,但是只过了10%,就离谱 #include <bits/stdc++.h> using namespace std; const int maxn = 1010; long d ...

  3. HTTP隧道解决的问题

    转自别人的文章:https://blog.csdn.net/gogzf/article/details/78385506 客户端通常会用 Web 代理服务器代表它们来访问 Web 服务器.比如,很多公 ...

  4. Python解释器下载安装

    一.简介 吉多·范罗苏姆(Guido van Rossum)在1989年的圣诞节期间,编写能够解释Python语言语法的解释器. 解释器版本 第一个数字是大版本号 数字不同功能上可能会有很大差异 py ...

  5. [BUUCTF]PWN——mrctf2020_shellcode

    mrctf2020_shellcode 附件 步骤: 例行检查,64位程序,开启了relro和pie,没有nx,肯定是用shellcode最方便了 本地试运行一下,看看大概的情况 64位ida载入,根 ...

  6. 使用PostMan测试WebService接口教程

    一.操作步骤 1.设置URL 2.设置请求模式:Post 3.设置Header:添加 Content-Type ,值为 text/xml;charset=utf-8 4.设置Body:勾选raw 5. ...

  7. 【LeetCode】01 Matrix 解题报告

    [LeetCode]01 Matrix 解题报告 标签(空格分隔): LeetCode 题目地址:https://leetcode.com/problems/01-matrix/#/descripti ...

  8. 【LeetCode】647. Palindromic Substrings 解题报告（Python）

    [LeetCode]647. Palindromic Substrings 解题报告(Python) 标签: LeetCode 题目地址:https://leetcode.com/problems/p ...

  9. 【LeetCode】709. To Lower Case 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述: 题目大意 解题方法 ASIIC码操作 日期 题目地址:https:// ...

  10. C. Hongcow Builds A Nation

    C. Hongcow Builds A Nation time limit per test 2 seconds memory limit per test 256 megabytes input s ...