网站页面上会用到各种小图标，前端以前制作页面的时候，会将这些图片一个个切下来，通过标签设置backgroud使用，这样做会导致请求过多，造成性能瓶颈。后来有人就发明了css sprite(雪碧图)，将这些图标合并到一个图片上，然后通过backgroud-position定位使用，好处是显而易见的，请求瞬间就降低了，图片集中起来也方便维护。

随着项目的庞大，图标也越来越多，然后不停的往雪碧图里塞，很多图标长的都差不多，有些仅仅是颜色或者大小不同，这导致了雪碧图越来越庞大变得不好维护，如下图：

有时候如果前端不注意修改了雪碧图的尺寸或者不小心挪动了其它图标的位置，就会导致某些图标显示错位。

阅读全文

昨天我们说一下关于 git 的一些命令，今天说下它的一些高级操作。

1.检查提交之间的差异

每个提交都以数字和符号的字符串形式存在唯一的 ID。
要查看所有提交及其 ID 的列表，我们可以使用 git log：

阅读全文

记录一下git命令的一些用法

基础

Git是一个命令行实用程序的集合，它会跟踪和记录文件中的更改（通常是源代码，但是可以跟踪任何你想要的文件）。
有了它，你可以恢复项目的旧版本，比较，分析，合并更改等操作。
这个过程被称为版本控制。
有许多版本控制系统可以完成这项工作。
你可能听说过其中的一些–SVN，Mercurial，Perforce，CVS，Bitkeeper等等。
Git是分散的，这意味着它不依赖于中央服务器来保留文件的旧版本。
相反，它完全在本地运行，将这些数据作为一个文件夹存储在硬盘上，我们称之为储存仓库。
但是，你也可以在线存储您的仓库的副本，这使得多个人可以轻松协作并使用相同的代码。这就是像GitHub和BitBucket这样的网站所使用的一样。

阅读全文

• accesskey:设置快捷键，提供快速访问元素如aaa在windows下的firefox中按alt + shift + a可激活元素
• class:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素
• contenteditable: 指定元素内容是否可编辑
• contextmenu: 自定义鼠标右键弹出菜单内容
• data-*: 为元素增加自定义属性
• dir: 设置元素文本方向
• draggable: 设置元素是否可拖拽
• dropzone: 设置元素拖放类型： copy, move, link
• hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果
• id: 元素id，文档内唯一
• lang: 元素内容的的语言
• spellcheck: 是否启动拼写和语法检查
• style: 行内css样式
• tabindex: 设置元素可以获得焦点，通过tab可以导航
• title: 元素相关的建议信息
• translate: 元素和子孙节点内容是否需要本地化

1、类型强制转换

1.1 string强制转换为数字

之前我们有说过用+来转化字符串为数字，今天在分享一种，可以用 *1来转化为数字(实际上是调用 .valueOf方法)

然后使用 Number.isNaN来判断是否为 NaN，或者使用 a!==a 来判断是否为 NaN，因为 NaN!==NaN

1
2
3
4
5

'32' * 1            // 32
'ds' * 1            // NaN
null * 1            // 0
undefined * 1    // NaN
1  * { valueOf: ()=>'3' }        // 3

阅读全文

在日常的项目开发中经常出现却容易被忽略的JavaScript小技巧，今天列举几个学习一下。

1、截取数组

如果您想从数组的末尾删除值，有比使用splice()更快的替代方法。

例如，如果你知道原始数组的长度，就可以通过重新定义它的length属性来实现截取。

1
2
3

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]

这是一个特别简洁的解决方案。但是，slice()方法的运行时更快。如果速度是你的主要目标，考虑使用下面的方式。

1
2
3
4

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);

console.log(array); // Result: [0, 1, 2, 3]

阅读全文

函数介绍

向数组末尾添加值

push
说明：向数组的末尾添加一个或多个元素，并返回新的长度 代码：

1
2
3
4
5

let array=[11,22];
let arrayChange=array.push("333");
console.log(arrayChange)
//返回的结果就是数组改变后的长度：3
console.log(arrayChange.length)//undefined

阅读全文

不同标签页间的通讯，本质原理就是去运用一些可以 共享的中间介质，因此比较常用的有以下方法:

通过父页面window.open()和子页面postMessage
异步下，通过 window.open(‘about: blank’) 和 tab.location.href = ‘*’

设置同域下共享的localStorage与监听window.onstorage
重复写入相同的值无法触发
会受到浏览器隐身模式等的限制

设置共享cookie与不断轮询脏检查(setInterval)
借助服务端或者中间层实现

##目前常见的存储方式为以下三种：

• Cookie
• web存储 (locaStorage和seesionStorage)
• IndexedDB

共同点：都是保存在浏览器端、且同源的
区别：

1. typeof

可以判断数据类型，它返回表示数据类型的字符串（返回结果只能包括 number,boolean,string,function,object,undefined）；
可以使用 typeof 判断变量是否存在（如 if(typeof a!=”undefined”){…}）；
Typeof 运算符的问题是无论引用的对象是什么类型 它都返回 object

1
2
3

typeof {}; // object
typeof [1, 2]; // object
typeof /\s/; //object

阅读全文