标签 js 下的文章

Image()函数将会创建一个新的HTMLImageElement实例。它的功能等价于 document.createElement('img')

正常情况下，我们使用下面方法加载图片，是能能够获取到onload事件的：

const img = new Image();
img.src = 'picture.jpg';
img.onload = () => {
  console.log('success');
}

但是如果你需要加载的图片是base64图片时，可能是因为没有请求发出，onload事件是无法执行的。

几经尝试，最终考虑将base64图片转位ObjectUrl再加载，好处是无需后端，纯前端即可兼容。移动端兼容性也非常不错。

具体实现如下：

// base64转Blob
const base64ToBlob = (base64Data) => {
  const arr = base64Data.split(','),
    type = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    len = bstr.length,
    u8Arr = new Uint8Array(l);

  while (len--) u8Arr[l] = bstr.charCodeAt(len);

  return new Blob([u8Arr], { type });
}

const base64 = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
const imgBlob = base64ToBlob(base64)

const img = new Image();
img.src = window.URL.createObjectURL(imgBlob); // blob:http://xxx
img.onload = function () {
  console.log('success')
}

URL.createObjectURL 可能有一些兼容性问题，如果你在使用过程遇到，可以hack兼容一下

function getObjectURL(blob) {
  var url = null;
  if (window.createObjectURL != undefined) {
    url = window.createObjectURL(blob);
  } else if (window.URL != undefined) {
    url = window.URL.createObjectURL(blob);
  } else if (window.webkitURL != undefined) {
    url = window.webkitURL.createObjectURL(blob);
  }
  return url;
}

本文参考资料：

Image() - Web API 接口参考 | MDN (mozilla.org)
使用img.onload事件加载base64图片的兼容问题 - 简书 (jianshu.com)
vue 上传图片，转base64取不到.onload的值 - 小蘑菇123 - 博客园 (cnblogs.com)

JS设置cookie:

假设在A页面中要保存变量username的值("Tokin")到cookie中,key值为name，则相应的JS代码为： document.cookie="name="+username; JS读取cookie:

假设cookie中存储的内容为：name=Tokin;xxx=xxx;...

则在B页面中获取变量username的值的JS代码如下： var username=document.cookie.split(";")[0].split("=")[1]; 最后，username就可以取出来了。

既然知道了基本的cookie读写操作，那我们可以把这个操作封装成一系列函数，方便之后的频繁调用。

函数如下

