实际应用
文章平均质量分 68
352328759
精通各类电子设备的开启和关闭功能
展开
-
js 装饰器
// 装饰器function fun1() { console.log(arguments[0]); return arguments[0] * 2}function fun2(fun) { return function () { let res = fun(...arguments) return res }}fun1 = fun2(fun1)/* */console.log(fun1(1));end原创 2022-04-30 20:20:42 · 346 阅读 · 0 评论 -
el dialog 重复提交修复方案
element 虽好用, 但使用不当也容易导致一些奇怪的问题今天讲讲 “模态框中重复提交表单” 的问题问题描述有个模态框, 框里有个异步提交按钮没加锁可用重复点击加了锁 :loading=“queryParamsLock”在模态框消失前还能点击因为 “消失” 是一个动画网络上建议在 el-dialog.open 事件里解锁请求结束前, 重新打开模态框能点击解决方法把加锁条件改成这样:loading=“queryParamsLock || !dialogVisible”原创 2021-12-07 17:14:28 · 728 阅读 · 0 评论 -
el image-viewer 图片预览组件
Element UI(2.15.6) 的 el-image 组件有一个图片预览功能这个功能其实是调用内部组件 ImageViewer 实现的一般情况直接用 el-image 里的预览足够了但有一种情况, el-image 不能简单实现那就是 :src 展示的地址, 不在 :preview-src-list 预览图片列表里( src 是缩略图, preview-src-list 是原图)这个情况下, preview-src-list 中找不到当前图片地址, 就会从第0张开始预览不能从指定图片开始预原创 2021-11-04 10:52:16 · 1555 阅读 · 0 评论 -
魔方4格滚动加载动画
啥也不说 先上效果图完整代码<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-sca原创 2021-10-09 17:41:16 · 189 阅读 · 1 评论 -
js 插入公共 css, 异步加载 css
一般样式代码会在文档开头引入, 随文档加载时同步加载无论用户该次操作是否用得到, 样式代码都会全部加载进来但是想要异步加载 css, 或者插入一段新生成的 css, 也是有办法可以实现的插入公共 css 代码块用 createElement 一个 style 节点用 innerHTML 进需要的css代码用 body.appendChild 插入 head 中即可var new_element = document.createElement("style");new_element.i原创 2021-02-03 15:32:45 · 272 阅读 · 1 评论 -
setTimeout 浏览器进入后台时不被冷却的方法
出于节能的考虑, 部分浏览器在进入后台时(或者失去焦点时), 会将 setTimeout 等定时任务暂停待用户回到浏览器时, 才会重新激活定时任务说是暂停, 其实应该说是延迟, 1s 的任务延迟到 2s, 2s 的延迟到 5s, 实际情况因浏览器而异在 Chrome 中运行一下代码var t = new Date() * 1function fun1() { var _t = new Date() * 1 console.log(_t - t) t = _t setTimeout(fun原创 2021-01-19 17:52:25 · 3343 阅读 · 0 评论 -
Vue router 3.x 实现路由规则增删
vue 项目的权限限制功能, 有一种实现方案是这样的进入项目只设置没有权限要求的路由向后台提供当前用户的权限后台根据用户权限, 返回该用户可以用的路由信息将路由信息翻译成 “符合 routes 选项要求的数组”用 router.addRoutes(routes) 方法把 “符合 routes 选项要求的数组” 添加到路由这个方案涉及到两个问题:怎么添加路由规则怎么删除路由规则路由规则首先明确一下什么叫路由规则?下例的 { path: ‘/foo’, component: F原创 2021-01-15 17:16:37 · 3220 阅读 · 6 评论 -
一行代码实现 if 判断, 多结果判断
JavaScript 中判断运算是最常见的运算之一, 最常规的当然就是 if但最常用, 最灵活的却另有其"人"与运算符利用了与运算符的特性, 第一项为 false 时, 不执行后面直接返回第一项结果用法: statement1 && statement2注意: statement1 需要 return 一个布尔值, 否则会认为 undefinedconsole.log(_true && true_fun());// 执行 true_fun()// 返回 tru原创 2020-12-31 22:21:14 · 2195 阅读 · 1 评论 -
css 利用 position + margin 实现固定盒子横向纵向居中
margin:auto; + position: absolute; 上下左右:0一看 demo 就懂的啦<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="initial-scal原创 2020-12-22 10:02:31 · 732 阅读 · 0 评论 -
css 利用 position + transform 实现弹性盒子横向纵向居中
前端常有"横竖居中"的需求, 固定宽高的还好办遇到宽高不确定的情况, 我向大家推荐下面这个方法原理其实就两点position: absolute; 的百分百参照父元素transform: translate(-50%, -50%); 的百分百参照当前元素position 和 transform 合起来的效果就是把父元素和当前元素的中点对齐, 从而达到居中的效果demo<html><head> <meta http-equiv="Content-Type"原创 2020-12-18 17:18:40 · 1436 阅读 · 1 评论 -
Vue .sync 修饰符 简单实例
vue 中子传父是常有的需求, 一般我们用 $on + $emit 就能实现有时候从子组件传回来的值, 不需要再计算, 只是用来覆盖原值这时候用 $on + $emit 方法, 会占用一个事件名和一个方法名, 属于典型的资源浪费, 也增加了代码量对于传回值只用于覆盖原值的情况, 我们可以用 .sync 修饰符来简化<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event"></text原创 2020-12-17 15:52:14 · 971 阅读 · 0 评论 -
当 el-upload 遇上 v-for 时应该注意的问题
虽然 element-ui 现在几乎不更新了, 但不能否认它的优秀而今天要讲的就是这个优秀的框架中优秀的组件 el-upload有过 element-ui 使用经验的小伙伴大概都用过它的上传组件(el-upload)单独使用 el-upload 的文档已经很全面, 操作起来也很好用, 没毛病但当 el-upload 遇上 v-for 时, 要面临的问题就多得多了笔者就曾遇到过, 特意写下此文注: 文末附完整 demo有一次, 我遇到了这样的需求:有一个数量可增可减的数组数组每项有上传图原创 2020-12-15 17:14:37 · 2593 阅读 · 6 评论 -
Vue.set 简单实例
vue 的一大特性就是修改数据后, 系统能自动更新到界面上但这一特性并不是所有情况下都能实现, 就比如在数组中在数组中, 用数组的下标直接修改数组的值, 系统并不会把这次修改更新到界面上[直接修改 arr[0], 界面上不能自动更新]而是把这次修改, 拖延到下一次同组件的界面更新时, 才更新[直接修改 arr[0], 界面上不能自动更新] -> [修改一个无关值 boo]也就是说, 子组件的更新还不足以触发数组的数据更新[直接修改 arr[0], 界面上不能自动更新] ->原创 2020-12-14 11:22:50 · 1207 阅读 · 1 评论 -
js oninput 移动端替代 keyup
在移动端, keyup 事件可能失效这时可以用 oninput 事件$('#xxx').bind('input propertychange', function() {})//document.getElementById("swq").addEventListener("input", fn, false)参考资料:总结oninput、onchange与onpropertychange事件的用法和区别//end...原创 2020-12-14 09:46:57 · 1413 阅读 · 0 评论 -
css 控制图片的横竖比例
大概你也遇到过"图片高度是宽度50%"这的需求这需求看起来简单, 其实却非常麻烦因为元素的宽高的百分比是相对于父元素的宽高计算的所以直接设 width, height 是不符合预期的.div { width: 100%; height: 50%;}而且一个空 display: block 元素 height 的默认值是 0px; 如果父元素没设 height 的话, 该元素的 height 就是 0px如果是位置比较浅的元素, 其实可以用 css3 的新单位 vw, vh 来实现.i原创 2020-12-12 14:33:53 · 2704 阅读 · 0 评论 -
禁用 eval 时如何解析字符串的 javascript 代码
今天有同事问我:“怎么解析一段字符串的 javascript 代码?”“eval() 呀”“我们的项目禁用 eval …”“曹孟德的名字”解析一段字符串的 javascript 代码的需求并不常见, 所以提到这个需求第一时间想到的方法毫无悬念就是 eval()可是基于网络安全的种种原因, 很多项目对这个方法避之若浼所以禁用 eval 时, 如何解析字符串的 javascript 代码呢?end...原创 2020-11-30 17:23:24 · 2124 阅读 · 0 评论 -
利用 apply 的传值格式实现数组合并
大家应该都知道 apply 的用法, [方法.apply(this的指向对象, 值的数组)]fun.apply(this, [val1, val2])apply 的特性之一就是它的第二个值, 是包含传入值的数组, 利用 apply 的这个特性, 可以用于数组合并它的原理是在 arr1 的 this 环境中执行 Array.prototype.push 方法, 参数是数组 arr2 释放出来的数据所以这个方法会改变第一个数组var arr1 = [1, 2, 3];var arr2 = [4,原创 2020-11-30 01:13:38 · 1851 阅读 · 0 评论 -
css 文本若干行溢出隐藏
溢出隐藏在前端开发里是给常见的效果, 不过以前的 css 只能实现1行的文本溢出隐藏webkit 有个非正式的样式 -webkit-line-clamp, 可以设置若干行的文本溢出隐藏虽然是非正式样式, 但在移动端基本都能兼容-webkit-line-clamp 的使用需要与其它样式合作, 详见下 demo<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text原创 2020-11-30 00:50:03 · 1938 阅读 · 1 评论 -
react + redux 常规用法说明
最近学习了 react + redux, 感觉比较迷糊, 为了验证学习成果, 特意写下这篇笔记redux 的特性react 与 redux 没有关系, 是两个独立的技术, 要把两者关联起来, 需要用到 react-redux(react-redux 本身也是独立的技术)store用 redux.createStore 方法创建 store, 这个 store 可以用于 react-redux 的 Providerlet store = createStore(reducers, "初始原创 2020-11-20 17:47:14 · 1715 阅读 · 0 评论 -
Promise, async, await 的特性随笔
昨天有个小猪问我 async/await 的问题, 说是怎么调也调不出想要的结果, 调着调着头都懵了扭头过去看了一下, 果不其然, 一层套一层简直比俄罗斯还套娃不过只要静下心来, 对照着下面的几点特性慢慢看, async/await 还是很好理解的Promise 对象不需要用 () 调用实例化 Promise 时, 第一个传入的 function 就执行了var _promise = new Promise(function() { /* 这里直接就执行了 */ })async 函数原创 2020-11-13 17:11:50 · 1953 阅读 · 0 评论 -
js for...in 的遍历范围, hasOwnProperty 判断的意义
大部分编辑器都有代码块功能, 某些编辑器(如VS code)提供的 for…in 代码块代码如下for (const key in object) { if (object.hasOwnProperty(key)) { const element = object[key]; }}除了 for (in) {} 外, 还包含了一个 object.hasOwnProperty(key) 判断当时年轻的我就很纳闷, 为什么要有这么一个判断, key 来自于 object, 可以必然属于 o原创 2020-11-06 14:52:35 · 3047 阅读 · 2 评论 -
js instanceof 的工作原理细解
根据 MDN 的解释instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。s instanceof F 用递归函数来表达, 流程大致如下:function _instanceof(s, F) { if(s.__proto__ === F.prototype) { // 找到目标 return true } else if("__proto__" in F) { // 存在上一层原型1 _instanceof(s, F.__p原创 2020-10-31 17:16:45 · 5087 阅读 · 0 评论 -
console 中%s,%d,%f,%i,%o的应用
可以在 console.log() 中控制插入的。, 插入的值与顺序对应。原创 2020-08-28 18:00:58 · 2432 阅读 · 0 评论 -
js 原生js复制到粘贴板
优点:代码少纯元素JavaScript无插件无须服务器知识点:createTextRange//ie 创建TextRange 对象createRange//非ie 创建Range 对象Range 对象execCommand//允许用户对当前文档、当前选中区域或者给定范围执行一个浏览器内部命令element.select()//Input Text select()方法;选取...原创 2020-04-14 17:36:21 · 2345 阅读 · 0 评论 -
正则表达式 压缩 HTML 字符串
\n 匹配换行符\r 匹配回车符\t 匹配制表符参考资料:https://www.cnblogs.com/mmzuo-798/p/7264093.htmlvar text = `<ul class="footer mainNav js-main-nav"> <li class="mainNav__list act"> <a class="mainNav_...原创 2020-02-10 14:33:25 · 2728 阅读 · 0 评论 -
正则表达式 去首尾空格
去首尾空格: swq.replace(/^\s*|\s*$/g, ‘’)<!doctype html><html lang="en" data-framework="backbonejs"> <head> <meta charset="utf-8"> <title>正则去首尾空格</title> <s...原创 2020-02-10 14:29:36 · 4422 阅读 · 0 评论 -
左右镜像滚动效果demo
分享一个有趣的效果,并不复杂, 关键在于横向,纵向的布局;滚动时坐标的运算;10毫秒的延迟; 代码超简单,看看就懂了<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">...原创 2019-02-15 16:51:02 · 2240 阅读 · 0 评论 -
避免数据相加小数点后产生多位数和计算精度损失的几个见效甚少的方法
JavaScript里精度损失是个非常头疼的毛病,典型的[0.1+0.2==0.30000000000000004]相信大家都有耳闻 这里抛出几个简单的方法,避免一部分0.30000000000000004的头疼情况 /** * 加法运算,避免数据相加小数点后产生多位数和计算精度损失。 * @param num1加数1 | num2加数2 */functi...原创 2019-02-15 18:06:33 · 3776 阅读 · 1 评论 -
控制台插入js文件方法
new_element = document.createElement("script");new_element.setAttribute("type", "text/javascript");new_element.setAttribute("src", "https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js");document.bo...原创 2019-02-19 13:58:00 · 4355 阅读 · 0 评论 -
本地git仓库上传代码到码云 内测有效版 2019-2-19
本地命令行 生成公钥私钥 跟 github 的一样,就直接用以前生成好的了 这里自行百度 将"C:\Users\0200048\.ssh\id_rsa.pub"(公钥)的内容 复制到 码云上"https://gitee.com/profile/sshkeys" 的 "公钥"一栏里 填标题 点确定 建立git仓库 新建文件夹 -> 进去 -> 打开命令行 -&...原创 2019-02-19 16:05:01 · 1977 阅读 · 0 评论 -
基于jq和纯js的 读取本地.txt文件的方法
好像ajax本来就可以读到.txt<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>读取txt文件</title> </head>...原创 2019-04-09 14:14:38 · 12580 阅读 · 3 评论 -
js 插入公共css的方法
createElement 一个 style 节点innerHTML 进需要的css代码body.appendChild 插入body中即可例:new_element = document.createElement("style");new_element.innerHTML =(".tucao-content p{font-size:18px;}");d...原创 2019-05-26 18:42:19 · 4122 阅读 · 0 评论 -
利用vm.$listeners, vm.$attrs实现简易的隔代通讯
相关阅读:v-bind 与 v-bind:name 的区别关于 vm.props,vm.props, vm.props,vm.attrs, vm.$listeners 的理解<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; c...原创 2019-08-24 11:23:44 · 2102 阅读 · 0 评论 -
利用 input type="checkbox" 加纯 css 制作漂亮的复选框
效果预览ps:懒得看的看官,可以直接去文末拷代码 首先了解一次 css选择器的[+]选择器,w3school的介绍选节如下:选择器 例子 例子描述 element+element div+p 选择紧接在 <div> 元素之后的所有 <p> 元素 :checked input:checked 选择每个被选中的 &...原创 2019-02-15 15:29:49 · 3053 阅读 · 0 评论