javascript常用代码段搜集


Posted in Javascript onDecember 04, 2014

1.json转字符串

function json2str(o) {

    var arr = [];

    var fmt = function (s) {

        if (typeof s == 'object' && s != null) return json2str(s);

        return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s;

    };

    for (var i in o) arr.push("'" + i + "':" + fmt(o[i]));

    return '{' + arr.join(',') + '}';

}

2.时间戳转为Date

function fromUnixTime(timeStamp) {

    if (!timeStamp || timeStamp < 1000 || timeStamp == ' ') return "";

    var theDate = new Date(parseInt(timeStamp) * 1000);

    return theDate;

}

3.Data-format

// 作者: meizz  

// 对Date的扩展,将 Date 转化为指定格式的String   

// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,   

// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)   

// 例子:   

// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2012-12-02 08:12:04.423   

// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2012-12-02 8:12:4.18   

Date.prototype.Format = function(fmt) {  

    var o = {

        "M+": this.getMonth() + 1,                 //月份   

        "d+": this.getDate(),                    //日   

        "h+": this.getHours(),                   //小时   

        "m+": this.getMinutes(),                 //分   

        "s+": this.getSeconds(),                 //秒   

        "q+": Math.floor((this.getMonth() + 3) / 3), //季度   

        "S": this.getMilliseconds()             //毫秒   

    };

    if (/(y+)/.test(fmt))

        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

    for (var k in o)

        if (new RegExp("(" + k + ")").test(fmt))

            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));

    return fmt;

};

4.日期上增加n天

function addDay(number) {

        return fromUnixTime(new Date().getTime() / 1000 + 24 * 60 * 60 * number);

}

5. 使用 iframe 时,父窗体与子窗体之间的相互调用

// 父窗体调用子窗体内的函数  

window.frames['ifm_id'].valueChange("id_101");  

// 子窗体调用父窗体的函数  

parent.refreshTree("nodeId_202"); 

6. 弹出窗体与返回值

// 弹出窗体  

var url = "http://www.baidu.com";  

win=window.showModalDialog(url,window,"dialogLeft:400;dialogTop:200;dialogWidth:560px;dialogHeight:380px;scroll:yes;menubar:no;toolbar:no;status:no;");  

// 在弹出窗体中设置返回值  

var result = new Array();  

result[0] = "id_101";  

result[1] = "name_202";  

window.returnValue = result;  

window.close(); 

7. javascript 作用域[只有全局作用域和函数作用域,javascript没有块作用域]

// 1. 全局作用域  

var id = "global variable";    // 1.1 在函数外部定义的变量  

function showMsg(){      

    message = "global message";// 1.2 未定义而直接赋值的变量  

                               //     在第一次使用时被定义为全局变量  

}  

// 2. 函数作用域  

function doCheck(){  

    var data = "function data";// 2.1 在函数内部定义的变量  

} 

8. javascript 继承机制

// 1. 对象冒充继承  

function Person(strName){  

    // private fields  

    var name = strName;  

    // public methods  

    this.getName = function(){  

        return name;  

    };      

}  

function Student(strName,strSchool){  

    // 定义父类的属性及方法      

    this.parent = Person;  

    this.parent(strName);  

    delete this.parent;        // 删除临时变量 parent  

    // 定义新属性及方法      

    // private fields  

    var school = strSchool;  

    // public methods  

    this.getSchool = function(){  

        return school;  

    };       

}  

// 2. Funtion 对象的 call(..) 或 apply(..) 继承  

//    call 和 apply 的区别在于:  

//      call  的第二个参数为可变参数;  

//      apply 的第二个参数为 Array;  

function Animal(strName,intAge){  

    // private fields  

    var name = strName;  

    var age = intAge;  

    // public methods  

    this.getName = function(){  

        return name;  

    };   

    this.getAge = function(){  

        return age;  

    };  

}  

function Cat(strName,intAge,strColor){  

    // 定义父类的属性及方法      

    Animal.call(this,strName,intAge);  

    // Animal.apply(this,new Array(strName,intAge));  

    // 定义新属性及方法      

    // private fields  

    var color = strColor;  

    // public methods  

    this.getInfo = function(){  

        return "name:" + this.getName() + "\n"  

             + "age:" + this.getAge() + "\n"  

             + "color:" + color;  

    };  

}  

