目录 前言 如何在 JavaScript 中与日期对象进行日期比较 如何使用 JavaScript 进行等式比较 如何执行特定日期比较 总结 前言 日期是开发人员在创建实际应用程序时最常用的数据类型之一. 但通常,开发人员会在这种数据类型上苦苦挣扎,最终使用像 Moment.js 这样的日期库来完成简单的任务,这些任务不值得安装整个包所带来的大包大小. 当我们想到 JavaScript 中的日期比较时,我们会想到使用 Date 对象 ( Date()),当然,它确实有效. date 对象允许我们
javascript技巧
如何在JavaScript中比较日期详解
教你巧用webpack在日志中记录文件行号
目录 前言 通过提取 Error 错误栈 通过 webpack 预处理 总结 前言 在做前端项目时,会在各个关键节点打印日志,方便后续数据分析和问题排查.当日志越来越多之后,又会遇到通过日志反查代码所在文件和所在行的场景,于是一个很自然的需求就出来了: 在打印日志的时候,自动注入当前文件名.行号.列号. 举个例子,有个 logger 函数,我们在 index.js 的业务代码某一行添加打印逻辑: const { logLine } = require('./utils') function ge
uni-app多环境部署解决方案详解
目录 前言 尝试几种方式 解决方案 部署方式 获取接口 部署路径 命令行 其他 总结 前言 最近几周都在处理公司的移动业务,而为在后期能统一多端,解放自己,迎合公司的技术栈:选用了 uni-app 来开发.开发前期重新对公司移动业务做深入了解,重构大部分业务逻辑,也抽离出基础组件:但实际到部署的时候,出现来问题:由于现在只考虑 H5 端,部署和测试会出现多环境配置,但是我使用的 HBuilderX 工具创建的工程,所以只存在开发环境:development 和生产环境:production. 尝
JS 加载性能Tree Shaking优化详解
目录 正文 什么是 Tree Shaking 寻找 Tree Shaking 的机会 防止 Babel 将 ES6 模块转换为 CommonJS 模块 留意 side effects 只导入你需要的 更复杂的情况 总结 正文 随着 web 应用复杂性增加,JS 代码文件的大小也在不断的攀升,截住 2021年9月,在 httparchive 上有统计显示——在移动设备上 JS 传输大小大约为 447 KB,桌面端 JS 传输大小大约为 495 KB,注意这仅仅是在网络中传输的 JS 文件大小,JS
TypeScript类型系统自定义数据类型教程示例
目录 TypeScript 类型系统和自定义数据类型 什么是类型系统 函数类型 类型别名 可选参数 默认参数 函数重载 接口类型 可选属性 只读属性 接口扩展 多重接口声明 接口的索引签名 用接口描述函数 类类型 implements关键字 类的静态端类型和实例端类型 将 this 作为类型 将 this 作为参数 枚举 枚举类型 枚举的成员类型 枚举的成员 字面量类型 联合类型 交叉类型 泛型 泛型函数 泛型接口 泛型类 在工厂函数中使用泛型 泛型约束 在泛型约束中使用类型参数 在泛型中使用条
TypeScript类型断言VS类型守卫示例详解
目录 类型断言 类型守卫 使用 in 关键字 使用 instanceof 关键字 使用 typeof 关键字 自定义类型守卫 总结 类型断言 类型断言有两种写法,分别为value as Type和<Type>value,它让 TypeScript 编译器将 value 当作 Type 类型.类型断言是一个编译时特性,不进行类型转换,因此不会影响变量在运行时的数据类型.如果某变量是 any 类型,但现在你知道它确切的数据类型,使用类型断言能让 IDE 有代码提示的能力,也能让 TypeScrip
uni-app的基本使用教程
目录 一.uni-app介绍 1.1为什么要去学习uni-app? 1.2 环境搭建 1.3 利用HbuilderX初始化项目 1.4 运行项目 1.5 介绍项目目录和文件作用 2.全局配置和页面配置 2.1 通过globalStyle进行全局配置 2.2 创建新的message页面 2.3 通过pages来配置页面 2.4 配置tabbar 2.5 condition启动模式配置 一.uni-app介绍 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开
JS中异常抛出和处理方法图文详解
目录 抛出异常 抛出的表达式类型 基本数据类型 对象 类的实例对象 Error 类的实例对象 Error 的子类 处理异常 js中常见的系统异常: 总结 抛出异常 在 js 中,有时候我们需要处理一些异常或错误.比如编写的某个函数所接收的参数要求是 Number 类型的,如果在该函数被调用时传入的是字符串,就需要发出提醒.此时我们可以使用 throw 语句来抛出个异常: // 例 1 function fn(num) { if (typeof num !== 'number') throw '需
JavaScript数组合并的8种常见方法小结
目录 1.ES6 解构 2.遍历添加 3.concat 4.join & split 5.解构添加 6.splice解构 7.apply 8.call 补充:两个数组的交叉合并 总结 1.ES6 解构 [...arr, ...array] 不改原数组值,生成新的数组. 2.遍历添加 array.forEach(item => { arr.push(item) }) 遍历方法:forEach.map.filter.every.for.for in.for of等. 添加方法:push(后追加)
JavaScript模板字符串用法实例
目录 1. 什么是模板字符串 ? 2. 模板字符串的用法 3. 模板字符串标签函数 补充:JS模板字符串拼接 总结 1. 什么是模板字符串 ? 模板字符串:是允许嵌入表达式的字符串(可以使用多行字符串和字符串插值功能) 它的写法,以反引号 ` 开头,以反引号 ` 结尾 let str = `这是一个模板字符串`; 2. 模板字符串的用法 它与一般字符串不同,会保留空格,换行符和缩进 const str = `第一 行 第二行 第三行` console.log(str); 它还可以进行字符串插值,
使用uni-app打包H5的图文教程
1. 找到项目中 manifest.json --- H5 配置---运行时的基础路径, 将路径修改为 相对路径(./ ) 2. 修改完后,点击工具栏 --- 发行 --- 网站pc web或手机 h5 3. 弹出弹窗,修改网站标题与网站域名(网站域名取对应项目的域名,一般为https/http开头)填完后直接点击发行. 4. 点击发行后如图 5. 发行成功后,找到 unpackage --- dist --- build --- h5 文件夹, 在外部资源中打开,将 h5 文件夹打包成 zip
ECharts调用接口获取后端数据的四种方法总结
目录 方法一:在mounted中使用定时器调用eacharts方法(定时器可以获取到data中的数据) 方法二:在调用数据的时候调用图表(一个页面的所有数据都在这一个接口中) 方法三:使用chartes中的dataset数据集 方法四:在对应图表中,用ajax请求 注意 总结 使用eacharts做大屏,需要使用后端数据,下面的方法是自己试过有效的,有什么不对的,望各位大佬指点. 方法一:在mounted中使用定时器调用eacharts方法(定时器可以获取到data中的数据) mounted (
llqrcode js识别二维码解析二维码信息实例
目录 正文 代码 正文 llqrcode.js具有扫描二维码功能,用来进行从图片中识别二维码,可解析二维码的信息. 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>llqrcode识别二维码</title> <script src="llqrcode.js"></script> <scri
详解JavaScript中的箭头函数的使用
目录 前言 箭头函数语法 无圆括号语法 隐式返回 注意隐式返回错误 无法命名箭头函数 如何处理this关键字 匿名箭头函数 不正常工作的情况 箭头函数作为对象方法 箭头函数与第三方库 箭头函数没有arguments对象 总结 前言 本文可以让你了解所有有关JavaScript箭头函数的信息.我们将告诉你如何使用ES6的箭头语法,以及在代码中使用箭头函数时需要注意的一些常见错误.你会看到很多例子来说明它们是如何工作的. JavaScript的箭头函数随着ECMAScript 2015的发布而到来,
JavaScript原型与原型链深入探究使用方法
目录 原型(prototype) 显示原型与隐式原型 原型链 原型链属性问题 原型链 instanceof 使用 练习 原型(prototype) 每一个函数都有一个 prototype 属性,它默认指向一个Object空对象(即称为:原型对象). <script> console.log(Date.prototype, typeof Date.prototype); function fun(){ } fun.prototype.test = function(){ //给原型对象添加一个方
关于layer.js使用心得-向弹出框传值问题
目录 layer.js使用心得-向弹出框传值 问题背景 问题描述 问题分析 layui传值的一些经验,也没怎么整理:表格渲染数据,弹出框 1.layui向表格渲染数据的格式转换 2. layui弹出框,并且在表格里选中 layer.js使用心得-向弹出框传值 问题背景 实现弹出对话框加载页面,所以我选择了独立组件layer.js. 基于layer.js组件弹出了一个新的iframe的窗口(假设name为LayerFrame,方便后面称呼),但需要从之前的页面传入参数 注:'#sayHello'元
Vue elementUI实现免密登陆与号码绑定功能
目录 前言 登录功能 绑定/解绑功能 获取用户信息功能 获取用户信息功能 最终效果 项目地址 前言 前端代码的框架采用vue.js + elementUI 这套较为简单的方式实现,以及typescript语法更方便阅读. 首先来编写发送验证码函数, 登录,绑定,解绑的业务都需要发送验证码功能,通过currentVerifyingType 来区别当前验证码种类.也就是在服务端的Purpose目的. VerifyingType 可以为LOGIN,UNBIND_PHONENUMBER或BIND_PHO
webpack 5.68.0版本教程示例详解
目录 起步 1. 基本安装 2. 配置出入口 plugin 1. html-webpack-plugin 2. progress-bar-webpack-plugin loader 1. css-loader与style-loader 2. url-loader与file-loader 3. sass-loader 4. postcss-loader 5. babel-loader 搭建环境 1. 开发环境与生产环境 2. 配置别名 代码分离 1. webpack-bundle-analyzer
关于javascript解决闭包漏洞的一个问题详解
目录 解决闭包漏洞的一个问题 问题原理: 方法一: 方法二: 解决办法: 解决方法二: 总结 解决闭包漏洞的一个问题 在不修改下面代码的情况下,修改obj的内容 var o = (()=>{ var obj = { a:1, b:2, }; return { get :(n)=>{ return obj[n] } } })() 上面代码就是一个典型的闭包模式.屏蔽掉obj本身.只能访问闭包返回的数据而不能去修改数据源本身,但是他的数据源是一个对象,这就会出现一个漏洞!!!!,而上面的代码就会出
Axios常见配置选项跨域详解
目录 常见配置选项 实际项目中的简化写法 并发请求 多个请求接口 实际项目生命周期中使用axios数据存入data() 模块封装 拦截器 axios的post的请求头Content-Type axios 全局配置 接口函数的封装配置 设置代理解决请求跨域 vue前端跨域 axios : 基于http客户端的promise,面向浏览器和nodejs axios 依赖原生的 ES6 Promise 实现而被支持. 安装1.使用npm: npm install axios2.使用taobao源: cn