ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery クラスとプラグインを seajs modules_Seajs にカプセル化するメソッド

jQuery クラスとプラグインを seajs modules_Seajs にカプセル化するメソッド

WBOY
WBOYオリジナル
2016-05-16 16:55:381099ブラウズ

注: この記事で使用されている seajs のバージョンは 2.1.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({ "奇数": "赤", "偶数": "青" });
// $("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(起始时间)
    *功能:获取两个时间的差值,必须写一个参数 第二个参数(起始时间)可以
    *不写默认是系统当前时间
    ************************************************************/

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) {
戻る - 1;
}
else {
var alltime = end - start;
var 秒 = alltime / 1000;
var minutes = Math.floor(秒 / 60) );
var hours = Math.floor(分 / 60);
var days = Math.floor(hours / 24);
var CDay = days;
var CHour = 時間 % 24;
var C分 =分 % 60;
var CSecond = Math.floor(秒 % 60);
var str = "";
if (CDa > 0) {
str = CDay "天";
}
if (CHour > 0) {
str = CHour "小時間";
}
if (CMinute > ; 0) {
str = CMinute "分钟";
}
if (CSecond > 0) {
str = CSecond "秒";
}
return str;
}
};


exports.GetTime = GetTime;
exports.Get Year = Get Year;
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 は、多くのパラメータがあることを示すためによく使用されます。 = $ .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", );}); .fn.wyhinterlaced = function (オプション)複数のパラメータを表すためによく使用されます。
vardefaultVal = {
奇数: '#DDEDFB',
偶数: '#fff',
};

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

>}
});
}
})(jQuery);
}
})


メソッドの呼び出し:

共有メソッドを使用してプラグインを呼び出します




コードをコピーします


コードは次のとおりです:

define(function (require, exports, module) {

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

require('./ js/jquery_tr')($) ;//jqueryに共有

$(document).ready(function () { $("tr").wyhinterlaced({ "奇数": "赤", "偶数": "青" }); $( "tr").wyhhover();
})
});

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。