jQuery 클래스와 플러그인을 seajs 모듈로 캡슐화하는 방법_Seajs

참고: 이 기사에 사용된 seajs 버전은 2.1.1
1입니다. Jquery를 seajs 모듈로 캡슐화합니다.

코드 복사 코드는 다음과 같습니다.

define(function () {

//여기에 jquery 코드를 넣으세요. 좋아하는 jquery 버전을 넣으세요.

return $.noConflect();
});

호출 방법 :
이렇게 하면 기존과 같이 jquery를 사용할 수 있습니다

코드 복사 코드는 다음과 같습니다.

define(function(require,exports,module){
var $ = require('./js/jquery');

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

2. 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(起始时间)
    *功能：获取两个时间的差值，必须写一个参数 第二个参数（起始时间）可以
    *不写默认是系统当前时间
    ************************************************************/

      함수  TimeSubNormal(endtime, starttime) {
        var end = new Date(endtime).getTime();
        var start;
        if (!starttime) {
            start = new Date( ).getTime();
        }
        else {
            start = new Date(starttime).getTime();
        }
        if (시작 > 끝) {
           반환 - 1;
        }
        else {
           var alltime = end - start;
            var 초 = 전체 시간 / 1000;
            var 분 = Math.floor(초 / 60);
            var 시간 = Math.floor(분/60);
            var days = Math.floor(시간/24);
            var CDay = 일;
            var CHour = 시간 % 24;
           var Cmin ute = 분 % 60;
            var CSecond = Math.floor(초 % 60);
            var str = "";
            if (CDay > 0) {
               str = CDay "천" ;
} if (chour & gt; 0) { str = chour "小时"; if (cminute & gt;
            }
            return str;
        }
    };


    수출.GetTime = GetTime;
    수출.GetYear = GetYear;
    수출.GetMonth = GetMonth;
    수출.GetDay = GetDay;

    수출.GetHours = GetHours;

    수출.GetMinute = GetMinute;
    수출.GetSecond = GetSecond;
    수출.TimeSubMillisecond = TimeSubMillisecond;
    수출.TimeSubNormal = TimeSubNormal;

})

调사용 방법:

复代码
代码如下:

define(function (요구, 내보내기, 모듈) {    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(//호버 메서드를 정의합니다.
      function (){tabObject.css("Background-color", obj.BackColor); },
               function () {tabObject.css("ground-color",         );});                            여러 매개변수를 나타내는 데 사용됩니다.
var defaultVal = {
홀수: '#DDEDFB',
짝수: '#fff',
};

var obj = $.extend(defaultVal, 옵션);

                                                                                                             ~ >        } });

}

})(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(); })});