关于npm
- 在此之前，孤陋寡闻的我只知道安装node之后就有了npm，殊不知还有源这一回事。
npm切换源操作
可以通过命令查看当前源
npm config get registry
切换npm源命令
npm config set registry 源地址
关于github
-
一直以来用github都是大家一起开发，都往master提交，后来才知道原来大家都是各自分支开发，最后合并到master，也没有配置过SSH，现在才发现都是坑。
初次使用github就要设置这些：
生成密钥对
设置远程仓库上的公钥
步骤如下呀：
通过命令查看是否有SSH key，如果已存在SSH key那么就会显示 id_rsa 和 id_rsa.pub文件。
ls -al ~/.ssh
通过命令可以生成新的SSH key。
将SSH key添加到ssh-agent、
ssh-add ~/.ssh/id_rsa
ssh-agent bash
在gitgub中点击setting->ssh and gpg keys->输入名字和生成的公钥。
此时点击add ssh key就会出现你刚刚添加的ssh(添加的时候才发现五月份的时候我居然弄个？？？)。
关于js
-
有一个小功能，当点击群聊时显示群设置，点击个人时隐藏群设置并且让下面的标记为已读显示上去，我一直都告诉自己用display:none来做，当然因为获取不到标签没做出来…原来通过splice就ok？？？
splice:如果要插入的指定元素数与要删除的元素数length不同，则在调用结束时数组的元素将有所不同。（改变原数组）
【前端知识汇总】近期知识点小结
arrayObject.splice(index,howmany,item1,.....,itemX)
index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX 可选。向数组添加的新项目。
- 获取鼠标选中文字
document.selection.createRange().text; IE9以下使用
window.getSelection().toString(); 其他浏览器使用
- js判断电脑是win还是mac的方法
//判断系统类型
function OSnow(){
var agent = navigator.userAgent.toLowerCase();
var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
if (agent.indexOf("win32") >= 0 || agent.indexOf("wow32") >= 0) {
alert("这是windows32位系统");
}
if (agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0) {
alert("这是windows64位系统");
}
if(isMac){
alert("这是mac系统");
}
}
OSnow();
- js中鼠标hover会有bug，可以通过jquery的stop()方法解决。只需要在动画前面加一个stop()。
第一个参数：是否清空当前动画队列。
第二个参数：是否立即完成当前动画。
stop(false，false)等价方式stop()表示立即进入下一个动画，立即停止当前动画。
stop(false，true)表示立即进入下一个动画，立即停止并完成当前动画。
stop(true，true)表示清空当前动画队列，立即停止并完成当前动画。
stop(true，false)等价方式stop(true)表示清空当前动画队列，立即停止当前动画。
关于CSS
- css中宽高等不建议用有小数点的和奇数。
- css中的font-family: PingFangSC-Medium;字体没有双引号。
-
关于布局
以前光背过水平垂直居中的n种方法，从来都没真正记住过。
flex布局的这个讲解真的是棒：Flex 布局教程：实例篇(阮一峰)
边看就可以边上手了。
写页面中用到了水平居中的方法：
行内元素看它的父元素是不是块级元素，如果是，直接给父元素设置
text-align:center;
如果不是，则先将其父元素设置为块级元素
display:block;
再给父元素设置
text-align:center;
水平垂直居中的方法：
使用flex布局
.box {
display: flex;
justify-content: center;
align-items: center;
}
使用table-cell的方式
.box{
display: table;
}
.box span{
display: table-cell;
vertical-align: middle;
text-align: center;
}
-
给li设置下划线时只有最后一个有效果。
通过::after可以给li设置下划线，并且可以设置成自己需要的样式，但是并不是每一个li下面都会出现横线，查完资料才知道要给li标签设置 position:relative，
.tribute-container li::after{
content: '';
position: absolute;
bottom: 0;
left: 9px;
width: 100%;
height: 1px;
background: #F2F4F5;
}
.tribute-container li {
position: relative;
}
- 对于background-image的使用
background-image: url("");
background-repeat: no-repeat;
background-size: contain;
background-position: left 0;
利用background-image设置多张图片为背景
background:url("img1.jpg") 0 0 no-repeat,
url("img2.jpg") 200px 0 no-repeat,
url("img3.jpg") 400px 201px no-repeat;
其中background-position可以为:left，top，bottom，right;
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。
如果指定了两个值，第二个值将用于纵坐标。