jesuistong / sometest Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 30.6 MB

lab from TongZ, there are just some experimental tests

HTML 0.36% JavaScript 99.56% Shell 0.08%

sometest's People

Contributors

Stargazers

Watchers

sometest's Issues

面试题

写一个链式调用的类，有 sleep方法，支持异步链式调用

class Demo {
    constructor() {
        this.stack = [];
        this.executing = false;
    }
    async exec() {
        if (this.executing) return;
        this.executing = true;
        for (const fn of this.stack) {
            await fn();
        }
        this.stack = [];
        this.executing = false;
    }
    say(str) {
        this.stack.push(() => new Promise(resolve => {
            console.log(str);
            resolve();
        }));
        this.exec();
        return this;
    }
    sleep(timeout) {
        this.stack.push(() => new Promise((resolve) => {
            setTimeout(() => {
               resolve(); 
            }, timeout);
        }))
        this.exec();
        return this;
    }
}

var d = new Demo();
d.say('1').sleep(1000).sleep(500).say('2').sleep(2000).say('3');
d.say('4').sleep(3000).say('5').sleep(4000).say('6');
d.say('7').sleep(5000).say('8').sleep(6000).say('9');

起因

单页应用通常使用一个入口页面，eg：index.html, 然后通过入口页面的js去控制路由, 加载想要的js,
一旦刷新页面，或者从入口页外部进行跳转服务器将会抛出404给用户，为了不抛404，我们可以使用connect-history-api-fallback这个npm包在我们服务端做请求处理

用法

npm install --save connect-history-api-fallback

import

var history = require('connect-history-api-fallback');
var connect = require('connect');
var app = connect().use(history()).listen(port);

options

待补全

简单手写一个unicode码点排序函数

// 简单手写一个unicode码点排序函数
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

function unicodeSort(a, b) {
    let aa = a.toString()
    let bb = b.toString()
    
    let index = 0;
    do {
        let charA = aa.charCodeAt(index)
        let charB = bb.charCodeAt(index)
        if (charA === charB) {
            index++
            continue
        } else if (Number.isNaN(charA) && Number.isNaN(charB)) {
            return 0
        } else if (Number.isNaN(charA)) {
            return -1
        } else if (Number.isNaN(charB)) {
            return 1
        } else {
            return charA - charB
        }
    } while(true)
}

闲聊

毕竟去vultr买了个vpn，感觉只当梯子使用就太浪费了，正好乘着这个时间看到同时在公网上的个人工具网页，那么就想，虽然买不起域名服务器，那么在自己vpn上搭一个node.js的网站应该也是可以的把？试试看！
ps：本人使用的是CentOs6的vps所以一下内容以CentOs6为基准。

流程

下载node.js:

curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -

安装node.js:

sudo yum -y install nodejs.
# yum 是用来管理rpm包的软件包管理器。。我就知道这么多

如果要安装npm你应该需要以下命令：

sudo yum install gcc-c++ make
# 或者: sudo yum groupinstall 'Development Tools'

欧剋！大功告成！运行你的node和npm然后可以为所欲为了

应该是低级的图片防盗链和反防盗链（0v0）

P站服务器是有防盗链功能的，你在本地浏览器直接键入图片链接只会得到403，那是怎么做的呢？网上搜索了一会儿得出的结论是根据请求头中的referer参数来判断来源是否正确，所以！我们只要能改的了请求头中的referer就可以随心所欲的在浏览器中打开p站上的美图啦！|v0！

实现的时候遇到的困难：

w3对于referer的解释
从这篇文章里我们可以看到

readonly attribute DOMString       referrer;

哈哈哈哈只读属性你怕不怕，所以你在页面上是改变不了携带的referer的。

那只有改变浏览器默认行为了咯：

