首頁 >web前端 >js教程 >把jQuery的類別、外掛程式封裝成seajs的模組的方法_Seajs

把jQuery的類別、外掛程式封裝成seajs的模組的方法_Seajs

WBOY
WBOY原創
2016-05-16 16:55:381093瀏覽

註:本文所使用的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 !starttime) {
            start = new Date( ).getTime();
        }
        else {
        🎜>        if (start > end) {
           返回- 1 ;
        }
        else {
           1000;
            var 分鐘= Math.floor(秒/ 60) ;
            var小時= Math.floor(分鐘/ 60);
            var days = Math.floor(小時/ 24);
      var CHour = 小時% 24;
            var C 分鐘=分鐘% 60;
            var CSecond = Math.floor(秒% 60);
        0) {
                str = CDay "天";
            }
           if (CHour >0) {
          }
            if (CMinute > 0) {
          }
            if (CSecond > 0) {
                         return str;
        }
    };


   exports.GetTime = GetTime;
   exports.GetYear = GetYear;
   exports.GetMonth = Getnid;
   exports.GetMonth = Getnid;
   exports.GetMonth = Getnid;
 
   exports.GetHours = GetHours;
   exports.GetMinute = GetMinute;
   exports.GetSecond = GetSecond;

   exports.GetSecond = GetSecond;

   exports.GetSecond = GetSecond; s.TimeSubNormal = TimeSubNormal;

})

調用方法:



複製代碼

代碼如下:define(function (require, 導出, 模組) {
    var $ = require('./js/jquery');

    var a=require('./js/time');    alert(a.GetTime(3));});三、把jquery插件的封裝成seajs模組
下面是把jquery插件的一個是把jquery的一個外掛程式封裝成模組的範例


複製程式碼


程式碼如下:
define(function (require, exports, moudles) {
    return function (jquery) {
         .fn.wyhhover = function (options) {//options 常用這個表示有許多個參數。       var obj = $ .extend(defaultVal, options);

          return this.each(function () {
          var oldBgColor = tabObject.css(" background-color"); //取得目前物件的背景色
            tabObject.hover(//定義一個hover方法。
      },
            function () {tabObject.css("background-color", oldBgColor);});
    不同的顏色
        $ .fn.wyhinterlaced = function (options) {//options 常用這個表示有許多個參數。 ',
        };

         var obj = $.extend(defaultVal, options);

          return this.each(function () {
            var tabObject = $(this 🎜>           {
              tabObject.css("background-color", obj.odd);
                 tabObject.css("background-color", obj.even);
           }
});
        }
        })(jquery);
    }
})


調用方法:

使用共享的方式調用插件




複製代碼


代碼如下:

define(function (require, exports, module) {

    var $ = require('./js/jquery');

    require('./js/jquery');    require('./js/jquery');($>    require('./js/jquery')($> ;//分享給jquery

    $(document).ready(function () {        $("tr").wyhinterlaced({ "odd": "red", " "tr").wyhhover();
    })
});

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn