前端模塊化之seajs

時間 2019-11-08

標籤前端模塊化 seajs 简体版

原文原文鏈接

決心從java後臺轉作前端有些日子了，不斷關注前端知識。從學習了nodejs的 require按需加載模塊的思路以後感受js的世界變得好美好啊，前幾天無心看到了seajs，國內大牛的做品，專爲前端js模塊化而設計，項目地址。遂學習了一把，而且把該項目examples的第一個例子作成了一個jQuery的插件，分享以下:javascript

1.項目目錄css

HelloSeaJS 項目目錄html

--app 存放html文件目錄前端

　　　　　 --game.html　java

--sea-modules seajs的模塊目錄，也是各類第三方插件目錄node

　　　　　　　　--seajquery

　　　　　　　　--jquerycss3

--static 本地js，css資源文件目錄web

　　　　　　　　--applicationapi

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.效果

初始時