感觉浏览器默认行为有些时候还是比较恶心的，比如这个时候！
以前带cookie就带cookie，带referer就带呗。但是现在不行了，我得绕过你的防盗链只能伪装的和你一摸一样才行，所以哦。找到了谷歌的拓展程序：Referer Control，这个玩意儿可以控制你的referer并且正则匹配你想匹配的路由，进去一看。。。
其实就是chrome暴露给你的webRequest方法已经就可以比较完美的解决这个问题了。。。那么为什么不自己手撸一个呢？
于是就开始自己的撸extension的过程：

一些必要的条件

// manifest.json
permission: [
  'background', // 脚本在chrome后台运行的必要条件
  'webRequest', // 使得拓展程序可以使用chrome webRequest API
  '*://url/'  // 你想进行过滤操作的链接的正则
]
// background.js 这是你想要进行的过滤操作
chrome.webRequest.onBeforeSendHeaders.addListener(func, {url: '<XXX>'}, [...options]);

这样子就ok啦，直接请求图片也可以显示了哦，不过图都是画师们的辛苦的成果，有机会还是亲自去p站上点个赞吧!

待完善
完成一个自定义控制referer的拓展程序

stick to React or do as fast and easy as possible

Recently, when i'm adding some animation to React.Component, felt suck to write React.animation. Because it always adds other npm packages if you want to controll it by React, but somehow it's just wasting your time to manage this. For those animation that is pretty simple and no-adds, Obviously we can just use jQuery to resolve it. Here is a demo for FadeComponent:

React

