# 2019年12月技术日常

# 2019/12/30 周一

# 滚动条自动滚动到最右侧

给scrollLeft设置一个超大的值即可

this.$nextTick(() => {
  element.scrollLeft = 10000
})

# 2019/12/27 周五

# 怎么清除app内嵌H5的localStorage

测试手机: iPhone8, 红米6,内嵌H5使用localStorage存储了一些数据,尝试清除

  • 完全退出app 安卓、iOS都无法清除
  • 退出登录 安卓、iOS都无法清除
  • 使用app内置缓存清理功能 安卓、iOS都无法清除
  • 使用系统的清除app数据方法:安卓清除app所有数据可以,iOS不可以(长按关机键,出现滑动关机,长按home键,直至滑动关机关闭)
  • 使用H5内置的 localStorage.clear() 都可以清除,注意域名
  • 删除app肯定可以清除

总结,在不删除app以及使用H5内置的清除函数的情况下,安卓可以使用系统的清除app所有数据来清除,但iOS暂未发现清除的方法。

# Symbol、BigInt不能new,而Stirng、number可以new,为什么?

BigInt('1') // 1n
new BigInt(1)
// Uncaught TypeError: BigInt is not a constructor
//     at new BigInt (<anonymous>)
//     at <anonymous>:1:1

String、BigInt都是函数,为什么一个可以new,一个不能new?函数怎么区分是new调用,还是直接调用?

复习JS高程3中 作用域安全的构造函数 (opens new window) 里,在构造函数中,通过 this instanseof Person 来判断是new 调用的,还是直接调用的构造函数,这里应该也是这种情况

// 模拟实现
function A() {
  console.log(this)
  if (this instanceof A) {
    throw new Error('Uncaught TypeError: A is not a constructor')
  }
  return ''
}
// 测试
A() // window   ''
new A() // A {}  Uncaught TypeError: A is not a constructor

再复习一下class,class 创建的类型也是function,且只能通过new调用,应该函数内部也是加了类似上面的校验,当this instanceof 不等于当前class时,就直接抛异常

总结:核心问题是 this 的指向问题,一般直接调用A()时this指向window

# why do we use .html instead of .html?

参考:Why do we use .html instead of .htm? | CSS-Tricks (opens new window)

DOS was a massive operating system for PCs for a long time and it had a three-character limit on file extensions.

All HTML documents should have filenames that end with the extension .html unless the files reside on a DOS system, in which case they should have the extension .htm

DOS操作系统上文件后缀限制为3个字符,所以才会使用.htm的后缀,排除系统限制,所有的HTML文件应该使用.html的后缀名

# 2019/12/26 周四

# ES2019 bigint 数据类型

ES5之前,基本数据类型有五个 boolean, string, number, null, undefined, ES6(ES2015)新增了一个symbol,ES2019 新增了 bigint 用于表示大于 2 ** 53 的数据,2 ** 53 = 9007199254740992

const x = Number.MAX_SAFE_INTEGER; // 最大的安全integer
// ↪ 9007199254740991, this is 1 less than 2^53

const y = x + 1;  
// ↪ 9007199254740992, ok, checks out

const z = x + 2
// ↪ 9007199254740992, wait, that’s the same as above!

// 不安全的integer,结果不符合预期
num = Number.MAX_SAFE_INTEGER // 9007199254740991
num + 1 // 9007199254740992
num + 2 // 9007199254740992
num + 3 // 9007199254740994
num + 4 // 9007199254740996
num + 5 // 9007199254740996
num + 6 // 9007199254740996
num + 7 // 9007199254740998
num + 8 // 9007199254741000
num + 9 // 9007199254741000
num + 10 // 9007199254741000

怎么解决上面的问题呢?ES2019使用bigint来解决这个问题,

const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER);
// ↪ 9007199254740991n

const maxPlusOne = previousMaxSafe + 1n;
// ↪ 9007199254740992n
 
const theFuture = previousMaxSafe + 2n;
// ↪ 9007199254740993n, this works now!

