dev-zuo 笔记

# 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

← 2019年11月技术日常 →