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 相关文章推荐
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
jQuery动态添加
Apr 07 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
Vue组件中slot的用法
Jan 30 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 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读取javascript设置的cookies的代码
2010/04/12 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
Python实现的归并排序算法示例
2017/11/21 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
关于python3中setup.py小概念解析
2019/08/22 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
python图片合成的示例
2020/11/09 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
英国女装网上商店:I Saw It First
2018/10/18 全球购物
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
新年寄语大全
2014/04/12 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书