BigInt(1) // 1n
let theBiggestInt = BigInt(2 ** 53) // 9007199254740992n
theBiggestInt + 2 // Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
9007199254740994n.toString()  // "9007199254740994"

参考:

  1. tc39/proposal-bigint: Arbitrary precision integers in JavaScript (opens new window)
  2. BigInts in JavaScript_ A case study in TC39.pptx (opens new window)
  3. JS最新基本数据类型:BigInt (opens new window)

# 2019/12/25 周三

# transform 两个动作,scale缩小后,依旧占用空间的问题

transform对某个元素使用两个及以上变换时,用空格分隔,scale缩小0.5倍后,dom占用依旧,可以用translate移动下,矫正位置。

/* 两个transform */
div {
  transform: scale(0.5) translate(-50%, -50%)
}

# charles 抓包时手机不能开vpn

charles抓包,设置了网络代理,但是电脑上还是接收不到请求,发现vpn开启了,关掉后,就可以接收到请求的数据了。

# html2canvas 移动端生成图片文字重叠的问题

text-align:center 可能会导移动端,生成图片的文字重叠的问题,改为text-align:left 或 text-align: justify 即可。

# vue性能优化 - webpack包体积优化

  1. 安装 webpack-bundle-analyzer npm包
# 安装包
npm install webpack-bundle-analyzer --save-dev
  1. 在package.json的scripts加入对应的命令,运行npm run report 即可build,并在dist目录生成report.html,打开就可以各个模块包对应的大小,这样就可以开始优化了
scripts: {
  "report": "vue-cli-service build --report"
}
  1. 路由都弄成懒加载,js懒加载可以使用import(),如果使用import xx from 'xx',会直接打包到主包,就需要弄成懒加载的逻辑。但如果使用该js,怎么判断js已懒加载完?setTimeout 1s后再调用,弱网呢?怎么监听?这就需要了解懒加载的逻辑了,示例如下:
<!-- 监听是否加载完成 -->
<!-- 在浏览器中,import 语句只能在声明了 type="module" 的 script 的标签中使用。-->
<script type="module">
  let myModule = () => import('./testModule.js')
  
  // testModule.js   内容 export default { a: 1, b: "test" }

  // 类似于路由组件component懒加载逻辑。myModule仅是一个函数,返回promise,需要调用时 myModule().then() 即可
  window.onload = () => {
    console.log('onload')

    // dom已加载,3秒后加载模块
    setTimeout(() => {
      console.log(myModule, typeof myModule) // () => import('./testModule.js') "function"
      // myModule() 函数执行后,返回promise
      myModule().then((res) => {
        console.log('模块加载成功', res) // 加载成功 Module {Symbol(Symbol.toStringTag): "Module"}
        let data = res.default // {a: 1, b: "test"}
        console.log(data.a) // 1
      },(e) => {
        console.log('import 加载异常')
      })
    }, 3000)
  }
</script>

参考: import - JavaScript | MDN (opens new window)

# 2019/12/24 周二

# vuex设置后立即调用this.$router.back()按钮无法点击的问题

今天测试机iPhone 7 plus,系统大概是iOS 11.3,vuex mutation操作后,立即调用 this.$router.back() 会导致页面里的下一步无法点击。

// 解决方法
// vuex mutation操作 =>  this.$nextTick(() => { 将 this.$router.back() 放到这里即可 })

# 2019/12/23 周一

# html2canvas 生成图片时,background-image模糊的问题

PC端一般不会出现这个问题,主要是移动端,有两种解决方法:

  1. 使用固定宽度,不要使用百分比单位(比如 1500px)
  2. 用 img 标签使用 absolute 定位做背景,不使用background-image

# postcss-pxtorem px自动转rem怎么保持使用px

如果vue-cli3中配置了postcass-pxtorem,css中写的px单位都会自动转为rem,如果需要固定px,而不是转为rem,有两种方法

 /* 使用Px 或 PX */
 .ignore {
   border: 1Px solid;
   border-width: 2PX;
 }

