前行,学习

原创 JS中的reduce

基本用法reduce(function(total, currentValue, currentIndex, arr), initialValue)注意点&小技巧currentValue为遍历时的当前值，注意原始数据格式无法确定数组长度时，填好initialValue初始值，在回调中处理好意外数值、格式遍历前，可以考虑使用filter、map等处理原始数组，数据流动会更加清晰，便于维护数组的高阶函数确实好用，但for才是正道demo以下demo只是简单的思路，实际开发中需要自

原创 ffmpeg

ffmpeg 这个工具的具体介绍,安装等可以百度,处理流文件很好用的工具,大部分多媒体平台都是用的这个开源,没遵守协议的据说都有被开源者拉黑了…命令行:ffmpeg -i http://xxx.m3u8 -c copy 1.mp4

原创 浏览器对脚本播放媒体的限制

前情提要在做的ERP系统,接到新需求,在收到订单后弹出框, 语音通知 ,我用WS接受服务器信息,用隐藏的audio标签和js手动播放,自测没问题,集成测试过了,好,上线…—大约一周后用户反馈,弹出框是有的, 语音通知偶尔有,且几率很小,我的反应是:你是不是音响没插稳…(之前是有过这种情况的,而且不止一次orz)排查问题线下环境一直是没有问题的(Chrome稳定最新 84.0.4147.125),直到我打开火狐:Uncaught (in promise) DOMException: play()

原创 前后分离后 关于接口的思考

前言咳,玩笑归玩笑,就我目前工地代码的水平而言,我负责架构的话,还是得前后端商量数据怎么处理比较好,多搞点reviewer,优化流程和接口比如我最近搞的商城系统,我需要展示商品状态,且根据状态设置操作权限,比较理想的就是给我状态字符串和状态码根据状态码映射出状态?用正则从状态字符串映射出状态码?我分分钟想砍人内存溢出当然了,这只是个简单的例子,大家还是要买把菜刀备用着的todo...

转载 网络协议图解

原创 CSS奇怪但偶尔实用的技巧

伪元素获取自定义的标签属性你是否还在为伪元素content内容发愁呢?,试试 content:attr(data); 吧…nth-of-type选中指定范围的元素:nth-of-type(2n) 等同于 :nth-child(odd):nth-of-type(2n+1) 等同于 :nth-child(even)文字两端对齐text-align-last: justify; 等同于 justify-content: space-between;:not()排除一些没必要的元素,

原创 H5新增的实用表单属性

原文地址autocomplete‘on’‘off’autofocus以上两个属性会在一些UI组件库中存在问题,element说的就是你,出来挨打form没错啊,这不是指标签,这是表单元素的一个属性,值是引用所属表单的 id,多个则用空格分割输入框的快速选项你猜我用vue方便阅读维护又好看的,还是用丑陋但是性能好的呢?<input list="list" name="link" /><datalist id="list"> &.

原创 关于localStorage的思考: js可能会搞崩一台电脑

前言周所周知,js在浏览器(客户端)运行的时候,往往只能影响到当前标签页,就算写的死循环,充其量也只能让整个浏览器崩溃直到有一天,我发现localStroage是储存在C盘里的(大约是为了读写更快吧),于是,奇怪的知识增加了.jpeg思路localStroage是有限制大小的,大约是2-5MB,但是它是永久储存的,所以可以用多个标签页储存打开标签页的动作未免太明显,会引起用户警觉,所以用一个隐藏掉的iframe不断地打开不同的域名,ip,再利用获取到的window对象写入localStroage

原创 Axios取消请求ajax请求

应用场景用户需要快速请求,比如抢购,前一次的请求数据是毫无意义的,直接取消就完事了接口返回数据占用同一个dom,比如快速切换tab后,前一次请求比后一次请求响应慢,这时的tab页已经切过去了,可是数据却是前一个tab页的Axios中的使用/** index.js */// 如果有前一次请求在,先取消this.cancel && this.cancel('message')this.$axios({ url, method, // 实

原创 CSS3 的动画应用

写这玩意的目的需要强调的一些文字,比如提示多个账户的用户登录的是哪一个如果是每次一个提示框出来,用户不觉得这个提示框新鲜了之后,自然就会忽略掉如果是加粗加大斜体字,啊,没也用,用户也会习惯最好的方法就是在简洁干净的页面加上类似 澳门赌场开业啦 的那种效果,保证抓眼球,永不过时,就是去财务报道的时候记得注释掉思路以下代码都是在 chrome 中调试的利用 CSS3 的动画红底蓝字?蓝底红字?既然要追求 刺激 闪瞎狗眼,那就贯彻到底咯demo1先来个简单的 红底蓝字/蓝底红字 切换

原创 子网掩码到底是个啥咧?

我也不知道,好了,本篇博客到此结束,谢谢.

原创 Git异常处理清单

