webstorm 重置试用时间

webstorm 重置软件破解

webstorm

2021-06-09

记录一些常用的配置

一些常用配置命令软件

setting

2021-06-09

一些vue的面试题

1. 对于MVVM的理解

MVVM 是 Model-View-ViewModel 的缩写
Model: * 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。我们可以把Model称为数据层，因为它仅仅关注数据本身，不关心任何行为
View: 用户操作界面。当ViewModel对Model进行更新的时候，会通过数据绑定更新到View
ViewModel： 业务逻辑层，View需要什么数据，ViewModel要提供这个数据；View有某些操作，ViewModel就要响应这些操作，所以可以说它是Model for View. 总结： MVVM模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用双向绑定技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化。

2. 开发中常用的指令有哪些

v-model 一般用在表达输入，很轻松的实现表单控件和数据的双向绑定
v-html 更新元素的 innerHTML
v-show 与 v-if 条件渲染, 注意二者区别
- 使用了v-if的时候，如果值为false，那么页面将不会有这个html标签生成。 v-show则是不管值为true还是false，html元素都会存在，只是CSS中的display显示或隐藏
v-on:click 可以简写为@click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数
v-for基于源数据多次渲染元素或模板块
v-bind 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
- v-bind:title=”msg”简写：:title=”msg”

3. 详细说下vue的生命周期

vue生命周期总共分为8个阶段: 创建前/后，载入前/后，更新前/后，销毁前/后。

2021-06-09

前端优化之-Preload 、Prefetch

起因

今天在帮同事看一个BUG的时候发现了一个奇怪的写法 <link rel="preload" href="xxx.js" as="script">
之前只知道link标签是用来引入样式文件的，这个写法明显是引入js，什么情况？？
然后google了一下。

官方说明

元素的 rel 属性的属性值preload能够让你在你的HTML页面中元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。
简单概括：预加载资源
我们将使用preload作为rel属性的属性值。这种做法将把元素塞入一个预加载器中，
这个预加载器也将用于其他我们所需要的，各种各样的，任意类型的资源。为了完成基本的配置，
你还需要通过 href和as 属性指定需要被预加载资源的资源路径及其类型。

比如

1 2	<link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script">

使用preload好处

使用 as 来指定将要预加载的内容的类型，将使得浏览器能够：

更精确地优化资源加载优先级。
匹配未来的加载需求，在适当的情况下，重复利用同一资源。
为资源应用正确的内容安全策略。
为资源设置正确的 Accept 请求头。

as属性都有那些

audio: 音频文件。
document: 一个将要被嵌入到<frame>或<iframe>内部的HTML文档。
embed: 一个将要被嵌入到<embed>元素内部的资源。
fetch: 那些将要通过fetch和XHR请求来获取的资源，比如一个ArrayBuffer或JSON文件。
font: 字体文件。
image: 图片文件。
object: 一个将会被嵌入到<embed>元素内的文件。
script: JavaScript文件。
style: 样式表。
track: WebVTT文件。
worker: 一个JavaScript的web worker或shared worker。
video: 视频文件。

<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">

2021-06-09

正则表达式中的特殊字符

RegularExpressions

2021-06-09

Typescript 基本类型

布尔值 boolean

1	let isDone: boolean = false;

数字 number

ts支持 10进制 / 16进制 / 2进制 / 8进制

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

字符串

let name: string = "bob";
name = "smith";
let name2: string = 'Jojo';
name2 = 'jack';
// 模板字符串
let name3: string = `Gene`;
let age: number = 37;
// sentence1和sentence2是一样的
let sentence1: string = `Hello, my name is ${ name }. I'll be ${ age + 1 } years old next month.`;
let sentence2: string = "Hello, my name is " + name + ".\n\n" + "I'll be " + (age + 1) + " years old next month.";

数组 Array

1
2
3

// 定义数组
let list: number[] = [1, 2, 3]; // 数字类型的数据
let list: Array<number> = [1, 2, 3]; // 数字类型的数据

元组 Tuple

官方描述：元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同

let x = [string, number];
x = ['1', 1]; // ok
y = [1, '1']; // error

console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' 没有 'substr'方法