# 2019/12/20 周五

# v-model为什么不能监听中文输入法实时输入

待研究:https://cn.vuejs.org/v2/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95

# 长英文单词不换行的问题

word-break: break-all; 或者 word-wrap: break-word;

<head>
  <style>
    .sec {
      width: 200px;
      margin: 20px;
      border: 1px solid #ccc;
    }
    .fix1 {
      word-break: break-all;
    }
    .fix2 {
      word-wrap: break-word;
    }
  </style>
</head>
<body>
  <div class='sec'>
    我是汉字 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa我是汉字
  </div>
  <div class='sec fix1'>
    我是汉字 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa我是汉字
  </div>
  <div class='sec fix2'>
    我是汉字 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa我是汉字
  </div>
</body>

# 2019/12/19 周四

# iOS环境下点击输入框页面被顶起不能自动回弹底部的问题

参考:https://blog.csdn.net/YY110621/article/details/87919966

解决方法:在对应的input元素加 @blur 事件,input失去焦点时,手动滚动页面 window.scroll(0,0)

# 实时调试app内嵌H5的样式、DOM

使用web调试代理工具Whistle, 可查看dom样式,待测试

# 遍历localStorage

let len = localStorage.length
for (let i = 0; i < len; i++) {
  let keyName = localStorage.key(i)
  console.log(keyName, localStorage.getItem(keyName))
}

# npm install --save 与 --save-dev的区别

参考:https://www.cnblogs.com/limitcode/p/7906447.html

# npm install moduleName

  1. 安装模块到项目node_modules目录下。
  2. 不会将模块依赖写入devDependencies或dependencies 节点。
  3. 运行 npm install 初始化项目时不会下载模块。

# npm install -g moduleName

  1. 安装模块到全局,不会在项目node_modules目录中保存模块包。
  2. 不会将模块依赖写入devDependencies或dependencies 节点。
  3. 运行 npm install 初始化项目时不会下载模块。

# npm install -save moduleName

  1. 安装模块到项目node_modules目录下。
  2. 会将模块依赖写入dependencies 节点。
  3. 运行 npm install 初始化项目时,会将模块下载到项目目录下。
  4. 运行npm install --production或者注明NODE_ENV变量值为production时,会自动下载模块到node_modules目录中。

# npm install -save-dev moduleName

  1. 安装模块到项目node_modules目录下。
  2. 会将模块依赖写入devDependencies 节点。
  3. 运行 npm install 初始化项目时,会将模块下载到项目目录下。
  4. 运行npm install --production或者注明NODE_ENV变量值为production时,不会自动下载模块到node_modules目录中。

对于只有在开发中使用的,比如node中间件、gulp、压缩css、js的模块,可以使用 --save-dev形式安装,如果线上代码必须依赖的模块,需要使用--save

# 2019/12/18 周三

# 将本地的H5代理到app内嵌H5运行

使用charles 顶部菜单 Tools - Map remote,配置将访问的内嵌H5地址,代理到局域网内本地网页路径即可

# 安卓 input键盘弹起导致底部按钮也被抬起

监听onresize,如果之前的视窗高度不为

let oriH = document.documentElement.clientHeight;
window.onresize = () => {
  if (document.documentElement.clientHeight < oriH) {
    document.getElementById('bttombtn').style.display = 'none';
  }else{
    document.getElementById('bttombtn').style.display = '原来的显示方式';
  }
})

# 2019/12/17 周二

# npm查询包信息、安装指定版本

# npm 查询某个包版本
npm view 某个包名
# 安装指定版本
npm install 某个包名@版本号

# 2019/12/16 周一

# 使用charles查看app内嵌H5请求的接口信息

  • charles官网:https://www.charlesproxy.com/
  • mac下charles使用简介(包含破解方法):https://www.jianshu.com/p/82f63277d50f 问题

# 问题1:Connection established

不同的电脑,对同一台手机抓包,需要安装不同的证书

  • 证书安装: help - SSL Proxying - install Charles Root Certificate,然后信任
  • 手机证书安装 help - SSL Proxying - install Charles Root Certificate on a Mobile Device …, 代理到本地后,访问chls.pro/ssl 下载安装,然后再Settings > General > About > Certificate Trust Testings 信任证书

# 问题2:SSL handshake with client failed - Remote host terminated the handshake

一般是证书信任问题: Settings > General > About > Certificate Trust Testings

# macos 查看ip

按住option,再点击右上角wifi图标即可看到本机局域网ip、路由ip

# vscode 保存自动格式化代码突然失效

之前还好好的,后面突然失效了。重启了vscode后面就好了

# 2019/12/13 周五

# vue组件里click事件监听问题

之前在看JS高程3里面有一个知识点,就是当多个子元素需要绑定click事件时,大量添加处理程序,会影响性能,尽量少添加处理事件。但写vue习惯后,突然忘了这一点,其实vue监听事件我们也可以遵循这个原则:把事件放到其父元素上监听,然后通过 data-key属性来指定每个子元素对应的值。e.target.getAttribute('data-key')有值就表示子元素点击了

参考:https://www.yuque.com/guoqzuo/js_es6/elgng1#0ea56e91

# function和method区别

参考: https://www.zhihu.com/question/299219511

  • function为函数,一般值外部定义的函数。
  • method为方法,一般指类(class)内部的方法,类方法一般分为staic method,private method, instance method

# Reflect.deleteProperty

删除对象的某个属性

delete obj.name
Reflect.deleteProperty(obj, 'name')

参考: deleteProperty - MDN (opens new window)

# 2019/12/12 周四

# vuex状态更新后,一直没生效的问题

今天写一个功能时,push数据更新state变量可以刷新到页面,但用slice改变state变量时,页面报错,提示 'TypeError: Cannot rad property 'wrapper' of undefined',百度了下可能是@click方法没定义报的错,但我这里只是改了vuex状态,而且push新增数据都可以,就是slice删除数据会报错,最后发现是有一个@click方法确实没有定义,但这种情况很奇怪。为什么push又不报错,可能涉及到了diff的一些检测、算法。所以,页面有consloe.error的错误,一定要先解决,不要以为对功能没影响就不管,不然可能会遇到一些奇怪的问题。

# vue组件updated钩子使用场景

子组件的列表数据会根据接口请求的数据来刷新,当列表数据更新后,会调用子组件updated钩子函数,我们可以在这里里处理列表数据刷新后的一些操作。比如清除所有focus状态,滚动页面

一般data每改动一次,就会触发一次updated钩子函数,对于data属性比较多的情况,可能会触发上百次的updated钩子函数,这种情况就不要使用updated了,它适用于data属性比较少的情况。

# 滚动到dom底端对齐

element.scrollIntoView(false) 底端对齐,true顶端对齐

# element.classList.add或remove

js原生class的添加和移除

document.getElementById("myDIV").classList.add("mystyle");
document.getElementById("myDIV").classList.remove(“mystyle");

# vuex页面刷新后还原的问题

参考: https://blog.csdn.net/chen123789hkb/article/details/90175607

思路:存到storage, 再取出

//刷新保存状态
if (sessionStorage.getItem("store")) {
  store.replaceState(
    Object.assign(
        {},
        store.state,
        JSON.parse(sessionStorage.getItem("store"))
    )
  );
  sessionStorage.removeItem("store")
}

//监听,在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
  sessionStorage.setItem("store", JSON.stringify(store.state));
});

# 2019/12/11 周三

# 懒加载时 import 里面不能是变量

当出现路由组件按需加载时,import里面开头不能是变量,webpack编译会无法加载对应的组件

// `前面加写死的字符串+${变量字符串}` 是可行的,会加载path目录下的所有
{ 
  path: '/path',
  // components: () => import(`${myFile}`)  // 找不到组件路径
  components: () => import(`./path/${myFile}`)  // ok

}

