javascript技巧

如何在JavaScript中比较日期详解

2022-11-23
目录 前言 如何在 JavaScript 中与日期对象进行日期比较 如何使用 JavaScript 进行等式比较 如何执行特定日期比较 总结 前言 日期是开发人员在创建实际应用程序时最常用的数据类型之一. 但通常,开发人员会在这种数据类型上苦苦挣扎,最终使用像 Moment.js 这样的日期库来完成简单的任务,这些任务不值得安装整个包所带来的大包大小. 当我们想到 JavaScript 中的日期比较时,我们会想到使用 Date 对象 ( Date()),当然,它确实有效. date 对象允许我们

教你巧用webpack在日志中记录文件行号

2022-11-14
目录 前言 通过提取 Error 错误栈 通过 webpack 预处理 总结 前言 在做前端项目时,会在各个关键节点打印日志,方便后续数据分析和问题排查.当日志越来越多之后,又会遇到通过日志反查代码所在文件和所在行的场景,于是一个很自然的需求就出来了: 在打印日志的时候,自动注入当前文件名.行号.列号. 举个例子,有个 logger 函数,我们在 index.js 的业务代码某一行添加打印逻辑: const { logLine } = require('./utils') function ge

uni-app多环境部署解决方案详解

2022-11-13
目录 前言 尝试几种方式 解决方案 部署方式 获取接口 部署路径 命令行 其他 总结 前言 最近几周都在处理公司的移动业务,而为在后期能统一多端,解放自己,迎合公司的技术栈:选用了 uni-app 来开发.开发前期重新对公司移动业务做深入了解,重构大部分业务逻辑,也抽离出基础组件:但实际到部署的时候,出现来问题:由于现在只考虑 H5 端,部署和测试会出现多环境配置,但是我使用的 HBuilderX 工具创建的工程,所以只存在开发环境:development 和生产环境:production. 尝

JS 加载性能Tree Shaking优化详解

2022-11-12
目录 正文 什么是 Tree Shaking 寻找 Tree Shaking 的机会 防止 Babel 将 ES6 模块转换为 CommonJS 模块 留意 side effects 只导入你需要的 更复杂的情况 总结 正文 随着 web 应用复杂性增加,JS 代码文件的大小也在不断的攀升,截住 2021年9月,在 httparchive 上有统计显示——在移动设备上 JS 传输大小大约为 447 KB,桌面端 JS 传输大小大约为 495 KB,注意这仅仅是在网络中传输的 JS 文件大小,JS

TypeScript类型系统自定义数据类型教程示例

2022-11-12
目录 TypeScript 类型系统和自定义数据类型 什么是类型系统 函数类型 类型别名 可选参数 默认参数 函数重载 接口类型 可选属性 只读属性 接口扩展 多重接口声明 接口的索引签名 用接口描述函数 类类型 implements关键字 类的静态端类型和实例端类型 将 this 作为类型 将 this 作为参数 枚举 枚举类型 枚举的成员类型 枚举的成员 字面量类型 联合类型 交叉类型 泛型 泛型函数 泛型接口 泛型类 在工厂函数中使用泛型 泛型约束 在泛型约束中使用类型参数 在泛型中使用条

TypeScript类型断言VS类型守卫示例详解

2022-11-11
目录 类型断言 类型守卫 使用 in 关键字 使用 instanceof 关键字 使用 typeof 关键字 自定义类型守卫 总结 类型断言 类型断言有两种写法,分别为value as Type和<Type>value,它让 TypeScript 编译器将 value 当作 Type 类型.类型断言是一个编译时特性,不进行类型转换,因此不会影响变量在运行时的数据类型.如果某变量是 any 类型,但现在你知道它确切的数据类型,使用类型断言能让 IDE 有代码提示的能力,也能让 TypeScrip

uni-app的基本使用教程

2022-11-11
目录 一.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中异常抛出和处理方法图文详解

2022-11-11
目录 抛出异常 抛出的表达式类型 基本数据类型 对象 类的实例对象 Error 类的实例对象 Error 的子类 处理异常 js中常见的系统异常: 总结 抛出异常 在 js 中,有时候我们需要处理一些异常或错误.比如编写的某个函数所接收的参数要求是 Number 类型的,如果在该函数被调用时传入的是字符串,就需要发出提醒.此时我们可以使用 throw 语句来抛出个异常: // 例 1 function fn(num) { if (typeof num !== 'number') throw '需

JavaScript数组合并的8种常见方法小结

2022-11-10
目录 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模板字符串用法实例

2022-11-09
目录 1. 什么是模板字符串 ? 2. 模板字符串的用法 3. 模板字符串标签函数 补充:JS模板字符串拼接 总结 1. 什么是模板字符串 ? 模板字符串:是允许嵌入表达式的字符串(可以使用多行字符串和字符串插值功能) 它的写法,以反引号 ` 开头,以反引号 ` 结尾 let str = `这是一个模板字符串`; 2. 模板字符串的用法 它与一般字符串不同,会保留空格,换行符和缩进 const str = `第一 行 第二行 第三行` console.log(str); 它还可以进行字符串插值,

