ES6模块系统:组件化开发的利器
最编程
2024-01-04 12:22:44
...
模块化
ES6模块化原理
使用闭包封装了私有变量和方法,暴露一个接口供其他部分调用
<script>
let module = (function(){
const moduleList = {};
function define(name,modules,action) {
modules.map((m,i) => {
modules[i] = moduleList[m]
})
moduleList[name] = action.apply(null,modules);
console.log(moduleList);
}
return {define}
}());
/* 名字 是否依赖 动作 */
/* 导出 通过返回出一个接口来调用*/
module.define('tools',[],function(){
return {
first(arr) {
return arr[0]
},
max(arr,key) {
return arr.sort((a , b) => b[key] - a[key])[0];
}
}
});
/* 依赖 */
module.define('lesson',['tools'],function(tools){
let data = [{
name:'js',
pice: 199
},{
name: 'msq',
price: 78
}]
console.log(tools.max(data,"price"));
})
</script>
模块化的使用
- 加上
type = 'module'
- 只有开放的才能被使用
- 通过利用
export
,开放出口,导出 - 利用
import
导入
<script type="module">
import { title ,show} from "./tools.js";
show();//123
</script>
/*导出*/
let title = 'houdun';
let show = function() {
console.log(123);
}
export {title , show}
模块会延迟解析,只解析一次
每个模块都有自己的独立作用域,只通过export来暴露端口
批量打包
import * as api from "/tools.js";
api.show()
返回的api是对象,通过api.show
来访问
别名使用
只能有一个名字!
导入
import { title as t} from "./tools.js";
用as操作符来设置别名
导入
也是通过as来设置
默认导出
只能有一个,可以用任何的别名来接收
export default class User {
}
/*实际原理是导出是设置别名为default*/
混合导入导出
带花括号是具名导出,不带花括号是默认导出
模块的合并导出
通过将所有的模块引入到一个index模块中,最后再一次导出index模块
为了避免导出现多个模块中有重复命名的问题,将每个模块通过批量导出的方法,引入到index中,原理就是批量导出返回的是对象,每个对象有不同的名字实现了差异化
按需动态加载
利用import只能放在顶层,不能放在花括号当中,所以无法实现按需加载的功能
var btn = document.querySelector('button');
btn.addEventListener('click',() => {
import("/tools.js").then(({title,show}) => {
show();
})
})
利用import
函数返回一个promise对象,通过对象下的then
方法来实现
最近在写css的过程中,发现代码越来越多,了解了一下模块化的概念,记了一些比较基础的东西,但是还是有很多地方需要及时补充的,比如对于css文件的打包问题等,继续学习吧
推荐阅读
-
基于 NFC 的无线电池管理 BMS - ● 主动读取内部传感器:利用 NFC 技术,BMS 能够主动读取内部传感器的数据 [... 考虑车辆外使用案例中的空闲状态场景:NFC 技术可用于处理闲置状态下的电池组读取,例如在第二次生命转移期间进行存储。 主动诊断读取:在邻近系统中部署了 BMS 的情况下,使用 NFC 技术进行主动诊断读取。 (ii) 系统结构 系统架构如图所示,在建立安全通道之前,需要对设备进行身份验证。数据链路通信层由 NDEF 记录处理,而数据存储可以是离线的,也可以是数据库中的在线存储。活动和空闲状态的诊断读数取决于设备和数据方向,需要与外部 NFC 阅读器进行通信。软件架构分为三层,包括硬件抽象层(HAL)、中间层(中间件)和应用层。HAL 处理硬件驱动组件,中间件执行设备验证,而应用层则由开发人员根据安全漏洞和格式扩展*定义。 为确保安全,系统采用了一个安全模型,为 BMS 和主动诊断读取情况格式化应用数据。安全考虑因素包括设备相互验证、使用安全通道(加密和防篡改)以及确保电池组内读数的安全。 考虑到不同的 BMS 拓扑,包括集中式、调制式、分布式和分散式,系统需要满足设备相互验证和使用安全通道的要求。对于每种拓扑结构,都必须考虑将性能开销降至最低。电池是封闭的,对其进行物理攻击不可行或成本太高。外部攻击可能也很困难。基于对称或非对称加密技术的自动验证可用于保护电池组读数。安全协议在验证阶段和会话密钥确认阶段采用双密钥加密,以抵御攻击。中间件在数据格式验证、确认和处理中发挥关键作用,确保数据传输安全。 (iii) 唤醒模型设计
-
玩转Java底层:JMX详解 - jconsole与自定义MBean监控工具的实际应用与区别" 在日常JVM调优中,我们熟知的jconsole工具通过JMX包装的bean以图形化形式展示管理数据,而像jstat和jmap这类内建监控工具则由JVM直接支持。本文将以jconsole为例,深入讲解其实质——基于JMX的MBean功能,包括可视化界面上的bean属性查看和操作调用。 MBeans在jconsole中的体现是那些可观察的组件属性和方法,如上图所示,通过名为"Verbose"的属性能看到其值为false,同时还能直接操作该bean的方法,例如"closeJerryMBean"。 尽管jconsole给我们提供了直观的可视化界面,但请注意,这里的MBean并非固定不变,开发者可根据JMX提供的接口将自己的自定义bean展示到jconsole。以下步骤展示了如何创建并注册一个名为"StudyJavaMBean"的自定义MBean: 1. 首先定义接口`StudyJavaMBean`,接口需遵循MBean规范,即后缀为"MBean"且包含getter方法代表属性,如`getApplicationName`,和无返回值的setter方法代表操作,如`closeJerryMBean`。 ```java public interface StudyJavaMBean { String getApplicationName(); void closeJerryMBean(); } ``` 2. 编写接口的实现类`StudyJavaMBeanImpl`,实现接口中的方法: ```java public class StudyJavaMBeanImpl implements StudyJavaMBean { @Override public String getApplicationName() { return "每天学Java"; } @Override public void closeJerryMBean() { System.out.println("关闭Jerry应用"); } } ``` 3. 在代码中注册自定义MBean,涉及的关键步骤包括: - 获取平台MBeanServer - 定义ObjectName,指定唯一的MBean标识符 - 注册MBean到服务器 - 启动RMI连接器服务,以便jconsole能够访问 ```java public void registerMBean() throws Exception { // ... 具体实现省略 ... } ``` 实际运行注册后的MBean,您将在jconsole中发现并查看自定义bean的属性和调用相关方法。然而,这种方式相较于传统的属性/日志查看和HTTP接口,实用性相对有限,可能存在潜在的安全风险。但不可否认的是,JMX及其MBean机制对于获取操作系统信息、内存状态等关键性能指标仍然具有重要价值。例如: 1. **获取操作系统信息**:通过JMX MBean,可以直接获取到诸如CPU使用率、操作系统版本等系统级信息,这对于资源管理和优化工作具有显著帮助。
-
ES6模块系统:组件化开发的利器
-
Vue3实战开发带有CSS模块化的组件库