// 当访问一个越界的元素，会使用联合类型（后续会提到）替代：
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
x[6] = true; // Error, 布尔不是(string | number)类型

Any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。
这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。
这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。
那么我们可以使用 any类型来标记这些变量：

let notSure: any = 4;
notSure = "maybe a string instead"; // ok
notSure = false; // ok

// 与 Object类型的不同
let notSure: any = 4;
notSure.ifItExists(); // ok, ifItExists 可能运行的时候存在这个方法

let prettySure: Object = 4;
prettySure.toFixed(); // Error: '对象'类型上不存在属性'toFixed'。

// 当你只知道一部分数据的类型时，any类型也是有用的。
let list: any[] = [1, true, "free"];
list[1] = 100;
console.log(list); // [1, 100, "free"]

Object

object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。

使用object类型，就可以更好的表示像Object.create这样的API。

// declare 关键字:
// 你可以通过 declare 关键字，来告诉 TypeScript，你正在试图表述一个其他地方已经存在的代码
// 一般都是在声明文件里面 定义一些变量 xxx.d.ts   eg: declare let process: any;
declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

枚举 enum

enum类型是对JavaScript标准数据类型的一个补充。使用枚举类型可以为一组数值赋予友好的名字。

enum Color {Red, Green, Blue}    // 这里是大括号{}
let bgColor: Color = Color.Green;

// 默认情况下，从0开始为元素编号。
// 也可以手动的指定成员的数值。 例如，我们将上面的例子改成从 1开始编号：
enum Color {Red = 1, Green, Blue};
let bgColor: Color = Color.Green;

// 或者是全部指定
enum Color {Red = 1, Green = 3, Blue = 5};
let bgColor: string = Color[3];
console.log(bgColor);  // 显示'Green'因为上面代码里它的值是3

// 枚举类型作用 枚举类型提供的一个便利是你可以由枚举的值得到它的名字    value -> name
enum Color {Red = 1, Green, Blue}
let bgColor: string = Color[2];
console.log(bgColor);  // 显示'Green'因为上面代码里它的值是2

Void

某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。
当一个函数没有返回值时，你通常会见到其返回值类型是 void;

function warnUser(): void {
    console.log("This is my warning message");
}
// 声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：
let void1: void = undefined;
let void2: void = null;

Null 和 Undefined

TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。和 void相似，它们的本身的类型用处不是很大。
默认情况下null和undefined是所有类型的子类型。就是说你可以把 null和undefined赋值给number类型的变量。
然而，当你指定了–strictNullChecks标记，null和undefined只能赋值给void和它们各自。这能避免很多常见的问题。
也许在某处你想传入一个 string或null或undefined，你可以使用联合类型string | null | undefined。

Never

never类型表示的是那些永不存在的值的类型。
例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型；
变量也可能是 never类型，当它们被永不为真的类型保护所约束时。

never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。即使 any也不可以赋值给never。

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}
// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

类型断言

有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。
通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。
通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。
类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。
它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。

// 类型断言有两种形式。 其一是“尖括号”语法：
let someValue: any = "this is a string";
// let strLength: number = (<string>someValue).length;
// as语法
let someValue1: any = "this is a string";
let strLength1: number = (someValue1 as string).length;
// 两种形式是等价的。 至于使用哪个大多数情况下是凭个人喜好；
// 然而，当你在TypeScript里使用JSX时，只有 as语法断言是被允许的。

2021-06-09

去重排序

双循环去重

双重for（或while）循环是比较笨拙的方法,它实现的原理很简单：先定义一个包含原始数组第一个元素的数组，然后遍历原始数组，将原始数组中的每个元素与新数组中的每个元素进行比对，如果不重复则添加到新数组中，最后返回新数组；因为它的时间复杂度是O(n^2)，如果数组长度很大，那么将会非常耗费内存

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    let res = [arr[0]]
    for (let i = 1; i < arr.length; i++) {
        let flag = true
        for (let j = 0; j < res.length; j++) {
            if (arr[i] === res[j]) {
                flag = false;
                break
            }
        }
        if (flag) {
            res.push(arr[i])
        }
    }
    return res
}