本地工作区文件恢复git checkout <filename/dirname>什么?没提交?没在仓库下?跑路吧…远程分支删除后，删除本地分支及关联

原创 Chrome DevTools(开发者工具)中的骚♂操作

1

原创 JS箭头函数的使用注意事项

this的指向普通函数:this 一般就是谁调用的,就指向谁,或者用 call 、 apply 等方法改变指向作为构造函数调用的时候, this 指向通过 new 关键字创建的实例箭头函数this 指向上下文,因为他没有自己的 执行上下文利用这个特性,在箭头函数作为类的方法时,可以直接用 this 获取类的实例对象构造函数箭头函数没有自己的 执行上下文 ,不能用作构造函数对箭头函数使用new关键字,报错: TypeError: xxx is not a construct

原创 PS制作压印效果的logo等

纸质的灰色图片作为背景logo/海报进行3D旋转到合适角度添加 斜面浮雕 , 内阴影 ,添加 光泽 , 投影,角度参考 -90

原创 PS快速矫正白平衡

新建空白图层,填充 50% 的灰色,混合模式改为 差值新图层添加效果 阈值,阈值滑动到靠近最左边,选择最黑的地方按住 shift 单击,用吸管工具新建效果 曲线 ,选择 在图层中取样以设置灰场 ,点击刚才标记的地方...

原创 PS的一些实用技巧

缩放的时候按h可以快速重新定位吸管工具可以拖出去全局取色打开瞬间按ctrl alt shift可以恢复出厂设置同时预览局部效果和全局效果创建两个一样的同步窗口窗口，排列，为…新建窗口窗口，排列，双联垂直...

原创 PS批量处理

窗口 > 动作,开始记录动作魔棒点击边角,删除背景,导出图片,记录动作完成文件 > 批处理 > 组 > (刚才录下的动作) > 选择需要抠的文件夹选择输出的文件夹,起始序列号01

原创 计算机常见故障及其原因

原创 Vue的基础总结和进阶思路

生命周期breforeCreate：实例创建前，这个阶段实例的 data 和 methods 是读不到的。created：实例创建后，这个阶段已经完成数据观测，属性和方法的运算，watch/event 事件回调，mount 挂载阶段还没有开始。$el 属性目前不可见，数据并没有在 DOM 元素上进行渲染。created 完成之后，进行 template 编译等操作，将 template 编译为 render 函数，有了 render 函数后才会执行 beforeMountbeforeMount：在

原创 Vue的组建通信 总结

$refs父组件调用子组件的方法<child ref="child" />this.$refs.child.emitEvent(this.msg)$emit子组件调用父组件的方法this.$emit('method', ...arguments)$on兄弟组件// 接受方:发送方.$on('method', ...arguments)// 发送方:接受方.$emit('method', ...arguments)$children返回一个数组,无

原创 VueCli的一点经验

一点操作# --modern 会构建两个版本,分别做兼容和速度的,而且直接部署就完事了,爱了爱了# 构建的另一个版本是为了在支持新特性的浏览器上跑得更快vue-cli-service build --modern

原创 Vuex的一点总结

Stateimport { mapState } from 'vuex'computed: {...mapState(['']) }this.$store.stateGetter接受 state 作为其第一个参数,接受其他 getter 作为第二个参数// 通过属性访问getters: { getterName: (state, getters) => { return }}store.getters// 通过方法访问getters: { getterNam.

原创 Vue-Router(前端路由)进阶

流程before... 最后的参数是 next() ,必须调用导航被触发。在失活的组件里调用离开守卫。调用全局的 beforeEach 守卫。在重用的组件里调用 beforeRouteUpdate 守卫。在路由配置里调用 beforeEnter 。解析异步路由组件。在被激活的组件里调用 beforeRouteEnter 。调用全局的 beforeResolve 守卫。导航被确认。调用全局的 afterEach 钩子。触发 DOM 更新。用创建好的实例调用 beforeRout

原创 Vue-Router(前端路由)基础

