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. 程序员Meme 第00期

  2. 10、Redis三种特殊的数据类型

    一.Geospatail地理位置 1.Geospatail的应用 朋友的位置,附近的人,打车距离 2.相关命令 1.geoadd:增加某个地理位置的坐标(可批量添加). 语法: GEOADD key ...

  3. pipeline 结构设计

    目录 一.pipeline步骤 二.案例 pipeline详解 只生成一次制品 不同环境部署 系统集成测试 指定版本部署 一.pipeline步骤 当团队开始设计第一个pipeline时,该如何下手呢 ...

  4. 攻击科普：DDos

    目录 一.DDoS 攻击究竟是什么? 二.DDoS 攻击多少G是什么意思? 二.DDoS攻击种类 ICMP Flood UDP Flood NTP Flood SYN Flood CC攻击 DNS Q ...

  5. CF1110A Parity 题解

    Content 求下面式子的奇偶性,其中 \(a_i,k,b\) 会在输入中给定. \[\sum\limits_{i=1}^k a_i\cdot b^{k-i} \] 数据范围:\(2\leqslan ...

  6. HTML标签一览

    html标签属性大全 嵌套的html窗口<iframe > <iframe src="https://www.baidu.com"></iframe& ...

  7. Go 的 golang.org/x/ 系列包和标准库包有什么区别？

    在开发过程中可能会遇到这样的情况,有一些包是引入自不同地方的,比如: golang.org/x/net/html 和 net/html, golang.org/x/crypto 和 crypto. 那 ...

  8. SpringBoot简单整合Actuator监控

    pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>s ...

  9. 【九度OJ】题目1187：最小年龄的3个职工 解题报告

    [九度OJ]题目1187:最小年龄的3个职工 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1187 题目描述: 职工有职工号,姓名, ...

  10. 【LeetCode】589. N-ary Tree Preorder Traversal 解题报告 (Python&C++)

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