决心从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的更多相关文章

  1. 前端模块化开发之seaJs

    了解后端语言的童鞋一定听过模块化开发的概念,比如java.python等后端语言都有自己的模块化特性,然而和后端语言相比,javascript还尚未实现模块化的功能,虽然之后的更高版本可能引入模块化开 ...

  2. Angular JS - 8 - SeaJS与前端模块化

    一.前端模块化 关于前端模块化,参考以下链接 : https://github.com/seajs/seajs/issues/547 http://www.cnblogs.com/huiguo/cat ...

  3. 我的前端之旅--SeaJs基础和spm编译工具运用[图文]

    标签:seajs   nodejs   npm   spm   js 1. 概述 本文章来源于本人在项目的实际应用中写下的记录.因初期在安装和使用Seajs和SPM的时候,有点不知所措的经历.为此,我 ...

  4. JAVAScript：前端模块化开发

    目录 一:前端模块化概要 1.1.模块化概要 1.2.函数封装 1.3.对象封装 1.4.立即执行函数表达式(IIFE) 1.5.模块化规范 1.5.1.CommonJS 1.5.2.AMD((Asy ...

  5. 回顾：前端模块化和AMD、CMD规范（全）

    先列举下一些著名言论: "我想定义一个 each 方法遍历对象,但页头的 util.js 里已经定义了一个,我的只能叫 eachObject 了,好无奈." "Requi ...

  6. JavaScript学习总结(六)——前端模块化开发

    早期的javascript版本没有块级作用域.没有类.没有包.也没有模块,这样会带来一些问题,如复用.依赖.冲突.代码组织混乱等,随着前端的膨胀,模块化显得非常迫切. 前端模块化规范如下: 一.前端模 ...

  7. 前端模块化方案全解(CommonJS/AMD/CMD/ES6)

    模块化的开发方式可以提高代码复用率,方便进行代码的管理.通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数.目前流行的js模块化规范有CommonJS.AMD.CMD以及ES6的模块 ...

  8. [整理]前端模块化开发AMD CMD

    前端模块化开发的价值 AMD (中文版) CMD 模块定义规范 标准构建 http://seajs.org http://chaoskeh.com/blog/why-seajs.html http:/ ...

  9. 模块化之seaJs学习和使用

    使用seaJs也有一阵子了,一直也想抽个时间写个这方面的博客,直到今天才写……也许写的不是很完善,但跟大伙分享也是一种乐趣,不对之处欢迎指出.[抱拳] 时间有限,我这里不过多介绍前端模块化,有兴趣可以 ...

随机推荐

  1. sf中标准的分页功能介绍

    世上本无事,庸人自扰之.我喜欢一个相对比较安静的环境去学习和工作,希望在一个掉一根针的声音都能够听到的环境中,但是有时候往往相反,一片嘈杂,我改变不了周围的环境,只能改变自己,其实这些都没有什么,也许 ...

  2. 开机自动挂载 VHD 的方法

    一.批处理 除了将 VHD 文件用人工方式在[磁盘管理]里[附加]来挂载以外,也能用[脚本]来实现自动挂载. 打开[启动],将写好的 mount.bat 放入即可: Mount.bat 文件的内容为: ...

  3. 关于安装第三方模块和PILLOW

    看廖雪峰老师这一节的教程卡在这里挺久了 在谷歌上了搜了很久,最后根据这个教程上解决了这个问题 http://www.yihaomen.com/article/python/566.htm 觉得自己好蠢 ...

  4. KMP算法的java实现

    package com.trs.utils; public class KMPStr { /* * 在KMP算法中,最难求的就是next函数,如何理解next函数是一个难题,特别是k=next[k], ...

  5. iOS开发关于xcode中souceControl的苹果文档翻译（节选）

    Subversion 1.7 provides many benefits: svn1.7版本有以下好处: Improved performance. Increased speed for many ...

  6. UVa 536 Tree Recovery | GOJ 1077 Post-order (习题 6-3)

    传送门1: https://uva.onlinejudge.org/external/5/536.pdf 传送门2: http://acm.gdufe.edu.cn/Problem/read/id/1 ...

  7. get与post 获取参数值的方式

    get方式  参数带在url后面,form表单中的域  可以 没有value 属性, 后台可以直接在方法的参数中加入和url一样的参数就能直接获得该参数的值(效率高,不安全) post方式 url链接 ...

  8. Java 泛型 协变式覆盖和泛型重载

    Java 泛型 协变式覆盖和泛型重载 @author ixenos 1.协变式覆盖(Override) 在JDK 1.4及以前,子类方法如果要覆盖超类的某个方法,必须具有完全相同的方法签名,包括返回值 ...

  9. 关于R语言的一些编程经验

    一个晚上写出一个能用的程序…… 来说说遇见的问题吧 zqw<-read.table(file = "c:/data/zqw.txt") zqw<-data.frame( ...

  10. 一、ASP.NET Routing路由（深入解析路由系统架构原理）

    阅读目录: 1.开篇介绍 2.ASP.NET Routing 路由对象模型的位置 3.ASP.NET Routing 路由对象模型的入口 4.ASP.NET Routing 路由对象模型的内部结构 4 ...