Router安装npm i vue-router -Simport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)动态路由模式匹配路由$route.params/user/:username/user/evean{ username:'evan' }/user/:username/post/:post_id/user/evean/post/123{ username:'e

原创 Vue开发中的一点技♂巧

路由参数解耦设置路由的 props 参数在组件内用 props 接收 params 参数// 设置为 trueconst router = new VueRouter({ routes: [{ path: '/user/:id', component: User, props: true }]})// 用函数返回const router = new VueRouter({ routes: [{ path: '/user/:id', co

原创 Vue的一些底层实现原理

ProxyProxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming）const obj = new Proxy({}, { get(target, key, receiver) { console.log(`getting ${key}`) return Reflect.get(target, key, receiver) }, set(target, key, value, rec

原创 React基础(跟着官方的demo走一遍)

跟着官方的 demo 走,最终还是放弃了React初始化(node + npm)npx create-react-app Name组件化小写字母开头的组件会被视为原生DOM标签,组件名称必须以大写字母开头,绑定传入的参数视为props的属性。建议使用类定义:class Name extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }.

原创 REACT和Vue的区别

React 严格上只针对 MVC 的 view 层, Vue 则是 MVVM 模式virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即 'all in js' ; V.

原创 JS字符串(String)的常用方法总结

ES5String.fromCharCode返回 Unicode 对应的字符串charAt返回指定索引处的字符, 与 [] 调用一致charCodeAt返回指定位置的字符的 Unicode 编码(0 - 65535)fromCharCode将 Unicode 编码转为一个字符concat连接字符串, 不改变原字符串slice(start, end)提取指定位置的字符串, 不改变原字符串substring同上, 但不支持负数substr

原创 JS对象(Object)的常用方法总结

没有对象? new 一个啊方法Object.create()接受一个对象作为返回对象的原型new Object() 原型直接指向 ObjectObject.assign()把第二个及以后的参数作为对象浅拷贝到第一个参数中,返回合并后的对象Object.keys返回一个迭代对象Object.values同上Object.entries同上Object.getPrototypeOfObject.setPrototypeOf(obj,prototyp.

原创 JS数组(Array)的常用方法总结

ES5concat(不改变原数组)传入一个以上的参数,参数会被转为数组,返回连接后的一个数组join (不改变原数组)传入一个字符串,作为分割符,返回分隔好的字符串push / unshift (改变原数组)传入一个以上的参数,参数会被转为数组,在数组的结尾/开头处添加元素,返回添加后的长度pop / shift (改变原数组)删除数组最后/第一个元素,返回这个元素slice (不改变原数组)第一个参数表示从何处开始获取,第二个参数表示从何处结束(负数为从后开

原创 正则表达式(RegExp)及其在JS中的使用

常用把你的猫放在键盘上让它走一圈一段完美的正则就写好了正数: /^[0-9]+(\.[0-9]+)?$/邮箱: /^.+@.+\..+$/JS 中String.match() 和 **RegExp.exec()**还返回两个属性, index : 匹配的第一个字符位置; input : 被检索的字符串原文String.search() : 接受一个字符串或者正则,返回匹配到的 第一个 字符的位置String.match() : 接受一个字符串或者正则,返回数组,或者N

原创 JS中一些常用的工具函数

Array转换为<li>标签并附加到给定ID的列表中const arrayToHtmlList = (arr, listID) => (el => ( (el = document.querySelector('#' + listID)), (el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))))();去除无效/无用值判断是否转换为 flaseconst

原创 JS工程化中模块的优雅导入

注意点require 不能直接导入用变量命名的路径字符串,可以用 require.contextrequire.context 有三个参数:匹配的路径目录，（从当前目录开始算起）是否深层遍历正则匹配，匹配出你需要的路径例子import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const routes = []const context = require.context('./router',

原创 JS里一些奇怪的知识

元素变为可编辑document.body.contentEditable=true监听屏幕方向 : window.orientationwindow.addEventListener("resize", () => { if (window.orientation === 180 || window.orientation === 0) { // 正常方向或屏幕旋转180度 // 竖屏 } if (window.orientation === 90 || wind

原创 对JS一点数据结构的感悟

浅克隆 & 深克隆栈在栈顶做操作,后进的先出, 基本 类型的数据(小)和指针存储在这里, 堆中,存储 引用 类型的数据所以, const ,Object.freeze等不能修改的其实是它的 指针浅克隆 的本质就是把 引用 类型的的指针指向同一个, 基本 类型会新开辟一个新的空间给它储存深克隆是相对于 引用 类型而言,意思就是要新开一个空间给它,而此时还需要考虑这个数据存储的 深度 ,比如数组中包含的一个对象,这时候就算遍历了数组,而这个数组中的对象还只是 浅克隆 而已(像不像

原创 JS的原型链 - 继承的一种实现

ES5/ES6 的继承ES5的继承(原型链继承)中,子类和父类的 __proto__ 都指向 [Function]ES6的继承(类的 extends ),子类的 __proto__ 会指向父类, 阮一峰 :子类必须在 constructor 方法中调用 super 方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用 super 方法，子类就得不到 this 对象

原创 JS中展开操作符的应用

基本操作这个就不写了移除对象的属性// 传入参数有待优化const delProp = ({ Prop1, Prop2, ...rest }) => rest属性排序const sortProp = object => ({ Prop1: undefined, ...object })有值的情况添加该属性更多操作有待研发...(Prop1 && { Prop1 })...

原创 async await 的大概

// 用 async 标识的函数在执行时遇到 await 标识的异步操作时会阻塞住,等待异步完成后继续执行// 执行完成后返回一个 Promise ,标识状态function getRamNum() { return new Promise( (resolve, reject) => { const sino = parseInt(Math.random() * 6 + 1) setTimeout(() => { resolve(sino) }, 300