Minimal and Clean blog theme for Hugo
做正确的事
正确事就是能让自己在行业内成长的事…
Read more ⟶
AccessToken认证
使用 access token 为认证方式操作 gitlab、github 等远程 git 仓库，代替 ssh 公钥和用户名密码。
用途
当我们操作远程 Git 仓库时，需要进行身份认证，一般有三种方式：
1.账号密码
- 每次输入账号密码，或由工具记住并帮忙自动填写
2.
ssh - 将本机的一个公钥设置到
gitlab账户内 3.access token - 在链接中加入
token
认证后进行 pull 或 push 等操作。下面说一下怎么在 gitlab 中使用 access token 进行认证。
使用方法📝
- 点击「头像」，找到 「Setting」，再找到 ..AccessTokens..
- 填写 “name” ，选择
read_repositorywrite_repository - 点按钮「Create」 ，在页面上方 Your New Personal Access Token 处生成了一个一次性的字符串，将它复制保存起来，刷新页面后它就消失，如果搞丢了只能再生成。
- 这是一个使用
access token的一般形势的链接：http://oauth2:[email protected]/user/repo.git，将其中的access-token换成刚刚生成的那个。 - 使用这个上面的链接去
clone项目：git clone http://oauth2:[email protected]/user/repo.git或者替换原来的remote url：git remote origin set-url http://oauth2:[email protected]/user/repo.git - 完成后
pushpullfetch操作都会使用这个链接
可编辑元素
可编辑元素
<!-- vue -->
<p class="content" v-text="item.title" @keydown="onEnter" @dblclick="turnOnEditable" @blur="(e)=>{titleBlur(e, index)}">
{{item.title}}
</p>
// js
methods: {
// 修改标题，回车时失去焦点
onEnter(e) {
if(e.keyCode===13){
e.target.blur();
}
},
// 失去焦点时，保存内容，并将元素修改为不可编辑
titleBlur(e, index){
const title = e.target.innerText;
this.onTitleChange({title:title,index:index});
e.target.setAttribute('contenteditable', false);
},
// 双击元素时，将其变为可编辑状态，并获取焦点。
turnOnEditable(e){
e.target.setAttribute('contenteditable', true)
e.target.focus();
var range = window.getSelection();//创建range
range.selectAllChildren(e.target);//range 选择obj下所有子内容
range.collapseToEnd(); // 光标放到最后
},
}
html部分是基于vue的，不过也很容易用其他方式实现。这里实现的是双击元素后，将其变为可编辑模式，就是设置contenteditable属性，这个属性直接写在标签中也是可以的。 失去焦点时，将contenteditable属性置为false。 回车时，失去焦点，会触发blur事件。其中还有个操作光标的事件，因为可能出现focus后，光标在开始位置的问题。
MDN介绍Content_Editable
…常用DOM操作
上传图片时，怎么拿到图片的src地址？
input选中图片以后，只是得到了file对象，如果想在img中显示该图片的话，并不知道src，所以想得到src还需要额外的操作。
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
JS操作样式class
document.body.classList.add("c");
document.body.classList.toggle("a");
document.body.classList.remove("c");
document.body.classList.contains("c"); // false 因为"c"上面remove掉了
document.body.classList.toString() === document.body.className;
原生获取真是宽高
不知道为什么用#${divID}会报错，只能用div[]选择器了，id=后面要用单引号。
const textElement = document.querySelector(`div[id='${divID}'] .ckeditor`);
const width = textElement.offsetWidth;
const height = textElement.offsetHeight;
promise async/await 获取图片原始尺寸
async funciton getImageInfo(image_res_url: string): Promise<{width: number, height: number}> {
const image = new Image();
image.src = image_res_url;
const promise = new Promise<{width: number, height: number}>((resolve, reject) => {
image.onload = () => {
resolve({width: image.naturalWidth, height: image.naturalHeight});
};
});
return promise;
}
JS复制到剪切板(chrome 66+ 支持)
navigator.clipboard.writeText('888')
.then(() => {
console.log('Async: Copying to clipboard was successful!');
}, (err) => {
console.error('Async: Could not copy text: ', err);
});
处理粘贴事件(paste)
xxxElement.addEventListener("paste", function(e) {
e.preventDefault();
var text = "";
if (e.clipboardData && e.clipboardData.getData) {
text = e.clipboardData.getData("text/plain");
} else if (window.clipboardData && window.clipboardData.getData) {
text = window.clipboardData.getData("Text");
}
document.execCommand("insertHTML", false, text);
});
获取dataset
const index = +e.target.dataset.id;
mouseEvent
click事件实际上也是一个mouseEvent事件。mouseEvent中有一个属性path，它可以看到触发事件的路径，从触发了事件的元素开始，以及他的所有父元素，一直到document然后是window。
熵与代码
熵：宇宙的终极规则–读书笔记📒。如果不施加外力，事物永远向着更混乱的状态发展。…
Read more ⟶
获取滚动高度
获取滚动高度
function getPageScrollY() {
let yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}
return yScroll;
};
也可以window.scrollY
…Git报错
Perission denied
在切换分支时，不能切换，报了这个错。
可能是因为 vuecli 的进程在控制着某个文件。将 vuecli 的命令行关了就可以解决问题了。
…Npm与yarn
设置npm和yarn使用淘宝仓库，设置sass/electron快速下载地址。…
Read more ⟶
应该知道的
- Bad architecture causes more problems than bad code.
- You will spend more time thinking than coding.
- The best programmers are always building things.
- There’s always a better way.
- Code reviews by your peers will make all of you better.
- Fewer features for better code is always the right answer in the end.
- Don’t reinvent the wheel, library code is there to help.
- If it’s not tested, it doesn’t work.
- Code that’s hard to understand is hard to maintain.
- Code that’s hard to maintain is next to useless.
- Always know how your business makes money, that determines who gets paid what.
- If you want to feel important as a software developer, work at a tech company.
- 你将花费更多的时间思考而不是编码。
- 不良的体系结构比不良的代码引起更多的问题。
- 最好的程序员总是在构建东西。
- 总会有更好的方法。
- 同行的代码审查将使所有人变得更好。
- 最终，正确的答案就是更少的功能来获得更好的代码。
- 如果未测试，它将无法正常工作。
- 不要重新发明轮子，库代码可以为您提供帮助。
- 难以理解的代码难以维护。
- 难以维护的代码几乎是无用的。
- 始终知道您的企业是如何赚钱的，这决定了谁能得到酬劳。
- 如果您想以软件开发人员的身份感到重要，请在技术公司工作。
JavaScript
避免高频率调用
function throttle(method, context) {
if (method.tId) clearTimeout(method.tId);
method.tId = setTimeout(function () {
method.call(context);
}, 200);
}
ES6新语法–扩展运算符（三个点）
第二个参数以及之后的任意多个参数都会被放到values数组中
function a(arr, ...values){
console.log(arr,values)
}
a(['a','b'],1,2,3);
// ["a", "b"]
// [1, 2, 3]
合并数组
// ES5 的合并数组
arr1.concat(arr2, arr3);
// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
与解构赋值结合
list = [111,222,333,444]
// ES5
a = list[0], rest = list.slice(1)
//a 111
//b [111,222,333,444]
// ES6
[a, ...rest] = list
//a 111
//b [111,222,333,444]
js正则
制表符tab \t
换行符 \r
汉字 \S
任意 .
小写字母 [a-z]