Javascript

2021-04-01 · 阅读 153 · 字数 189

例如在一段 Ant Design Pro V5 的代码中看到： import { Button, message, Input, Drawer } from 'antd'; import React, { useState, useRef } from 'react'; import { useIntl, FormattedMessage } from 'umi'; import { PageContainer, FooterToolbar } from '@ant-design/pro-layout'; import type { ProColumns, ActionType } from ...

阅读全文...

2021-01-31 · 阅读 294 · 字数 569

在 tampermonkey 的很多实际使用场景中，需要在模拟点击之后，等待界面变化，或者数据返回，此时就需要用到 setTimeout。但是如果是一系列的点击等待，就需要进行 setTimeout 嵌套，或者 setTimeout 时间进行倍数增长，代码可读性非常低。 所以，我想找一种 setTimeout 同步的写法，以提高代码的可维护性。 测试代码 (function() { 'use strict'; function wait(ms) { return new Promise((resolve, reject) => { ...

阅读全文...

2021-01-27 · 阅读 260 · 字数 160

由于 58 同城的开放平台申请接口权限一直处于审核中，而想要用的一个接口没有使用文档，也无法联系到人类客服询问，只能采取浏览器插件的方式做数据导出。 58同城管理后台为了防爬虫，做了诸多的防爬策略，其中一种就是没有明确的 class 和 id。 例如，管理后台的全选按钮： <span class="t-g-checkbox-font">全选</span> class 选择的话符合条件的很多。只能通过 inner text 来匹配。 解决方法 Array.from(document.querySelectorAll('span.t-g-checkbo ...

阅读全文...

2021-01-24 · 阅读 187 · 字数 100

由于网页 HTML 写的不规范，存在大量的重复 ID 节点。使用 jQuery 只能获取第一个匹配的 ID。 用纯 Javascript 和 jQuery 测试了一下，结果如下： 可行的方法 > document.querySelectorAll("#city") NodeList(60) 可以获取到所有的 ID 为 city 的节点。 不可行的方法 $("#city") $('[id="city"]'); $('tr[some_attribute="xxx"]') 均只能返回一行数据。 ...

阅读全文...

2020-08-20 · 阅读 1662 · 字数 122

在微信小程序的 wxml 模板里写三元表达式写吐了，满眼都是这种逻辑： <image src="{{member.user.avatar ? member.user.avatar : '/images/default_avatar.png'}}" /> 查了一下 js 里确实存在简写形式： <image src="{{member.user.avatar || '/images/default_avatar.png'}}" /> expr1 || expr2 若 expr1 可转换为 true，则返回 expr1；否则，返回 ...

阅读全文...

2020-08-07 · 阅读 2250 · 字数 69

当金额存储以分单位需要转换为元时，需要除以100。 JS 中如果直接除 100，显示的格式比较乱 > 1001 / 100 10.01 > 1000 / 100 10 统一保留两位小数 function formatMoney(money) { return (money * 1.0 / 100).toFixed(2) } > formatMoney(1000) "10.00" > formatMoney(1001) "10.01" ...

阅读全文...

2020-06-14 · 阅读 682 · 字数 144

正在做的一个自动挂学时的 tampermonkey 插件，遇到一个问题。 即如何判断定时出现的答题页面，如果是判断题目标题是否存在，会有 bug。因为可能外层的还包了一层 div，而外层 div 设置了 css 样式 display: none。 所以，我需要能使用 jQuery 判断一个元素是否可见，包括其祖先也必须是可见的。 找了半天没有找到解决方案，只能判断其最外层的是否设置了 display none。 if ($('.some_window') && $('.some_window').css("display") != "none&qu ...

阅读全文...

2020-05-13 · 阅读 756 · 字数 107

在写微信小程序时，经常需要将接口返回的数组，追加到当前 array。即，合并两个数组。 两种实现方式 var a1 = [1, 2, 3]; var a2 = [4, 5, 6]; // 方法一 a1.concat(a2) > (6) [1, 2, 3, 4, 5, 6] // 方法二，ES6 新语法 [...a1, ...a2] > (6) [1, 2, 3, 4, 5, 6] 哪种写法可读性更好 我觉得 concat 的写法，可读性更好一些。 ...

阅读全文...

2020-05-10 · 阅读 585 · 字数 230

promise 的意义 解决了之前不断嵌套异步回调的问题。 可以以同步的语法，来执行异步的操作。 参数 resolve 与 reject 是用来做什么的 以封装微信小程序的 wx.request 来统一处理错误码为例。 promise 对象必须使用 resolve 和 reject 做为返回么 then 必须使用两个回调函数作为参数么？ 我看还有使用一个参数的情况。 原来，第二个参数是可选的，即不处理 reject 的情况。 then 的 catch 与第二个回调函数同时存在时会用哪个 then的第二个参数和catch方法都存在的情况下，只有then的第二个参数能捕获到； 如果then的第二 ...

阅读全文...

2020-05-08 · 阅读 1017 · 字数 178

今天发现一段看不懂的 ES6 新语法： const http = ({ url = '', param = {}, type = 'json', callback = '', ...other } = {}) => { // ... } 我不明白为何字典参数还要用空大括号来赋值的意义。 先写一段测试代码：test.js function showInfo({name = "zhongwei", age = 99} = {}) { console.log(name); console.log(age); } function sho ...

阅读全文...

2020-04-26 · 阅读 2623 · 字数 122

例如，在微信小程序中，只保留最近搜索的 20 条记录。 使用 js array 的 slice 方法，slice 英文是切开的意思： 第一个参数是起始下标 index，从 0 开始计数 第二个参数是结尾元素下标，但是不包含该元素。 > var a = [1, 2, 3, 4, 5]; > a.slice(0, 2) (2) [1, 2] > a.slice(0, 3) (3) [1, 2, 3] > a = a.slice(0, 3) (3) [1, 2, 3] > a (3) [1, 2, 3] ...

阅读全文...

2020-04-07 · 阅读 824 · 字数 270

目标效果 输入时，实时过滤 为空时，显示所有结果 url 随关键词变化 过滤逻辑 loop item title 先全部隐藏，如果 title 中有关键词，则显示 多个关键词，包含其中一个就显示 如果产品关键词中包含搜索词，也显示，例如搜索硫酸铜 影响因素 当前选中的分类 是否显示更多 未来加入的 tag 但是为了降低代码的维护难度，以及对搜索关键词的明确度的信任，我决定不考虑这三条因素。。。 tag 可以在未来考虑一下。 实时过滤效果并不好 jquery 监听 input 事件，如何排除中文拼音输入法敲字母的过程 da da'y da'yi da'yin da'yin'j da' ...

阅读全文...

2020-04-02 · 阅读 675 · 字数 94

用于在过滤商品分类时，在浏览器地址栏给出对应的 URL，方便分享。但是又会引起浏览器跳转页面。 JS 实现 window.history.pushState({}, "", "/new-url?key=value"); 如何判断当前浏览器是否支持 pushState if (window.history && window.history.pushState) 参数 history.pushState(state, title[, url]) state，一个 js object，用于存储一些状态值。如果只是为了修改 URL，这 ...

阅读全文...

2020-03-24 · 阅读 768 · 字数 170

有时候从网上搜集资料，会发现一些网站禁用了复制和右键菜单功能。 首先明白一点，禁用功能是用 JS 实现的。 如果仅仅保存 HTML 还是不能解决，就需要检查是不是 JS 禁用代码是不是写在了 HTML 文件内。 解决方法 Ctrl + S 保存当前网页，选择仅保存 HTML。 使用记事本打开保存的 HTML，删除 body 标签内的其余部分，仅仅保留 body。保存。 使用 Chrome 打开该 HTML，即可复制内容。 代码示例 <body id="products_detail" onmouseup="document.selection.empt ...

阅读全文...

2020-04-26 · 阅读 5058 · 字数 203

最近用 Chrome 浏览器调试网站前端代码时，总是看到 Console 里报错： DevTools failed to parse SourceMap: some-domain/js/maps/swiper.min.js.map SourceMap 是什么 通常网站加载的 JS 会做压缩处理，以节省带宽。但是这样处理之后，JS 代码通常变成了一行，在报错时，无法看到错误的准确定位。而 Source Map 就是为了解决这个问题。 Source map 可以看成一个映射表，存储了转换后的代码所对应的转换前的位置。 这样，JS 报错的时候，Chrome Console 里就能直接显示原始代码 ...

阅读全文...