以下是常用的代码收集，没有任何技术含量，只是填坑的积累。
昨天一个朋友问我vue的双向数据绑定的原理，因为我在他之前刚刚跟别人说了一次了，我就答应他说今天出一篇文章让他看一下，当时很贸然，昨天晚上回到住处，拿出来笔记本，才发现并不是一句两句能够解释清楚的，我打算把这一块由浅到深入的写一篇文章，所以不是这两天能完成的任务，但是肯定会近期更新
1. PC - js
- 返回指定范围的随机数(m-n之间)的公式
|
Math.random()*(n-m)+m
|
- 阻止默认事件
- return false
- return false
|
// event.preventDefault()会阻挡预设要发生的事件.
// event.stopPropagation()会阻挡发生冒泡事件.
// 而return false则是前面两者的事情他都会做：
// 他会做event.preventDefault();
// 他会做event.stopPropagation();
// 停止callback function的执行并且立即return回来
|
- 防止被Iframe嵌套
|
if(top != self){
location.href = ”about:blank”;
}
|
- 两种图片lazy加载的方式
|
// @description 准备为图片预加载使用的插件
// 使用的图片容器css类名为lazy-load-wrap
// 图片真实地址为data-lazy-src
// 当lazy-load-wrap容器进入视口，则开始替换容器内所有需要延迟加载的图片路径，并更改容器的加载状态
//第一种方法
$.fn.compassLazyLoad=function(){
var _HEIGHT=window.innerHeight,
_lazyLoadWrap=$('.lazy-load-wrap');
var methods={
setOffsetTop:function(){
$.each(_lazyLoadWrap,function(i,n){
$(n).attr({
'top':n.offsetTop-_HEIGHT,
'status':'wait'
});
})
},
isShow:function(){
var _scrollTop=$(window).scrollTop;
//利用image容器判断是否进入视口，而非image本身
$.each(_lazyLoadWrap,function(){
var _that=$(this);
if (_that.attr('status')==='done') {
return;
};
if (_that.attr('top')<=_scrollTop) {
_that.find('img[data-lazy-src]').each(function(i,n){
n.src=$(n).data('lazy-src');
});
_that.attr('status','done');
};
})
},
scroll:function(){
$(window).on('scroll',function(){
methods.isShow();
});
},
init:function(){
methods.setOffsetTop();
methods.isShow();
methods.scroll();
}
};
methods.init();
}
//第二种方法
var exist=(function($){
var timer=null,
temp=[].slice.call($('.container'));
ret={};
for(var i=0,len=temp.length-1;i<=len;i++){
ret[i]=temp[i];
}
var isExist=function(winTop,winEnd){
for(var i in ret){
console.log(ret);
var item=ret[i],
eleTop=item.offsetTop,
eleEnd=eleTop+item.offsetHeight;
if((eleTop>winTop&&eleTop<=winEnd)||(eleEnd>winTop&&eleEnd<=winEnd)){
$(item).css('background','none');
new Tab($(item).attr('id'),data).init;
delete ret[i];
}
}
}
return {
timer:timer;
isExist:isExist;
};
})($);
//第三种方法
Zepto(function ($) {
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay: 3000,
loop: true,
autoplayDisableOnInteraction: false
});
(function lazyLoad() {
var imgs = $(".lazyLoad");
var src = '';
$.each(imgs, function (index, item) {
src = $(item).attr('data-src');
$(item).attr('src', src);
});
})();
});
$(function () {
var lazyLoadTimerId = null;
/// 智能加载事件
$(window).bind("scroll", function () {
clearTimeout(lazyLoadTimerId);
lazyLoadTimerId = setTimeout(function () {
// 延迟加载所有图片
var isHttp = (location.protocol === "http:");
$("#ym_images img").each(function () {
var self = $(this);
if (self.filter(":above-the-fold").length > 0) {
var originUrl = self.attr("data-original");
self.attr("src", originUrl);
}
});
}, 500);
});
});
|
- 某年某月的1号为星期几
|
var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
weekday[new Date(2015, 9, 1).getDay()]; //2015年10月1号
|
2. Mobile - js
|
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
alert('是否是Android：'+isAndroid);
alert('是否是iOS：'+isiOS);
|
3. 微信 weixin
- UserAgent 判断微信客户端
|
// Mozilla/5.0 (iPhone; CPU iPhone OS 8_3 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12F70 MicroMessenger/6.1.5 NetType/WIFI
function isWechat() {
var ua = navigator.userAgent.toLowerCase();
return /micromessenger/i.test(ua) || /windows phone/i.test(ua);
}
|
- JS接口安全域名不填写，分享onMenuShareAppMessage直接会取默认值。
|
// 分享onMenuShareAppMessage直接会取默认值
|
- 关闭当前页面
|
WeixinJSBridge.call('closeWindow');
|
|
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady(){
that.initOrder();
}, false);
|
- 支付接口方法调用必须在
|
WeixinJSBridge.invoke('getBrandWCPayRequest', d, function(res){
if(res.err_msg == "get_brand_wcpay_request:ok"){
// alert("支付成功");
// union.release(d.orderId);
resetUrl();
paySuccess('home', d.orderId);
} else {
cancelOrder(d.orderId);
// alert(res.err_msg);
}
loading.hide();
});
|
- 瀑布流无限加载实例
|
// be dependent on jquery & jquery.infinitescroll.min.js
// insert this '<div id="more"><a href="api?page="></a></div>' to your page.html
(function($){
$(function(){
var $container = $('.list-wrap-gd');
function layOutCallBack() {
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item-bar',
gutter: 10
});
});
$container.imagesLoaded().progress( function() {
$container.masonry('layout');
});
}
layOutCallBack();
$container.infinitescroll({
navSelector : "#more",
nextSelector : "#more a",
itemSelector : ".item-bar",
pixelsFromNavToBottom: 300,
loading:{
img: "/images/masonry_loading.gif",
msgText: ' ',
finishedMsg: "<em>已经到最后一页</em>",
finished: function(){
$("#more").remove();
$("#infscr-loading").hide();
}
},
errorCallback:function(){
$(window).unbind('.infscr');
},
pathParse: function (path, nextPage) {
var query = "";
var keyword=$("#search_keyword").val();
var cat_id=$("#cat_id").val();
var brand_id=$("#brand_id").val();
var country_id = $("#country_id").val();
query = query + "&namekeyword="+keyword;
query = query +"&cat_id="+cat_id
query = query + "&brand_id=" + brand_id;
query = query + "&country_id=" + country_id;
path = [path,query];
return path;
}
},
function(newElements) {
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
layOutCallBack();
});
});
});
})(jQuery);
|
|
if( /iPhone|iPod|iPad/i.test(navigator.userAgent) ) {
$(document).on('focus', 'input, textarea', function()
{
$('header').css("position", 'absolute');
$('footer').css("position", 'absolute');
});
$(document).on('blur', 'input, textarea', function()
{
$('header').css("position", 'fixed');
$('footer').css("position", 'fixed');
});
}
|
- 得到地理位置
|
function getLocation(callback){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
function(p){
callback(p.coords.latitude, p.coords.longitude);
},
function(e){
var msg = e.code + "
" + e.message;
}
);
}
}
|
|
(function(doc, win){
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function(){
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
|
|
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * 2 / 10;
scale = 1 / dpr;
// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
// 给js调用的，某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
v = parseFloat(v);
return v * rem;
};
window.px2rem = function(v) {
v = parseFloat(v);
return v / rem;
};
window.dpr = dpr;
window.rem = rem;
|
- 获取js所在路径
|
function getJsDir (src) {
var script = null;
if (src) {
script = [].filter.call(document.scripts, function (v) {
return v.src.indexOf(src) !== -1;
})[0];
} else {
script = document.scripts[document.scripts.length - 1];
}
return script ? script.src.substr(0, script.src.lastIndexOf('/')) : script;
}
|
- 从全局捕获错误
|
window.onerror = function (errMsg, scriptURI, lineNumber, columnNumber, errorObj) {
setTimeout(function () {
var rst = {
"错误信息：": errMsg,
"出错文件：": scriptURI,
"出错行号：": lineNumber,
"出错列号：": columnNumber,
"错误详情：": errorObj
};
alert(JSON.stringify(rst, null, 10));
});
};
|
|
var $body = $('body');
document.title = 'title'; // hack在微信等webview中无法修改document.title的情况
var $iframe = $('<iframe src="/favicon.ico"></iframe>').on('load', function(){
setTimeout(function(){
$iframe.off('load').remove()
}, 0)
}).appendTo($body)
|
1. 常用方法 - js
- 字符串长度截取
|
function cutstr(str, len) {
var temp,
icount = 0,
patrn = /[^x00-xff]/，
strre = "";
for (var i = 0; i < str.length; i++) {
if (icount < len - 1) {
temp = str.substr(i, 1);
if (patrn.exec(temp) == null) {
icount = icount + 1
} else {
icount = icount + 2
}
strre += temp
} else {
break;
}
}
return strre + "..."
}
|
- 替换全部
|
String.prototype.replaceAll = function(s1, s2) {
return this.replace(new RegExp(s1, "gm"), s2)
}
|
- 清除空格
|
String.prototype.trim = function() {
var reExtraSpace = /^s*(.*?)s+$/;
return this.replace(reExtraSpace, "$1")
}
|
- 清除左空格/右空格
|
function ltrim(s){ return s.replace( /^(s*| *)/, ""); }
function rtrim(s){ return s.replace( /(s*| *)$/, ""); }
|
- 判断是否以某个字符串开头
|
String.prototype.startWith = function (s) {
return this.indexOf(s) == 0
}
|
- 判断是否以某个字符串结束
|
String.prototype.endWith = function (s) {
var d = this.length - s.length;
return (d >= 0 && this.lastIndexOf(s) == d)
}
|
- 转义html标签
|
function HtmlEncode(text) {
return text.replace(/&/g, '&').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>')
}
|
- 时间日期格式转换
|
Date.prototype.Format = function(formatStr) {
var str = formatStr;
var Week = ['日', '一', '二', '三', '四', '五', '六'];
str = str.replace(/yyyy|YYYY/, this.getFullYear());
str = str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : '0' + (this.getYear() % 100));
str = str.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : '0' + (this.getMonth() + 1));
str = str.replace(/M/g, (this.getMonth() + 1));
str = str.replace(/w|W/g, Week[this.getDay()]);
str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : '0' + this.getDate());
str = str.replace(/d|D/g, this.getDate());
str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : '0' + this.getHours());
str = str.replace(/h|H/g, this.getHours());
str = str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : '0' + this.getMinutes());
str = str.replace(/m/g, this.getMinutes());
str = str.replace(/ss|SS/, this.getSeconds() > 9 ? this.getSeconds().toString() : '0' + this.getSeconds());
str = str.replace(/s|S/g, this.getSeconds());
return str
}
|
- 判断是否为数字类型
|
function isDigit(value) {
var patrn = /^[0-9]*$/;
if (patrn.exec(value) == null || value == "") {
return false
} else {
return true
}
}
|
- 设置cookie值
|
function setCookie(name, value, Hours) {
var d = new Date();
var offset = 8;
var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
var nd = utc + (3600000 * offset);
var exp = new Date(nd);
exp.setTime(exp.getTime() + Hours * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString() + ";domain=360doc.com;"
}
|
- 获取cookie值
|
function getCookie(name) {
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null) return unescape(arr[2]);
return null
}
|
- 加载样式文件表
|
function LoadStyle(url) {
try {
document.createStyleSheet(url)
} catch(e) {
var cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.type = 'text/css';
cssLink.href = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(cssLink)
}
}
|
- 返回脚本内容
|
function evalscript(s) {
if(s.indexOf('<script') == -1) return s;
var p = /<script[^>]*?>([^x00]*?)</script>/ig;
var arr = [];
while(arr = p.exec(s)) {
var p1 = /<script[^>]*?src="([^>]*?)"[^>]*?(reload="1")?(?:charset="([w-]+?)")?></script>/i;
var arr1 = [];
arr1 = p1.exec(arr[0]);
if(arr1) {
appendscript(arr1[1], '', arr1[2], arr1[3]);
} else {
p1 = /<script(.*?)>([^x00]+?)</script>/i;
arr1 = p1.exec(arr[0]);
appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1);
}
}
return s;
}
|
- 清除脚本内容
|
function stripscript(s) {
return s.replace(/<script.*?>.*?</script>/ig, '');
}
|
- 动态加载脚本文件
|
function appendscript(src, text, reload, charset) {
var id = hash(src + text);
if(!reload && in_array(id, evalscripts)) return;
if(reload && $(id)) {
$(id).parentNode.removeChild($(id));
}
evalscripts.push(id);
var scriptNode = document.createElement("script");
scriptNode.type = "text/javascript";
scriptNode.id = id;
scriptNode.charset = charset ? charset : (BROWSER.firefox ? document.characterSet : document.charset);
try {
if(src) {
scriptNode.src = src;
scriptNode.onloadDone = false;
scriptNode.onload = function () {
scriptNode.onloadDone = true;
JSLOADED[src] = 1;
};
scriptNode.onreadystatechange = function () {
if((scriptNode.readyState == 'loaded' || scriptNode.readyState == 'complete') && !scriptNode.onloadDone) {
scriptNode.onloadDone = true;
JSLOADED[src] = 1;
}
};
} else if(text){
scriptNode.text = text;
}
document.getElementsByTagName('head')[0].appendChild(scriptNode);
} catch(e) {}
}
|
- 返回按ID检索的元素对象
|
function $(id) {
return !id ? null : document.getElementById(id);
}
|
- 检验URL链接是否有效
|
function getUrlState(URL){
var xmlhttp = new ActiveXObject("microsoft.xmlhttp");
xmlhttp.Open("GET",URL, false);
try{
xmlhttp.Send();
}catch(e){
}finally{
var result = xmlhttp.responseText;
if(result){
if(xmlhttp.Status==200){
return(true);
}else{
return(false);
}
}else{
return(false);
}
}
}
|
- 获取当前路径
|
var currentPageUrl = "";
if (typeof this.href === "undefined") {
currentPageUrl = document.location.toString().toLowerCase();
}else {
currentPageUrl = this.href.toString().toLowerCase();
}
|
- 获取页面高度
|
function getPageHeight(){
var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat"
? a
: g.documentElement;
return Math.max(f.scrollHeight, a.scrollHeight, d.clientHeight);
}
|
- 获取页面可视宽度
|
function getPageViewWidth(){
var d = document, a = d.compatMode == "BackCompat" ?
d.body: d.documentElement;
return a.clientWidth;
}
|
- 获取页面宽度
|
function getPageWidth(){
var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat"?
a: g.documentElement;
return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth);
}
|
- 随机数时间戳
|
function uniqueId(){
var a=Math.random,b=parseInt;
return Number(new Date()).toString()+b(10*a())+b(10*a())+b(10*a());
}
|
- 日期格式化函数
|
Date.prototype.format = function(format){
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
};
if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
(this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o){
if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] :("00"+ o[k]).substr((""+ o[k]).length));
}
return format;
}
//调用
//new Date().format("yyyy-MM-dd hh:mm:ss");
|
- 返回顶部的通用方法
|
function backTop(btnId) {
var btn = document.getElementById(btnId);
var d = document.documentElement;
var b = document.body;
window.onscroll = set;
btn.style.display = "none";
btn.onclick = function() {
btn.style.display = "none";
window.onscroll = null;
this.timer = setInterval(function() {
d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set);
}, 10);
};
function set() {
btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none"
}
};
backTop('goTop');
|
- 获得URL中GET参数值
|
// 用法：如果地址是 test.htm?t1=1&t2=2&t3=3, 那么能取得：GET["t1"], GET["t2"], GET["t3"]
function get_get(){
querystr = window.location.href.split("?")
if(querystr[1]){
GETs = querystr[1].split("&");
GET = [];
for(i=0;i<GETs.length;i++){
tmp_arr = GETs.split("=")
key=tmp_arr[0]
GET[key] = tmp_arr[1]
}
}
return querystr[1];
}
|
- 数组去重
|
String.prototype.unique=function(){
var x=this.split(/[
]+/);
var y='';
for(var i=0;i<x.length;i++){
if(!new RegExp("^"+x.replace(/([^w])/ig,"\$1")+"$","igm").test(y)){
y+=x+"
"
}
}
return y
};
|
- 按字典顺序，对每行进行数组排序
|
function SetSort(){
var text=K1.value.split(/[
]/).sort().join("
");//顺序
var test=K1.value.split(/[
]/).sort().reverse().join("
");//反序
K1.value=K1.value!=text?text:test;
}
|
- 字符串反序输出
|
function IsReverse(text){
return text.split('').reverse().join('');
}
|
- 金额大写转换函数
|
//格式转换
function transform(tranvalue) {
try {
var i = 1;
var dw2 = new Array("", "万", "亿"); //大单位
var dw1 = new Array("拾", "佰", "仟"); //小单位
var dw = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"); //整数部分用
//以下是小写转换成大写显示在合计大写的文本框中
//分离整数与小数
var source = splits(tranvalue);
var num = source[0];
var dig = source[1];
//转换整数部分
var k1 = 0; //计小单位
var k2 = 0; //计大单位
var sum = 0;
var str = "";
var len = source[0].length; //整数的长度
for (i = 1; i <= len; i++) {
var n = source[0].charAt(len - i); //取得某个位数上的数字
var bn = 0;
if (len - i - 1 >= 0) {
bn = source[0].charAt(len - i - 1); //取得某个位数前一位上的数字
}
sum = sum + Number(n);
if (sum != 0) {
str = dw[Number(n)].concat(str); //取得该数字对应的大写数字，并插入到str字符串的前面
if (n == '0') sum = 0;
}
if (len - i - 1 >= 0) { //在数字范围内
if (k1 != 3) { //加小单位
if (bn != 0) {
str = dw1[k1].concat(str);
}
k1++;
} else { //不加小单位，加大单位
k1 = 0;
var temp = str.charAt(0);
if (temp == "万" || temp == "亿") //若大单位前没有数字则舍去大单位
str = str.substr(1, str.length - 1);
str = dw2[k2].concat(str);
sum = 0;
}
}
if (k1 == 3){ //小单位到千则大单位进一
k2++;
}
}
//转换小数部分
var strdig = "";
if (dig != "") {
var n = dig.charAt(0);
if (n != 0) {
strdig += dw[Number(n)] + "角"; //加数字
}
var n = dig.charAt(1);
if (n != 0) {
strdig += dw[Number(n)] + "分"; //加数字
}
}
str += "元" + strdig;
} catch(e) {
return "0元";
}
return str;
}
//拆分整数与小数
function splits(tranvalue) {
var value = new Array('', '');
temp = tranvalue.split(".");
for (var i = 0; i < temp.length; i++) {
value = temp;
}
return value;
}
|
- 返回截取多少段，和按那个字母进行截取
1 function find(str) { 2 var max = 0; 3 var c; 4 while(str) { 5 // console.log(str); 6 var char = str.charAt(0); 7 console.log(char); 8 var a = str.split(char); 9 var count = str.length - (str = a.join("")).length; 10 //console.log(str); 11 //console.log(a.join("")); 12 if(count > max) { 13 max = count; 14 c = char; 15 console.log(c); 16 17 } 18 } 19 return {"max":max, "char":c}; 20 } 21 var str = "fjslkfghdfbr"; 22 console.log(find(str));