utils

供CDN方式调用的工具代码

0. 字符串 hash.js

String.prototype.hashCode=function(caseSensitive){varstr=caseSensitive ? this : this.toLowerCase();// 1315423911=b'1001110011001111100011010100111'varhash=1315423911,i,ch;for(i=str.length-1;i>=0;i--){ch=str.charCodeAt(i);hash^=((hash<<5)+ch+(hash>>2));}return(hash&0x7FFFFFFF);};

经过下列测试输出576, 比 stackoverflow 前2个答案的300+的结果要好,应该是使用了大素数的原因

varb={}for(vari=0;i<900;i++){b[i.toString().hashCode()%900]=i;}console.log(Object.keys(b).length);

1. client.js 客户端检测

对应 Javascript 高级程序设计第9章

引用方式:

<scriptsrc="https://utils.setsuna.wang/client.js"></script>

或者

varsss=document.createElement("script");sss.setAttribute("src","https://utils.setsuna.wang/client.js")document.body.append(sss)

然后访问client()或者client().toString()即可

example: 当 navigator.userAgent 为"Mozilla/5.0 (iPad; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"时,输出操作系统:iOS 11.0 浏览器版本:Safari 11.0 设备:iPad

2. emoji.js 表情对象

引用方式:

<scriptsrc="https://utils.setsuna.wang/emoji.js"></script>

使用: emoji["joy"] 得到😂 Demo

3. iphone.js 手机设备的API即时显示

• rotate
• touch

4. jianshu-index.js 给简书增加一个目录

参考自http://www.jianshu.com/u/c887880e8f06 在他基础上增加了不少效果

• 点击锚点滚动效果
• 页面滚动时更改目录中高亮标签
• 支持三级标题
• 在文章正文中没找到 h1 时继续递归向后找 h2 \ h3

效果:

---

附录: jQuery 到 JS 转换

$('#el')|el.querySelector("div")|div.querySelectorAll('.el')//getElementsByTagName 得到的是HTMLCollection,它返回的值会动态改变.参见Javascript 高级程序设计设计第284页.而 querySelectorAll 不会有这种情况发生.//兄弟元素$('#el').parent()|el.parentNode|el.children[0]$('#el').prev()|el.previousElementSibling$('#el').next()|el.nextElementSibling$('#el').last()|el.lastElementChild$('#el').first()|el.firstElementChild$('.el').append(div)|el.appendChild(document.createElement('div'))$('.el').clone()|el.cloneNode(true)$('.el').remove()|el.parentNode.removeChild(el)|//新增DOM 操作|el.insertAdjacentHTML("beforebegin","<p>h</p>")|el.insertAdjacentHTML("afterbegin","<p>h</p>")|el.insertAdjacentHTML("beforeend","<p>h</p>")|el.insertAdjacentHTML("afterend","<p>h</p>")//获取文本$('#el').html()|el.innerHTML$('#el').val()|el.value$('#el').text()|el.textContent$('#el').replaceWith(string)|el.outerHTML=string//创建元素varnewEl=$('')|varnewEl=document.createElement('div')//Set/get属性$('#el').attr('key','value')|el.setAttribute('key','value')$('#el').attr('key')|el.getAttribute('key')$('#el').addClass('class')|el.classList.add('class')$('#el').removeClass('class')|el.classList.remove('class')$('#el').toggleClass('class')|el.classList.toggle('class')$('#el').css('border-width','20px')|el.style.borderWidth='20px'//合并 Objectvaro1={a: 1};varo2={b: 2};varo3={c: 3};varobj=Object.assign(o1,o2,o3);console.log(obj);// { a: 1, b: 2, c: 3 }console.log(o1);// { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。//数组过滤操作list.filter(x=>x>=5)list.slice(s,end+1)|list.slice(-list.length)list.findIndex(x=>x==4)|list.indexOf(4)// getvarxhr=newXMLHttpRequest();xhr.open('GET',url);xhr.onreadystatechange=function(data){}xhr.send();// postvarxhr=newXMLHttpRequest()xhr.open('POST',url);xhr.onreadystatechange=function(data){}xhr.send({data: data});