# 2019/12/09 周一

# :not 和 :nth 混用的问题

:not() 不支持在其参数中使用其他伪类。例如,h1:not(p:first-of-type) 不能匹配任何元素,所以不能混用,额外加个class吧

参考::not() - CSS(层叠样式表) | MDN (opens new window)

# font-family问题

chrome 和 ios safari设置了font-family后为什么不生效?

参考demo: https://zuo11.com/fonttest.html

# '?.' 与 '??' 操作符

Optional chaining operator(?.) 与 Nullish coalescing Operator(??) 目前正式进入 stg4,确定会成为ES2020标准

  • Optional chaining operator(?.)

可选链操作符,阮一峰ES6入门里称之为"链判断运算符",作用:当对象的属性或方法不存在时,需要先判断是否有值再使用。对于比较多层级的子属性判断就更复杂了,可选链操作符用于简化该场景的写法

// 示例1:当obj.sayHi存在,则执行该函数
obj.sayHi && obj.sayHi()
// 简化写法:
obj.sayHi?.() 

// 示例2: 如果当user.address为undefined,再访问子集元素会报错
var street = user.address ? user.address.street : undefined
// 简化写法: 
var street = user.address?.street

// 示例3
var argName = 'name'
obj?.[argName] 

// 语法
obj?.prop       // optional static property access
obj?.[expr]     // optional dynamic property access
func?.(...args) // optional function or method call

  • Nullish coalescing Operator(??)

Null判断运算符,可能会出现问题的场景:

// 示例
const response = {
  settings: {
    nullValue: null,
    height: 400,
    animationDuration: 0,
    headerText: '',
    showSplashScreen: false
  }
};

// 一般需求是,如果某个值非null 或undefined 就使用默认值
const undefinedValue = response.settings.undefinedValue || 'some other default'; // result: 'some other default'
const nullValue = response.settings.nullValue || 'some other default'; // result: 'some other default'

// 但 || 这种写法,只要左侧为false(比如(''、0、false)),也会使用默认值 
const headerText = response.settings.headerText || 'Hello, world!'; // Potentially unintended. '' is falsy, result: 'Hello, world!'
const animationDuration = response.settings.animationDuration || 300; // Potentially unintended. 0 is falsy, result: 300
const showSplashScreen = response.settings.showSplashScreen || true; // Potentially unintended. false is falsy, result: true

?? 就是为了解决这种问题需求的,只有当左侧值为null或undefined,才使用右侧的默认值

const undefinedValue = response.settings.undefinedValue ?? 'some other default'; // result: 'some other default'
const nullValue = response.settings.nullValue ?? 'some other default'; // result: 'some other default'
const headerText = response.settings.headerText ?? 'Hello, world!'; // result: ''
const animationDuration = response.settings.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings.showSplashScreen ?? true; // result: false

参考文档:

可选链 - JavaScript | MDN (opens new window)

对象的扩展 - ECMAScript 6入门 (opens new window)

tc39 - Finished Proposals (opens new window)

tc39 - proposal-optional-chaining (opens new window)

proposal-nullish-coalescing (opens new window)

# 2019/12/06 周五

# iconfont icon是如何加载的,字体图片?

参考: Iconfont-阿里巴巴矢量图标库 Web端使用 (opens new window)

iconfont.cn 有两种icon下载方式:

  1. 下载代码(将图标转换为字体,便于前端工程师自由调整与调用) download.zip 解压缩后目录如下,下面的文件很多,但不一定都会用到,下面详细介绍三种使用图片的方式:
├─demo.css        # 非必要,只是文档样式
├─demo_index.html # 非必要,只是文档
├─iconfont.css    # 重要重要重要重要重要重要文件
├─iconfont.eot    # 非必要,可以不引入
├─iconfont.js     # 重要重要重要重要重要重要文件
├─iconfont.json   # 非必要,可以不引入
├─iconfont.svg    # 非必要,可以不引入
├─iconfont.ttf    # 非必要,可以不引入
├─iconfont.woff   # 非必要,可以不引入
├─iconfont.woff2  # 非必要,可以不引入
  • Symbol 引用

