12/29
2016
今天发现了window.URL.createObjectURL这个东西，非常的好用啊。
语法如下：
objectURL = URL.createObjectURL(blob || file);
URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象。
我们可以使用URL.createObjectURL()方法给file对象或blob对象创建一个url来使用它。
blob对象产生的url格式如下：
blob:null/c694da24-ecd6-48ee-9a21-4c2979e6ef84
在处理本地数据时，它是很有用的，比如说上传前预览。
下面代码展示了一个表单，我们想用它上传图片和声音文件。
<form id="form1">
<input type="file" name="img">
<input type="file" name="audio">
</form>
<img src="" id="preview" width="300">
<audio autoplay="autoplay" controls="controls" src=""></audio>
<script>
document.querySelector("#form1 input[name=img]").addEventListener("change",function(){
var img=this.files[0];
var imgUrl=window.URL.createObjectURL(img);
document.querySelector("#preview").src=imgUrl;
})
document.querySelector("#form1 input[name=audio]").addEventListener("change",function(){
var audio=this.files[0];
var audioUrl=window.URL.createObjectURL(audio);
document.querySelector("audio").src=audioUrl;
})
</script>
在页面上有一个空的img元素和audio元素，在用户选择了图片或音乐后，该图片或音乐会直接显示/播放。是不是很方便呢？
你可以在下面直接操作：（第一个按钮传图片，第二个按钮传音乐）
虽然blob对象是个很方便的东西，但需要注意的是，当页面被关闭时，这个页面上生成的blob对象会被浏览器自动释放（清空）（但刷新页面不会清空blob对象），给它创建的url也就失效了。
此外有个URL.revokeObjectURL方法，用于释放blob对象的url。语法如下：
window.URL.revokeObjectURL(objectURL);
更加详细的信息可以参考此处。
使用URL.createObjectURL创建url对象
12/26
2016
12/20
2016
我之前写过一篇《JavaScript表单序列化》的文章，表单序列化可以方便我们使用ajax来提交表单数据，避免网页刷新。我在这篇文章的末尾也附上了示例代码。但是使用表单序列化也有不太方便的地方：
第一，需要额外的代码来做表单序列化；
第二，需要在请求头里规定表单数据的格式。我第一次使用的时候因为不知道加这个就出错了。而且这个格式还有好几种。
第三，有很多用原生js做的表单序列化代码不能通过ajax提交附件。jquery的表单序列化可以，但也有点麻烦。
现在，HTML5的formData将上面的问题全部解决了，进一步简化了使用ajax提交表单的步骤。
当点击提交按钮时，通过 Fetch 发送数据：
const formData = new FormData(document.querySelector("#formID")); //生成formData
fetch(url, {
method: 'post',
body: formData,
})
.then(…)使用HTML5的formData做ajax提交表单
11/29
2016
javaScript本身没有startWith和endWith方法，我们可以通过正则表达式来实现类似的功能。
String.prototype.startWith=function(str){
var reg=new RegExp("^"+str);
return reg.test(this);
}
String.prototype.endWith=function(str){
var reg=new RegExp(str+"$");
return reg.test(this);
}
//示例
var a="aaa.com";
var b="com";
a.endWith(b);
在javascript中实现startWith和endWith
11/27
2016
今天我在看hitomi.la这个网站，发现它会时不时在页面上覆盖一层flash，导致我们无法点击链接。本脚本通过移除这个flash来使页面可以被点击。
左键点击不动，右键弹出了flash的菜单
页面上的flash元素：
代码如下：
!function () {
let clearT=window.setInterval(function(){
if (!!document.querySelector("object")) {
document.querySelector("object").remove();
}
},500);
}()
顺便发现了CL-orz系列本子，全彩好评
去除hitomi.la上的点击限制的脚本
11/19
2016
IE8无疑是个坑爹货，但XP上的IE最高只到IE8。根据百度统计流量研究院的数据，目前IE8在国内仍然占有15%的份额（不过这个图上的数据看得我怀疑人生）。
IE8的兼容性也是一个大坑。最近做一个网站，想要兼容IE8，于是翻出了许多遇到过和没遇到过的坑，略微整理一下。
Read More →
IE8的兼容性问题
11/16
2016
javascript中的document.getElementsByClassName()方法是很实用也很常见的DOM选择器方法，然而IE8及以下版本的IE浏览器并不支持此方法（IE8都支持querySelector()方法了，却不支持getElementsByClassName()方法，实在匪夷所思）。
下面的代码可以在低版本IE浏览器中实现一个document.getElementsByClassName()方法。
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(className, element) {
var children = (element || document).getElementsByTagName('*');
var elements = new Array();
for (var i = 0; i < children.length; i++) {
var child = children[i];
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
};
}
加入这份代码之后，就可以正常使用document.getElementsByClassName()方法了。
（也许遍历所有HTML标签开销比较大←_← 只要求兼容到IE8的话尽情的使用querySelector()方法和querySelectorAll()方法吧)
在低版本IE浏览器上实现getElementsByClassName()方法
11/14
2016
如图，网站排版时做了分享按钮（图片、样式都是已经写好了的），之后需要加上功能，那我们使用百度分享的话应该怎么做呢？
首先可以参考百度的官方说明文档。这个文档也很好理解，只是在“自定义设置”部分容易让人迷糊。
其实像上图这样最简单、最常用的分享方式，不需要去管那么多设置项。以下是最小化的实现代码：
<div class="bdsharebuttonbox" data-tag="share_1">
<a class="tsina" data-cmd="tsina"></a>
<a class="tqq" data-cmd="tqq"></a>
<a class="sqq" data-cmd="sqq"></a>
<a class="renren" data-cmd="renren"></a>
</div>
<script>
// 百度分享按钮设置
window._bd_share_config = {
"share": {} //如果样式已经自己写好了，那么只需要这一句即可
}
//加载百度分享js文件
with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>
html部分，外层容器的class="bdsharebuttonbox"是必须的。如果你页面上只有这一个分享区域，那么可以去掉data-tag="share_1"。
分享按钮必须是a标签，不然功能不会生效。
a标签的class属性不是必须的，可以不加或者设置成不同的。如果设置成百度分享允许的class的话，这个按钮会被自动加上一些样式。
a标签的data-cmd属性是必须的，它表示点击这个按钮后是要分享到哪里去。另外有了data-cmd属性后，这个a标签还会被自动加上title属性，如 title="分享到新浪微博" 。
剩下的是JavaScript部分，分享按钮设置里面只用写一句就行了（当然也可以按需要增加更多的设置）。底下“加载百度分享js文件”无需改动。
做完之后，分享按钮的功能就已经加上了。
ps：如果想知道自己分享的目标的代号是什么（a标签的data-cmd属性部分），可以查看分享媒体和标识对应表。
在网页上添加百度分享功能
11/9
2016
在网页上，当按键被按下时，我们可以使用JavaScript来捕获到这个事件。
在JavaScript里，每个键都会有一个数字代码，我们可以使用JavaScript来查看按键对应的代码是什么。
document.onkeydown=function(event){
var e = event || window.event;
console.log(e.keyCode);
}
JavaScript捕获按键
11/8
2016
这个banner带指示器和左右切换按钮，通屏不通屏皆可使用，有自动播放功能，可以设置是否循环展示。当鼠标放在banner区域时，也可以使用左右方向键来控制banner的切换。兼容IE8及以上浏览器。
Read More →
