`
七七八八
  • 浏览: 46210 次
社区版块
存档分类
最新评论

这些年,我收集的JavaScript代码(二)

阅读更多

一、JavaScript跨平台事件

  对于跨平台事件我们一般这么写(只例举添加事件):

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,所以跨平台的事件更好的写法是这样的:

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;
    }
}

二、合并两个Array并去掉重复项

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 errors

if(neverDeclared == null) //throws ReferenceError: neverDeclared is not defined

  so,typeof === "undefined" is better!

四、setTimeout(fn, 0)的意义

  浏览器同时要做很多事,这些事情以队列的方式存在,执行JavaScript只是其中之一,setTimeout(fn, 0)表面上看是立即执行的意思,但实际上只是在浏览器事件队列中添加了一个新的事件,由于队列是先进先出,所以fn会等等到当前队列中的事件执行完后再执行。由于JavaScript的定时器回调函数是异步执行的,所以产生的效果就是等页面上同步事件(包括页面渲染与同步JS代码)执行完之后再执行。

  一个简单的示例:

<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会报错,因为页面执行到这里时还没有img,但two却可以。

五、增强版取URL中的参数

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"];

六、检查一个object是否是jQuery object

if(obj instanceof jQuery)

七、检查一个数是否为整数或浮点数

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节点

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);

九、如何跳出双重循环

function foo ()
{
    dance:
    for(var k = 0; k < 4; k++){
        for(var m = 0; m < 4; m++){
            if(m == 2){
                break dance;
            }
        }
    }
}

十、把一个Array追加到另一个Array上

var a=[1,2],b=[3,4,5];

a.push.apply(a,b);

/*a: [1, 2, 3, 4, 5]*/

十一、用jQuery把页面上的一个tag换成另一个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());
});

十二、取数组中的最小值和最大值

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);

十三、取两个数组交集

/* 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]

  注释中已经说明了,传入的数组要已经排过序的。

十四、统计一个字符串中某段子串出现的次数

var temp = "This is a string.";

var count = temp.match(/is/g).length;

十五、方法返回多个值

//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);
}

  注意,如果数组中有0、false、""、null、NaN迭代器将会停止。

十七、根据日计算年龄

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

十八、判断当前页面是否被放入了iframe中

if(self==top){
      //not in iframe
}else{
      //in iframe
}

  这段代码可以用来防止网页被放入iframe中,不过如果别人定义了self和top变量覆盖了浏览器默认值可能会失效。

十九、把arguments转换为Array

var args = Array.prototype.slice.call(arguments, 0);

二十、日期格式化
  来源:javascript日期格式化函数,跟C#中的使用方法类似

Date.prototype.toString=function(format,loc){
    var time={};
    time.Year=this.getFullYear();
    time.TYear=(""+time.Year).substr(2);
    time.Month=this.getMonth()+1;
    time.TMonth=time.Month<10?"0"+time.Month:time.Month;
    time.Day=this.getDate();
    time.TDay=time.Day<10?"0"+time.Day:time.Day;
    time.Hour=this.getHours();
    time.THour=time.Hour<10?"0"+time.Hour:time.Hour;
    time.hour=time.Hour<13?time.Hour:time.Hour-12;
    time.Thour=time.hour<10?"0"+time.hour:time.hour;
    time.Minute=this.getMinutes();
    time.TMinute=time.Minute<10?"0"+time.Minute:time.Minute;
    time.Second=this.getSeconds();
    time.TSecond=time.Second<10?"0"+time.Second:time.Second;
    time.Millisecond=this.getMilliseconds();
    time.Week=this.getDay();

    var MMMArrEn=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
    var MMMArr=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
    var WeekArrEn=["Sun","Mon","Tue","Web","Thu","Fri","Sat"];
    var WeekArr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];

    var oNumber=time.Millisecond/1000;

    if(format!=undefined && format.replace(/\s/g,"").length>0){
        if(loc!=undefined && loc =="en"){
            MMMArr=MMMArrEn.slice(0);
            WeekArr=WeekArrEn.slice(0);
        }
        format=format
            .replace(/yyyy/ig,time.Year)
            .replace(/yyy/ig,time.Year)
            .replace(/yy/ig,time.TYear)
            .replace(/y/ig,time.TYear)
            .replace(/MMM/g,MMMArr[time.Month-1])
            .replace(/MM/g,time.TMonth)
            .replace(/M/g,time.Month)
            .replace(/dd/ig,time.TDay)
            .replace(/d/ig,time.Day)
            .replace(/HH/g,time.THour)
            .replace(/H/g,time.Hour)
            .replace(/hh/g,time.Thour)
            .replace(/h/g,time.hour)
            .replace(/mm/g,time.TMinute)
            .replace(/m/g,time.Minute)
            .replace(/ss/ig,time.TSecond)
            .replace(/s/ig,time.Second)
            .replace(/fff/ig,time.Millisecond)
            .replace(/ff/ig,oNumber.toFixed(2)*100)
            .replace(/f/ig,oNumber.toFixed(1)*10)
            .replace(/EEE/g,WeekArr[time.Week]);
    }
    else{
        format=time.Year+"-"+time.Month+"-"+time.Day+" "+time.Hour+":"+time.Minute+":"+time.Second;
    }
    return format;
}

var d=new Date();
console.log(d.toString());    //2012-7-27 9:26:52
console.log(d.toString(""));    //2012-7-27 9:26:52
console.log(d.toString("yyyy-MM-dd HH:mm:ss"));    //2012-07-27 09:26:52
console.log(d.toString("yyyy年MM月dd日 HH:mm:ss"));    //2012年07月27日 09:26:52
console.log(d.toString("yyyy-MM-dd HH:mm:ss fff"));    //2012-07-27 09:26:52 237
console.log(d.toString("yyyy年 MMM dd EEE"));    //2012年 七月 27 星期五
console.log(d.toString("yyyy MMM dd EEE","en"));    //2012 Jul 27 Fri

6
12
分享到:
评论

相关推荐

    JavaScript经典代码收集

    这个“JavaScript经典代码收集”压缩包显然包含了各种实用且经典的JavaScript代码片段,对于学习和提升JavaScript技能非常有帮助。下面我们将深入探讨其中可能涵盖的一些重要知识点。 1. **变量与数据类型**:...

    javascript网站广告代码大全

    通过学习和理解这些JavaScript广告代码,开发者可以掌握如何在自己的网站上创建和优化广告,同时提升网站的用户体验和商业价值。对于网页设计师和前端开发者来说,熟练掌握这些技术是提升专业技能的重要途径。这个...

    Javascript代码集

    在“tx20161203”这个压缩包文件中,可能包含了2016年12月3日收集的JavaScript代码示例、库或项目,这些内容可以帮助你理解和掌握上述JavaScript的各个方面。无论是初学者还是有经验的开发者,都能从中获取有价值的...

    JavaScript经典代码大全收集.pdf

    这份文档《JavaScript经典代码大全收集.pdf》中展示了许多JavaScript的经典代码片段,这些片段涵盖了JavaScript在网页编程中的常见用途,包括操作DOM元素、事件处理、页面跳转、弹窗、焦点控制等多个方面。...

    个人收集JavaScript源代码集

    标题“个人收集JavaScript源代码集”表明这是一份包含各种JavaScript代码示例和个人实践的集合。这份资源可能是为了帮助开发者学习、理解和参考JavaScript的各种功能和编程技巧。其中的源代码可能涵盖了基础语法、...

    网页常用Javascript经典代码收集

    这段JavaScript代码简单地读取并显示文档的`lastModified`属性,即页面最后一次被修改的时间。这对于需要了解页面更新情况的用户来说非常有用。`document.write`直接将结果输出到页面上,不过在现代网页开发中,更...

    收集JavaScript代码的运行时类型信息

    "收集JavaScript代码的运行时类型信息"这个主题旨在探讨如何有效地获取和利用这些信息。 JavaScript是一种动态类型语言,其变量可以存储不同类型的值,包括数字、字符串、布尔值、null、undefined、对象(包括数组...

    Iroh是JavaScript的动态代码分析工具

    标题中的"Iroh是JavaScript的动态代码分析工具"表明Iroh是一个专门用于帮助开发者在运行时理解和优化JavaScript代码的工具。动态代码分析意味着它可以在程序执行过程中收集数据,而不仅仅是静态地分析源代码。这种...

    收集来的JavaScript代码

    这里提供的代码片段展示了JavaScript在实际开发中的多个应用场景。 首先,我们看到一个`doSelectUser`函数,它用来打开一个模态对话框。这个对话框的大小、位置和其他特性可以通过`strFeatures`参数设置。`window....

    Javascript常用代码收集(一)

    这篇“JavaScript常用代码收集(一)”旨在整理和分享一些JavaScript的基础及进阶知识点,帮助开发者提升工作效率。 在JavaScript中,`null`是一个特殊的值,它表示“无”或“空”。不同于其他编程语言中的空值,...

    从零开始学JavaScript 源代码

    第一篇 JavaScript入门篇 第1章 初步了解JavaScript 1.1 JavaScript是什么 1.2 JavaScript能做什么 1.2.1 表单数据合法性验证 1.2.2 页面特效 1.2.3 交互式菜单 1.2.4 动态页面 ...第15章 JavaScript常用特效收集

    混淆恶意JavaScript代码的多特征检测识别与分析.pdf

    我们提取的82个特征中,包括47个新特征,这些特征能够更好地描述混淆恶意JavaScript代码的特点。 在实验中,我们使用了5,525份JavaScript正常与混淆的恶意代码用于训练与测试。实验结果表明,通过引入新的特征,...

    对下载驱动攻击和恶意代码JavaScript代码的监测与分析

    - **学习阶段**:收集大量的正常JavaScript代码样本,通过机器学习建立基准模型。 - **检测阶段**:实时监控网页中的JavaScript代码执行情况,提取特征并与基准模型对比。 - **训练阶段**:根据模型对特征值的...

    基于卷积神经网络的JavaScript恶意代码检测方法.pdf

    本文提出了一种基于卷积神经网络的JavaScript恶意代码检测方法,通过爬虫工具收集良性和恶意的JavaScript脚本代码,获得样本数据,并将JavaScript样本转换为相对应的灰阶图像,得到图像数据集。然后,通过构建卷积...

    javascript 常用广告代码

    JavaScript是一种广泛应用于网页开发...在"常用的网页广告代码"这个压缩包中,可能包含了实现以上功能的JavaScript代码示例和库,供开发者参考和学习。理解并熟练运用这些知识点,有助于提升网页广告的效率和用户体验。

    收集的Javascript定义信息

    从给定的HTML和JavaScript代码片段中,我们可以深入解析并理解一些重要的JavaScript概念与实践,尤其是在网页中的应用。以下是对这些知识点的详细说明: ### 1. DOM操作:`getElementById`与`getElementsByTagName`...

    JavaScript代码收集

    从给定的文件信息来看,主要涉及的是JavaScript代码片段及其注释,涵盖了窗口操作、XML处理、表单验证以及日期时间格式验证等多个方面。下面将对这些知识点进行详细解析: ### 1. 弹出模态对话框 ```javascript ...

    JavaScript资料收集(很全)

    理解这些基本概念是编写任何JavaScript代码的基础。 2. **对象和原型**:JavaScript采用基于原型的继承机制,对象可以包含属性和方法,而原型链允许对象之间共享属性和方法。理解如何创建和操作对象,以及原型和...

    100个直接可以拿来用的JavaScript实用功能代码片段(1-10)

    90、原生JavaScript常用的正则表达式大收集 91、原生JavaScript实现窗体改变事件resize的操作(兼容所以的浏览器) 92、原生JavaScript用正则清除空格分左右 93、原生JavaScript判断变量是否空值 94、原生JavaScript...

    1号店完整代码_js代码_一号店代码_京东1号店_

    - **js**:JavaScript代码库,包含实现上述功能的具体代码。 - **.idea**:这是IDE(如IntelliJ IDEA)的工作目录,包含了项目配置信息,对开发者来说很有用,但对最终用户来说是不可见的。 综上所述,这个项目是一...

Global site tag (gtag.js) - Google Analytics