这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点: 支持多色图标了,不再受单色限制. 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。 兼容性较差,支持 IE9+,及现代浏览器。 浏览器渲染 SVG 的性能一般,还不如 png。

<!-- 
  使用demo 
  只需要额外引入下载包里的 iconfont.js + copy 一小段css 即可使用
  iconfont.js里面是一段js代码,每个icon的svg path写死放到了字符串里,然后通过一定的方式供外部引用,不涉及网络请求
-->
<head>
  <style>
    /* 1.引入 默认icon样式,高宽、颜色 */
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
  </style>
  <!-- 2.引入js -->
  <!-- <script src="iconfont.js"></script> -->
  <script src="iconfont_delete_fill.js"></script>
</head>
<body>
  <!-- 
    3.使用
    这里发现设置color无效,网上百度了,发现 iconfont.js里面写死了fill的颜色  批量替换 fill="#181818" 为空字符串即可 
    参考: [iconfont图标symbol引用方式,有的图标不能通过设置color样式来修改颜色的解决办法] https://www.cnblogs.com/jopny/p/9454785.html
  -->
  <svg class="icon" aria-hidden="true" style="font-size:10em;color:blue">
    <use xlink:href="#icon-icon-test"></use>
  </svg>
  <svg class="icon" aria-hidden="true" style="font-size:5em;color:red">
    <use xlink:href="#icon-icon-test7"></use>
  </svg>
</body>
  • font-class 引用

font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。与 Unicode 使用方式相比,具有如下特点: 兼容性良好,支持 IE8+,及所有现代浏览器。 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。 不过因为本质上还是使用的字体,所以多色图标(这里指多种颜色的图标, 单一的颜色不算)还是不支持的。

<!-- 
  demo 直接引入 iconfont.css 即可使用,iconfont.css 文件里面有base64字体文件,所以不涉及网络请求
  - 也可以使用color、font-size来设置大小和颜色 
-->
<head>
  <link rel="stylesheet" href="./iconfont.css">
</head>
<body>
  <span class="iconfont icon-icon-test4" style="color:red;font-size:80px;"></span>

  <span class="iconfont icon-icon-test4"></span>
</body>
  • Unicode 引用

Unicode 是字体在网页端最原始的应用方式,特点是: 兼容性最好,支持 IE6+,及所有现代浏览器。 支持按字体的方式去动态调整图标大小,颜色等等。
但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。 注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

<!-- 
  demo 将iconfont.css里面的font-face拷贝到这里,拷贝样式,就可以直接使用了,
  不涉及网络请求
