把jQuery的类、插件封装成seajs的模块的方法


Posted in Javascript onMarch 12, 2014

注:本文使用的seajs版本是2.1.1
一、把Jquery封装成seajs的模块

define(function () {
   //这里放置jquery代码 把你喜欢的jquery版本放进来就好了 

return $.noConflict();
});

调用方法:
这样引进就可以像以前一样使用jquery

define(function (require, exports, module) {
    var $ = require('./js/jquery');
  
   // $(document).ready(function () {
     //   $("tr").wyhinterlaced({ "odd": "red", "even": "blue" });
     //   $("tr").wyhhover();
   // })
});

二、把jquery的类封装成seajs模块
define(function (require, exports, module) {
    var $ = require("../js/jquery");

    var weekday = new Array(7)
    weekday[0] = "星期一";
    weekday[1] = "星期二";
    weekday[2] = "星期三";
    weekday[3] = "星期四";
    weekday[4] = "星期五";
    weekday[5] = "星期六";
    weekday[6] = "星期日";
     function GetType(arg) {
        var today = new Date();
        var year = today.getFullYear();
        var month = today.getMonth() + 1;
        var td = today.getDate();
        var d = weekday[today.getDay() - 1];
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        switch (arg) {
            case 1:  //2013-09-09 09:31:56
                return year + "-" + month + "-" + td + "  " + h + ":" + m + ":" + s; break;
            case 2:  //2013-09-09 (星期一) 09:31:56
                return year + "-" + month + "-" + td + " (" + d + ") " + h + ":" + m + ":" + s; break;
            case 3:  //09-09-2013 09:31:56
                return month + "-" + td + "-" + year + "  " + h + ":" + m + ":" + s; break;
            case 4:  //09-09-2013 星期一 09:31:56
                return month + "-" + td + "-" + year + " (" + d + ") " + h + ":" + m + ":" + s; break;
            case 5:  //2013年09月09日 09时31分秒56
                return year + "年" + month + "月" + td + "日  " + h + "时" + m + "分" + s + "秒"; break;
            case 6:  //2013年09月09日 星期一 09时31分秒56
                return year + "年" + month + "月" + td + "日  (" + d + ")  " + h + "时" + m + "分" + s + "秒"; break;
        }
    };
    /*******************************************************
    /*函数名:GetTime
    /*参数:数值(包括整形浮点型都可以,浮点型会做四舍五入处理,如果不是数字,
    函数将采用默认的时间格式返回!时间样式有15【1-15是有效的时间样式
    超出或小于都将采用默认的样式 样式1】中)
    /*功能  获取当前的系统时间 可定制格式
    *******************************************************/
     function  GetTime(arg) {
        if (!isNaN(arg)) {
            var num = Math.round(arg);
            if (num < 7 && num > 0) {
                return GetType(num);
            }
            else {
                var str;
                var str2;
                switch (num) {
                    case 0: return GetType(1); break;
                    case 7: str = GetType(2); return str.replace(/星期/, ""); break;
                    case 8: str = GetType(1); return str.replace(/-/, "/").replace(/-/, "/"); break;
                    case 9: str = GetType(2); return str.replace(/-/, "/").replace(/-/, "/");
                    case 10: str = GetType(2); str2 = str.replace(/-/, "/").replace(/-/, "/"); return str2.replace(/星期/, ""); break;
                    case 11: str = GetType(4); return str.replace(/星期/, ""); break;
                    case 12: str = GetType(3); return str.replace(/-/, "/").replace(/-/, "/"); break;
                    case 13: str = GetType(4); return str.replace(/-/, "/").replace(/-/, "/");
                    case 14: str = GetType(4); str2 = str.replace(/-/, "/").replace(/-/, "/"); return str2.replace(/星期/, ""); break;
                    case 15: str = GetType(6); return str.replace(/星期/, "");
                    default: return GetType(1); break;
                }
            }
        }
        else {
            return GetType(1);
        }
    };

    /* 获取系统的当前年数*/
     function GetYear() {
        var today = new Date();
        return today.getFullYear();
    };

    /*获取系统的当前的月数*/
      function GetMonth() {
        var today = new Date();
        return today.getMonth() + 1; ;
    };
    /*获取系统的当前的天数*/
      function GetDay() {
        var today = new Date();
        return today.getDate(); ;
    };
    /*获取系统的当前的小时*/
   function GetHours() {
        var today = new Date();
        return today.getHours();
    };
    /*获取系统的当前的分钟*/
     function GetMinute() {
        var today = new Date();
        return today.getMinutes();
    };
    /*获取系统的当前的秒数*/
     function GetSecond() {
        var today = new Date();
        return today.getSeconds();
    };

    /************************************************************
    *函数名:TimeSubMillisecond
    *参数:endtime(结束时间) starttime(起始时间)
    *功能:获取两个时间的毫秒级的差值,必须写一个参数 第二个参数(起始时间)可以
    *不写默认是系统当前时间
    ************************************************************/
    function  TimeSubMillisecond(endtime, starttime) {
        var end = new Date(endtime).getTime();
        if (!endtime) {
            return -1;
        }
        if (!starttime) {
            start = new Date().getTime();
        }
        else {
            start = new Date(starttime).getTime();
        }
        if (start > end) {
            return -1;
        }
        else {
            return end - start;
        }
    };
    /************************************************************
    *函数名:TimeSubNormal
    *参数:endtime(结束时间) starttime(起始时间)
    *功能:获取两个时间的差值,必须写一个参数 第二个参数(起始时间)可以
    *不写默认是系统当前时间
    ************************************************************/
      function  TimeSubNormal(endtime, starttime) {
        var end = new Date(endtime).getTime();
        var start;
        if (!starttime) {
            start = new Date().getTime();
        }
        else {
            start = new Date(starttime).getTime();
        }
        if (start > end) {
            return -1;
        }
        else {
            var alltime = end - start;
            var seconds = alltime / 1000;
            var minutes = Math.floor(seconds / 60);
            var hours = Math.floor(minutes / 60);
            var days = Math.floor(hours / 24);
            var CDay = days;
            var CHour = hours % 24;
            var CMinute = minutes % 60;
            var CSecond = Math.floor(seconds % 60);
            var str = "";
            if (CDay > 0) {
                str += CDay + "天";
            }
            if (CHour > 0) {
                str += CHour + "小时";
            }
            if (CMinute > 0) {
                str += CMinute + "分钟";
            }
            if (CSecond > 0) {
                str += CSecond + "秒";
            }
            return str;
        }
    };

    exports.GetTime = GetTime;
    exports.GetYear = GetYear;
    exports.GetMonth = GetMonth;
    exports.GetDay = GetDay;
    exports.GetHours = GetHours;
    exports.GetMinute = GetMinute;
    exports.GetSecond = GetSecond;
    exports.TimeSubMillisecond = TimeSubMillisecond;
    exports.TimeSubNormal = TimeSubNormal;
})

