前端模块化之seajs
决心从java后台转做前端有些日子了，不断关注前端知识。从学习了nodejs的 require按需加载模块的思路之后感觉js的世界变得好美好啊，前几天无意看到了seajs，国内大牛的作品，专为前端js模块化而设计，项目地址。遂学习了一把，并且把该项目examples的第一个例子做成了一个jQuery的插件，分享如下:
1.项目目录
HelloSeaJS 项目目录
--app 存放html文件目录
--game.html
--sea-modules seajs的模块目录，也是各种第三方插件目录
--sea
--jquery
--static 本地js，css资源文件目录
--application
2.具体代码
HelloSeaJS/app/game.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SeaJS</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="../sea-modules/seajs/seajs/2.1.1/sea.js"></script> <!-- 引入seajs-->
<script type="text/javascript">
// Set configuration
seajs.config({
base: "../sea-modules/", //配置seajs模块路径
alias: {
"jquery": "jquery/jquery/1.10.1/jquery.js", //引入jquery
"loverotate": "jquery/loverotate/loverotate.js" //引入自定义插件
}
}); seajs.use("../static/application/game"); //引入js脚本
</script>
</body>
</html>
HelloSeaJS/static/application/game.js
define(function(require,exports,module){ //seajs的模块写法，具体参看seajs的api
var $ = require('jquery'); //加载jquery模块，这里对应的名字是html页面里配置好了的名字
var loverotate = require('loverotate'); //这里也是html里配置好了的
var container = $('#container');
container.loverotate({ //插件使用
content: 'I LOVE YOU!' //配置显示的字符
});
});
HelloSeaJS/sea-modules/jquery/loverotate/loverotate.js
(function($){
$.fn.loverotate = function(options) {
var opts = $.extend({}, $.fn.loverotate.defaults, options);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
var data = [];
var $this = $(this);
$this.css({
width: 'inherit',
height: 'auto'
});
var ul = $('<ul></ul>').css({
margin: '0px',
padding: '0px'
});
for(var i = 0, len = o.content.length; i < len; i++) {
var degree = degree360();
data.push(degree);
var li = $("<li></li>").css({
width: o.liWidth,
backgroundColor : o.liBackgroundColor,
textAlign: o.liTextAlign,
color: o.liColor,
lineHeight: o.liLineHeight,
fontSize: o.liFontSize,
cursor: o.liCursor,
position: o.liPosition,
opacity: o.liOpacity,
transform: 'rotate('+degree+'deg)',
top: randomNum(15)+'px',
margin: o.liMargin,
listStyle: 'none',
float: 'left',
'-webkit-transition-duration': o.liDuration, //设置动画时间
'-moz-transition-duration': o.liDuration,
'-o-transition-duration': o.liDuration,
'transition-duration': o.liDuration,
}).html(o.content.substring(i, i+1) == ' ' ? ' ': o.content.substring(i, i+1))
.hover(function() {
$(this).fadeTo(250, 1)
.css({'transform': 'rotate(0deg)',
'opacity': '1'});
}, function() {
var lithis = $(this);
setTimeout(function() {
lithis.css({'transform': 'rotate('+degree360()+'deg)',
'opacity': '0.5'});
}, randomNum(10000));
});
ul.append(li);
}
return $this.append(ul);
};
var debug = function($obj) {
if(window.console && window.console.log) {
window.console.log('count: ' + $obj.size());
}
};
var numberType = ['-', '+'];
var degree360 = function() { //得到一个-360到+360的数
return numberType[Math.floor(Math.random() * 2)] + Math.floor(Math.random() * 360);
}
var randomNum = function(x) { //返回一个x以内的随机数
return Math.floor(Math.random() * x); //floor向下取整
// return Math.parseInt(Math.random() * x); //parseInt取整，丢弃小数部分
// return Math.ceil(Math.random() * x); //ceil向上取整
// return Math.round(Math.random() * x); //round四舍五入
};
$.fn.loverotate.defaults = { //li的默认值
content: 'I LOVE YOU!',
liWidth: '45px',
liBackgroundColor: '#C0E6DC',
liTextAlign: 'center',
liColor: '#999999',
liLineHeight: '40px',
liFontSize: '40px',
liCursor: 'pointer',
liPosition: 'relative',
liOpacity: 0.5,
liMargin: '0px 3px',
liDuration: '0.8s'
};
})(jQuery);
自定义的jQuery插件，今天也是照着样子学着写的，不足之处欢迎指正。由于有使用css3的动画效果，所以有些低版本的浏览器是达不到效果的，大家可以自己去发挥了。
这里有一篇详细介绍jQuery插件的写法，感觉思路比较清晰。
3.效果
初始时
完成时
前端模块化之seajs的更多相关文章
- 前端模块化开发之seaJs
了解后端语言的童鞋一定听过模块化开发的概念,比如java.python等后端语言都有自己的模块化特性,然而和后端语言相比,javascript还尚未实现模块化的功能,虽然之后的更高版本可能引入模块化开 ...
- Angular JS - 8 - SeaJS与前端模块化
一.前端模块化 关于前端模块化,参考以下链接 : https://github.com/seajs/seajs/issues/547 http://www.cnblogs.com/huiguo/cat ...
- 我的前端之旅--SeaJs基础和spm编译工具运用[图文]
标签:seajs nodejs npm spm js 1. 概述 本文章来源于本人在项目的实际应用中写下的记录.因初期在安装和使用Seajs和SPM的时候,有点不知所措的经历.为此,我 ...
- JAVAScript：前端模块化开发
目录 一:前端模块化概要 1.1.模块化概要 1.2.函数封装 1.3.对象封装 1.4.立即执行函数表达式(IIFE) 1.5.模块化规范 1.5.1.CommonJS 1.5.2.AMD((Asy ...
- 回顾：前端模块化和AMD、CMD规范（全）
先列举下一些著名言论: "我想定义一个 each 方法遍历对象,但页头的 util.js 里已经定义了一个,我的只能叫 eachObject 了,好无奈." "Requi ...
- JavaScript学习总结(六)——前端模块化开发
早期的javascript版本没有块级作用域.没有类.没有包.也没有模块,这样会带来一些问题,如复用.依赖.冲突.代码组织混乱等,随着前端的膨胀,模块化显得非常迫切. 前端模块化规范如下: 一.前端模 ...
- 前端模块化方案全解(CommonJS/AMD/CMD/ES6)
模块化的开发方式可以提高代码复用率,方便进行代码的管理.通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数.目前流行的js模块化规范有CommonJS.AMD.CMD以及ES6的模块 ...
- [整理]前端模块化开发AMD CMD
前端模块化开发的价值 AMD (中文版) CMD 模块定义规范 标准构建 http://seajs.org http://chaoskeh.com/blog/why-seajs.html http:/ ...
- 模块化之seaJs学习和使用
使用seaJs也有一阵子了,一直也想抽个时间写个这方面的博客,直到今天才写……也许写的不是很完善,但跟大伙分享也是一种乐趣,不对之处欢迎指出.[抱拳] 时间有限,我这里不过多介绍前端模块化,有兴趣可以 ...
随机推荐
- installshield学习笔记
看预定义常量的值:SprintfBox(INFORMATION,"","%d",变量值); 自定义常量:#define MAXCOUNT 1000;#d ...
- HDU 2176 取(m堆)石子游戏 尼姆博弈
题目思路: 对于尼姆博弈我们知道:op=a[1]^a[2]--a[n],若op==0先手必败 一个简单的数学公式:若op=a^b 那么:op^b=a: 对于第i堆a[i],op^a[i]的值代表其余各 ...
- 移动端ios电话号码
<meta name="format-detection" content="telephone=no"> <meta http-equiv= ...
- hibernate异常：org.hibernate.exception.GenericJDBCException
异常:org.hibernate.exception.GenericJDBCException 提示:Cannot open connection 提示:不能打开链接 一般这个异常是由 java.sq ...
- hello world2
GTD就是Getting Things Done的缩写,翻译过来就是"把事情做完",GTD的核心理念概括就是必须记录下来要做的事,然后整理安排并使自己一一去执行.GTD的五个核心原 ...
- DOM对象和JQuery有什么不同的地方？
jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...
- ensp实战之防火墙安全转发策略
本次实验用防火墙是USG6000V,拓扑图如下: 步骤一: 按上面配好PC1.2.3以及WWW服务器的IP地址.子网掩码以及网关: 步骤二: 进入防火墙的CLI命令模式下,按一下命令配置: 配置各个接 ...
- MySQL命令出现字符错误提示原因
ERROR 2019 (HY000): Can't initialize character set gb2312 搞了好半天,MySQL都重装了两次,号悲剧... 之前设置了系统编码全都是UTF-8 ...
- 1、File类的API
通过Api我们可知,File类是java一个内置类,被封装到java.io.jar包中 其构造方法有一下3种 其方法常用的有以下几种
- 深入JVM锁机制2-Lock
前文(深入JVM锁机制-synchronized)分析了JVM中的synchronized实现,本文继续分析JVM中的另一种锁Lock的实现.与synchronized不同的是,Lock完全用Java ...