使用uni-app打包H5的图文教程

2022-11-09
1. 找到项目中 manifest.json --- H5 配置---运行时的基础路径, 将路径修改为 相对路径(./ ) 2. 修改完后,点击工具栏 --- 发行 --- 网站pc web或手机 h5 3. 弹出弹窗,修改网站标题与网站域名(网站域名取对应项目的域名,一般为https/http开头)填完后直接点击发行. 4. 点击发行后如图 5. 发行成功后,找到 unpackage --- dist --- build --- h5 文件夹, 在外部资源中打开,将 h5 文件夹打包成 zip

ECharts调用接口获取后端数据的四种方法总结

2022-11-09
目录 方法一:在mounted中使用定时器调用eacharts方法(定时器可以获取到data中的数据) 方法二:在调用数据的时候调用图表(一个页面的所有数据都在这一个接口中) 方法三:使用chartes中的dataset数据集 方法四:在对应图表中,用ajax请求 注意 总结 使用eacharts做大屏,需要使用后端数据,下面的方法是自己试过有效的,有什么不对的,望各位大佬指点. 方法一:在mounted中使用定时器调用eacharts方法(定时器可以获取到data中的数据) mounted (

llqrcode&nbsp;js识别二维码解析二维码信息实例

2022-11-09
目录 正文 代码 正文 llqrcode.js具有扫描二维码功能,用来进行从图片中识别二维码,可解析二维码的信息. 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>llqrcode识别二维码</title> <script src="llqrcode.js"></script> <scri

详解JavaScript中的箭头函数的使用

2022-11-08
目录 前言 箭头函数语法 无圆括号语法 隐式返回 注意隐式返回错误 无法命名箭头函数 如何处理this关键字 匿名箭头函数 不正常工作的情况 箭头函数作为对象方法 箭头函数与第三方库 箭头函数没有arguments对象 总结 前言 本文可以让你了解所有有关JavaScript箭头函数的信息.我们将告诉你如何使用ES6的箭头语法,以及在代码中使用箭头函数时需要注意的一些常见错误.你会看到很多例子来说明它们是如何工作的. JavaScript的箭头函数随着ECMAScript 2015的发布而到来,

JavaScript原型与原型链深入探究使用方法

2022-11-06
目录 原型(prototype) 显示原型与隐式原型 原型链 原型链属性问题 原型链 instanceof 使用 练习 原型(prototype) 每一个函数都有一个 prototype 属性,它默认指向一个Object空对象(即称为:原型对象). <script> console.log(Date.prototype, typeof Date.prototype); function fun(){ } fun.prototype.test = function(){ //给原型对象添加一个方

关于layer.js使用心得-向弹出框传值问题

2022-11-06
目录 layer.js使用心得-向弹出框传值 问题背景 问题描述 问题分析 layui传值的一些经验,也没怎么整理:表格渲染数据,弹出框 1.layui向表格渲染数据的格式转换 2. layui弹出框,并且在表格里选中 layer.js使用心得-向弹出框传值 问题背景 实现弹出对话框加载页面,所以我选择了独立组件layer.js. 基于layer.js组件弹出了一个新的iframe的窗口(假设name为LayerFrame,方便后面称呼),但需要从之前的页面传入参数 注:'#sayHello'元

Vue&nbsp;elementUI实现免密登陆与号码绑定功能

2022-11-05
目录 前言 登录功能 绑定/解绑功能 获取用户信息功能 获取用户信息功能 最终效果 项目地址 前言 前端代码的框架采用vue.js + elementUI 这套较为简单的方式实现,以及typescript语法更方便阅读. 首先来编写发送验证码函数, 登录,绑定,解绑的业务都需要发送验证码功能,通过currentVerifyingType 来区别当前验证码种类.也就是在服务端的Purpose目的. VerifyingType 可以为LOGIN,UNBIND_PHONENUMBER或BIND_PHO

webpack 5.68.0版本教程示例详解

2022-11-05
目录 起步 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解决闭包漏洞的一个问题详解

2022-11-02
目录 解决闭包漏洞的一个问题 问题原理: 方法一: 方法二: 解决办法: 解决方法二: 总结 解决闭包漏洞的一个问题 在不修改下面代码的情况下,修改obj的内容 var o = (()=>{ var obj = { a:1, b:2, }; return { get :(n)=>{ return obj[n] } } })() 上面代码就是一个典型的闭包模式.屏蔽掉obj本身.只能访问闭包返回的数据而不能去修改数据源本身,但是他的数据源是一个对象,这就会出现一个漏洞!!!!,而上面的代码就会出

Axios常见配置选项跨域详解

2022-11-02
目录 常见配置选项 实际项目中的简化写法 并发请求 多个请求接口 实际项目生命周期中使用axios数据存入data() 模块封装 拦截器 axios的post的请求头Content-Type axios 全局配置 接口函数的封装配置 设置代理解决请求跨域 vue前端跨域 axios : 基于http客户端的promise,面向浏览器和nodejs axios 依赖原生的 ES6 Promise 实现而被支持. 安装1.使用npm: npm install axios2.使用taobao源: cn