前端模块化开发

news2024/12/22 23:21:51

1.模块化产生的背景

Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。

但是,Javascript不是一种模块化编程语言,它不支持"类"(class),包(package)等概念,更遑论"模块"(module)了。

2.什么是模块化开发

传统非模块化开发有如下的缺点:

  • 命名冲突
  • 文件依赖

模块化规范:

  • CommonJS模块化规范
  • ES6模块化规范

3.CommonJS模块规范 

每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。

①创建model文件夹,在该文件夹下创建es5文件夹然后分别创建1.js导出文件以及2.js导入文件

// 1.js导出文件
// 定义成员:
const sum = function(a,b){
    return parseInt(a) + parseInt(b)
}
const subtract = function(a,b){
    return parseInt(a) - parseInt(b)
}

//导出成员
module.exports = {
    sum,
    subtract
}
//2.js导入文件
//引入模块,注意:当前路径必须写./
const m = require('./1.js')
console.log(m)

const result1 = m.sum(1,2)
const result2 = m.subtract(1,2)
console.log(result1,result2)

②执行结果如下

CommonJS使用 exports 和require 来导出、导入模块。

 4.ES6模块化规范

ES6使用 export 和 import 来导出、导入模块。

①在model文件夹下创建es6文件夹,然后再该文件夹下创建1.js导出文件和2.js导入文件

// 1.js导出文件
export function getList(){
    console.log("查询数据列表...")
}
export function save(){
    console.log("保存数据...")
}
// 2.js导入文件
import {getList,save} from "./01.js"
getList()
save()

创建成功后,在终端使用node执行该命令,结果会报下面的错误

这个错误不是es6语法的错误,是因为node不支持es6规范导致的,所以我们需要使用babel工具进行转码工作,将es6的js文件转为es5的文件,转码命令如下,改babel的命令就是将es6文件夹下的所有js文件全部转换为es5文件夹下的js文件

 

babel es6 -d es5

 

 最终的执行结果如下

所以使用node工具将es6规范的js文件转换为es5规范的js文件在进行执行

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/64609.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

持续的敏捷转型--我们的经验

作者:Shalini Joshi、 Syed Tamkeen Banu 在这篇文章中,我们将分享自己的经验和教训,说明组织可能在哪些方面会失败,以及可以采取哪些积极措施。 一、简介 如今,大多数组织为了获取更快的交付、更高的商业价值和更好的…

Markdown使用模板

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注…

智能仓储机器人设计

目录 第一章 绪论 1 1.1 研究的背景与意义[1] 1 1.2 机器人的研究现状[4] 2 1.3机器人的发展趋势 4 1.4本文的主要研究内容 5 第二章 机器人总体方案设计 7 2.1 小型仓储机器人的功能 7 2.2 传感器系统[13] 7 2.3 移动载体 7 2.4 自由度与机器人的运作 8 2.5 控制方式的选择 9 …

Git使用及配置

一、下载安装 网上很多教程我就不出了,hh 二、配置 1.设置用户信息 //设置用户信息 git config --global user.name"xxx" git config --global user.email"xxxxx.xxx" 三、获取本地仓库 1.在电脑上创建一个空目录作为本地Git仓库 2.进入这…

【Redis】初识Redis

1.初识Redis1.1安装1.2数据结构1.2.1 通用命令1.2.2 String类型key的结构1.2.3 Hash类型2.Jedis2.1 添加依赖及配置2.2 配置StringRedisTemplte1.初识Redis Redis是一个基于内存的键值型NoSQL数据库。其具有性能优越、持久化的特点,能够支持每秒十几万次的读写操作…

前端面试题之【HTTP/HTML/浏览器】

1.说一下http与https http:超文本传输协议,https:超文本传输安全协议 区别: http传输数据是未加密的,是明文传输;https使用ssl协议对数据进行加密处理;https协议需要ca证书,费用高…

【VUE 嵌套路由】

目录 1. 嵌套路由 2. 通俗小结 1. 嵌套路由 要使用菜单显示出“点击不同的菜单项显示不同的内容”的效果&#xff0c;需要使用嵌套路由&#xff01; 因为&#xff0c;在当前设计中&#xff0c;App.vue是显示整个页面的入口&#xff0c;而App.vue就已经使用<router-view/…

