栾铸显的博客

No road to follow


  • 首页

  • 分类

  • 归档

  • 搜索
Fork me on GitHub

JavaScript 中获取对象属性名集合的几种方式

发表于 2021-02-25 | 分类于 javascript | | 阅读次数:
直接看例子:1234567891011121314151617181920const SymbolA = Symbol('A')const SymbolB = Symbol('B')function Person(name) { this.name = name this[SymbolA] = 'SymbolA'}Person.prototype = { constructor: Person, job: 'student', [SymbolB]: &ap ...
阅读全文 »

移动端适配方案

发表于 2021-01-05 | 分类于 移动端开发 | | 阅读次数:
另一篇文章:移动端像素与Viewport 移动端适配的问题通常在PC端1个设备独立像素 = 1个设备像素,不用考虑兼容的问题。但在移动端,不同厂商不同型号的设备的PPI和DPR是不同的,也就是设计图上的1像素在不同设备上占据的实际物理像素值可能不同,所以同样的设计图在不同设备上展示效果是不尽相同的,分辨率越高,图像越缩小。假如设备的DPR为2,则设计图上的1px在设备上其实应该是4个像素点,则设计图的1像素实际是屏幕的2像素,如果不经过转化放大,那么设计图上的元素在设备上会被缩小1/2。所以我们要找到适用于各种设备的转换方法,使设计图在各个设备上看起来都一样。 几个概念下面几个都是css ...
阅读全文 »

移动端像素与Viewport

发表于 2021-01-03 | 分类于 移动端开发 | | 阅读次数:
CSS像素、设备像素、设备独立像素CSS像素(CSS Pixel)虚拟像素,css和js使用的抽象单位,是图像显示的基本单元,既不是一个确定的物理量,也不是一个点或者小方块,而是一个抽象概念。 设备像素(Device Pixel)也称为物理像素,设备能控制显示的最小单位,显示屏是由一个个物理像素点组成的,通过控制每个像素点的颜色,使屏幕显示出不同的图像。 设备独立像素(Device Independent Pixel)也称为逻辑像素,简称DIP。与设备无关的逻辑像素,代表可以通过程序控制使用的虚拟像素,是一个总体概念,包括了css像素。可以理解为:CSS像素 = 设备独立像素 = 逻辑像素。在 ...
阅读全文 »

vue-awesome-swiper 切换导航导致轮播停止的问题

发表于 2020-12-13 | 分类于 vue | | 阅读次数:
vue-awesome-swiper版本3.1.3。且使用了keep-alive。 今天发现页面跳转后再返回,轮播会停止,不自动播放了。看了看文档,鼓捣了配置也还是一样。那么把实例打印出来看看。 12345// template<swiper ref="swiper" :options="swiperOption">// scriptconsole.log(this.$refs.swiper.swiper) 发现有个autoplay对象,其中paused: true,表示被暂停了,等于每次组件被deactivated停用时轮播也会被暂 ...
阅读全文 »

Github Page 添加自定义域名 + 开启 HTTPS + 支持七牛云图片

发表于 2020-11-13 | 分类于 Hexo | | 阅读次数:
购买域名首先没有域名的要去购买,这个就不多说了。 域名解析到 Github Page购买域名的供应商会提供域名解析,我们的目的是将域名解析到你github page的 ip 地址。这个也不多说了,不清楚可以百度。或者参考我的。 github 仓库添加域名解析记录可以通过命令在github page仓库中添加CNAME文件:12touch CNAMEecho 'luanzhuxian.com'> CNAME 或者在仓库的settings中找到Custom Domain添加自己的域名 之后就可以通过域名访问了。 支持 https 访问自定义域名现在只能通过http访问 ...
阅读全文 »

JS 的批量异步操作

发表于 2019-12-25 | 分类于 javascript , es6 | | 阅读次数:
按顺序完成异步操作实际开发中,经常遇到一组异步操作,需要按照顺序完成。比如,依次远程读取一组 URL,然后按照读取的顺序输出结果。 Promise 的写法如下:123456789101112function logInOrder(urls) { // 远程读取所有URL const textPromises = urls.map(url => { return fetch(url).then(response => response.text()); }); // 按次序输出 textPromises.reduce((chain, ...
阅读全文 »

ES6 的 Symbol

发表于 2019-12-25 | 分类于 javascript , es6 | | 阅读次数:
第七种数据类型在 ES6 出现前,Javascript 有 6 种数据类型: Undefined Null Boolean Number String Object 每种类型都可以看做值的集合。前 5 种集合值的数量是有限的。比如 Boolean,只有true和false两种情况。Number 和 String 值的数量显然要多得多。根据 ECMA Standard,Number 大约有18,437,736,874,454,810,627 个值,String 的话大约有 (2144,115,188,075,855,872 − 1) ÷ 65,535 种可能。而对象的范围是无限的,每一个对象 ...
阅读全文 »

ES2019

发表于 2019-08-15 | 分类于 javascript , es6 | | 阅读次数:
Array.flat(depth)递归平铺多维数组,depth指定嵌套数组中的结构深度,也就是指定的递归层级,默认是 1。此方法并不修改原数组,而是返回一个新的数组。 之前如果我们想平铺数组可以这样做:1const flatten = arr => arr.reduce((flat, next) => flat.concat(Array.isArray(next) ? flatten(next) : next), []) 或者利用展开运算符,但只适用于二维数组,不过可以通过递归平铺任意维度的数组:12345678function flattenArray(arr) { ...
阅读全文 »

Object.create():创建对象的新方式

发表于 2019-08-12 | 分类于 javascript | | 阅读次数:
在Vue和Vuex的源码中,作者都使用了Object.create(null)来初始化一个新对象。为什么不用更简洁的{}呢? Object.create()1Object.create(proto[, propertiesObject]) proto:新创建对象的原型对象。 propertiesObject:可选。要添加到新创建对象的可枚举属性(即其自身定义的属性,而不是其原型链上的枚举属性)的属性描述符以及相应的属性名称。这些属性对应Object.defineProperties()的第二个参数。 也就是返回一个新对象,并将传入的参数作为该对象的原型对象。12const o = O ...
阅读全文 »

有用的 js 技巧

发表于 2019-08-12 | 分类于 javascript | | 阅读次数:
数组合并数组 Array.concat():会创建一个新的数组,对于大数组来说会消耗大量内存。 Array.push.apply(arr1,arr2) 类数组 arguments 对象、DOM 节点列表转化成数组的几种方式 for 循环后 rebuild ES5 - Array.prototype.slice.call(NodeList) (性能差) 12345// 以 arguments 为例(function fn(){ var arr = Array.prototype.slice.call(arguments) return arr.reduce((prev, curr ...
阅读全文 »
12…4

39 日志
12 分类
12 标签
© 2018 — 2021 lzx