當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
这些年，我收集的JavaScript代码(二)
生活随笔
收集整理的這篇文章主要介紹了
这些年，我收集的JavaScript代码(二)
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、JavaScript跨平臺(tái)事件
對(duì)于跨平臺(tái)事件我們一般這么寫(只例舉添加事件)：
function addEventHandler(oTarget, sEventType, fnHandler){if(oTarget.addEventListener){oTarget.addEventListener(sEventType,fnHandler,false);} else if(oTarget.attachEvent){oTarget.attachEvent("on"+sEventType,fnHandler);} else{oTarget["on"+sEventType]=fnHandler;} }那么下面這段代碼的效果是什么樣的呢？
<div id="test">Test</div> ... var oDiv=document.getElementById("test"); addEventHandler(oDiv,"mouseover",function(){alert("over "+this.id); });由于IE的this問題，在IE中果斷地彈出了 over undefined，所以跨平臺(tái)的事件更好的寫法是這樣的：
function addEventHandler(oTarget, sEventType, fnHandler){if(oTarget.addEventListener){oTarget.addEventListener(sEventType,fnHandler,false);} else if(oTarget.attachEvent){oTarget.attachEvent("on"+sEventType,function(){return fnHandler.call(oTarget,window.event);});} else{oTarget["on"+sEventType]=fnHandler;} }二、合并兩個(gè)Array并去掉重復(fù)項(xiàng)
Array.prototype.unique = function() {var a = this.concat();for(var i=0; i<a.length; ++i) {for(var j=i+1; j<a.length; ++j) {if(a[i] === a[j])a.splice(j, 1);}}return a; };//Demo var array1 = ["a","b"]; var array2 = ["b", "c"]; var array3 = array1.concat(array2).unique(); // ["a","b","c"]三、typeof === "undefined" vs. != null
if(typeof neverDeclared == "undefined") //no errorsif(neverDeclared == null) //throws ReferenceError: neverDeclared is not definedso，typeof === "undefined" is better!
四、setTimeout(fn, 0)的意義
瀏覽器同時(shí)要做很多事，這些事情以隊(duì)列的方式存在，執(zhí)行JavaScript只是其中之一，setTimeout(fn, 0)表面上看是立即執(zhí)行的意思，但實(shí)際上只是在瀏覽器事件隊(duì)列中添加了一個(gè)新的事件，由于隊(duì)列是先進(jìn)先出，所以fn會(huì)等等到當(dāng)前隊(duì)列中的事件執(zhí)行完后再執(zhí)行。由于JavaScript的定時(shí)器回調(diào)函數(shù)是異步執(zhí)行的，所以產(chǎn)生的效果就是等頁面上同步事件(包括頁面渲染與同步JS代碼)執(zhí)行完之后再執(zhí)行。
一個(gè)簡(jiǎn)單的示例：
<script type="text/javascript">//one document.getElementById("imgTest").style.borderBottom="5px solid #000";//two setTimeout(function(){document.getElementById("imgTest").style.borderBottom="5px solid #000";}, 0); </script> <img src="http://jscode.chinacxy.com/img_lib/m_400_600_01.jpg" id="imgTest" alt=""/>one會(huì)報(bào)錯(cuò)，因?yàn)轫撁鎴?zhí)行到這里時(shí)還沒有img，但two卻可以。
五、增強(qiáng)版取URL中的參數(shù)
function getQueryString() {var result = {}, queryString = location.search.substring(1),re = /([^&=]+)=([^&]*)/g, m;while (m = re.exec(queryString)) {result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);}return result; }// demo var myParam = getQueryString()["myParam"];六、檢查一個(gè)object是否是jQuery object
if(obj instanceof jQuery)七、檢查一個(gè)數(shù)是否為整數(shù)或浮點(diǎn)數(shù)
function isInt(n) {return typeof n === 'number' && n % 1 == 0; }// or ,this support ie3 function isInt(n) {return typeof n === 'number' && parseFloat(n) == parseInt(n, 10) && !isNaN(n); }function isFloat (n) {return n===+n && n!==(n|0); }八、用JavaScript添加style節(jié)點(diǎn)
var css = 'h1 { background: red; }',head = document.getElementsByTagName('head')[0],style = document.createElement('style');style.type = 'text/css'; if(style.styleSheet){style.styleSheet.cssText = css; }else{style.appendChild(document.createTextNode(css)); } head.appendChild(style);九、如何跳出雙重循環(huán)
function foo () {dance:for(var k = 0; k < 4; k++){for(var m = 0; m < 4; m++){if(m == 2){break dance;}}} }十、把一個(gè)Array追加到另一個(gè)Array上
var a=[1,2],b=[3,4,5];a.push.apply(a,b);/*a: [1, 2, 3, 4, 5]*/十一、用jQuery把頁面上的一個(gè)tag換成另一個(gè)tag
如把頁面上所有的code換為pre：
<code> A </code> <code> B </code> <code> C </code>//change to <pre> A </pre> <pre> A </pre> <pre> A </pre>jQuery代碼：
$('code').contents().unwrap().wrap('<pre/>');//or $('code').replaceWith(function(){return $("<pre />").append($(this).contents()); });十二、取數(shù)組中的最小值和最大值
var arr = new Array(); arr[0] = 100; arr[1] = 0; arr[2] = 50;var min = Math.min.apply(null, arr),max = Math.max.apply(null, arr);十三、取兩個(gè)數(shù)組交集
/* finds the intersection of * two arrays in a simple fashion. ** PARAMS* a - first array, must already be sorted* b - second array, must already be sorted** NOTES** Should have O(n) operations, where n is * n = MIN(a.length(), b.length())*/ function arrayIntersection(a, b) {var ai=0, bi=0;var result = new Array();while( ai < a.length && bi < b.length ){if (a[ai] < b[bi] ){ ai++; }else if (a[ai] > b[bi] ){ bi++; }else /* they're equal */{result.push(a[ai]);ai++;bi++;}}return result; }console.log(arrayIntersection([1,2,3],[2,3,4,5,6]));//[2,3]注釋中已經(jīng)說明了，傳入的數(shù)組要已經(jīng)排過序的。
十四、統(tǒng)計(jì)一個(gè)字符串中某段子串出現(xiàn)的次數(shù)
var temp = "This is a string.";var count = temp.match(/is/g).length;十五、方法返回多個(gè)值
//One var mValues= function(){ var a ="a"; var b = "b"; return [a, b]; };var values= mValues(); var valOne= values[0]; var valTwo = values[1];//Two var mValues= function(){ var a= "a";var b = "b"; return {'a': a,'b': b}; };var values= mValues(); var valOne= values.a; var valTwo = values.b;十六、Array迭代器
function createIterator(x) {var i = 0;return function(){return x[i++];}; }var iterator=createIterator(['a','b','c','d','e','f','g']); var current; while(current=iterator()) {console.log(current); }注意，如果數(shù)組中有0、false、""、null、NaN迭代器將會(huì)停止。
十七、根據(jù)日計(jì)算年齡
function getAge(dateString) {var today = new Date();var birthDate = new Date(dateString);var age = today.getFullYear() - birthDate.getFullYear();var m = today.getMonth() - birthDate.getMonth();if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {age--;}return age; }console.log(getAge("2005,8,1"));//6
十八、判斷當(dāng)前頁面是否被放入了iframe中
if(self==top){//not in iframe }else{//in iframe }這段代碼可以用來防止網(wǎng)頁被放入iframe中，不過如果別人定義了self和top變量覆蓋了瀏覽器默認(rèn)值可能會(huì)失效。
十九、把a(bǔ)rguments轉(zhuǎn)換為Array
var args = Array.prototype.slice.call(arguments, 0);二十、日期格式化
來源：javascript日期格式化函數(shù)，跟C#中的使用方法類似
二十一、JavaScript正則中test小用法
var str="a12b123c1234e12345"; var reg=/a(\d{2})b(\d{3})c(\d{4})/; reg.test(str); console.log(RegExp.$1,RegExp.$2,RegExp.$3,RegExp.$4); // output:12 123 1234二十二、JavaScript判斷瀏覽器類型及主版本
function getBrowserInfo(){var Sys = {};var ua = navigator.userAgent.toLowerCase();if (window.ActiveXObject){Sys.b="ie";Sys.v =parseInt(ua.match(/msie ([\d.]+)/)[1]);}else if (document.getBoxObjectFor){Sys.b="firefox";Sys.v =parseInt(ua.match(/firefox\/([\d.]+)/)[1]);}else if (window.MessageEvent && !document.getBoxObjectFor){Sys.b="chrome";Sys.v == parseInt(ua.match(/chrome\/([\d.]+)/)[1]);}else if (window.opera){Sys.b="opera";Sys.v == parseInt(ua.match(/opera.([\d.]+)/)[1]);}else if (window.openDatabase){Sys.b="safari";Sys.v == parseInt(ua.match(/version\/([\d.]+)/)[1]);}return Sys; }var bi=getBrowserInfo(); document.write("Browser:"+bi.b+" Version:"+bi.v);//Browser:ie Version:10轉(zhuǎn)載于:https://www.cnblogs.com/jscode/archive/2012/07/27/2610613.html
總結(jié)
以上是生活随笔為你收集整理的这些年，我收集的JavaScript代码(二)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CoreAnimation编程指南(六)
- 下一篇： EasyUI之简单实现Datagrid分