// 3. prototype 继承  

//    prototype 声明的属性及方法被所有对象共享  

//    prototype 只有在读属性的时候会用到  

Function.prototype.extend = function(superClass){  

    // 此处的 F 是为了避免子类访问父类中的属性 this.xxx  

    function F(){};  

    F.prototype = superClass.prototype;  

    // 父类构造函数  

    this.superConstructor = superClass;  

    this.superClass = superClass.prototype;  

    this.prototype = new F();  

    this.prototype.constructor = this;  

};  

Function.prototype.mixin = function(props){      

    for (var p in props){          

        this.prototype[p] = props[p];          

    }  

};  

function Box(){}  

Box.prototype = {      

    getText : function(){  

        return this.text;  

    },  

    setText : function(text){  

        this.text = text;  

    }  

};  

function CheckBox(){}  

CheckBox.extend(Box);  

CheckBox.mixin({  

    isChecked : function(){  

        return this.checked;  

    },  

    setChecked : function(checked){  

        this.checked = checked;  

    }  

}); 

9. call , apply & bind

// thisArg 表示在 fun 内部时 this 所指示的对象  

// call & apply 将立即执行 fun 并返回结果  

var result = fun.call(thisArg,arg1,...);  

var result = fun.apply(thisArg,[argsArray]);  

// thisArg 表示在 fun 内部时 this 所指示的对象  

// bind 返回的是一个匿名函数  

var tmpfun = fun.bind(thisArg);  

var result = tmpfun(arg1,...); 
<script type="text/javascript">  

/** 

 * 扩展 Function 的功能 

 */  

Function.prototype.bind = function(obj){  

    var method = this;  

    var tmpfun = function(){  

        return method.apply(obj,arguments);  

    };  

    return tmpfun;  

}  

function Parent(){  

    this.name = "parent";  

}  

function Child(){  

    this.name = "child";  

    this.getName = function(time){  

        return time + " " + this.name;  

    };  

}  

var parent = new Parent();  

var child = new Child();  

alert(child.getName(1));                // show 1 child  

alert(child.getName.call(parent,2));    // show 2 parent [call & apply 会立即执行]  

var tmpfun = child.getName.bind(parent);// bind 不会立即执行  

alert(tmpfun(3));                       // show 3 parent  

</script> 

10. js "==" Operator

转换规则  

   如果一个操作数是 Boolean 值,则比较之前将其转成数字:false -> 0, true -> 1;  

   如果一个操作数是数字,另一操作数是字符串,则比较之前将字符串转成数字;  

   如果一个操作数是对象,另一操作数是数字或字符串,则比较之前会将对象转为基本类型,  

       引擎会先尝试调用 valueOf(),如果 valueOf() 没有 override 或返回一个对象,  

       则引擎会尝试调用 toString(),如果 toString() 没有 override 或返回一个对象,则抛出异常;  

   如果是两个对象进行比较,则判断它们是否引用同一对象;  

   如果一个操作数是 NaN, == 将返回 false, != 将返回 true;  

   null 和 undefined 与其它值比较将返回 false,  

       但 null == null, undefined == undefined, null == undefined;  

   参与比较时 null 和 undefined 不能转为其它值;   
Javascript 相关文章推荐
jquery 实现的全选和反选
Apr 15 Javascript
json对象转字符串如何实现
Dec 02 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
Seajs的学习笔记
Mar 04 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 Javascript
5种处理js跨域问题方法汇总
Dec 04 #Javascript
用js读、写、删除Cookie代码续篇
Dec 03 #Javascript
js字符串完全替换函数分享
Dec 03 #Javascript
基于jquery实现等比缩放图片
Dec 03 #Javascript
javascript简单实现图片预加载
Dec 03 #Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 #Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 #Javascript
You might like
php+dbfile开发小型留言本
2006/10/09 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
Python subprocess模块详细解读
2018/01/29 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
django实现模型字段动态choice的操作
2020/04/01 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
会计专业毕业生自我评价
2013/09/25 职场文书
高三自我鉴定
2013/10/23 职场文书
优秀部门获奖感言
2014/02/14 职场文书
民族学专业求职信
2014/07/28 职场文书
2016春节家属慰问信
2015/03/25 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
大学生暑期实践报告
2015/07/13 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
Windows7下FTP搭建图文教程
2022/08/05 Servers