应急物资仓库管理系统-3D可视化管理系统

1. 系统介绍 RFID智慧应急物资仓库可视化管理系统是杭州东识科技有限公司基于物联网RFID技术、云计算技术、3D可视化技术、数据采集技术等&#xff0c;专门为政府、军队等部门量身定制的一体化物资综合管理平台。 本系统包括&#xff1a;物资安全监控部分——提供对环境温湿度监…

[附源码]Python计算机毕业设计Django失物招领微信小程序论文

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

Slowloris DoS攻击的原理与简单实现

前言 Slowloris 攻击是我在李华峰老师的书——《Metasploit Web 渗透测试实战》里面看的&#xff0c;感觉既简单又使用&#xff0c;现在这种攻击是很容易被防护的啦。不过我也不敢真刀实战的去试&#xff0c;只是拿个靶机玩玩罢了。 废话还是写在结语里面吧。&#xff08;划掉&…

Java 中重写了 equals 为什么还要重写 hashCode?

问题 不管是在书本或者是博客上&#xff0c;都会推荐我们在重写 equals 方法时重写 hashCode 方法。明明对象之间就是通过 equals 方法进行判断的&#xff0c;那么为什么非要写 hashCode 方法呢? equals 实验 创建一个 Teacher 类。方便起见&#xff0c;就一个 name 属性。…

1.1 异步相关概念:初步了解

1.进程和线程的概念 计算机有5大基本组成部分&#xff0c;运算器&#xff0c;控制器&#xff0c;存储器&#xff0c;输入和输出。运算器和控制器封装到一起&#xff0c;加上寄存器组和cpu内部总线构成中央处理器&#xff08;CPU&#xff09;。cpu的根本任务&#xff0c;就是执…

2022年跨境电商卖家如何在Facebook上做广告【完整指南】

关键词&#xff1a;跨境电商卖家、Facebook广告 了解如何在 Facebook 上做广告对于大多数跨境电商卖家来说是一项非常重要的技能&#xff0c;因为您在 Facebook 上做广告&#xff0c;您的广告可以覆盖21.7 亿人——换句话说&#xff0c;接近世界人口的 30%。此外&#xff0c;该…

Java项目:SSM物业缴费管理系统

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 管理员角色包含以下功能&#xff1a; 管理员登录,管理员管理,住户管理,缴费列表,公告列表管理,用户反馈管理等功能。 用户角色包含以下功能&…

[附源码]计算机毕业设计失物招领微信小程序论文Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

keras-gpu安装

需要安装&#xff1a; TensorFlow 安装&#xff08;包含cudatoolkit、cuDNN&#xff09; HDF5 和 h5py (如果你需要将 Keras模型保存到磁盘&#xff0c;则需要这些) graphviz 和 pydot (用于绘制模型图的可视化工具) Keras 一、更新驱动 先升级显卡驱动&#xff1a;https://zh…

【软件测试】测试老鸟老张,我的梦想是什么?梦想还在吗?

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 老张&#xff1a; 这…

QML + KDDockWidget 实现 tabwidget效果( 窗口可独立浮动和缩放)

前言 前面文章介绍过在QML中使用ListView实现TabBar标签拖拽交换位置效果&#xff08;文章在这里&#xff09; 先在此基础上升级一下&#xff0c;结合KDDockWidget做一个可浮动的窗口效果。 关于KDDockWidget的介绍&#xff0c;以前的文章有写过&#xff0c;可参考&#xff…

[附源码]Python计算机毕业设计SSM健身俱乐部管理系统(程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

移动WEB开发之rem布局--rem适配方案

思考 1. 我们适配的目标是什么&#xff1f; 2. 怎么去达到这个目标的&#xff1f; 3. 在实际的开发当中使用&#xff1f; 答案 1. 让一些不能等比自适应的元素&#xff0c;达到当设备尺寸发生改变的时候&#xff0c;等比例适配当前设备。 2. 使用媒体查询根据不同设备按比例…