2019.7.22 - 7.28 中你学到什么？ #3
Comments
mac环境下，命令行杀死特定node服务由于在前端开发的时候，几个项目来回切换，难免会有端口占用的情况，之前的做法都是手动查找，由于比较麻烦，所以自己搞了个命令，一行搞定
上面举例的是杀死 8080 端口，有更好的方式，欢迎讨论 |
很实用，可以做成 npm 命令，然后传参替换端口号 |
|
好像已经有人做了，我试了下，在 windows 环境下第二个库是可以用的，第一个库无效。
|
Windows 下关于端口被占用而又找不到被占用的程序的解决办法之前用 SSR 的时候，有时候开机提示 1080 端口被占用，查看这个端口确实没被占用，遂不了了之。 netsh winsock reset
|
|
Linux下通过命令行替换文本 # 将wxml文件的i标签替换为text
grep '<i ' -rl . --include='*.wxml' --exclude-dir=node_module --exclude-dir=dist | xargs sed -i -e 's/<i /<text /g'
grep '</i>' -rl . --include='*.wxml' --exclude-dir=node_module --exclude-dir=dist | xargs sed -i -e 's/<\/i>/<\/text>/g' |
|
@lengthmin 感谢分享！提出问题、问题的原因以及解决办法是一件很好的事情。 |
|
图片懒加载 <ul>
<li><img src="./img/default.png" data="./img/1.png" alt=""></li>
<li><img src="./img/default.png" data="./img/2.png" alt=""></li>
<li><img src="./img/default.png" data="./img/3.png" alt=""></li>
<li><img src="./img/default.png" data="./img/4.png" alt=""></li>
<li><img src="./img/default.png" data="./img/5.png" alt=""></li>
<li><img src="./img/default.png" data="./img/6.png" alt=""></li>
<li><img src="./img/default.png" data="./img/7.png" alt=""></li>
<li><img src="./img/default.png" data="./img/8.png" alt=""></li>
</ul>
let imgs = document.querySelectorAll('img')
// 窗口可视区高度
let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// img 距离窗口可视区顶部的距离 imgs[i].getBoundingClientRect().top
function lazyLoadImg () {
for (let i = 0; i < imgs.length; i ++) {
if((imgs[i].getBoundingClientRect().top + imgs[i].height)>=0&&imgs[i].getBoundingClientRect().top < clientHeight ){
imgs[i].src = imgs[i].getAttribute('data')
}
}
}
window.addEventListener('scroll', lazyLoadImg); |
|
@erdong0604 可以在js里预先加载图片，防止直接替换src图片在下载过程中闪白一下的问题
|
用gitHooks约束 commit message之前有用过，这周看 vue-cli 源码发现了如下的 verify commit message 逻辑，觉得挺实用的，特别适合对项目有追求的强迫症患者或者多人合作的项目约束风格的统一。 const chalk = require('chalk') // eslint-disable-line
const msgPath = process.env.GIT_PARAMS
const msg = require('fs').readFileSync(msgPath, 'utf-8').trim()
const commitRE = /^(v\d+\.\d+\.\d+(-(alpha|beta|rc.\d+))?)|((revert: )?(feat|fix|docs|style|refactor|perf|test|workflow|ci|chore|types)(\(.+\))?!?: .{1,50})/
if (!commitRE.test(msg)) {
console.log()
console.error(
` ${chalk.bgRed.white(' ERROR ')} ${chalk.red(`invalid commit message format.`)}\n\n` +
chalk.red(` Proper commit message format is required for automated changelog generation. Examples:\n\n`) +
` ${chalk.green(`feat(compiler): add 'comments' option`)}\n` +
` ${chalk.green(`fix(v-model): handle events on blur (close #28)`)}\n\n` +
chalk.red(` See .github/COMMIT_CONVENTION.md for more details.\n`) +
chalk.red(` You can also use ${chalk.cyan(`npm run commit`)} to interactively generate a commit message.\n`)
)
process.exit(1)
}要使上面的逻辑生效，我们还需要安装 yorkie npm install yorkie --save-dev然后在项目的 package.json 中加入以下配置 {
"gitHooks": {
"commit-msg": "node scripts/verifyCommitMessage.js"
},
}到此我们就配置完成了
配置完成后我们要是不按照约定的格式书写commit message，提交就会被挡住，看下图：
|
@princewck good |
2019/7/12份学习
const List1 = len => ''.padEnd(len, ',').split('.')
const List2 = len => [...new Array(len).keys()] |
2019/07/2201 graphql 中多级分页查询时的 N+1 问题
{
users (page: 1, pageSize: 3) {
id
todos (page: 1, pageSize: 3) {
id
name
}
}
}select id from users limit 3
select id, name from todo where user_id = 1 limit 3
select id, name from todo where user_id = 2 limit 3
select id, name from todo where user_id = 3 limit 302 在前端中把 gql 统一管理减小打包体积准确说，已经把 gql 统一管理为 通过 webpack 分析， 03 获取当前 commit hash可以通过 git rev-parse --verify HEAD | cut -c 1-8
2019/07/2301 本地更好的流式日志格式化服务器端的日志很重要，一般设置为 # 实时查看日志，并且只关注 message 字段
tail -f logs/db.log | jq '{message}'此时你不仅有了更好的可视化，而且只需要关注你自己关心的字段就可以了，体验很棒 02
|
我都是全杀 killall node |
@xuhongbo |
|
Javascript隐式类型转换
|
|
赞 |
|
今天刷博客的时候看到一个题 : 异步的 Promise的 then 方法的回调是何时被添加到microtasks queue中的?const pro = new Promise((resolve, reject) => {
const pro1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(3);
}, 0);
});
resolve(4);
pro1.then((args) => {
console.log(args);
});
});
pro.then((args) => {
console.log(args);
});很多人都知道这道题的输出结果是4，3；但是我对题主的这个问题产生了很大的疑问，因为个人并没有着手实现过符合promise A/A+规划的promise，所以每次做这种题都是凭着平时的使用经验，实际上内心虚得很,然后自己查阅了 spec：ECMAScript 2018 Language Specification 根据 spec，如果调用 then 时 promise 是 pending 状态，回调会进入 promise 的 [[PromiseFulfill/RejectReactions]] 列表里；否则会进入 PromiseJobs； |
2019/07/22git更新远程仓库分支列表git remote update origin --prune取消/重置 git ssh 私钥密码// 找到.ssh所在的文件夹，命令行执行
ssh-keygen -f id_rsa -p |
移动端打开指定App或者下载AppnavToDownApp() {
let u = navigator.userAgent
if (/MicroMessenger/gi.test(u)) {
// 如果是微信客户端打开，引导用户在浏览器中打开
alert('请在浏览器中打开')
}
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
// Android
if (this.openApp('en://startapp')) {
this.openApp('en://startapp') // 通过Scheme协议打开指定APP
} else {
//跳转Android下载地址
}
} else if (u.indexOf('iPhone') > -1) {
if (this.openApp('ios--scheme')) {
this.openApp('ios--scheme') // 通过Scheme协议打开指定APP
} else {
// 跳转IOS下载地址
}
}
},
openApp(src) {
// 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
// 否则打开a标签的href链接
let ifr = document.createElement('iframe')
ifr.src = src
ifr.style.display = 'none'
document.body.appendChild(ifr)
window.setTimeout(function() {
// 打开App后移出这个iframe
document.body.removeChild(ifr)
}, 2000)
}欢迎一起讨论，如果有更好的写法欢迎指教 |
|
@lczc 这个前提是 达到腾讯的相应目标（唤起APP能力），才能唤起把。 |
|
浏览器原生拖拽的元素超过300px会自动加上半透明效果 |
这个是取斜杠之前的数字部分，由于linux中的PID带有斜杠，习惯性写了个这个过滤，可以忽略 |
现在vscode这些服务也是node启动的，还有钉钉，真的这样做没有问题吗？？？ |
将svg保存成图片到本地（问题：需要执行两次保存才会得到完整图片，求探讨！）补充：可以随便找个svg代码，放在id为svg-wrap2的div下即可 |
|
@yanghuiqi |
2019年7月23日份学习同步阻塞法实现sleep函数const sleep = delay => {
const start = new Date().getTime();
while (new Date().getTime() < start + delay) {
continue;
};
};
console.log(1);
sleep(3000);
console.log(2); |
20190723利用 a 标签解析 URLfunction parseURL(url) {
var a = document.createElement('a');
a.href = url;
return {
host: a.hostname,
port: a.port,
query: a.search,
params: (function(){
var ret = {},
seg = a.search.replace(/^\?/,'').split('&'),
len = seg.length, i = 0, s;
for (;i<len;i++) {
if (!seg[i]) { continue; }
s = seg[i].split('=');
ret[s[0]] = s[1];
}
return ret;
})(),
hash: a.hash.replace('#','')
};
}
|
|
websocket实战运用中， 在与后台连接中，会发现有两个问题点。第一个在谷歌浏览器下会报错 而在safari浏览器下报错 两个报错原因是相同的，是因为后台返回的Sec-WebSocket-Accept 和 给前端发送的头部Sec-WebSocket-Key算出的结果不一致。这时候可以让后台手动添加这个头部值，这样一来每一次计算的值必定是会正确的。具体为什么有时候后台框架计算有时候正确有时候错误，这个就不得知了。 |
可以使用最新的 API https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API 来做这件事，会更简单而且可控一些 |
20190724解决Vuex状态丢失的问题
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [createPersistedState()]
})
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [createPersistedState({
storage: window.sessionStorage
})]
}) |
简单是简单的了，但是在真实需求下这种方法基本是用不了。 不说如何展示半颗星，即使是星星的样式就不大好把控。 当然还是很感谢分享内容！ |
20190724学习希尔排序希尔排序使用算法中的分治思想，先把需要排序的数组拆分成 n 个小数组，在 n 个小数组中分别进行插入排序，然后将排序好的小数组再组合起来。 插入排序在处理小数据或者基本有序数据时，效率很高。希尔排序将数据拆分成小数据，并分别排序，就能大大提高插入排序的效率，可以说是插入排序的升级版。 function shellSort(array) {
// 定义间隔序列，这里写死了，可以动态定义
const gaps = [5, 3, 1];
for (let index = 0; index < gaps.length; index++) {
const gap = gaps[index];
for (let outer = gap; outer < array.length; outer++) {
// 检查的数字
const temp = array[outer];
for (
let inner = outer - gap;
// 如果比之前的 gap 小，就交换一下，直到交换到第一个 gap 处
inner >= 0 && array[inner] > temp;
inner -= gap
) {
swap(array, inner, inner + gap);
}
}
}
return array;
} |
|
内网环境 如何使用gitKraken |
|
阅读了jQuery源码-延迟函数的解决方案,并且写了学习笔记 https://github.com/Geek-James/Blog |
可以参考下别人的格式，写一下学到的内容。 |
可以参考下别人的格式，写一下学到的内容。 |
|
2019年7月25日份学习vscode内存占用过高解决方法？
|
|
2019.7.25
可以css控制打印的样式 |
|
分享些Flutter的相关吧： 在windows环境编写Flutter的时候可以安装Android Studio/VScode来开发，但都要安装插件来支持Flutter的语法，其中AndroidStudio内置的有android模拟器，提供便捷的测试效果，所以Anrdoid Studio是必装的 至于Dart语法相关知识我还没学透，说不了太多，但聊胜于无，它和JavaScript类似的点有： TS语法： Dart语法也就是所谓的集百家之所长，很多语言的优点特性都引入了进来，光凭借JavaScript的编写思想是无法运用好它的，需要学习其他语言的优势思想与语法糖，这也是极好的。 |
|
20190725 |
|
偶然看到一种之前没有想到过的数组去重方法： var array = [1, 2, 1, 1, '1'];
function unique(array) {
var obj = {};
return array.filter(function(item, index, array){
return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
})
}
|
|
效率怎么样呢 有比较吗
原始邮件
发件人:[email protected]
收件人:KieSun/[email protected]
抄送:Ray [email protected]; [email protected]
发送时间:2019年7月25日(周四) 17:09
主题:Re: [KieSun/today-i-learned] 2019.7.22 - 7.28 中你学到什么？ (#3)
偶然看到一种之前没有想到过的数组去重方法：
var array = [1, 2, 1, 1, '1']; function unique(array) { var obj = {}; return array.filter(function(item, index, array){ return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true) }) }
利用一个空的 Object 对象，我们把数组的值存成 Object 的 key 值，比如 Object[value1] = true，在判断另一个值的时候，如果 Object[value2]存在的话，就说明该值是重复的。因为 1 和 '1' 是不同的，但是这种方法会判断为同一个值，这是因为对象的键值只能是字符串，所以我们可以使用 typeof item + item 拼成字符串作为 key 值来避免这个问题
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
退出微信网页窗口的方法，ios和Android都有的 |
...没有进位有啥用。。 |
20190726学习归并排序归并排序使用算法中的分治思想，将一个大数组拆分成 2 个小数组，直到最后拆分为 1 个元素的数组，最后再将每个小数组按顺序合并成大数组。 将二个有序数组合并也十分简单，只需要从二个数组的第一个数开始比较，谁小就先取谁，取了后就在对应数列中删除这个数。然后再进行比较，如果有数组为空，那直接将另一个数组的数据依次取出即可。 归并排序的效率是比较高的，设数列长为 N，将数列分开成小数列一共要 logN 步，每步都是一个合并有序数列的过程，时间复杂度可以记为 O(N)，故一共为 O(N*logN)。 // 归并排序算法
function mergeSort(array) {
// 避免污染传入的数组
const temp = [...array];
splitArray(temp, 0, array.length - 1);
return temp;
}
// 将大数组拆分成两个小数组
function splitArray(array, start, end) {
if (start < end) {
const mid = Math.floor((start + end) / 2);
splitArray(array, 0, mid);
splitArray(array, mid + 1, end);
mergeArray(array, start, mid, end);
}
}
// 合并两个排序好的数组
function mergeArray(array, start, mid, end) {
var i = start;
var j = mid + 1;
var k = 0;
var temp = [];
while (i <= mid && j <= end) {
if (array[i] <= array[j]) {
temp[k] = array[i];
i++;
} else {
temp[k] = array[j];
j++;
}
k++;
}
while (i <= mid) {
temp[k] = array[i];
i++;
k++;
}
while (j <= end) {
temp[k] = array[j];
j++;
k++;
}
for (let index = 0; index < k; index++) {
array[index + start] = temp[index];
}
}
var array = [4, 3, 1, 9, 6, 2, 7, 8, 5];
console.warn('归并排序', mergeSort(array)); |
不知道啊，有这个API，应该有它的用处吧 |
2019-07-27JS 函数对象参数的陷阱 1. 正文上周在实现某个弹层功能的时候，用到了 export default function contains(root, n) {
let node = n;
while (node) {
if (node === root) {
return true;
}
node = node.parentNode;
}
return false;
}上述代码是 同事疑问的是 首先一开始的理解是 函数参数 毕竟以下的代码我们都很熟悉: function contains(root, n) {
if(n) {
n.a = 3
}
}
const A = {a:1};
const B = {a:2};
contains(A,B)
console.log(B) // {a:3}即当实参为对象时，函数内部是可以改变该对象的值从而影响函数之外的实参。 但是测试另外一段代码，发现和理解的不一样: function contains(root, n) {
if(n) {
n = {a:3}
}
}
const A = {a:1};
const B = {a:2}
contains(A,B)
console.log(B) // {a:2}即 网上也有相关资料,其实可以简单的理解为: 当函数一开始执行时，
而 是不是可以给蚂蚁的团队提个issue建议删除该代码，不过有这句代码也不会有什么bug~ 2. 相关资料 |
2019-07-27
共用时2个小时，视频+思考+敲代码 裴波那契数列// 裴波那契数列指的是这样一个数列：0、1、1、2、3、5、8、13、21、34、……
// value = 前两个数的和 表达式F(n)=F(n-1)+F(n-2)
// 算法1
public static long fib(long n) {
if(n <= 1) return n; // 执行1+1=2次数 n <= 1 一次 return n 一次
return fib(n-1)+fib(n-2); // 0.5*2^n次
}
// 算法2
public static long fib(long n) {
if(n <= 1) return n; // 2
long first = 0; // 1
long second = 1; // 1
for (long i = 0; i < n - 1; i++) { // n
long sum = first + second; // n
first = second; // n
second = sum; // n
}
return second; // 1
}
/*
（1）阵列元素相加为2n+3 = O(n)
（2）矩阵相加为2n^2+2n+1 = O(n^2)
（3）矩阵相乘为2n^3+4n^2+2n+2 = O(n^3)
(4) 执行次数为常数 2 = O(1)
算法2的时间复杂度是O(n)
2+1+1+4n+1 = 4n+5 取最高阶 n O(n)
算法1的时间复杂度是O(2^n)
比如:fib(5)
图1
可以看到fib(5) , 第一行是1个，第二行是2个(fib(4) 和 fib(3)), 第三行是 4个(fib(3),fib(2),fib(2),fib(1)) , 第四行是 6个。第五行 2个。
1 + 2 + 4 + 8
= 2 ^0 + 2 ^ 1 + 2^2 + 2^3
= 2^4 - 1
= 2^(n - 1) - 1
= 0.5 * 2^n
所以时间复杂度是 O(2^n)
链接:https://blog.csdn.net/M316625387/article/details/89467298
*/ （图1）csdn博客 |
大佬每天都记录了学习的内容，真的很棒！ |
要进位的话就用Math.round(), 这个就是用来去除小数部分的，还会隐式把参数转为数字。 |
首先执行下 npm adduser ，输入相应的 Username 、 Password 、 Email。 |
分析思路没啥问题, 不过这么做的真正原因其实是因为一条规则: 不对函数的参数进行赋值, 规则见 eslint |
|
@lllllllqw |
😁推荐个库 callapp-lib |
and others
No description provided.
The text was updated successfully, but these errors were encountered: