首页 > 代码库 > seajs的一次尝试
seajs的一次尝试
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。
与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。
SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑。
SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护。
特点:
1、SeaJS 遵循CMD规范,可以像Node.js一般书写模块代码。
2、依赖的自动加载、配置的简洁清晰。
开始第一次尝试:
在html代码加载seajs lib
<script src="http://www.mamicode.com/sea.js"></script> <script> seajs.use(["common","index"]); </script>
如上js中,需要依赖common和index这两个js文件。
现构建common.js 和index.js模块
/** * @name 基础js * @description 整站基础js模块 * @date 2014-12-21 * @version $V1.0$ */define(function(require, exports, module) { //引入依赖函数 require(‘jquery‘); //--------------------------------------------------【切换栅格模式】 $(window).bind("load resize", function() { if (document.documentElement.clientWidth > 1230) { $("body").addClass("full"); $(".no_full").show(); } else { $("body").removeClass("full"); $(".no_full").hide(); } }); //--------------------------------------------------【返回顶部】 require(‘module/roll_to‘); var iHeight=$(window).height(); $(window).bind(‘scroll‘, function(event) { if ($(window).scrollTop() >= iHeight / 2) { $("#quickfloat .top").removeClass(‘js_hide‘); } else { $("#quickfloat .top").addClass(‘js_hide‘); } }); $("#quickfloat .top").rollTo({ sSpeed: 500 }); //--------------------------------------------------【IE6提示升级跳转】 if ($.browser.version <= 6) { window.location.href = "http://localhost/ie6prompt.html"; }});
而在index.js中使用了animate,data_format等,
define(function(require, exports, module) { require(‘jquery‘); var aniamte=require(‘animate.js‘); var data_format=require(‘data_format.js‘); //doing something; }
在common.js 和index.js中分别依赖了jquery、roll_to.js、data_format.js animate.js,按照CMD标准分别编写这几个模块。
1、roll_to.js模块
/** * @name rollTo滚动跳转 * @description 功能模块 */define(function(require, exports, module) { //引入依赖函数 require(‘jquery‘); $.fn.extend({ rollTo: function(value) { var o = { oFinish: "body", //要滚动到的元素 sSpeed: "0", //滚动速度 bMonitor: false, //是否楼层监听 sClass: "current", //楼层监听时需要添加的样式 fnAdditional: "" //追加方法 } o = $.extend(o, value); var oThis = $(this), targetOffset = $(o.oFinish).offset().top; oThis.click(function() { $("html,body").stop(true, true).animate({ scrollTop: targetOffset }, o.sSpeed); o.sSpeed == 0 && $("body").stop(true, true); o.fnAdditional && o.fnAdditional(); }); if (o.bMonitor) { $(window).bind("scroll load", function(event) { if ($(this).scrollTop() >= targetOffset) { oThis.addClass(o.sClass).siblings().removeClass(o.sClass); } }); } return $(this); } });});
2、data_format.js模块
/** * @name date格式化 * @description 功能模块 */define(function(require, exports, module) { var TimeFormat = function() { /** * 日期格式化 * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符 * 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) * eg: * var obj=new TimeFormat(); * obj.format(<dateStr>,"yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 * obj.format(<dateStr>,"yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04 * obj.format(<dateStr>,"yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04 * obj.format(<dateStr>,"yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04 * obj.format(<dateStr>,"yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18 * ps: * <dateStr>为用户需要格式化的date字符串,可以是毫秒也可以是日期格式,例如"86400000"或"2014/07/07"等。用于new Date() */ this.format = function(dateVal, fmt) { var date = new Date(dateVal); var o = { "M+": date.getMonth() + 1, //月份 "d+": date.getDate(), //日 "h+": date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, //小时 "H+": date.getHours(), //小时 "m+": date.getMinutes(), //分 "s+": date.getSeconds(), //秒 "q+": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 }; var week = { "0": "/u65e5", "1": "/u4e00", "2": "/u4e8c", "3": "/u4e09", "4": "/u56db", "5": "/u4e94", "6": "/u516d" }; if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); } if (/(E+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f" : "/u5468") : "") + week[date.getDay() + ""]); } for (var k in o) { if (new RegExp("(" + k + ")").test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); } } return fmt; }; /* * 倒计时 * eg: * var obj=new TimeFormat(); * obj.format(<msel>) ==> 08:09:04 * ps: * <msel>为倒计时的毫秒数 */ this.countdown = function(msel,sign) { var hh, mm, ss; if (msel > 0) { msel = msel / 1000; hh = parseInt(msel / 3600); mm = parseInt((msel - hh * 3600) / 60); ss = parseInt(msel % 60); } else { hh = mm = ss = 0; } if (hh < 10) hh = "0" + hh; if (mm < 10) mm = "0" + mm; if (ss < 10) ss = "0" + ss; if(sign){ return hh + sign + mm + sign + ss; }else{ return hh + "小时" + mm + "分" + ss+ "秒"; } } /* * 多久前 * eg: * var obj=new TimeFormat(); * obj.before(86400000) ==> 1天前 * ps: * <msel>为倒计时的毫秒数 */ this.before = function(msel) { var minute = 1000 * 60, hour = minute * 60, day = hour * 24, halfamonth = day * 15, month = day * 30; var monthC = msel / month; var weekC = msel / (7 * day); var dayC = msel / day; var hourC = msel / hour; var minC = msel / minute; if (monthC >= 1) { result = parseInt(monthC) + "个月前"; } else if (weekC >= 1) { result = parseInt(weekC) + "周前"; } else if (dayC >= 1) { result = parseInt(dayC) + "天前"; } else if (hourC >= 1) { result = parseInt(hourC) + "个小时前"; } else if (minC >= 1) { result = parseInt(minC) + "分钟前"; } else result = "刚刚"; return result; } } module.exports = TimeFormat;});
3、animate.js模块
/** * @name CSS3动态焦点图 * @description 功能模块 */define(function(require, exports, module) { require(‘jquery‘); require(‘animate.css‘);//有关动画的css function ScrollBar(settings) { this.leftBtn = settings.leftBtn || null; //向左 this.rightBtn = settings.rightBtn || null; //向右 this.scrollBody = settings.scrollBody; //轮播的整体区域 this.holder = settings.holder; //轮播的图片层 this.indexBtn = settings.indexBtn || null; //快捷跳转按钮 this.indexBtnClass = settings.indexBtnClass || null; //快捷跳转按钮class this._autoPlay = settings._autoPlay || false; //是否自动播放 this.scrollType = settings.scrollType || "opacity"; //切换方式 默认为渐隐 this._init().bindEvent(); } ScrollBar.prototype = { _init: function() { var self = this; this.currentIndex = 0; //当前轮播到第几张图 this.targetIndex = 0; //当前轮播图要到第几张去 this.itemNum = this.holder.length; //一共几张图 this.scrollSpeed = 500; //过渡动画速度 if (this.css3Animate()){ //是否支持css3执行焦点图动画 this.checkPicLoaded(this.holder.eq(this.currentIndex).show()); }else{ self.holder.each(function(index) { var $self = $(this); var bkgUrl = $self.attr("data-bkg"); if (bkgUrl) { var _img = new Image(); _img.src = bkgUrl; _img.index = index; _img.onload = function() { self.holder.eq(this.index).css("backgroundImage", "url(" + bkgUrl + ")"); } } }) } if (this._autoPlay) { //是否自动播放 this.autoPlayLag = 10000; //自动播放间隔 this.autoPlay(); } return this; }, bindEvent: function() { var self = this; this.leftBtn && this.leftBtn.bind("click", function() { //左翻 self.targetIndex--; if (self.targetIndex < 0) self.targetIndex = self.itemNum - 1; self.scroll("left"); }) this.rightBtn && this.rightBtn.bind("click", function() { //右翻 self.targetIndex++; if (self.targetIndex >= self.itemNum) self.targetIndex = 0; self.scroll("right"); }) this.indexBtn && this.indexBtn.bind("click", function() { //直接跳转 if ($(this).index() > self.targetIndex) { self.targetIndex = $(this).index(); self.scroll("right"); } else if ($(this).index() < self.targetIndex) { self.targetIndex = $(this).index(); self.scroll("left"); } }) this._autoPlay && this.scrollBody.bind("mouseenter", function() { clearInterval(self.timer); self.leftBtn.show(); self.rightBtn.show(); }).bind("mouseleave", function() { self.autoPlay(); self.leftBtn.hide(); self.rightBtn.hide(); }) return this; }, scroll: function(type) { var self = this; this.indexBtn.removeClass(this.indexBtnClass).eq(this.targetIndex).addClass(this.indexBtnClass); var $current = this.holder.eq(this.currentIndex).show(); if (this.css3Animate()) self.resetLayer($current); // console.log(this.targetIndex); var $target = this.holder.eq(this.targetIndex).show(); if (this.title) { this.title.eq(this.currentIndex).hide(); this.title.eq(this.targetIndex).show(); } if (self.css3Animate()) self.checkPicLoaded($target) switch (this.scrollType) { case "opacity": $target.css("opacity", 0) $current.stop().animate({ opacity: 0 }, self.scrollSpeed, function() { $current.hide(); }) $target.stop().animate({ opacity: 1 }, self.scrollSpeed) break; } this.currentIndex = this.targetIndex; }, autoPlay: function() { var self = this; if (this.timer) clearInterval(this.timer) this.timer = setInterval(function() { self.targetIndex++; if (self.targetIndex >= self.itemNum) self.targetIndex = 0; self.scroll("right"); }, self.autoPlayLag); }, checkPicLoaded: function(currentLayer) { var self = this; var $animateLayer = currentLayer.children("div"); var length = $animateLayer.length; var loadedNum = 0; for (var i = 0; i < length; i++) { var _img = new Image(); _img.src = $animateLayer.eq(i).attr("data-bkg"); _img.onload = function() { loadedNum++; if (loadedNum == length) { currentLayer.css("backgroundImage", "none"); self.animateLayer(currentLayer); } } } }, resetLayer: function(currentLayer) { var $animateLayer = currentLayer.children("div"); $animateLayer.each(function() { $(this).removeClass($(this).attr("data-type")); if (!$(this).attr("data-isBg")) $(this).hide(); }) }, animateLayer: function(currentLayer) { var self = this; var $animateLayer = currentLayer.children("div"); var currentAnimateIndex = 0; var layerAry = []; var stepAry = []; $animateLayer.each(function() { layerAry.push($(this)); $(this).removeClass($(this).attr("data-type")); var step = $(this).attr("data-delay"); if (stepAry[step - 1]) { stepAry[step - 1].push($(this)); } else { stepAry[step - 1] = [$(this)]; } }); clearInterval(this.animateTimer) this.animateTimer = setInterval(function() { if (stepAry[currentAnimateIndex]) { for (var i = 0; i < stepAry[currentAnimateIndex].length; i++) { var target = stepAry[currentAnimateIndex][i]; target.css("backgroundImage", "url(" + target.attr("data-bkg") + ")").show().addClass(target.attr("data-type")); } } if (currentAnimateIndex > stepAry.length) { clearTimeout(self.animateTimer) } currentAnimateIndex++; }, 100) }, css3Animate:function(){ var testDiv = document.createElement("div"); var css3AnimateSupport = false; if ("oninput" in testDiv) { ["", "ms", "webkit"].forEach(function(prefix) { var css3Animate = prefix + (prefix ? "A" : "a") + "nimation"; if (css3Animate in testDiv.style) { css3AnimateSupport = true; } }); } return css3AnimateSupport; } }; module.exports = ScrollBar;});
感谢:钱庄网。
seajs的一次尝试
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。