把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 相关文章推荐
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
javascript中字符串的定义示例代码
Dec 19 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
一个可复用的vue分页组件
May 15 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
angularjs模态框的使用代码实例
Dec 20 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 Javascript
three.js如何实现3D动态文字效果
Mar 03 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
javascript常用函数(2)
2015/11/05 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
使用python装饰器验证配置文件示例
2014/02/24 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
py-charm延长试用期限实例
2019/12/22 Python
使用python求解二次规划的问题
2020/02/29 Python
Python3开发环境搭建详细教程
2020/06/18 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
交通法规咨询中心工作职责
2013/11/27 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
迁户口计划生育证明
2014/10/19 职场文书
党员作风建设整改方案
2014/10/27 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL