浏览器变编辑器
data:text/html, <style type="text/css">#e{position:absolute;top:;right:;bottom:;left:;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/javascript");</script>
深度拷贝
function deepCopy(p, c) {
var c = c || {};
for (var i in p) {
if (typeof p[i] === 'object') {
c[i] = (p[i].constructor === Array) ? [] : {};
deepCopy(p[i], c[i]);
} else {
c[i] = p[i];
}
}
return c;
}
生成随机字符串
// 生成随机字符串
var strRandom = "qwertyuioplkjhgfdsazxcvbnm0123456789";
function getRamdomStr(){
var str = "", len = strRandom.length,
index = Math.floor(len*Math.random());
str = strRandom.substring(index-1,index);
return str;
}
function generateClassName(){
var arr = [];
for(var i = 0; i< 12; i++){
arr.push(getRamdomStr());
}
return arr.join("");
}
curry化函数
// 【通用curry化函数】
function curry(fn) {
var slice = Array.prototype.slice,
stored_args = slice.call(arguments, 1);
return function () {
var new_args = slice.call(arguments),
args = stored_args.concat(new_args);
return fn.apply(null, args);
}
} // 测试
function add(x, y) {
return x + y;
}
// 将一个函数curry化获得一个新的函数
var newadd = curry(add, 5);
console.log(newadd(4)); // 另一种选择--直接调用新函数
console.log(curry(add, 6)(7));
计数器
var setup = function () {
var count = 0;
return function () {
return (count += 1);
};
};
// 用法
var next = setup();
next();
获取地址参数
var getValueParam = function(key){
var url = window.location.href,
para = url.split('?')[1],
arrparam = [],
val = undefined;
if(para.length){
arrparam = para.split('&');
for( var i = 0; i<arrparam.length; i++ ){
if(arrparam[i].split("=")[0] == key){
val = arrparam[i].split("=")[1];
break;
}
}
}
return val;
};
php数组赋值js变量
var data = <?php echo json_encode($data) ?>
弹出居中
function getValue ($target){
var h = $(document).scrollTop()+($(window).height()-$target.height())/2;
var w = ($(window).width()-$target.width())/2
return {
t : h,
l : w
}
}
form表单Ajax提交
$('form').submit(function(e){
e.preventDefault();
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax({
url : formURL,
type: "POST",
data : postData,
dataType : "json",
success:function(data, textStatus, jqXHR)
{
if(textStatus == 'success'){
console.log(data, textStatus, jqXHR);
}
//data: return data from server
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
}
});
});
腾讯视频嵌入代码
<iframe class="video_iframe" style=" z-index:1; " src="http://v.qq.com/iframe/player.html?vid=m0144ws2h0q&width=300&height=200&auto=0" allowfullscreen="" frameborder="0" height="200" width="300"></iframe>
网页代码编辑器
data:text/html, <style type="text/css">.e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div class="e" id="editor"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("editor");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/javascript");</script>
【scp】
上端口大写P 为参数，2222 表示更改SSH端口后的端口，如果没有更改SSH端口可以不用添加该参数
获取文件：
scp -P 2222 root@www.legcloud.com:/root/test.tar.gz /home/test.tar.gz
上传目录：
scp -P 2222 -r /home/dirname/ root@www.legcloud.com:/root/dirname/
判断是否为数组的函数: isArray()
// 支付宝同学在用的
if (value instanceof Array ||
(!(value instanceof Object) &&
(Object.prototype.toString.call((value)) == '[object Array]') ||
typeof value.length == 'number' &&
typeof value.splice != 'undefined' &&
typeof value.propertyIsEnumerable != 'undefined' &&
!value.propertyIsEnumerable('splice'))) {
return 'array';
} // 最直接的、简单的方式(在不同 iframe 中创建的 Array 并不共享 prototype)
var arr = [];
arr instanceof Array; // true
arr.constructor == Array; //true // 基于iframe的情况 使用 Douglas Crockford 的方法是可以解决这个问题（《JavaScript 语言精粹》P61）
var is_array = function(value) {
return value &&
typeof value === 'object' &&
typeof value.length === 'number' &&
typeof value.splice === 'function' &&
!(value.propertyIsEnumerable('length'));
}; // 更简单的方法,也是jQuery 正在使用的。淘宝的 kissy 也是使用这种方式
var isArray = function(obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
} // 大而全而cool 判断类型
var is = function (obj,type) {
return (type === "Null" && obj === null) ||
(type === "Undefined" && obj === void 0 ) ||
(type === "Number" && isFinite(obj)) ||
Object.prototype.toString.call(obj).slice(8,-1) === type;
}
1、&&和if
// &&和
var a = ;
a == && ( b = ,console.log(b)) ; // 0 // 上面代码等同于
var a = ;
if( a == ){
b = ,console.log(b);
}
a == && ( b = ,console.log(b)) // 0 // 以下还会返回值
var a = ;
a != && ( b = ,console.log(b)) ; // false
2、判断IE
常规的判断已经阻挡不了NB的IE了，没有msie。。用它：
// IE11
!!navigator.userAgent.match(/Trident\/\./)
// 或者
Object.hasOwnProperty.call(window, "ActiveXObject") && !window.ActiveXObject // IE6
var ie6 = !-[1,]&&!window.XMLHttpRequest; // IE7
var ie7 = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/7./i)=="7.")
3、移动端常用
// 移动端判断屏幕高度
document.documentElement.clientHeight
// browser info and capability
var _ua = window.navigator.userAgent;
// isRetina
window.devicePixelRatio && window.devicePixelRatio > 1
// isIDevice
(/iphone|ipod|ipad/i).test(_ua)
// isMobileChrome
_ua.indexOf('Android') > -1 && (/Chrome\/[.0-9]*/).test(_ua)
// isMobileIE
_ua.indexOf('Windows Phone') > -1
// isMobileSafari
isIDevice && _ua.indexOf('Safari') > -1 && _ua.indexOf('CriOS') < 0;
// isTablet
(isMobileSafari && _ua.indexOf('iPad') > -1) || (isMobileChrome && _ua.indexOf('Mobile') < 0);
Platform = {
list :[{"name":"iOS",
"value" : 1
},{"name":"Android",
"value" :2
},{"name":"weixin",
"value" :3
}],
getName : function(){
var name = this.getInfo().name;
return name;
},
getValue : function(){
var val = this.getInfo().value;
return val;
},
getInfo : function(){
var list = this.list,
regObj = this.judgeReg,
obj = {"name":"weixin","value":2};
for(var i=0;i<list.length; i++){
if(regObj[list[i]['name']]){
obj = list[i];
break;
}
}
return obj;
},
judgeReg : {
"iOS" : !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
"Android" : navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1,
"weixin" : /MicroMessenger/.test(navigator.userAgent)
}
};
横竖屏函数判断
function orientationChange() {
switch (window.orientation) {
case 0: // Portrait
case 180: // Upside-down Portrait
// Javascript to setup Portrait view
alert('Portrait');
break;
case -90: // Landscape: turned 90 degrees counter-clockwise
case 90: // Landscape: turned 90 degrees clockwise
// Javascript to steup Landscape view
alert('Landscape');
break;
}
}
window.addEventListener(("onorientationchange" in window || "orientation" in window) ? "orientationchange" : "resize", orientationChange, false);
4、deffer
var Promise = function () {
this.thens = [];
};
Promise.prototype = {
resolve: function () {
var t = this.thens.shift(), n;
t && (n = t.apply(null, arguments), n instanceof Promise && (n.thens = this.thens));
},
then: function (n) {
return this.thens.push(n), this;
}
}
function f1() {
var promise = new Promise();
setTimeout(function () {
alert(1);
promise.resolve();
}, 5500)
return promise;
}
function f2() {
var promise = new Promise();
setTimeout(function () {
alert(2);
promise.resolve();
}, 1500)
return promise;
}
function f3() {
var promise = new Promise();
setTimeout(function () {
alert(3);
promise.resolve();
}, 1500)
return promise;
}
function f4() {
alert(4);
}
f1().then(f2).then(f3).then(f4);
5、更多常用方法
String.prototype.isMobile = function(){
var pattern = /^0{0,1}(13[0-9]|14[6|7]|15[0-3]|15[5-9]|18[0-9]|17[0-9])[0-9]{8}$/;
return pattern.test( this );
}
String.prototype.isEmail = function(){
var pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
return pattern.test( this );
}
String.prototype.isUrl = function(){
var pattern = /([\w-]+\.)+[\w-]+.([^a-z])(\[\w-\.\?%&=]*)?|[a-zA-Z0-9\-\.][\w-]+.([^a-z])(\[\w-\.\?%&=]*)?/;
return pattern.test( this );
}
String.prototype.isChinese = function(){
var pattern = /^[\u4e00-\u9fa5]+$/;
return pattern.test( this );
}
String.prototype.isEnglish = function(){
var pattern = /^[a-zA-Z]+$/;
return pattern.test( this );
}
var BASE = {
// html模板替换,用于html和数据相分离
// 模板中的变量用‘{}’包起来，‘{}’内的字符作为变量替换掉需要的内容
// 模板写法: var dom = '<li class="item {selected}" val="{value}">{text}</li>'
// 【方法调用】：BASE.regReplace(dom,{selected:1,value:2,text:3});
// 输出结果："<li class="item 1" val="2">3</li>"
regReplace : function(str,data,reg){
if (!reg){
reg = /\{\w*\}/g;
}
return str.replace(reg,function(match,pos){
var s = '';
var command = match.substring(1,match.length-1);
if (data[command]){
s = data[command];
}
return s;
});
},
// 在数组中查找元素，如果存在，返回所在下标，如果不存在，则返回-1
// 【方法调用】：BASE.isInArr(1,[2,3,1]);
isInArr : function(item, arr){
if( arr.length > 0 ){
for( var i = 0; i < arr.length; i++ ){
if( arr[i] == item ){
return i;
break;
}
}
return -1;
}else{
return -1;
}
},
// 在数组中删除指定元素，如果存在，返回删除后的数组，如果不存在，返回undefined
// 【方法调用】：BASE.removeInArr(1,[2,3,1]);
removeInArr : function(item, arr){
var index = this.isInArr(item, arr);
if (index > -1) {
arr.splice(index, 1);
return arr;
}else{
return undefined;
}
},
// 得到最大天数
getMaxDays : function(year, month){
var dt = new Date(year, month - 1, '01');
dt.setDate(1);
dt.setMonth(dt.getMonth() + 1);
cdt = new Date(dt.getTime()-1000*60*60*24);
return cdt.getDate();
},
getCookie : function (a) {
var b;
b = a + "=";
offset = document.cookie.indexOf(b);
if (offset != -1) {
offset += b.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) {
end = document.cookie.length;
}
return document.cookie.substring(offset, end);
}
else {
return "";
}
}
};
6、图片尺寸
// 传统做法
var imgLoad = function (url, callback) {
var img = new Image(); img.src = url;
if (img.complete) {
callback(img.width, img.height);
} else {
img.onload = function () {
callback(img.width, img.height);
img.onload = null;
};
}; };
// 1、保证回调执行顺序：error > ready > load；2、回调函数this指向img本身
// 2、增加图片完全加载后的回调、提高性能 /**
* 图片头数据加载就绪事件 - 更快获取图片尺寸
* @param {String} 图片路径
* @param {Function} 尺寸就绪
* @param {Function} 加载完毕 (可选)
* @param {Function} 加载错误 (可选)
* @example imgReady('http://x.autoimg.cn/www/common/images/logo.png', function () {
alert('size ready: width=' + this.width + '; height=' + this.height);
});
*/
var imgReady = (function () {
var list = [], intervalId = null, // 用来执行队列
tick = function () {
var i = 0;
for (; i < list.length; i++) {
list[i].end ? list.splice(i--, 1) : list[i]();
};
!list.length && stop();
}, // 停止所有定时器队列
stop = function () {
clearInterval(intervalId);
intervalId = null;
}; return function (url, ready, load, error) {
var onready, width, height, newWidth, newHeight,
img = new Image(); img.src = url; // 如果图片被缓存，则直接返回缓存数据
if (img.complete) {
ready.call(img);
load && load.call(img);
return;
}; width = img.width;
height = img.height; // 加载错误后的事件
img.onerror = function () {
error && error.call(img);
onready.end = true;
img = img.onload = img.onerror = null;
}; // 图片尺寸就绪
onready = function () {
newWidth = img.width;
newHeight = img.height;
if (newWidth !== width || newHeight !== height ||
// 如果图片已经在其他地方加载可使用面积检测
newWidth * newHeight > 1024
) {
ready.call(img);
onready.end = true;
};
};
onready(); // 完全加载完毕的事件
img.onload = function () {
// onload在定时器时间差范围内可能比onready快
// 这里进行检查并保证onready优先执行
!onready.end && onready(); load && load.call(img); // IE gif动画会循环执行onload，置空onload即可
img = img.onload = img.onerror = null;
}; // 加入队列中定期执行
if (!onready.end) {
list.push(onready);
// 无论何时只允许出现一个定时器，减少浏览器性能损耗
if (intervalId === null) intervalId = setInterval(tick, 40);
};
};
})();
调用例子： imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
alert('size ready: width=' + this.width + '; height=' + this.height);
});
7、iframe跨域
function Messenger(win) {
// save the pointer to the window which is interacting with
this.win = win;
this.init();
}
// postMessage API is supported
Messenger.prototype.init = function () {
var self = this;
var receiver = function (event) {
// Some IE-component browsers fails if you compare
// window objects with '===' or '!=='.
if (event.source != self.win) return;
(self.onmessage || function () {}).call(self, event.data);
};
if (window.addEventListener)
window.addEventListener('message', receiver, false);
else if (window.attachEvent)
window.attachEvent('onmessage', receiver);
};
Messenger.prototype.send = function (data) {
this.win.postMessage(data, '*');
};
Messenger.initInParent = function (frame) {
return new this(frame.contentWindow);
};
Messenger.initInIframe = function () {
return new this(window.parent);
};
// in IE, postMessage API is not supported
if (!window.postMessage && window.attachEvent) {
// redefine the init method
Messenger.prototype.init = function () {
var isSameOrigin = false;
// test if the two document is same origin
try {
isSameOrigin = !!this.win.location.href;
} catch (ex) {}
if (isSameOrigin) {
this.send = this.sendForSameOrigin;
this.initForSameOrigin();
return;
}
// different origin case
// init the message queue, which can guarantee the messages won't be lost
this.queue = [];
if (window.parent == this.win) {
this.initForParent();
} else {
this.initForFrame();
}
};
Messenger.prototype.initForSameOrigin = function () {
var self = this;
document.attachEvent('ondataavailable', function (event) {
if (!event.eventType ||
event.eventType !== 'message' ||
event.eventSource != self.win)
return;
(self.onmessage || function () {}).call(self, event.eventData);
});
};
Messenger.prototype.sendForSameOrigin = function (data) {
var self = this;
setTimeout(function () {
var event = self.win.document.createEventObject();
event.eventType = 'message';
event.eventSource = window;
event.eventData = data;
self.win.document.fireEvent('ondataavailable', event);
});
};
// create two iframe in iframe page
Messenger.prototype.initForParent = function () {
var fragment = document.createDocumentFragment();
var style = 'width: 1px; height: 1px; position: absolute; left: -999px; top: -999px;';
var senderFrame = document.createElement('iframe');
senderFrame.style.cssText = style;
fragment.appendChild(senderFrame);
var receiverFrame = document.createElement('iframe');
receiverFrame.style.cssText = style;
fragment.appendChild(receiverFrame);
document.body.insertBefore(fragment, document.body.firstChild);
this.senderWin = senderFrame.contentWindow;
this.receiverWin = receiverFrame.contentWindow;
this.startReceive();
};
// parent page wait the messenger iframe is ready
Messenger.prototype.initForFrame = function () {
this.senderWin = null;
this.receiverWin = null;
var self = this;
this.timerId = setInterval(function () {
self.waitForFrame();
}, 50);
};
// parent page polling the messenger iframe
// when all is ready, start trying to receive message
Messenger.prototype.waitForFrame = function () {
var senderWin;
var receiverWin;
try {
senderWin = this.win[1];
receiverWin = this.win[0];
} catch (ex) {}
if (!senderWin || !receiverWin) return;
clearInterval(this.timerId);
this.senderWin = senderWin;
this.receiverWin = receiverWin;
if (this.queue.length)
this.flush();
this.startReceive();
};
// polling the messenger iframe's window.name
Messenger.prototype.startReceive = function () {
var self = this;
this.timerId = setInterval(function () {
self.tryReceive();
}, 50);
};
Messenger.prototype.tryReceive = function () {
try {
// If we can access name, we have already got the data.
this.receiverWin.name;
return;
} catch (ex) {}
// if the name property can not be accessed, try to change the messenger iframe's location to 'about blank'
this.receiverWin.location.replace('about:blank');
// We have to delay receiving to avoid access-denied error.
var self = this;
setTimeout(function () {
self.receive();
}, 0);
};
// recieve and parse the data, call the listener function
Messenger.prototype.receive = function () {
var rawData = null;
try {
rawData = this.receiverWin.name;
} catch (ex) {}
if (!rawData) return;
this.receiverWin.name = '';
var self = this;
var dataList = rawData.substring(1).split('|');
for (var i = 0; i < dataList.length; i++) (function () {
var data = decodeURIComponent(dataList[i]);
setTimeout(function () {
(self.onmessage || function () {}).call(self, data);
}, 0);
})();
};
// send data via push the data into the message queue
Messenger.prototype.send = function (data) {
this.queue.push(data);
if (!this.senderWin) return;
this.flush();
};
Messenger.prototype.flush = function () {
var dataList = [];
for (var i = 0; i < this.queue.length; i++)
dataList[i] = encodeURIComponent(this.queue[i]);
var encodedData = '|' + dataList.join('|');
try {
this.senderWin.name += encodedData;
this.queue.length = 0;
} catch (ex) {
this.senderWin.location.replace('about:blank');
var self = this;
setTimeout(function () {
self.flush();
}, 0);
}
};
}
// 父页面
var messenger = Messenger.initInParent(document.getElementById('iframe'));
messenger.onmessage = function (data) {
var newline = '\n';
var text = document.createTextNode(data + newline);
document.getElementById('output').appendChild(text);
};
function sendMessage() {
var message = document.getElementById('message');
messenger.send(message.value);
message.value = '';
}
// 子页面
var messenger = Messenger.initInIframe();
messenger.onmessage = function (data) {
var newline = '\n';
var text = document.createTextNode(data + newline);
document.getElementById('output').appendChild(text);
};
function sendMessage() {
var message = document.getElementById('message');
messenger.send(message.value);
message.value = '';
}
8、发布订阅模型
var PubSub = {handlers: {}}
PubSub.on = function(eventType, handler) {
if (!(eventType in this.handlers)) {
this.handlers[eventType] = [];
}
this.handlers[eventType].push(handler);
return this;
}
PubSub.emit = function(eventType) {
var handlerArgs = Array.prototype.slice.call(arguments, 1);
for (var i = 0; i < this.handlers[eventType].length; i++) {
this.handlers[eventType][i].apply(this, handlerArgs);
}
return this;
}
9、关于this作用域
// 兼容性更好的 bind
if (!Function.prototype.bind) {
Function.prototype.bind = function() {
var __method = this;
var args = Array.prototype.slice.call(arguments);
var object = args.shift();
return function() {
return __method.apply(object,
args.concat(Array.prototype.slice.call(arguments)));
}
}
}
// 最简单的 bind (ie9以上，不可取)
Function.prototype.bind = function (scope) {
var fn = this;
return function () {
return fn.apply(scope);
};
}
// 例子
var foo = {
x: 3
}
var bar = function(){
console.log(this.x);
}
bar(); // undefined
var boundFunc = bar.bind(foo);
boundFunc(); //
// 适用场景：事件绑定回调和setTimeout回调
// 1 事件绑定
var logger = {
x: 0,
updateCount: function(){
this.x++;
console.log(this.x);
}
}
// 原始函数
document.querySelector('button').addEventListener('click', function(){
logger.updateCount();
});
// 改造后
document.querySelector('button').addEventListener('click', logger.updateCount.bind(logger)); // 2 setTimeout
// 原始函数
render: function () {
this.$el.html(this.template());
setTimeout(this.afterRender, 0);
}
// 改造后
render: function () {
this.$el.html(this.template());
setTimeout(this.afterRender.bind(this), 0);
}
// Tidier Event Binding With querySelectorAll
Array.prototype.forEach.call(document.querySelectorAll('.klasses'), function(el){
el.addEventListener('click', someFunction);
}); // 改造后
var unboundForEach = Array.prototype.forEach,
forEach = Function.prototype.call.bind(unboundForEach); forEach(document.querySelectorAll('.klasses'), function (el) {
el.addEventListener('click', someFunction);
});
10、jquery多版本
<script type="text/javascript" src="/jquery.1.7.js"></script>
var jQuery_1_7 = jQuery.noConflict(true);
jQuery_1_7('.class').on(callback);
11、常用正则
匹配 UTF- 中文：^[\x{4e00}-\x{9fa5}]+$
匹配包含全角字符的 UTF- 中文：^[\x{4e00}-\x{9fa5}A-Za-z0-9_]+$
匹配 GB2312/GBK 中文：^[".chr(0xa1)."-".chr(0xff)."]+$
匹配包含全角字符的 GB2312/GBK 中文：^[".chr(0xa1)."-".chr(0xff)."A-Za-z0-9_]+$
匹配 HTML 标记：< (\S*?)[^>]*>.*?|< .*? />
匹配邮件地址：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
匹配网址 URL：[a-zA-z]+://[^\s]*
匹配加区号的国内电话号码：\d{}-\d{}|\d{}-\d{}
匹配 QQ 号：[-][-]{,}
匹配邮政编码：[-]\d{}(?!\d)
匹配身份证号码：\d{}|\d{}
匹配 ip 地址：\d+\.\d+\.\d+\.\d+
12、地址转义
var encodeRFC5987ValueChars = function (str) {
return encodeURIComponent(str).
// Note that although RFC3986 reserves "!", RFC5987 does not,
// so we do not need to escape it
replace(/['()]/g, escape). // i.e., %27 %28 %29
replace(/\*/g, '%2A').
// The following are not required for percent-encoding per RFC5987,
// so we can allow for a little better readability over the wire: |`^
replace(/%(?:7C|60|5E)/g, unescape);
};
//添加反斜杠
function escapeRegExp(str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
}
13 安装压缩
npm install uglify-js -g