一.目录结构
二.代码
hello.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Hello Sea.js</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <img src="https://i.alipayobjects.com/e/201211/1cqKb32QfE.png" width="44" height="44" alt="H"> <img src="https://i.alipayobjects.com/e/201211/1cqKb2rJHI.png" width="44" height="44" alt="e"> <img src="https://i.alipayobjects.com/e/201211/1cqKeZrUpg.png" width="44" height="44" alt="l"> <img src="https://i.alipayobjects.com/e/201211/1cqM4u3Ejk.png" width="44" height="44" alt="l"> <img src="https://i.alipayobjects.com/e/201211/1cqKoKV2Sa.png" width="44" height="44" alt="o"> <img src="https://i.alipayobjects.com/e/201211/1cqKb4JU4K.png" width="44" height="44" alt=","> <img src="https://i.alipayobjects.com/e/201211/1cqKojFDLY.png" width="44" height="44" alt="S"> <img src="https://i.alipayobjects.com/e/201211/1cqKb2sBO8.png" width="44" height="44" alt="e"> <img src="https://i.alipayobjects.com/e/201211/1cqKb2LmXk.png" width="44" height="44" alt="a"> <img src="https://i.alipayobjects.com/e/201211/1cqKb1jcWC.png" width="44" height="44" alt="J"> <img src="https://i.alipayobjects.com/e/201211/1cqKojb72y.png" width="44" height="44" alt="S"> </div> <script src="sea-modules/sea.js"></script> <script> // Set configuration seajs.config({ base: "./sea-modules/", alias: { "jquery": "jquery/jquery/1.10.1/jquery.js" } }); seajs.use("./main"); </script> </body> </html>
main.js
define(function(require) { var Spinning = require('./spinning'); var s = new Spinning('#container'); s.render(); });
spinning.js
define(function(require, exports, module) { var $ = require('jquery'); function Spinning(container) { this.container = $(container); this.icons = this.container.children(); this.spinnings = []; } module.exports = Spinning; Spinning.prototype.render = function() { this._init(); this.container.css('background', 'none'); this.icons.show(); this._spin(); } Spinning.prototype._init = function() { var spinnings = this.spinnings; $(this.icons).each(function(n) { var startDeg = random(360); var node = $(this); var timer; node.css({ top: random(40), left: n * 50 + random(10), zIndex: 1000 }).hover( function() { node.fadeTo(250, 1) .css('zIndex', 1001) .css('transform', 'rotate(0deg)'); }, function() { node.fadeTo(250, .6).css('zIndex', 1000); timer && clearTimeout(timer); timer = setTimeout(spin, Math.ceil(random(10000))); } ); function spin() { node.css('transform', 'rotate(' + startDeg + 'deg)'); } spinnings[n] = spin; }) return this; } Spinning.prototype._spin = function() { $(this.spinnings).each(function(i, fn) { setTimeout(fn, Math.ceil(random(3000))); }); return this; } function random(x) { return Math.random() * x }; });
三.运行结果
seajs官网:http://seajs.org/docs/
相关推荐
第一次接触的可以下来看看,会用的就没必要下载了
最近在学习seajs , 百度了一下教程, 网上有很多范例, 大多都是互相抄袭,并没有验证是否能正常运行. 很多都直接忽略了 jquery 的模块化. 我按他们的步骤做完之后,出现很多问题,所以我把网上的一个例子, 补充完整 ,...
只是因为这篇文章是论坛上的,所以我把他整理成word类型的。 1 创建工程结构 2 下载ESeaJS 2 安装ESeaJS 4 构建main.js 5 启动tomcat
主要是做了一个基于node环境中,seajs的配置以及一些实例和利用grunt进行资源的打包压缩合并的构建
主要介绍了SeaJS中use函数用法,结合实例形式分析了use函数加载模块的使用方法与相关操作技巧,需要的朋友可以参考下
本文实例讲述了seajs模块压缩问题与解决方法。分享给大家供大家参考,具体如下: 在优化整理项目代码时,想使用seajs来把代码模块化。看了下官方5分钟上手教程,觉得很不错,也没多想就一直开发下去了,也没出什么...
本文实例讲述了JavaScript 模块化开发。分享给大家供大家参考,具体如下: JS开发的问题 冲突 依赖 JS引入的文件,产生依赖. 使用命名空间解决: 命名空间的弊端 调用的时候 名字比较长. 只能减低冲突,不能完全避免 ...
近几年前端工程化越来越完善,打包工具也已经是前端标配了,像seajs这种老古董早已停止维护,而且使用的人估计也几个了。但这并不能阻止好奇的我,为了了解当年的前端前辈们是如何在浏览器进行代码模块化的,我鼓起...
本文实例讲述了seajs中模块依赖的加载处理。分享给大家供大家参考,具体如下: 最近在做项目的时候发现一些关于模块依赖问题,特记录下: 比如现有3个文件: /*init.js*/ define(function(require, exports, module)...
主要介绍了seajs下require书写约定,结合实例形式分析了seajs中require书写约定遵循的规则,需要的朋友可以参考下
本文实例讲述了seajs中最常用的7个功能、配置。分享给大家供大家参考,具体如下: 1. seajs.config seajs.config({ // 设置路径,方便跨项目调用 paths: { 'path1': '....', 'path2': '....' }, // 设置别名...
主要介绍了seaJs使用心得之exports与module.exports的区别,结合实例形式分析了exports与module.exports具体功能、使用方法及相关操作注意事项,需要的朋友可以参考下
本文实例讲述了seajs实现强制刷新本地缓存的方法。分享给大家供大家参考,具体如下: 1.为什么 由于每次上传js文件到服务器后用户本机存在本地缓存,导致用户需要强制清除缓存或者等待缓存失效才能使用新功能,极其...