indexOf方法去重1

数组的indexOf()方法可返回某个指定的元素在数组中首次出现的位置。该方法首先定义一个空数组res，然后调用indexOf方法对原来的数组进行遍历判断，如果元素不在res中，则将其push进res中，最后将res返回即可获得去重的数组

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (res.indexOf(arr[i]) === -1) {
            res.push(arr[i])
        }
    }
    return res
}

indexOf方法去重2

利用indexOf检测元素在数组中第一次出现的位置是否和元素现在的位置相等，如果不等则说明该元素是重复元素

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    return Array.prototype.filter.call(arr, function(item, index){
        return arr.indexOf(item) === index;
    });
}

相邻元素去重

这种方法首先调用了数组的排序方法sort()，然后根据排序后的结果进行遍历及相邻元素比对，如果相等则跳过改元素，直到遍历结束

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    arr = arr.sort()
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            res.push(arr[i])
        }
    }
    return res
}

利用对象属性去重

创建空对象，遍历数组，将数组中的值设为对象的属性，并给该属性赋初始值1，每出现一次，对应的属性值增加1，这样，属性值对应的就是该元素出现的次数了

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    let res = [],
        obj = {}
    for (let i = 0; i < arr.length; i++) {
        if (!obj[arr[i]]) {
            res.push(arr[i])
            obj[arr[i]] = 1
        } else {
            obj[arr[i]]++
        }
    }
    return res
}

set与解构赋值去重

ES6中新增了数据类型set，set的一个最大的特点就是数据不重复。Set函数可以接受一个数组（或类数组对象）作为参数来初始化，利用该特性也能做到给数组去重
1
2
3
4
5
6
7
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
return [...new Set(arr)]
}

Array.from与set去重

Array.from方法可以将Set结构转换为数组结果，而我们知道set结果是不重复的数据集，因此能够达到去重的目的

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    return Array.from(new Set(arr))
}

2021-06-09

mac 关机、重启、定时关机

关机、重启、定时关机

mac

2021-06-09

npm 常用命令

初始化

npm init

查看安装包(每个命令都是，只是展开的方式不一样)

npm list
npm list -g --depth=0
npm ll
npm la
npm ls

安装新包

npm install packageName
npm install -g packageName

更新包

npm update packageName

卸载

npm uninstall packageName
npm uninstall -g packageName

命令

npm run xxx (xxx 代表package.json 里面是scripts字段的命令)

清理缓存

npm cache clean -f

npm源镜像设置

淘宝 npm 地址： http://npm.taobao.org/
百度 npm 地址： http://registry.npm.baidu-int.com/
1. 临时使用
    npm --registry https://registry.npm.taobao.org install xxx
2. 持久使用
    npm config set registry https://registry.npm.taobao.org
配置后可通过下面方式来验证是否成功
npm config get registry

2021-06-09

一些常用的函数

节流函数

当某个函数被非常频繁地触发，但它期间只少数地几次，限制两次执行的时间间隔不能太短，从而实现性能优化，这样的函数称为节流函数，一般用在窗口缩放、滚动监听等。

function throttle(action, wait = 1000) {
    let time = Date.now();
    return function() {
        if ((time + wait - Date.now()) < 0) {
            action();
            time = Date.now();
        }
    }
}

2021-06-09

mac 安装mongodb

通过安装包安装mongodb

mongodb

2021-06-09

Hello World

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

2021-06-09

h5 Android OR Ios 调起键盘

Android / IOS 监听软键盘弹起和收起

// 判断设备类型
let judgeDeviceType = function () {
    let ua = window.navigator.userAgent.toLocaleLowerCase();
    let isIOS = /iphone|ipad|ipod/.test(ua);
    let isAndroid = /android/.test(ua);

    return {
        isIOS: isIOS,
        isAndroid: isAndroid
    }
}()

