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. 阿里巴巴Java开发手册摘要（一）

    一命名风格 1.代码中的命名均不能以下划线或美元符号开始,也不能以下划线或美元符号结尾. 反例:_name / $name / name_ / name$ 2.类名使用UpperCamelCase风格 ...

  2. mobile app 与server通信的四种方式

    Have you ever wondered how the information gets into the application installed in your mobile device ...

  3. JUC之Lock接口以及Synchronized回顾

    Lock接口 Synchronized关键字回顾: 多线程编程步骤(上): 创建资源类,在资源类创建属性和操作方法 创建多个线程,调用资源类的操作方法 创建线程的四种方式: 继承Thread 实现Ru ...

  4. CF80B Depression 题解

    Content 有一个时针,给定时间为 \(\text{HH}\) 时 \(\text{MM}\) 分,求图中 \(\alpha\) 和 \(\beta\) 角的值. 手画勿喷/kk 数据范围:\(0 ...

  5. java.lang.NoClassDefFoundError: org/w3c/dom/ElementTraversal报错处理

    org.springframework.web.util.NestedServletException: Handler dispatch failed; nested exception is ja ...

  6. 优化MySQL占用内存过高

    打开mysql 的配置文件  my.cnf 查找方式:https://www.cnblogs.com/pxblog/p/13701211.html 在[mysqld]后面修改或添加 # The max ...

  7. 【LeetCode】119. 杨辉三角 II Pascal‘s Triangle II（Python & Java）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题思路 方法一: 空间复杂度 O ( k ∗ ( k + 1 ...

  8. 【LeetCode】887. Super Egg Drop 解题报告（Python）

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

  9. 【LeetCode】540. Single Element in a Sorted Array 解题报告（Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 解题方法 方法一:异或 方法二:判断相邻元素是否相等 方法三:二分查找 ...

  10. 【LeetCode】904. Fruit Into Baskets 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/fruit-in ...