当前位置： 移动技术网 > IT编程>脚本编程>Seajs > 把jQuery的类、插件封装成seajs的模块的方法

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

2018年04月26日  | 移动技术网IT编程  | 我要评论

注：本文使用的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();
    })
});

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网