//写cookies
function setCookie(name,value)
{
   var Days = 30;
   var exp = new Date();
   exp.setTime(exp.getTime() + Days*24*60*60*1000);
   document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
   var strsec = getsec(time);
   var exp = new Date();
   exp.setTime(exp.getTime() + strsec*1);
   document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//读cookies
function getCookie(name)
{
   var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
   if(arr=document.cookie.match(reg)) return (arr[2]);
   else return null;
}


//删cookies
function delCookie(name)
{
   var exp = new Date();
   exp.setTime(exp.getTime() - 1);
   var cval=getCookie(name);
   if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

使用示例

setCookie("name","Tokin"); //写cookie
console.log(getCookie("name")); //读cookie
delCookie("name"); //删cookie
console.log(getCookie("name")); //再次读应该是读不到的

拓展功能

如果需要设定自定义过期时间，那么把上面的setCookie　函数换成下面两个函数就ok 
//写cookie
function setCookie(name,value,time)
{
   var strsec = getsec(time);
   var exp = new Date();
   exp.setTime(exp.getTime() + strsec*1);
   document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//设置时间
function getsec(str)
{
  alert(str);
  var str1=str.substring(1,str.length)1;//获取字母后的数字（这一步也可以过滤字母就获取到数字了）
  var str2=str.substring(0,1);//获取字符串字一个字母
  if (str2=="s") return str11000;
  else if (str2=="h") return str160601000;
  else if (str2=="d") return str1246060*1000;
}
//这是有设定过期时间的使用示例：
//s30是代表30秒
//h是指小时，如12小时则是：h12
//d是天数，30天则：d30


setCookie("name","Tokin","h12"); //写入操作，可以设定过期时间了（12小时）
基本的代码就像上面，发挥自己的想象力吧

这种简单的小功能思路很清晰，就是检测滚动条是不是在顶部，不是的话就显示返回顶部按钮，是的话就把它隐藏。

滚动条监测在新版的主流浏览器中是这样实现的：

document.body.scrollTop

如果想要兼容IE，那么可以加入下面这句完成：

document.documentElement.scrollTop

上面就是最主要的代码了，但是想要实现实时的监测滚动条的位置，我们还需要一个window.onscroll才能完成，这样不断下拉会不断刷新滚动条的位置。

说道这里，你大概已经可以试着写出返回顶部这个功能了。

贴出我的代码吧：

HETM

<a class="back2top" style="display:none;"></a>

CSS

.back2top {z-index:99;background:#000;width:36px;height:36px;display:block;position:fixed;right:20px;bottom:20px;cursor:pointer;border-radius:2px;opacity:.6;}
.back2top:before {content:"";position:absolute;right:8px;top:10px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:15px solid #fff;}

JavaScript

window.onscroll=function(){
    var goTop = document.getElementsByClassName("back2top");
    if(goTop.length>0){
        goTop[0].style.display = document.documentElement.scrollTop >= 200 || document.body.scrollTop >= 200 ? 'block':'none';
        goTop[0].onclick=function(){
            document.body.scrollTop=0;
            document.documentElement.scrollTop=0;
        }
    }
}

getElementsByClassName可能不兼容IE8，如果想向下兼容，可以尝试用getElementById就可以了。

什么是Zepto

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jQuery有着类似的Api。

如果你会用jQuery，那么你一定也会用Zepto。

为什么要用Zepto

使用jQuery最简单的原因大概就是它拥有强大的选择器、出色的DOM操作封装、兼容性，或许你还有其它的原因，但是使用原因最多的无非就上面三种吧，可是jQuery封装的功能实在太多了，导致即使min也拥有不可忽视的体积，而平时最常用到反反复复就那几个，确实可以考虑换一个迁移成本低（最好是不用改货尽可能少改现有代码那就再好不过了）的库了。

Zepto恰好满足这一点，默认支持绝大部分jQuery的Api，含Ajax，也就是说，如果你从jQuery迁移到Zepto，你的代码依然可用，而Zepto的大小也足够令人心动，min版25k，如果gzip压缩后后仅不到10k。

Zepto有哪些拓展

Zepto默认集成了zepto、event、ajax、form、ie五个模块，几乎可以满足常见的应用场景，同时还提供了其它的拓展以满足不同的需求，比如touch对触摸事件的支持，比如tap事件、data提供对.data()方法的完整支持，像jQuery一样用内存对象存储等等，更多的拓展可以去官网或者GitHub上翻阅。

使用中可能会遇到哪些问题

1、兼容性，谈到这，很严肃的告诉你，Zepto仅支持现代浏览器，向下支持IE10，如果想要兼容低版本IE，可以考虑下面为低版本IE引用jQuery，代码如下：

<!--[if lt IE 10]>
    <script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<![endif]-->

2、没有像jQuery那样丰富的动画效果，fade类函数替换成简单的show()基本可以解决，或者去官网添加fx_methods拓展，怎么用请自行研究吧。

3、CSS选择器的支持没有jQuery多，:text :checkbox :first类似的选择器基本可以说拜拜了，不过也有限的支持几个，用到的时候自行搜索。

4、除了体积小，并没有比jQuery好哪里去，如果用了一段时间觉得不好，随时退回jQuery吧

可供参考的链接

http://www.css88.com/doc/zeptojs_api/

http://chaoskeh.com/blog/some-experience-of-using-zepto.html

http://www.imooc.com/note/229?sort=last

jQuery的Dom操作十分简单，在开发iDevs主题的时候，其中“菜单”和“搜索”部分使用到了一些很基本的Dom操作，图方便，我使用了jQuery，闲来无事，尝试着使用原生的js完成这一操作，发现其代码量一样，且原生js效率更高，啰嗦多了，先贴代码。

HTML结构如下：

<input type="button" id="Test" class="menu_click" value="按钮" />

jQuery的Dom实例：

jQuery_btn_click("Test", "menu_click", "menu_close", true);
function jQuery_btn_click(btn, on, off, flag) {
    $('#' + menu).click(function () {
        $('#' + menu).prop('class', (flag = !flag) ? on : off);
    });
}

为了方便，我封装了函数并传了几个有趣的参数，代码量很少，具体传的什么一看便知。

原生Javascript实例：

cover_click("Test", "menu_click", "menu_close", true);
function cover_click(btn, on, off, flag) {
    (btn = document.getElementById(btn)).onclick = function () {
        btn.setAttribute("class", (flag = !flag) ? on : off);
    }
}

就是这样子，原生的方法操作起来与jQuery的代码量几乎一致。

兼容性

兼容性方面，jQuery视版本而定，2.0版本之后已经不再支持IE8-，原生的，我本地测试是支持IE7+，欢迎大家测试一下。

上面只是一个实例，在此记录一下，修修改改还可以完成其他的一些简单的Dom操作，如果有更方便且简单的方法欢迎指出。