-->
<head>
    <style>
    @font-face {font-family: "iconfont";
      src: url('iconfont.eot?t=1575623500554'); /* IE9 */
      src: url('iconfont.eot?t=1575623500554#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAV4AAsAAAAADLQAAAUqAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEAAqLFIkvATYCJAMoCxYABCAFhG0HgRsb8ArIDiUF98AAYKBBYDxQc4+9TTbhAjoAkkSg6gFTBAUofFm2Rt/4HBnxl3Kqbk7J1LqEHlER3Q7ZGQfPpQANMM6AOR3BKzRi+tHfHypnnecCMp99C8iP2lyzYwwKhXo+Jo2xrVrRVgu8BLnH8AovVCNv5sME1MZrB63r3HMghIqYIuCKi7XVGgh1GMUIalBq8oALo/AKMmXyuNEl4KX2+eF/WBxCSWQp9qhdFzrpQegL33Qjuv+yY2kHXX523C4jxVwgEu4FOm8ijORchPrzmmgP0ColYl/0puyN8Kbzm27//5OzssRB7CplxUFrqJH83zwQJFJRJlcoVYQcVraUcl1R9aRIQgT6IkRCX4JI6UsRkb4MkdELiJy+M6Kg74oo6bsZVZhUHz4amAfCF5BsR5Rt6nTMlJHvnWvLti3GKugqjqAxhSKLLbOlY8LkzeaFRYRxNBekwDe7RCZdzKAKcfCdO+Ldu8rbtwfdujVeyAfqfPv73Lmjk9BBZj8oD6wg6SfRA5eBLgYvnxtXvRKh2wYmtGfn7Nolu93UTr/Lp9vmkb1z8SmSGL5P6Wog2QOk5jhgiQ4wR0nQCaeoUDcjUIQSHRw0cJj4IqIGvXHFiivmROuBGlbLt9Br1Lo1sUiLXscu2wVJ545ZGYd06I15h8/ln+uVPVoZxec0NKC1jr81zLV791y3G9565vgwasOvu2lb7nQ+dYtffzsPaN9vJW++3ens3aYb7uQj5qoZk5NM+btizq1kGoZ8uj33bhqFjvnOEY/c/PXnO9oC+UWZqe0hNBIafkN5+BETyHxEyFi2GHaK0WrUB6XJnLJuMmGjwLOz/P7Hx46mzdtC3LtHbOE8hS9LaQ2ZU+pV/PkTscxL+VhKaw16VlScMRh2iB3O5L93OlcxAWaVusNs5hk7S6ValbiK3n0W+4ypMMiCDLducdeYJsw1blNOfk4zuAr4934zLPmdle2f+JTlWENjp02oXJT2RfAkqD70SEIJ6n1rA0IAOliVMrb06dMlSyTdpR+Krn9/XNdahNmJs/3+aq3LWbM/fwaN9Y2LTtvOb+Tcjt4h5yM4213jGA/DXZN1YM+gdzCoqNwuD8o55lqTawxH4tnyq9sJI2u3w/n3uVV0tqlr377StoPapVVrMGx3jxsAeMB5Musc1Uh3Ve5QEXVPF6Yblv8bw9ol+gIPAZndTt2PgwjfA+h0lSBDpyAU/X/VmPEEj1k2VsiLrlDZdwDnH8AgkPJmAWDwP5UJ0LhceoImQhD5M0ziCfLFCIH5RxvCVOHLfpfNCdrxV0RpT61pEIiQrgI4pFTAomNPBBwVvxJmquN7aJL4EFfv2rCViaOjxpHnHelJ3uoxYNFBrh5jQaIwDlKlqYRImQuZxlLIlVZCbY4ulzdGsSGEWGG26QiC4fZDYqjfkBruMiFSHkNmrM+QGx4IqB0Io27YmB5qybU2rHFgPa8dx9fqzCZJWBykXtkfV48yaGx2iUYXsc1eG+Gz0jPdmS7YhG15nGIfXZ3tcEi8ZDMb+c7ocdhgMPMWm7kO6xzpNQ6HpTgjQwp6RbrObATSWjaYhgOmx9Map3DW0jEzkdo7kJ6P7w+rNoqBhi2i3w+nCLOxq10+L0u6TAChi9IE6rcu9XajVcvmIHYJL3W1MTPidSZ2zMCTZjxL8H51MB2HdDUp4hbFMsh4ElSZXr7aOLUlp/cA7K51SEIaYshCHopQhirUoVGNQai9A9vHTWiMyrpi2VgOlovlYflYgaMQAAA=') format('woff2'),
      url('iconfont.woff?t=1575623500554') format('woff'),
      url('iconfont.ttf?t=1575623500554') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url('iconfont.svg?t=1575623500554#iconfont') format('svg'); /* iOS 4.1- */
    }
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  </style>
</head>
<body>
    <span class="iconfont" style="font-size:20px;color: red;">&#xe640;</span>

    <span class="iconfont">&#xe639;</span>