import { CSSTransition } from 'react-transition-group';
function FadeComponent() {
    return (
       <CSSTransition
           classNames="fade"
           timeout={300}
           appear
           in
       >
           <div>some shitty code</div>
       </CSSTransition>
}
/* for css
.fade-appear {
    opacity: 0;
}
.fade-appear.fade-appear-active {
    opacity: 1;
    transition: opacity 300ms linear;
}
*/

jQuery

// <div class="demo"></div>
document.querySeletor('#demo').style.opacity = 1 ? 0 : '100%';

It's obviously.

ReactInstance, ReactElement的思考

应该是一个比较基础的问题，但是到现在才想到去弄清楚实在是惭愧。。

有很多新同学在使用React的时候会混用React实例和React元素导致控制台报错。
先来几个栗子：

const demo1 = <div/>;
const Demo2 = () => (<div/>);
const demo3 = React.createElement('div');

一个个说：
demo1就是demo3的jsx写法，变量是一个React实例。
Demo2是ReactComponent等价于

() => (React.createElement('div')) == () => (<div/>)

因此在使用的时候用法也是不一样的

<div>
  {demo1}
  {demo3}
  <Demo2 />
</div>
// 此dom等价与
<div>
  {React.createElement('div')}
  {React.createElement('div')}
  {React.createElement(Demo2)}
</div>

那么，在JSX中的节点标签到底做了什么事情呢？
其实就是像上面写的一样，解析dom树，然后把用React.createElement方法包起来，
React.createElement方法接受一个字符串或者是一个ReactComponent，而ReactComponent就是一个函数，无论你是SFC还是ComponentClass。先告一段落，去看看React.createElement干了啥。。。

周结【从19年年末开始】

12.24

css绝对定位在ios9、10上如果不指定2个方向的定位，会导致定位偏移
ios 中 css 的 transparent 默认是 rgba(0,0,0,0) 啥意思呢？代表着如果你使用linear-gradient 去实现渐变的时候会是以下表现

// 由红到黑到透明
background-image: linear-gradient(0deg, red 0%, transparent 100%);
// 由红到透明
background-image: linear-gradient(0deg, red 0%,rgba(255,0,0,0) 100%);

Vscode + Eslint + Prettier 代码格式化

为了构建项目时的代码规范，我们通常都会使用Eslint来规范代码，但是一些情况下我们修改了某些eslint规则或者是修改老代码时经常会遇到不符合规范的代码，这时使用eslint autofix的效果又不尽如人意。所以这里我使用Vscode中的Extention中的Prettier来格式化代码

前提满足以下几点：

默认使用vsCode
使用eslint
安装了Prettier插件

组合Prettier和Eslint：
用cmd + shift + P 打开workspace settings，
找到javascript.format.enable字段把值改成false，
找到prettier.eslintIntegration字段改成true，
reload vscode然后就可以使用format the document来格式化js了

Bash&Shell

移动：

　　Ctrl + A: 移动到当前编辑的命令行首,

　　Ctrl + E: 移动到当前编辑的命令行尾，

　　Ctrl + F 或 ->：按字符右移（往命令行尾部方向，前移）

　　Ctrl + B 或 <-：按字符左移（往命令行尾部方向，后移）

　　Alt + F: 按单词右移 (往命令行尾部方向，前移）

　　Alt + B: 按单词左移（往命令行首部方向，后移）

编辑：

　　Ctrl + C: 删除整行

　　Ctrl + L: 清屏，相当于clear

　　Ctrl + U: 简介光标位置到行首的内容（包括自身），以后可用Ctrl+Y粘贴

　　Ctrl + K: 剪切光标位置到行尾的内容（包括自身），以后可以用Ctrl + Y粘贴

　　Ctrl + W: 剪切从光标位置到当前单词的起始位置，以后可以用Ctrl + Y粘贴

　　Alt + D: 剪切从光标位置到当前单词末尾位置，以后可以用Ctrl + Y粘贴

　　Ctrl + Y: 粘贴到光标后

历史命令相关：
　　

!!：执行上一条命令，所以快速sudo的方法是sudo !!
!blah：执行最近的以 blah 开头的命令，如 !ls
!blah:p：仅打印输出，而不执行
!$：上一条命令的最后一个参数，与 Alt + . 相同
!$:p：打印输出 !$ 的内容
!*：上一条命令的所有参数
!:p：打印输出 ! 的内容
^blah：删除上一条命令中的 blah
^blah^foo：将上一条命令中的 blah 替换为 foo
^blah^foo^：将上一条命令中所有的 blah 都替换为 foo

特殊变量列表

变量	含义
$0	当前脚本的文件名
$n	传递给脚本或函数的参数。n 是一个数字，表示第几个参数。例如，第一个参数是$1，第二个参数是$2。
$#	传递给脚本或函数的参数个数。
$*	传递给脚本或函数的所有参数。
$@	传递给脚本或函数的所有参数。被双引号(" ")包含时，与 $* 在输出的形式上稍有不同。
$?	上个命令的退出状态，或函数的返回值。
$$	当前Shell进程ID。对于 Shell 脚本，就是这些脚本所在的进程ID。

web元素各种高度的归纳

DOM.scrollHeight: 一个容器的总高度，不包括margin, border
DOM.scrollTop: 一个容器垂直滚动高度
DOM.clientHeight: 容器可见区域的高度，不包括margin, border
DOM.clientTop: 容器顶部边框高度（�请使用getBountRect去获取）
DOM.offsetHeight: 容器高度(int型)
DOM.offsetTop: 容器距于父元素的顶部的高度
window.scrollY | pageYOffset: 页面垂直滚动高度
window.innerHeight === window.screen.availHeight: 视窗高度

。。。to be continued

Windows Powershell 如何修改组策略

Windows Powershell的执行权限策略如下：
1、运行gpedit.msc，打开组策略编辑器；
2、找到计算机配置 - 管理模板 - Windows组件 - Windows Powershell；
3、在右侧找到启用脚本执行，将策略设置为“已启用”，选择对应的执行策略，确定；
4、重启计算机。
注意：组策略的使用需要非家庭版的Windows，Windows的家庭版没有组策略设置。

稍微微研究了一下网易云的请求加密方法

记录一下彩笔的研究过程

发现网易云音乐的发送请求在chromedevTool中只能看到params和encSecKey，显而易见是防爬然后加密的，那为什么不用https加密传输层而非要加密呢？ https也应该能防出一片没有证书的爬虫了吧？
发现发送请求的js在core.js中于是复制美化了一份到本地看看，查找encSecKey不一会儿就找到了formData的赋值对象，然后就发现了挂在window下的asrsea。这个函数就是加密函数
观察参数发现后三个参数都是定量。把定量通过暴露函数的方式输出出来是

 1) 010001 
 2) 00e0b509f6259df8642dbc35662901477df22677ec152b5ff68ace615bb7b725152b3ab17a876aea8a5aa76d2e417629ec4ee341f56135fccf695280104e0312ecbda92557c93870114af6c9d05c4f7f0c3685b7a46bee255932575cce10b424d813cfe4875d3e82047b97ddef52741d546b8e289dc6935b3ece0462db0a22b8e7
 3) 0CoJUm6Qyw8W8jud

