把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 相关文章推荐
JQuery中extend使用介绍
Mar 13 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
vue模块移动组件的实现示例
May 20 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你的验证码安全码?
2007/01/02 PHP
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
opencv python图像梯度实例详解
2020/02/04 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
办理退休介绍信
2014/01/09 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
春晚观后感
2015/06/11 职场文书
新闻通讯稿范文
2015/07/22 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
Navicat连接MySQL错误描述分析
2021/06/02 MySQL