javascript技巧

使用JavaScript实现轮播图特效

2021-08-31
本文实例为大家分享了JavaScript实现轮播图特效的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .aaa { width: 600px; height: 350px; position: relative

手把手教你uniapp和小程序分包(图文)

2021-08-31
目录 一.小程序分包 二.uniapp分包小程序 分包步骤: 1.配置manifest.json 2.配置pages.json 3.分包预载配置(preloadRule) 一.小程序分包 每个使用分包小程序必定含有一个主包.所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本:而分包则是根据开发者的配置进行划分. 在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示 目前小程序分包

JavaScript基础系列之函数和方法详解

2021-08-31
目录 一.函数和方法的区别 二.如何写好一个函数 2.1 命名准确 2.1.1 函数命名 2.1.2 参数命名 2.2 函数注释 2.2.1 参数注释 2.3  函数参数 2.3.1 参数默认值 2.3.2 对象参数 2.3.3 参数数量 2.3.4 参数类型防御 2.4 函数的返回 2.4.1 幂等函数 2.4.2 纯函数 2.4.3 return null 函数和方法的区别 总结 一.函数和方法的区别 函数(function):函数是带有名称和参数的 JavaScript 代码段,可以一次定

JavaScript canvas实现九宫格切图效果

2021-08-31
本文实例为大家分享了canvas实现九宫格切图效果的具体代码,供大家参考,具体内容如下 首先页面展示 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"

在JS中如何使用css变量详解

2021-08-30
在JS中如何使用css变量 使用:export关键字在less/scss文件中导出一个js对象. $menuText:#bfcbd9; $menuActiveText:#409EFF; $subMenuActiveText:#f4f4f5; // $menuBg:#304156; $menuBg:#304156; $menuHover:#263445; $subMenuBg:#1f2d3d; $subMenuHover:#001528; $backWhite:#ffffff; $sideBarW

一篇文章教你写出干净的JavaScript代码

2021-08-30
目录 1. 变量 使用有意义的名称 避免添加不必要的上下文 避免硬编码值 2. 函数 使用有意义的名称 使用默认参数 限制参数的数量 避免在一个函数中做太多事情 避免使用布尔标志作为参数 避免写重复的代码 避免副作用 3. 条件语句 使用非负条件 尽可能使用简写 避免过多分支 优先使用 map 而不是 switch 语句 4.并发 避免回调 5. 错误处理 6.注释 只注释业务逻辑 使用版本控制 总结 一段干净的代码,你在阅读.重用和重构的时候都能非常轻松.编写干净的代码非常重要,因为在我们日常

JavaScript axios安装与封装案例详解

2021-08-30
1.下载axios插件 cnpm install axios -S 2.在main.js引入axios import axios from 'axios' Vue.prototype.$http = axios 3.创建axios实例 let service = axios.create({ baseURL: baseUrl, // url = base api url + request url withCredentials: true, // send cookies when cross

js canvas实现圆角图片

2021-08-30
本文实例为大家分享了js canvas实现圆角图片的具体代码,供大家参考,具体内容如下 圆角图片的代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="background: rgba(199,237,

浅谈Axios去除重复请求方案

2021-08-30
目录 一.取消重复请求 二.清理所有请求 此方案主要有两个功能 1.请求发出后,后续重复请求取消不处理,等待第一次请求完成. 2.路由跳转后,上一个页面未完成请求全部清理. 一.取消重复请求 前置知识: 1.axios官方提供的取消方法,可以查阅相关文档:CancelToken 2.js Map相关概念 3.安全的查询字符串解析和字符串分解库 qs,功能类似js自带的JSON 为简化参数处理,本方案只考虑post请求,也就是如果method,url以及data相同则视为重复请求 // axios

爬虫进阶-JS自动渲染之Scrapy_splash组件的使用

2021-08-30
目录 1. 什么是scrapy_splash? 2. scrapy_splash的作用 3. scrapy_splash的环境安装 3.1 使用splash的docker镜像 3.2 在python虚拟环境中安装scrapy-splash包 4. 在scrapy中使用splash 4.1 创建项目创建爬虫 4.2 完善settings.py配置文件 4.3 不使用splash 4.4 使用splash 4.5 分别运行俩个爬虫,并观察现象 4.6 结论 5. 了解更多 6. 小结 1. 什么是s

javascript实现查询商品功能

2021-08-30
本文实例为大家分享了javascript实现查询商品功能的具体代码,供大家参考,具体内容如下 这是没有点击查询的主界面图 这是点击名称查询之后 按照价格查询 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript查询功能</title> <style> body{ fon

详解JavaScript中Arguments对象用途

2021-08-30
目录 前言 Arguments 的基本概念 Arguments 的作用 获取实参和形参的个数 修改实参值 改变实参的个数 检测参数合法性 函数的参数个数不确定时,用于访问调用函数的实参值 遍历或访问实参的值 总结 在实际开发中,Arguments 对象非常有用.灵活使用 Arguments 对象,可以提升使用函数的灵活性,增强函数在抽象编程中的适应能力和纠错能力. JavaScript 中 Arguments 对象的用途总结. 前言 相信我们很多人在代码开发的过程中都使用到过一个特殊的对象 --

JavaScript函数之call、apply以及bind方法案例详解

2021-08-30
总结 1.相同点 都能够改变目标函数执行时内部 this 的指向 方法的第一个参数用于指定函数执行时内部的 this 值 支持向目标函数传递任意个参数 若不向方法的第一个参数传值或者传递 undefined.null,则在 JavaScript 正常模式下,目标函数内部的 this 指向 window 对象,严格模式下,分别指向 undefined.null. 2.区别 apply() 方法可接收两个参数,而 call() 和 bind() 方法则可接收多个参数. apply() 方法向目标函数

JavaScript数据可视化:ECharts制作地图

2021-08-29
目录 概述 注意事项 一. 使用方式 二. 实现步骤 初步实现代码 效果: geo常见配置 添加上面配置之后的效果图: 显示某一个省份(河南省) 效果 不同区域显示不同颜色 地图和散点图的结合 总结 概述 地图在我们日常的数据可视化分析中是很常见的一种展示手段,不仅美观而且很大气.尤其是在大屏展示中更是扮演着必不可缺的角色 注意事项 一. 使用方式 1.百度地图API(高德地图API) 需要申请百度API 2.矢量地图 需要准备矢量地图数据 二. 实现步骤 1.ECharts最基本的代码结构 引

JavaScript 中this指向问题案例详解

2021-08-29
总结 全局环境 ➡️ window 普通函数 ➡️ window 或 undefined 构造函数 ➡️ 构造出来的实例 箭头函数 ➡️ 定义时外层作用域中的 this 对象的方法 ➡️ 该对象 call().apply().bind() ➡️ 第一个参数 全局环境 无论是否在严格模式下,this 均指向 window 对象. console.log(this === window) // true // 严格模式 'use strict' console.log(this === window

javascript对象的多种合并方式详解

2021-08-29
目录 对象合并的多种方式(对于通过接口获取数据之后赋值给本地对象的时候极其有用) 第一种:手动赋值(很捞) 第二种:扩展运算符 第三种:Object.assign() (最推荐) 1.vue 项目清空表单 总结 对象合并的多种方式(对于通过接口获取数据之后赋值给本地对象的时候极其有用) 第一种:手动赋值(很捞) const obj1 = { name: "zs", age: 13, }; const obj2 = { name: "ls", sex: "女

JavaScript es6中var、let以及const三者区别案例详解

2021-08-29
首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?         ECMAScript是一个国际通过的标准化脚本语言.JavaScript由ECMAScript和DOM.BOM三者组成.可以简单理解为:ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展.         2011 年,ECMAScript 5.1 版发布.之前我们大部分人用的也就是ES5         2015 年 6 月,ECM

如何基于js管理大文件上传及断点续传详析

2021-08-29
目录 前言 前端结构 后端结构(node + express) 基于FormData实现文件上传 基于BASE64实现文件上传 BASE64具体方法 前端生成文件名传给后端 上传进度管控 大文件上传 服务端代码(大文件上传+断点续传) 总结 前言 前端小伙伴们平常在开发过程中文件上传是经常遇到的一个问题,也许你能够实现相关的功能,但是做完后回想代码实现上是不是有点"力不从心"呢?你真的了解文件上传吗?如何做到大文件上传以及断电续传呢,前后端通讯常用的格式,文件上传进度管控,服务端是如何

JavaScript中类型的强制转换与隐式转换详解

2021-08-29
目录 一.隐式转换 双等号里的转换 Boolean 类型转换 "+" 与 "-" 二.强制类型转换 new String 与 ' ' 总结 一.隐式转换 以下语句的执行结果是什么? A. undefined == null B. isNaN("100") C. parseInt("1a") === 1 D. [ ] instanceof Array 答案: A. undefined == null 为 true: undefi

Layui表格行内动态编辑数据

2021-08-28
目录 前言 样式功能说明 初始化代码 添加监听事件 监听头工具栏 监听表格行工具栏 监听单元格 结尾 前言 今天向大家分享一些关于经典前端框架 layui 中的动态表格数据操作,结合 JQuery 动态编辑单元格中的数据,希望能帮助到有需要的人,加油,共勉! 样式功能说明 初始化代码 根据 Layui 开发文档,我们能很容易写出如下代码,加载内置组件,动态表格数据填充: layui.use(function () { let layer = layui.layer, element = layu