看了下找第一个对象有啥，基本上从接口地址地方查找，然后把data和query全部拿到放一个对象里然后加上cookie里的csrf_token就ok了。
接下来是不是应该模拟发送请求了吗？

从零开始写一个eslint-plugin

ESlint plugin

creat a repository

quick start

use generator-eslint

for a plugin
yarn add -D generator-eslint && npx yo eslint:plugin
for a rule
npx yo eslint:plugin

Rule

ESlint.Rule.RuleModule
rule is a static ast parse script to analysis your code

Plugin

手机原生键盘弹出导致页面元素被遮住或者浮动的问题

也是个老生常谈的问题了，最近在做一个地址选择弹层的时候遇到的。

具体场景：
任何在页面底部的可以呼出原生键盘的控件（其实就是input），原生键盘会导致控件被键盘遮住，或者弹起键盘时样式出现错误的情况。ios端可能还有更加恶心的动画效果会导致键盘动画和页面元素显得非常不正常
业务需求：
尽量不要遮住你正在输入的控件
解决实现：
网上找了下有好多种实现，不过基本都是基于呼出键盘触发resize和输入的focus行为，监听到行为之后去判断dom元素是否被键盘遮住，如果被遮住触发scrollIntoView函数使得dom元素起码可以在view层看到。

   Array.from($('input')).forEach(i => {
        i.addEventListener('focus', () => { window.fuck = i })
   })
    window.onresize = () => {
       if (window.fuck && window.fuck.getBoundingClientRect().bottom > window.innerHeight) {
            window.fuck.scrollIntoView(false);
            window.fuck = null;
        }
    }

嘛～大概就是这个意思了。(:з」∠)

不影响到现有业务功能（不属于此次修改范围内的）
新增功能正常，不与老功能冲突（废话）
易增删改，便于阅读（吹逼资本）
这里防止踩坑，写一点小经验来记录一下心路历程。

刚开始思路是，为了达到可拆卸的目的，想把所有内容封装成一个个的函数，就像模块一样。

比如现有一个按钮，要根据不同的情况渲染不同的样式

// 原按钮
function Button {
  const onClick = () => { console.log('click'); };
  return <div onClick={onClick}>
    按钮
  </div>
}

EG: 假设在xx条件下需要展示yy样式

1）直接在Button中增加判断逻辑

function Button {
  const onClick = () => { console.log('click'); };
  return <div className={!!xx && 'yy'} onClick={onClick}>
    按钮
  </div>
}
这样写起来是最爽的，思路很清楚，开发行云流水。但是维护起来很痛苦

2）分写成两种

function Button2 {
  const onClick = () => { console.log('click'); };
  return <div className="yy" onClick={onClick}>
    按钮
  </div>
}
xx ? Button2 : Button

这样的确是解耦了，但是需要复制大量重复代码，并且代码维护的时候虽然有明显的变量区分，但判断条件完全被强耦合的形式加入了老代码，并不推荐
3）包装函数的形式去修改

const WrapedButton = () => {
  if (xx) {
    return <div className="yy">
      <Button />
    </div>
  }
  return <Button />;
}

个人觉得处理老业务时比较好的会方式，不会污染老代码，并且新功能完全独立，以后改动一看便知

to be continued;

Microtask Queue Macrotask Queue

https://www.jianshu.com/p/3ed992529cfc