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. 使用Lock接口来解决线程安全的问题

    package cn.itcast.demo16.Demo09.Lock;import java.util.concurrent.locks.Lock;import java.util.concurr ...

  2. 关于for与forEach遍历集合中对集合进行操作的问题

    遍历List集合,在循环中再对List集合进行操作,有时候会遇到ConcurrentModificationException(并发修改异常);其实只有在forEach循环集合再对集合操作会发生异常: ...

  3. 带你揭开WebSerivce的面纱

    最近在工作中遇到这样的一个项目(暂且定为项目A),项目A本身是用PHP开发的,但是其数据是来自于另一个使用java开发的项目(暂且定为项目B),项目A不能操作项目B的数据库,它有其自己的一套数据库,只 ...

  4. [BUUCTF]REVERSE——[GKCTF2020]Check_1n

    [GKCTF2020]Check_1n 附件 步骤: 例行查壳儿,32位程序,无壳儿 32位ida载入,习惯性的检索程序里的字符串,看到了一个比较有意思的字符串,但是不懂是什么解密,先不管它了 在这些 ...

  5. CF1438A Specific Tastes of Andre 题解

    Content 如果一个序列的和能够被它的长度整除,我们称这个序列是不错的.如果一个序列的所有的非空子序列都是不错的,我们就称这个序列是完美的.现在有 \(t\) 组询问,每组询问给定一个整数 \(n ...

  6. HTTPS握手-混合加解密过程

    SSL协议通信过程 (1) 浏览器发送一个连接请求给服务器;服务器将自己的证书(包含服务器公钥S_PuKey).对称加密算法种类及其他相关信息返回客户端; (2) 客户端浏览器检查服务器传送到CA证书 ...

  7. AcWing429. 奖学金

    题目: 某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前5名学生发奖学金. 期末,每个学生都有3门课的成绩:语文.数学.英语. 先按总分从高到低排序,如果两个同学总分相同,再按语文成绩从 ...

  8. ACwing1216. 饮料换购

    题目: 乐羊羊饮料厂正在举办一次促销优惠活动.乐羊羊C型饮料,凭3个瓶盖可以再换一瓶C型饮料,并且可以一直循环下去(但不允许暂借或赊账). 请你计算一下,如果小明不浪费瓶盖,尽量地参加活动,那么,对于 ...

  9. JAVA连接redis报错 ：stop-writes-on-bgsave-error option

    (error) MISCONF Redis is configured to save RDB snapshots, but it is currently not able to persist o ...

  10. JAVA类初始化和实例初始化

    一.类初始化过程 1.一个类要创建实例需要先创建和加载 (1) main方法所在的类需要先加载和实例化 2.一个子类要初始化,需要先初始化父类 3.一个类初始化就是执行<clinit>方法 ...