听雨夜，入江湖

vscode+vue3+stylelint+stylus配置

vue中使用stylus作为css编译器，先安装依赖：

yarn add stylelint stylelint-plugin-stylus -D

根据stylelint-plugin-stylus的文档进行配置，项目根目录建立stylelint.config.js，内容如下：

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // "stylelint-config-standard",
    'stylelint-plugin-stylus/standard',
  ],
  rules: {
    // override/add rules settings here, such as:
    // "stylus/declaration-colon": "never"
  },
}

然后配置vscode编辑器，先安装扩展：stylelint

然后在vscode setting.json中添加配置：

  "stylelint.snippet": ["css", "less", "postcss", "scss", "stylus"],
  "stylelint.validate": [
    "css",
    "html",
    "javascript",
    "javascriptreact",
    "less",
    "markdown",
    "postcss",
    "sass",
    "scss",
    "source.css.styled",
    "source.markdown.math",
    "styled-css",
    "sugarss",
    "svelte",
    "typescript",
    "typescriptreact",
    "vue",
    "vue-html",
    "vue-postcss",
    "xml",
    "xsl",
    "stylus" // 重要
  ],
  "stylelint.customSyntax": "stylelint-plugin-stylus/custom-syntax" // 重要， 否则会提示 Unknown word CssSyntaxError 未知词 css句法错误

最后要做的是，开启文件保存自动修复，还是vscode setting.json中加入

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true // 这个很重要
  },

完成。

参考：
https://juejin.cn/post/6854573221916868616 【解决了Unknown word CssSyntaxError】
https://www.cnblogs.com/jiaoshou/p/12220999.html 【解决了保存文件自动修复】

继续阅读~ 参与评论~

常用vscode插件

按字母顺序：

Auto Rename Tag
Bookmarks
Duplicate action
ES7 React/Redux/GraphQL/React-Native snippets
ESLint
Git Blame
JavaScript and TypeScript Nightly
Path Autocomplete
Prettier
~~React Template~~
Sass
SCSS IntelliSense
Svg Preview
Todo Tree
TypeScript God
Vim
Volar

VSCode自定义代码片段：

设置 -> user snippets , 添加新片段：

{
	// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"new react FC": {
		"prefix": "react",
		"body": [
			"import React, { FC, useState, useEffect, useCallback, useRef } from 'react';",
			"",
			"const $1: FC = () => {",
			"  return <div></div>;",
			"}",
			"",
			"export default $1;",
		],
		"description": "Log output to console"
	}
}

新建文件中，输入react，会弹出以上片段

继续阅读~ 参与评论~

Adm-zip添加压缩文件中文解决方案

在nodejs下压缩文件，可以使用一个流行的zip压缩模块：Adm-zip。

无论是创建压缩文件，还是解压文件都是非常简单易用。

但是对于中文场景来说，往往出现的问题是文件名称是中文的话，就会出现乱码。

去网上搜索，基本都是解决解压文件出现的中文名称乱码，比如这篇文章所述：https://www.cnblogs.com/wupeng88/p/10635709.html

那么创建压缩文件时出现的中文名称乱码怎么解决呢？

外事不决问Google，在官网issue中能够找到方法：

https://github.com/cthackers/adm-zip/issues/332

在zip.writeZip之前多操作一步就可以了：

 // update file headers 更新文件头
    zip.getEntries().forEach(entry => {
        entry.header.flags |= 0x0800;                                          // Set bit 11 - APP Note 4.4.4 Language encoding flag (EFS)
    });

    // save file (we generate our content again)
    zip.writeZip(fpp.join(__dirname,filepath));

继续阅读~ 参与评论~

博客十年

不知不觉，博客已经十年。

十年之前，初入茅庐。

十年之后，2333~

继续阅读~ 参与评论~

基于vue的h5页面在微信中打开后自动播放video视频

目前，PC端移动端都禁止video自动播放，除非和用户发生了页面交互动作，比如click，touchstart等事件，在事件回调中可以调用播放方法。若加了muted属性，则可以自动播放，但是静音不是我们想要的。