调用方法:

define(function (require, exports, module) {
    var $ = require('./js/jquery');
    var a=require('./js/time');
    alert(a.GetTime(3));
});

三、把jquery 插件的封装成seajs模块
下面是把jquery的一个插件封装成模块的例子
define(function (require, exports, moudles) {
    return function (jquery) {
        (function ($) {
             //给当前行高亮
  $.fn.wyhhover = function (options) {//options 经常用这个表示有许多个参数。 
        var defaultVal = {
         BackColor: '#ccc',
        };         var obj = $.extend(defaultVal, options);
          return this.each(function () {
            var tabObject = $(this); //获取当前对象 
            var oldBgColor = tabObject.css("background-color"); //获取当前对象的背景色 
            tabObject.hover(//定义一个hover方法。
            function (){tabObject.css("background-color", obj.BackColor);},
            function () {tabObject.css("background-color", oldBgColor);});
        });
        }
     //使奇偶行不同的颜色
        $.fn.wyhinterlaced = function (options) {//options 经常用这个表示有许多个参数。 
        var defaultVal = {
         odd: '#DDEDFB',
         even: '#fff',
        };

         var obj = $.extend(defaultVal, options);
          return this.each(function () {
            var tabObject = $(this); //获取当前对象 
           if(tabObject.index()%2==0)
           {
              tabObject.css("background-color", obj.odd);
           }else
           {
             tabObject.css("background-color", obj.even);
           }
        });
        }
        })(jquery);
    }
})

调用方法:
使用共享的方式调用插件

define(function (require, exports, module) {
    var $ = require('./js/jquery');
    require('./js/jquery_tr')($);//共享给jquery
    $(document).ready(function () {
        $("tr").wyhinterlaced({ "odd": "red", "even": "blue" });
        $("tr").wyhhover();
    })
});
Javascript 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
两个DIV等高的JS的实现代码
Dec 23 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
jQuery技巧总结
Jan 01 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 #Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 #Javascript
JavaScript中奇葩的假值示例应用
Mar 11 #Javascript
Javascript加载速度慢的解决方案
Mar 11 #Javascript
js解析json读取List中的实体对象示例
Mar 11 #Javascript
JS图片无缝、平滑滚动代码
Mar 11 #Javascript
js 针对html DOM元素操作等经验累积
Mar 11 #Javascript
You might like
谈谈PHP语法(3)
2006/10/09 PHP
apache php模块整合操作指南
2012/11/16 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
python if not in 多条件判断代码
2016/09/21 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
python操作redis方法总结
2018/06/06 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
打印机墨盒:123Inkjets
2017/02/16 全球购物
GWebs公司笔试题
2012/05/04 面试题
若干个Java基础面试题
2015/05/19 面试题
售后专员岗位职责
2013/12/08 职场文书
《都江堰》教学反思
2014/02/07 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
新年爱情寄语
2014/04/08 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
投标邀请书范本
2015/02/02 职场文书
销售员自我评价
2015/03/11 职场文书
心得体会格式及范文
2016/01/25 职场文书