</body>
  1. 下载素材 (直接下载多种格式icon)
  • SVG 下载的是 .svg文件格式,矢量图形,放大缩小不会失真, 打开文件,将文件中的svg标签的内容拷贝到html中就可以使用,颜色用fill来指定,大小由height指定
    • 在Firefox、IE9+、Chrome和Safari中,可以直接在HTML嵌入SVG代码。
    • SVG 文件可通过以下标签嵌入 HTML 文档:embed、object 或者 iframe。参考: SVG 在 HTML 页面 (opens new window)
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="16px" height="16.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M176 130.752l-45.248 45.248 22.72 22.528L466.752 512l-336 336 45.248 45.248L512 557.248l313.28 313.472 22.72 22.528 45.248-45.248-22.528-22.72L557.248 512l336-336-45.248-45.248L512 466.752 198.528 153.472z"  /></svg>
  • AI 下载的是 .eps 文件,用AI(Adobe Illustrator CC)可以打开, 一般UI设计用,前端不会直接使用
  • PNG 下载的是.png文件,直接可以用img标签src引入,下载时需要指定大小,非矢量图形,放大缩小会失真、模糊。

# 2019/12/05 周四

# 目录树自动生成

npm 包用来生成文件夹树形结构 https://github.com/derycktse/treer

这个样式不好看,且不支持js引用操作,有时间可以优化下,好的样式:https://vuex.vuejs.org/guide/structure.html

目录树文本生成.png

# 将对象转换为查询字符串

let obj = {a: 1, b: 2}
let queryParams = new URLSearchParams()
Object.entries(obj).forEach(([key, value]) => {
  queryParams.append(key, value)
})
console.log(queryParams.toString())

# 2019/12/04 周三

# failed at the phantomjs-prebuilt@2.1.16 intsall script

使用 npm install —ignore-scripts 忽略package.json中设置的脚本,意思就是避免package.json中的脚本影响包的正常安装。

The --ignore-scripts argument will cause npm to not execute any scripts defined in the package.json. See npm-scripts.
https://docs.npmjs.com/cli/install

# can't find module './build/Release/node_sleep.node'

看了具体报错是sleep包引起了,到node_modules里面对应的目录查看,发现根本就没有build目录

解决方法:之前的版本是5.2.4,修改package.json将版本改为5.1.1,让后删除package-lock.json 再npm install就ok 了

# npm设置下载源

  • 查看当前npm配置项
npm config list # 查看当前npm配置项,包括源(registry)信息
  • 修改源
# 设置源
npm config set registry http://registry.npm.taobao.org

kevindeMacBook-Air:svnclone kevin$ npm config -h
npm config set <key> <value>
npm config get [<key>]
npm config delete <key>
npm config list [--json]
npm config edit
npm set <key> <value>
npm get [<key>]

alias: c

# git clone 大文件仓库超时问题

如果仓库太大,clone超时,可以使用depth参数

git clone --depth=1 git://someserver/somerepo

# depth用于指定克隆深度,为1即表示只克隆最近一次commit.

# 参考:
# https://segmentfault.com/q/1010000007700727

# sessionStorage和localstorage的区别

sessionStorage关闭浏览器后会消失,localstorage不会

// MDN
sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores)
- Stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.
- Data is never transferred to the server.
- Storage limit is larger than a cookie (at most 5MB).

localStorage does the same thing, but persists even when the browser is closed and reopened.
- Stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser cache / Locally Stored Data.
- Storage limit is the maximum amongst the three.

参考: https://www.yuque.com/guoqzuo/js_es6/sp2k81#sessionStorage

# 2019/12/03 周二

# 同一页面多个相同组件 Object.assgin问题

当一个页面引入多个相同的子组件,传入不同的对象值时,不要使用Object.assign,不然可能会出现首次赋值ok,后面的赋值都为 {} 的问题 当前页面有效,但子组件里面值都是{}。直接赋值就可以。

# 2019/12/02 周一

# 响应头: ransfer-encoding: chunked

https://blog.csdn.net/kobejayandy/article/details/45442073

上次更新: 2020/10/29 22:59:19