PC端可以使用iframe引入视频文件地址进行自动播放，但缺点是外观不可控。

H5页面暂无有效手段。

微信内置浏览器提供了WeixinJSBridge对象，若是服务器端渲染的页面，可以试试该对象初始化成功后的事件回调中播放视频：

document.addEventListener('WeixinJSBridgeReady', () => video.play(), false);

但若是基于Vue.js等前端渲染的页面，上述方法未必有用，但是经测试，发现另外一个取巧的方法：

if (typeof WeixinJSBridge !== 'undefined') {
     WeixinJSBridge.invoke('getNetworkType',{},function (e){
       // 利用该方法进行自动播放
       video.play()
     });
 }

微信基本是社交传播的主阵地，能解决微信就能解决80%以上的硬需求了。

继续阅读~ 参与评论~

在for循环体内进行条件改变的一个坑

先说一个众所周知的作用域问题，看一下代码：

var a = [];
for (var i = 0; i < 5; i++) {
  a.push(function () {
    console.log(i)
  });
}
a[0]();
a[1]();

以上期望输出0, 1，实际输出则是 5，5。因为i的作用域是window（global）全局。

ES6有个解决办法，把var关键字改为let关键字，即可解决作用域问题。原理可以通过babel转换一下源码探知：

var a = [];
var _loop = function _loop(i) {
  a.push(function () {
    console.log(i);
  });
};
// 源码是let声明，此处经过了babel转换
for (var i = 0; i < 5; i++) {
  _loop(i);
}

通过循环体封装为_loop函数，把i转为一个函数内部变量，不再受循环外变量影响。

而此时也该点题了，本文题目说的是另外一个隐藏的坑。见以下代码：

const a = [];
for (let i = 0; i < 5; ) {
  a.push(function () {
    console.log(i)
  });

  i++; // 条件改变放到循环体内
}
a[0](); 
a[1]();

不同之处也已标明：i++的条件改变位置换到了循环体内执行，这时预期结果也不一样了。
执行预期应该是输出0, 1，实际却输出的是 1, 2。

这是为什么呢？同样通过babel转换源码后探知：

var a = [];

var _loop = function _loop(_i) {
  a.push(function () {
    console.log(_i);
  });
  _i++; // 循环体内的条件改变影响到循环体函数内的局部变量

  i = _i;
};

for (var i = 0; i < 5;) {
  _loop(i);
}

a[0]();
a[1]();

最近也是在写一个比较复杂的业务逻辑时，发现这种写法的问题，好在花费了一些时间总算是搞清楚了。

如果循环体是即时执行是不会有问题的，如果是延迟执行的则会暴露该问题。

继续阅读~ 参与评论~

慎用image crossOrigin属性

使用Image对象预加载图片：

const img = new Image();
img.crossOrigin = 'anonymous';

如果设置了crossOrigin，就要小心了。若在html <img/>标签内没有使用该属性，会造成两次图片请求，达不到预加载的效果。

原理是crossOrigin属性会在http请求头增加Origin头，导致两次请求是不同的（类似请求地址增加随机数去缓存效果）。

但是crossOrigin在处理canvas图片跨域报错时，是有用的。

继续阅读~ 参与评论~

生成数字递增的数组

function increaseNumbers(length, startNumber = 0) {
  return Array.from(new Array(length + startNumber).keys()).slice(startNumber);
}

继续阅读~ 参与评论~

vue的component标签特殊性

今天发现vue实现动态组件的内置标签<component>有点特殊性，当使用自闭方式使用它时（<component />）对同级的兄弟标签，在component前的可以渲染出来，在component后的则不能渲染。

例如：

<div>
<p>aaaa可以渲染出来</p>
<component />
<p>bbbb渲染不出来</p>
</div

在浏览器界面，是看不到bbbb这行的。使用<component></component>这种方式就可以避免这个问题。

继续阅读~ 参与评论~

Vue的几种起手式

有人总结的很好了，不再复制粘贴，给个传送门：Vue2 几种常见开局方式

继续阅读~ 参与评论~