// 监听输入框的软键盘弹起和收起事件
function listenKeybord($input) {
    if (judgeDeviceType.isIOS) {
        // IOS 键盘弹起：IOS 和 Android 输入框获取焦点键盘弹起
        $input.addEventListener('focus', function () {
            console.log('IOS 键盘弹起啦！');
            // IOS 键盘弹起后操作
        }, false)

        // IOS 键盘收起：IOS 点击输入框以外区域或点击收起按钮，输入框都会失去焦点，键盘会收起，
        $input.addEventListener('blur', () => {
            console.log('IOS 键盘收起啦！');
            // IOS 键盘收起后操作
        })
    }

    // Andriod 键盘收起：Andriod 键盘弹起或收起页面高度会发生变化，以此为依据获知键盘收起
    if (judgeDeviceType.isAndroid) {
        let originHeight = document.documentElement.clientHeight || document.body.clientHeight;

        window.addEventListener('resize', function () {
            let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
            if (originHeight < resizeHeight) {
                console.log('Android 键盘收起啦！');
                // Android 键盘收起后操作
                // 修复小米浏览器下，输入框依旧被输入法遮挡问题
                if (judgeDeviceType.isMiuiBrowser) {
                    document.body.style.marginBottom = '0px';
                }
            }
            else {
                console.log('Android 键盘弹起啦！');
                // Android 键盘弹起后操作
                // 修复小米浏览器下，输入框依旧被输入法遮挡问题
                if (judgeDeviceType.isMiuiBrowser) {
                    document.body.style.marginBottom = '40px';
                }
            }

            originHeight = resizeHeight;
        }, false)
    }
}

let $inputs = document.querySelectorAll('.input');

for (let i = 0; i < $inputs.length; i++) {
    listenKeybord($inputs[i]);
}

弹起软键盘始终让输入框滚动到可视区

// 获取到焦点元素滚动到可视区
function activeElementScrollIntoView(activeElement, delay) {
  let editable = activeElement.getAttribute('contenteditable')

  // 输入框、textarea或富文本获取焦点后没有将该元素滚动到可视区
  if (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || editable === '' || editable) {
    setTimeout(function () {
      activeElement.scrollIntoView();
    }, delay)
  }
}
// ---------
// Android 键盘弹起后操作
activeElementScrollIntoView($input, 1000);

唤起纯数字软键盘

1 2	<p>请输入手机号</p> <input type="tel" novalidate="novalidate" pattern="[0-9]*" class="input">

如果你在用 IOS12 和 V6.7.4+版本的微信浏览器打开表单输入的 demo ，发现键盘收起后，原本被滚动顶起的页面并没有回到底部位置，导致原来键盘弹起的位置“空”了。

console.log('IOS 键盘收起啦！');
// IOS 键盘收起后操作
// 微信浏览器版本6.7.4+IOS12会出现键盘收起后，视图被顶上去了没有下来
let wechatInfo = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
if (!wechatInfo) return;

let wechatVersion = wechatInfo[1];
let version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);

if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {
  setTimeout(function () {
    window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
  })
}

键盘弹起后挡住了输入框

1
2
3

console.log('Android 键盘弹起啦！');
// Android 键盘弹起后操作
activeElementScrollIntoView($input, 1000);

来源：奇舞周刊

2021-06-09

算法相关的JavaScript实现

计算汉明重量

function hammingWeight(n) {
    let num = 0;
    while(n !== 0) {
      n &= (n - 1);
      num++;
    }
    return num;
  }

判断奇偶

1
2
3

funciton isOdd(n) {
    return n & 1 === 1;
  }

二分查找

非递归方法

function binarySearch(nums, target) {
    let low = 0;
    let high = nums.length - 1;

    while(low <= high) {
        let mid = parseInt((low + high) / 2);
        if(nums[mid] === target) {
            return mid;
        }
        if(nums[mid] > target) {
            high = mid - 1;
        }
        if(nums[mid] < target) {
            low = mid + 1;
        }
    }
    return -1;
  }

递归方法

function binarySearch(nums, target) {
    let low = 0;
    let high = nums.length -1;
    const binaryWalker = (nums, low, high, target) => {
        if(low > high) return -1;
        const mid = parseInt((low + high) / 2);
        if(nums[mid] === target) return mid;
        if(nums[mid] > target) return binaryWalker(nums, low, mid - 1, target);
        if(nums[mid] < target) return binaryWalker(nums, low + 1, high, target);
    }
    return binaryWalker(nums, low, high, target);

  }

