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. 莫烦python教程学习笔记——总结篇

    一.机器学习算法分类: 监督学习:提供数据和数据分类标签.--分类.回归 非监督学习:只提供数据,不提供标签. 半监督学习 强化学习:尝试各种手段,自己去适应环境和规则.总结经验利用反馈,不断提高算法 ...

  2. 访问者模式(Visitor Pattern)——操作复杂对象结构

    模式概述 在软件开发中,可能会遇到操作复杂对象结构的场景,在该对象结构中存储了多个不同类型的对象信息,而且对同一对象结构中的元素的操作方式并不唯一,可能需要提供多种不同的处理方式,还有可能增加新的处理 ...

  3. mysqldump备份容灾脚本

    目录 一.备份脚本 环境需求 全量脚本 增量脚本 二.备份策略 三.容灾测试 准备 测试 误删除 一.备份脚本 环境需求 编辑/etc/my.cnf文件添加在[mysqld]版块下添加如下变量,添加后 ...

  4. Jenkins实例 Maven项目

    目录 一.准备 二.创建项目 创建maven项目 源码管理部分 构建编译 Post Steps打包 构建后操作 三.测试 一.准备 先看初始化设置,如果做完初始化,则跳过 安装如下插件 Maven I ...

  5. Jenkins分布式与并行

    目录 一.简介 二.agent 通过JNLP协议增加agent 通过Swarm插件增加agent agent部分详解 三.agent放入Docker 使用Docker 配置Docker私有仓库 四.并 ...

  6. C#面对抽象编程第一讲

    闲话不多说,面向对象编程是高级语言的一个特点,但是把它概括成面向抽象更容易直击灵魂,经过了菜鸟大家都要面对的是不要写这么菜的代码了. 上例子,这应该是大家都很熟悉耳熟能详的代码, so easy. 1 ...

  7. Python的 垃圾回收机制

    垃圾回收 1. 小整数对象池 整数在程序中的使用非常广泛,Python为了优化速度,使用了小整数对象池, 避免为整数频繁申请和销毁内存空间. Python 对小整数的定义是 [-5, 257) 这些整 ...

  8. 重学c#系列——datetime 和 datetimeoffset[二十一]

    前言 简单介绍一下datetime和 datetimeoffset. 正文 了解一个国家的文化,就要了解一个国家的历史. 要了解datetimeoffset,那么很有必要了解一下datetime. 表 ...

  9. 【LeetCode】873. Length of Longest Fibonacci Subsequence 解题报告（Python）

    [LeetCode]873. Length of Longest Fibonacci Subsequence 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: ...

  10. 【LeetCode】735. Asteroid Collision 解题报告（Python & C++）

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