二维码生成器(支持历史记录点击和清空)

移动端占比越来越高,扫二维码的需求跃升。

你可以给浏览器装个扩展,一劳永逸;你可以安装Firefox,它自带(性能不行,开发者工具没chrome那么强大,所以不太讨人喜欢);亦或你可以浏览器搜索生成二维码的网页应用。

不过以上这些有个功能缺失,没法保存历史记录,不支持历史记录点击生成,楼主在团队的要求下给加上这些功能,放在服务器上甚至本地你都可以当他是个小工具使用。

首先声明:楼主也是在前辈的插件基础上进行的扩展。下面就这点扩展加以阐述下

1、历史记录

大家首先会想到cookie、H5的本地存储,cookie略显麻烦还需要自己写存和取的方法,localStorage自带这些,之前一篇文章也说到过localStorage,所以就用了它
var str = localStorage.getItem("website"),
history = (str && str.split(",")) || [];
if(address!=""){
history.push(address);
}
//存入去重数据
var historyDif=history.unique();
localStorage.setItem("website", historyDif);
如果输入相同的网址,我们需要去重处理
//数组去重
Array.prototype.unique = function(){
var n = {},r=[]; //n为hash表,r为临时数组
for(var i = 0; i < this.length; i++) //遍历当前数组
{
if (!n[this[i]]) //如果hash表中没有当前项
{
n[this[i]] = true; //存入hash表
r.push(this[i]); //把当前数组的当前项push到临时数组里面
}
}
return r;
}
装历史记录的HTML元素我是用了惰性单例模式,以确保只有一个元素存在
//单例模式添加链接ul容器
var createBox=function(){
var ul=document.createElement("ul");
document.getElementsByTagName("div").item(0).appendChild(ul);
return ul;
};
var getSingle=function(fn){
var result;
return function(){
return result || (result=fn.apply(this.arguments));
}
};
var createSingleBox=getSingle(createBox);
其中就是依靠result这个变量进行判断

2、历史记录点击生成

historyLinkBox.innerHTML = historyList;
historyLinkBox.addEventListener("click",function(){
    el4.value="";
    el4.value=event.target.innerText;
    that.makeCode(el4.value);
},false);

运用了事件委托,提高了丢丢子性能

3、清空历史记录

localStorage.clear();

localStorage自带清除api

还有你可以生成当前url的二维码,那段代码被我注释掉了
if (this._htOption.text) {
this.makeCode(this._htOption.text);
}/else{
//实例化时没有自行设置链接则转换当前url的二维码
this.makeCode(location.href);
}
/

以上就是今天要讲的,主要技术点就是数据去重的生成和单列模式有需要的同学可以百度盘下载(http://pan.baidu.com/s/1c0uj8Pi),目前还没传github上,代码也是项目赶着写出来的,写的不好的地方以后再做优化(没有针对输入进行正则判断)。

我还在南方的艳阳里哆嗦着,下班回家

posted @ 2015-11-26 19:34  乐小希  阅读(1581)  评论(0编辑  收藏  举报