常见排序

快速排序

function quickSort(arr) {
    if(arr.length <= 1) return arr;

    let left = [];
    let right = [];

    let pivot = arr[0];

    for(let i = 1; i < arr.length; i++) {
        if(arr[i] >= pivot) {
          right.push(arr[i]);
        }
        else {
          left.push(arr[i]);
        }
    }

    return [...quickSort(left), pivot, ...quickSort(right)];
  }

冒泡排序

function bubbleSort(arr) {
    let i = arr.length - 1;
    while(i >= 0) {
        for(let j = 0; j < i; j++) {
          if(arr[j] > arr[j + 1]) {
            [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
          }
        }
        i--;
    }
    return arr;
}

二叉树遍历相关

先序遍历（中->左->右）

递归实现

function preOrderTraverse(root) {
    if(root) {
        console.log(root);
        preOrderTraverse(root.left);
        preOrderTraverse(root.right);
    }
}

非递归实现

function preOrderTraverse(root) {
    let stack = [];

    if(root) {
        stack.push(root);
    }

    while(stack.length) {
        let temp = stack.pop();
        console.log(temp);

        if(temp.right) stack.push(temp.right);

        if(temp.left) stack.pus(temp.left);
    }
}

中序遍历（左->中->右）

递归实现

function midOrderTraverse(root) {
    if(root) {
        midOrderTraverse(root.left);
        console.log(root);
        midOrderTraverse(root.right);
    }
}

非递归实现

function midOrderTraverse(root) {
    let stack = [];
    while(true) {
        while(root) {
          stack.push(root);
          root = root.left;
        }

        if(!stack.length) break;

        let temp = stack.pop();
        console.log(temp);
        root = temp.right;
    }
}

后序遍历（左->右->中）

递归实现

function postOrderTraverse(root) {
    if(root) {
        postOrderTraverse(root.left);
        postOrderTraverse(root.right);
        console.log(root);
    }
}

非递归实现

function postOrderTraverse(root) {
    let stack = [];
    let rest = [];
    if(root)stack.push(root);
    while(stack.length) {
        let temp = stack.pop();
        rest.push(temp);
        if(temp.left) stack.push(temp.left);
        if(temp.right) stack.push(temp.right);
    }
    return rest.reverse();
}

层次遍历

function levelTraverse(root) {
    if(!root) return;
    let stack = [];
    stack.push(root);

    while(stack.length) {
        let temp = stack.shift();
        console.log(temp);
        if(temp.left) stack.push(temp.left);
        if(temp.right) stack.push(temp.right);
    }
}

来源：奇舞周刊

2021-06-09

Git 常用命令

初始化Git仓库

git init

设置本地信息

git config --global user.name "Your Name"
git config --global user.email "email@example.com"

添加到本地git仓库

git add 文件
git commit -m '提交原因'

一次性提交所有改变过的文件

git add -A
git commit -m '提交原因'

推送到远端仓库

git push origin 分支名

版本回退

git reset --hard commit_id

或者

git reset HEAD^

查看提交历史

git log

或者

git log --pretty=oneline

查看状态

git status

关联远程库

git remote add origin git@server-name:path/repo-name.git

第一次推送master分支

git push -u origin master

克隆远端库

git clone git@server-name:path/repo-name.git

从远端库拉取当前分支的修改

git pull

查看分支

git branch

创建分支

git branch 分支名

切换分支

git checkout 分支名

创建+切换分支

git checkout -b 分支名

合并某分支到当前分支

git merge 分支名

删除分支

git branch -D 分支名

删除远程分支

git push origin :分支名

查看分支合并图

git log --graph

查看远程库信息

git remote -v

创建标签

git tag 标签名

可以指定标签信息

git tag -a 标签名 -m "信息"

查看所有标签

git tag

推送一个本地标签到远程

git push origin 标签名

推送全部未推送过的本地标签

git push origin --tags

删除一个本地标签

git tag -d 标签名

删除一个远程标签

git push origin :refs/tags/标签名

设置忽略文件

添加.gitignore文件