- 博客(46)
- 收藏
- 关注
RSS订阅翻译 【翻译】网页CSS切换暗黑模式
现在手机系统都有一个暗黑模式和一个普通的明亮模式，网站会根据你设备的设置来展示对应模式。这种即时变换的外观是靠以下CSS来实现的，支持的浏览器有： Firefox、Safari和Chrome。@media (prefers-color-scheme: dark) { body { background-color: #444 color: #e4e4e4 } a { color: #e39777 } img
2020-11-24 16:04:19
366
翻译 【翻译】Vue RFCs - ReadMe
（乍一看以为懂了，再看似懂非懂，细看完全不懂，太难了，语言是个坎）Vue RFCs一、RFC是啥?"RFC"(request for comments)请求评议，目的是为新功能进入框架提供一致且受控的路径。很多变化，包括bug修复和文档说明的更进可以在日常的GayHub工作流中实施和评估。但是有些实质性的变化，我们要求这些变化经历一个设计过程，并且在Vue核心团队和社区中一致通过。二、RFC生命周期一个RFC会经历以下阶段：Pending：这个RFC被作为一个PR(pull req.
2020-10-15 14:14:11
1558
原创 JS-DOM属性 offset、client、scroll获取页面元素位置
吹空调着凉了，擤鼻涕擤得鼻子痛TT，脑子混沌。TS10坑没填完，最近笔记本给KW用了，台式无法连蓝牙耳机，先看点别的。场景：页面点击某Title跳转到页面下边对应位置。类似于HTML中的锚点。跟这个博文目录也类似。参考文章：https://javascript.ruanyifeng.com/http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_us...
2020-07-08 10:51:42
381
原创 Page Lifecycle & Page Visibility 页面周期和页面可见性
Page Lifecycle & Page Visibility 页面周期和页面可见性参考文章：http://www.ruanyifeng.com/blog/2018/10/page_vi...
2020-07-06 17:42:06
360
原创 Vue轮子-Lottie-动画实现
挖坑。先工作。有空写。airbnb出品的动画实现方式。https://airbnb.design/lottie/
2020-07-01 09:50:07
547
原创 TypeScript-10.高级类型2
笔记。// this类型// 索引类型： 索引类型查询操作符 索引访问操作符// 映射类型： 基础 由映射类型进行推断 增加或移除特定修饰符 keyof和映射类型在2.9的升级 元组和数组上的映射类型// 条件类型： 基础 分布式条件类型 条件类型的类型推断-infer TS预定条件类型// 一. thisclass Counter { constructor(public count: number = 0) {} add(value: number) { this.co
2020-06-28 14:02:55
228
原创 TypeScript-9.高级类型1
笔记。交叉类型 联合类型 类型保护 null和undefined 类型保护和类型断言 类型别名 字面量类型 枚举成员类型 可辨识联合
2020-06-24 10:32:26
204
原创 TypeScript-7.enum枚举
题外话：今天是2020.06.21 夏至+父亲节+日全食。梅老板说 今天也是新月，在这天万物都焕然一新，加上日食和夏至，非常少见。这一天适合全新的价值观，许下一个心愿，一定要是积极的愿望。我许的是 爱自己 做自己。配上一首诗。Had I not seen the SunI could have borne the shadeBut Light a newer WildernessMy Wilderness has made ------- Emily Dickin...
2020-06-21 21:30:19
150
原创 TypeScript-6.Class 类
笔记。未完待续。1.基础 在ts中定义类class Point { x: number y: number constructor(x: number, y: number) { this.x = x this.y = y } getPosition() { return `(${this.x}, ${this.y})` }}const poit = new Point(1, 3)console.log(poit)// 继承class
2020-06-20 17:11:11
1118
原创 ES6-Class类2/2
1.ES5中的继承function Food() { this.type = 'food'}Food.prototype.getType = function() { return this.type}function Vegetables(name) { this.name = name}// Vegetables继承FoodVegetables.prototype = new Food()const tomato = new Vegetables('tomato')c
2020-06-20 14:40:34
142
原创 ES6-Class类1/2
笔记。1.ES5和ES6实现创建实例// ES5中创建实例function Point(x, y) { this.x = x; this.y = y;}Point.prototype.getPosition = function() { return '(' + this.x + ', ' + this.y + ')'}var p1 = new Point(2, 3)console.log(p1) // Point {x: 2, y: 3}console.log(p1..
2020-06-19 17:45:27
130
原创 TypeScript-5.Generics 泛型
笔记。这两天提测，忙成狗。// 泛型的简单使用const getArray = <T>(value: T, times: number = 5): T[] => { return new Array(times).fill(value) // fill()用固定值替换数组元素}console.log(getArray(2)) // [2,2,2,2,2]console.log(getArray(2, 3)) // [2,2,2]console.log(getArra
2020-06-19 14:04:17
141
原创 Vue组件封装 - Tab标签滑动切换
<template> <div class="tab-container"> <div class="tab-title" @click="changeTab(index, $event)" v-for="(item, index) in tabList" :class="[index === statusIndex ? 'active' : '']" :key="index.
2020-06-16 17:52:46
1067
原创 JS的数组、对象和类数组对象
昨天的TS的课上听到了类数组对象，想到之前面试的时候被问到过，回想了一下，当时就提了一下函数的arguments参数是类数组对象，对其数据结构和与数组或者对象的区别的理解其实很模糊，来补一篇。数组 Array定义：一组有序的数据集合，其索引为从0开始且自然增长的整数，其元素值可以是任何js数据。其包含一个名为length的属性，该属性表示数组元素的个数。数组元素的索引和length属性是在数组定义时根据数组元素语言自动定义的。如下图。对数组，日常工作中对数组的处理蛮多的，涉及到一些的算法，
2020-06-16 10:03:27
912
原创 TypeScript-4.函数
笔记。// 一、函数类型// 1.为函数定义类型// 函数传统写法function add1(arg1: number, arg2: number): number { return arg1 + arg2}// 函数ES6箭头函数const add2 = (arg1: number, arg2: number) => arg1 + arg2// ******类型定义********const arg3 = 5let add3: (x: number, y: number)
2020-06-15 17:07:06
247
1
原创 TypeScript-3.Interface接口
笔记。// 一、接口定义对象interface NameInfo { firstName: string lastName: string}const getFullName = ({ firstName, lastName }: NameInfo) => { return `${firstName} ${lastName}`}getFullName({ firstName: 'aahah', lastName: 'heihei'})interface V
2020-06-15 14:00:21
161
原创 TypeScript-2.Symbol类型
笔记。Symbol是独一无二的值,他可以作为对象的属性名,这样就不会被改写。const s1 = Symbol()const s2 = Symbol()//console.log(s1 === s2) // false// const s3 = Symbol('Van')const s4 = Symbol('Van') // s3 === s4 false// console.log(s4)//Symbol值不能与其他类型值进行计算//Symbol值可转换为字符串或布尔值// .
2020-06-13 16:54:43
204
原创 TypeScript-1.基本数据类型
笔记。昨晚看《你好 妈妈 再见》哭成狗。白天千万不能看。中午吃饭准备看央视的纪录片《西南联大》，前几天在《人文通识》里面提到过，比较感兴趣。// 布尔类型let bool: boolean = true// 数值类型let num: number = 123num = 0b111011 // 二进制num = 0o171 // 八进制num = 0x7b // 十六进制// 字符串类型let str: string = 'abc'str = `数值是${num}`// co
2020-06-08 11:05:38
148
原创 JS的数组去重的8种方法
题外话：今天周六openDay，日常上班，上午做做题，下午看看TS，安排的满满当当。前天 Kill Eve Season3 完结。好像大家都比较喜欢最后小变态说的那句：Now we walk, and we never look back...其实我比较喜欢前面那段，有点小浪漫：When I try and think of my future. I just ...See your face over and over again...不甜吗！！！！早上广播里《人文通识》讲的是杜月笙，今晚回去
2020-06-06 13:59:09
393
原创 JS数组扁平化的5种方法
数组扁平化如下示例，简单来说就是展开。var arr1 = [1, [2, 3], [[3, 4, 2], 1], 5, [3]]; => [1, 2, 3, 3, 4, 2, 1, 5, 3]var arr2 = [1,['2', 3], [2], '2', 4] => [1, "2", 3, 2, "2", 4]1.经典：递归 思路：循环数组，判断arr[i]是否是数组，是数组的话再次调用此函数。function flatten(arr) { var...
2020-06-04 10:25:00
1768
原创 JS防抖和节流详解及utils封装
背景开发中有些事件会频繁触发，例如window的resize、scroll，光标行为mousedown、mousemove，键盘行为keyup、keydown等。频繁触发可看下例：https://jsbin.com/lifideyufu/edit?html,output// 代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" cont
2020-06-02 14:13:54
646
转载 HTTP返回状态码详解
转自 http://tool.oschina.net/commons?type=5状态码 含 义 100 客户端应当继续发送请求。这个临时响应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。客户端应当继续发送请求的剩余部分，或者如果请求已经完成，忽略这个响应。服务器必须在请求完成后向客户端发送一个最终响应。 101 服务器已经理解了客户端的请求，并将通...
2018-10-29 09:40:35
394
原创 数组操作方法整理
对数组的操作方法记得有点混乱，这里整理一下。1.数组创建var arr = new Array()var arr = new Array([size]) // 定义数组创建时的长度2.数组头部的添加 unshift()、删除 shift()unshift() 方法将它的参数插入数组的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法可有多个参数。并返回改变...
2018-10-18 11:39:44
330
原创 Vuex Store文件夹内容梳理
vuex之前只看过官方文档，写了一点小demo。播放器在多个页面可以点击打开，那么数据就需要放在一个公共的地方，方便取用，就用到了Vuex。这边需要自己缕一下思路。Vuex store文件夹里各文件说明 1）首先 index.js 入口文件 语法糖很多，logger在console里面可以查看 prev state 和 next state 变化前变化后的状态值。...
2018-10-11 11:07:29
6015
1
原创 扣扣音乐歌曲链接抓取
第六章 歌手详情页开发-歌曲链接抓取遇到了些小问题。根据视频中老师的地址直接抓取报403。分析了一下扣扣音乐的网络请求，要补充vkey和几个参数拼到url中才能获取到。下面整理一下获取vkey的步骤。1）分析网络请求把 Request URL 贴到地址栏可以获得要播放的歌曲。这个链接中主要就是vkey的获取。2）后端代理请求获取vkeyhttps://c.y.qq...
2018-10-09 16:58:46
1731
1
原创 轮子-按钮防多次点击。Vue封装一个button组件
项目全局都有button，为了统一风格，方便使用，封个组件。此外还有好多组件要疯的。。。。基本的 绑定点击事件 还有一些状态判定<template> <div class="button"> <button :disabled="clickState" @click="onclick" clas...
2018-09-19 11:20:18
3743
原创 银行卡四位一空格，输入格式校验，解决删除光标自动后置问题
需求：输入银行卡的时候，四位一空格显示。后自测的时候，到中间段回删或者插入的时候，删一个会自动重新校正光标后置，体验很差，昨天试了半天，今天早上来修好。上代码。 <input class="cardInput" v-model="cardNumShow" @keyup="showNum" @blur="chargeNum" ref="cardInput">
2018-09-14 17:30:02
1696
原创 RSA非对称加密传输---前端加密&解密(VUE项目)
A要传给B一句话(需要保密)，就由B生成一对公钥和私钥存好，公钥就好比一把锁，钥匙就是私钥。B只需要把锁给A，A把那句话锁起来，交还给B，在这过程中，即使大家都能看到公钥(锁)，也是不知道那句话是啥的，然后B拿到锁好的机密，拿只有自己才有的私钥(钥匙)解开，这个差不多就是非对称加密。实际开发过程中，后台生成一对公私钥，私钥存在服务器，把公钥给前端，前端加密后传给后端，这是相对比较安全的做法。...
2018-09-07 09:59:05
21239
9
原创 python在windows交互模式下清屏
>>>import os>>>os.system('cls')这个会有个返回值 0 表示清屏成功如果不要返回值0就是： >>>import os>>>i=os.system('cls')============看python第一天...
2018-08-01 12:05:24
837
原创 写个验证码倒计时 Vue
上代码页面上写个获取验证码的按钮 <div @click="getCode()" :class="{ 'textGrey' : isGrey }"> 获得验证码{{countShow}} </div>写一个textGrey的class属性 变成灰色 .textGrey { color: #ddd } 数据初...
2018-07-27 11:53:19
289
原创 正则表达式验证集合---速查（持续更新）
1.国内手机号 （11位）普通验证 /^1[3-9]\d{9}$/严格验证(前三位匹配) /^1((3[0-9])|(4[5,7,9])|(5[0-3,5-9])|(7[0,3,5-8])|(8[0-9])|66|98|99)\d{8}$/ * 移动：134(0-8)、135、136、137、138、139、147、150、151、152、157、1...
2018-07-04 16:17:40
640
原创 Vuex简单入门5：actions
Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。
2018-07-04 09:42:31
271
原创 Vuex简单入门4：getters属性
1. store.js中加入getters ,并且添加count方法，同时要把getters放入store中，代码如下const getters = { count: (state) => (state.count += 100)}export default new Vuex.Store({ state, mutations, getters})2. 在count....
2018-07-04 09:11:50
337
原创 Vuex简单入门3：Mutations修改状态
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。$store.commit( ) 方法 store.js文件中更改如下const mutations = { add (state, n) { state....
2018-07-03 18:32:41
789
原创 Vuex简单入门2：三方法 state访问状态对象
上一篇通过$store.state来访问状态对象，在实际应用中，不可能每次都取store中取，这就需要把需要的值赋值给模板data中的对象。有三种赋值方法如下：一、通过computed的计算属性直接赋值computed: { count () { return this.$store.state.count }},这样在模板中就可以直接调用{{count}}二、通过mapStat...
2018-07-03 18:16:01
528
原创 Vuex简单入门1：一个小demo
1. 利用vue-cli 的webpack生成基础项目结构。2. 然后安装 vuex 用npm包管理工具 npm install vuex --save3. 建立一个vuex文件夹，建一个store.js文件，并在文件中引入vue和vuex，然后再引用vuexstore.js 内容 ，state 、 mutations 后面会详细写 import Vue from 'vue'impor...
2018-07-03 18:03:21
572
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人