JavaScript 大佬速成 - 4 - 使用JS开发JS模块

我是李君子

前言
根据前三篇教程
我们已经学会了很多实用的js技巧

今天我来带大家手搓assert模块

开始
兄弟们 开始手搓assert模块啦
创建一个名为assert.js的文件
首先我们要知道C中assert标准库的作用
assert提供了一个宏 接受一个参数判断 如果参数不为真则弹出错误
那我们可以把assert方法当做一个函数来看待
让我们来分析一下

1. 
   
2. export var assert = {
   
3.   //code
   
4. }//创建一个对象
   

复制代码

export关键字用于导出一个变量
( 有些环境可能会出问题 建议直接放到浏览器控制台测试
然后我们往这个对象里增加唯一一个函数
assert

1. 
   
2. var assert = {
   
3.   assert : str => {
   
4.     if(!str){ alert(Error.name + "\n" + str + "不为真");console.error() }
   
5.   }
   
6. }
   

复制代码

上述代码声明了一个函数变量
也就是assert函数
接受一个参数
当参数为真则什么也不会发生
如果发生为假则弹出 内置对象Error的name值 其不为真
如果有有错误则使用console的error方法将错误打印到控制台上

但是这时候我们就遇到了一个问题
如果条件是字符串的"5<0"也会返回真
因为解释器认为字符串存在所以是真
要想解决这个问题我们需要对代码进行一些修改

我们在条件上增加了eval将字符转换为式所以最后得到false 弹窗正常弹出

如果直接写表达式也会正常弹出 ( 直接写布尔类型也行


除此之外
我们可以这么写避免给出的不是一个正确的条件表达式

1. 
   
2. if(typeof eval(str) === "boolean"){
   
3.   //...code
   
4. }
   

复制代码

正确的条件表达式会返回一个布尔值
该条件可以避免给出的不是一个合理的条件表达式

然后我们保存文件
在HTML里加入

1. <script src="assert.js"></script>
   
2. <script>assert.assert(false)</script>

复制代码

或者在js里加入

1. import assert from "assert.js";
   
2. assert.assert(false);

复制代码

如果正常弹出弹窗就成功啦
是不是很简单呢

示例文件下载::
assert.zip (281 Bytes, 下载次数: 6)

2024-2-7 22:13 上传

点击文件名下载附件

结语
Js写js模块仅能实现前端功能
如果想实现后端功能你应该去学习nodejs和npm

我是李君子

不要忘记在script元素里加上type="module"哦
要不然export和import均无效

我刚被坑，你们别被坑了就行

我是李君子

示例代码忘加export关键字了
不过不要紧

因为var关键字会污染全局
另外只要你HTML引用上问题不大

克里昂一世

我是李君子 发表于 2024-2-7 22:19
示例代码忘加export关键字了
不过不要紧

不学java但前排支持！