把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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
vue项目中axios使用详解
Feb 07 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 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中curl_multi的应用
2013/07/17 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
Move.js入门
2017/02/08 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
python3判断url链接是否为404的方法
2018/08/10 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
中国梦主题教育活动总结
2014/05/05 职场文书
五一晚会主持词
2015/07/01 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python