seaJs学习笔记之seaJs实现webQQ部分功能1

最新推荐文章于 2015-12-15 09:23:21 发布
最新推荐文章于 2015-12-15 09:23:21 发布
阅读量2.3k 收藏
点赞数 5
分类专栏： seaJs学习笔记 seaJs学习笔记 文章标签： seaJs学习笔记 seaJs seaJs实现webQQ部分功能 javascript javascript模块化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lee_magnum/article/details/13503931
版权

　　之前已经为大家介绍过了seaJs的大概几个用法，主要有引入seaJs库、用define转换成模块、用use进行调用模块通过对外接口exports找到模块的对外接口和用require进行模块间的依赖。

　　基础的使用就是以上这些方法。接下来做一个具体的例子，就是模块怎么让工作更加简单。这个例子就是实现webQQ的某些功能来实现seaJs让工作更加简单。打开webQQ，主要有拖拽功能和拖拽改变层大小的功能和拖拽限制范围的功能。我们就用seaJs来实现这些小功能。有关拖拽的具体功能在这里不做过多的讲解，主要来讲解一下seaJs的使用。

　　先建一个主页。主要是有4个小伙伴儿来完成这项艰巨的任务。


　　页面上的简单布局的HTML代码

 

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙小站</title>
<style type="text/css">
#div1 {width:200px;height:200px;background:red;position:absolute;}
#div2 {width:30px;height:30px;background:yellow;position:absolute;right:0;bottom:0;}
#div3 {width:200px;height:200px;position:absolute;left:400px;top:0;position:absolute;background:green;}
</style>
</head>
<body>
<input type="button" value="点击" id="inp1" />
<div id="div1">
	<div id="div2"></div>
</div>
<div id="div3"></div>
</body>
</html>

　　简单页面的预览效果

seaJs学习笔记之seaJs实现webQQ部分功能


　　如上图，点击的时候，红色弹层出现，拖动黄色方块可以改变红色大小。拖动绿色方块可以任意移动。弹层上来的时候是隐藏的。这个主页是由A小伙伴儿开发。A小伙伴儿想先做拖拽。做之前A小伙伴儿发现B小伙伴儿已经做好了一个拖拽，于是就用seaJs引入了。


　　依赖drag.js的拖拽模块的main.js的javascript代码

//A小伙伴儿开发的模块

define(function  (require, exports, module) {
    var oInp = document.getElementById("inp1");
    var oDiv1 = document.getElementById("div1");
    var oDiv2 = document.getElementById("div2");
    var oDiv3 = document.getElementById("div3");
    
    //A小伙伴儿通过依赖require进行调用,依赖B小伙伴儿开发的drag.js
    require("./drag.js").drag(oDiv3);

})

　　依赖drag.js的拖拽模块的drag.js的javascript代码

//B小伙伴儿开发的拖拽
define(function  (require, exports, module) {
	
	function drag (obj) {
		var disX = 0;
		var disY = 0;

		obj.onmousedown = function  (ev) {
			var ev = ev || window.event;

			disX = ev.clientX - obj.offsetLeft;
			disY = ev.clientY - obj.offsetTop;
			
			document.onmousemove =  function  (ev) {
				var ev = ev || window.event;

				obj.style.left = ev.clientX - disX + "px";
				obj.style.top = ev.clientY - disY + "px";

			}

			document.onmouseup = function  () {
				document.onmousemove = null;
				document.onmouseup = null;
			}

			return false

		}

	}
	
	exports.drag = drag;

})

　　依赖drag.js的拖拽模块的HTML代码

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙小站</title>
<style type="text/css">
#div1 {width:200px;height:200px;background:red;position:absolute;display:none;}
#div2 {width:30px;height:30px;background:yellow;position:absolute;right:0;bottom:0;}
#div3 {width:200px;height:200px;position:absolute;left:400px;top:0;position:absolute;background:green;}
</style>
<!-- 引入seaJs -->
<script type="text/javascript" src="sea/sea.js"></script>
<!-- 引入主程序 -->
<script type="text/javascript">
seajs.use("./js/main.js")
</script>
</head>
<body>
<input type="button" value="点击" id="inp1" />
<div id="div1">
	<div id="div2"></div>
</div>
<div id="div3"></div>
</body>
</html>

　　拖拽的预览地址


        http://www.leemagnum.com/seaJs/h/ex/a.html


　　所以A小伙伴儿只需要依赖B小伙伴儿写好的拖拽就可以了。接下来A小伙伴儿继续开发弹层。


　　弹层的main2.js的javascript代码

//A小伙伴儿开发的模块

define(function  (require, exports, module) {
	var oInp = document.getElementById("inp1");
	var oDiv1 = document.getElementById("div1");
	var oDiv2 = document.getElementById("div2");
	var oDiv3 = document.getElementById("div3");
	
	//A小伙伴儿通过依赖require进行调用,依赖B小伙伴儿开发的drag.js
	require("./drag.js").drag(oDiv3);

	//A小伙伴儿开发的弹层
	oInp.onclick = function  () {
		oDiv1.style.display = "block";
	}

})

　　弹层的HTML代码

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙小站</title>
<style type="text/css">
#div1 {width:200px;height:200px;background:red;position:absolute;display:none;}
#div2 {width:30px;height:30px;background:yellow;position:absolute;right:0;bottom:0;}
#div3 {width:200px;height:200px;position:absolute;left:400px;top:0;position:absolute;background:green;}
</style>
<!-- 引入seaJs -->
<script type="text/javascript" src="sea/sea.js"></script>
<!-- 引入主程序 -->
<script type="text/javascript">
seajs.use("./js/main2.js")
</script>
</head>
<body>
<input type="button" value="点击" id="inp1" />
<div id="div1">
	<div id="div2"></div>
</div>
<div id="div3"></div>
</body>
</html>

　　显示弹层的预览地址


    http://www.leemagnum.com/seaJs/h/ex/b.html


　　一点点击层就出来了。接下来开始开发拖拽改变层大小。A小伙伴儿又发现了，拖拽改变层大小这个效果C小伙伴儿已经做好了。所以A小伙伴儿直接引C小伙伴儿做好的模块就行了。


　　C小伙伴儿的拖拽改变层大小模块scale.js的javascript代码

//C小伙伴儿开发的拖拽改变层大小

define(function  (require, exports, module) {
	
	/*
		obj1 大div
		obj2 小div
	*/
	function scale (obj1, obj2) {
		var disX = 0;
		var disY = 0;
		var disW = 0;
		var disH = 0;

		obj2.onmousedown =function  (ev) {
			var ev = ev || window.event;

			disX = ev.clientX;
			disY = ev.clientY;
			disW = obj1.offsetWidth;
			disH = obj1.offsetHeight;

			document.onmousemove = function  (ev) {
				var ev = ev || window.event;

				obj1.style.width = ev.clientX - disX + disW + "px";
				obj1.style.height = ev.clientY - disY + disH + "px";

			}

			document.onmouseup = function  () {
				document.onmousemove = null;
				document.onmouseup = null;
			}

			return false

		}
	}

	exports.scale = scale;

})

　　A小伙伴儿的main3.js的javascript代码

//A小伙伴儿开发的模块

define(function  (require, exports, module) {
    var oInp = document.getElementById("inp1");
    var oDiv1 = document.getElementById("div1");
    var oDiv2 = document.getElementById("div2");
    var oDiv3 = document.getElementById("div3");
    
    //A小伙伴儿通过依赖require进行调用,依赖B小伙伴儿开发的drag.js
    require("./drag.js").drag(oDiv3);

    //A小伙伴儿开发的弹层
    oInp.onclick = function  () {

        oDiv1.style.display = "block";

        //调取C小伙伴儿的拖拽改变层大小模块
        require("./scale.js").scale(oDiv1, oDiv2);

    }

})

　　拖拽改变层大小的HTML代码

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙小站</title>
<style type="text/css">
#div1 {width:200px;height:200px;background:red;position:absolute;display:none;}
#div2 {width:30px;height:30px;background:yellow;position:absolute;right:0;bottom:0;}
#div3 {width:200px;height:200px;position:absolute;left:400px;top:0;position:absolute;background:green;}
</style>
<!-- 引入seaJs -->
<script type="text/javascript" src="sea/sea.js"></script>
<!-- 引入主程序 -->
<script type="text/javascript">
seajs.use("./js/main3.js")
</script>
</head>
<body>
<input type="button" value="点击" id="inp1" />
<div id="div1">
	<div id="div2"></div>
</div>
<div id="div3"></div>
</body>
</html>

　　拖拽改变层大小的预览地址


   http://www.leemagnum.com/seaJs/h/ex/c.html


　　seaJs学习笔记之seaJs实现webQQ部分功能就为大家介绍到这里了。通过实例，大家不难发现seaJs还是蛮好用的，解决了不少javascript的问题。更多有关seaJs的相关知识敬请关注梦龙小站有关seaJs的更新。


云圣天
关注
专栏目录
seaJs学习笔记之seaJs的异步加载和加载多个js文件
梦龙小站
12-27 1万+
到目前为止，seaJs的大部分使用方法已经为大家介绍完了，有关javascript的模块化大部分功能也已经向大家介绍完了。下面再向大家深入的介绍一下seaJs。Define除了可以对回调函数进行操作之外，还可以对数据进行加载。Define中的第三个参数module主要是辅助调试的作用，它是对模块内部进行调试作用。可以通过module可以获得这个模块的id，可以获取到这个模块依赖哪些模块的数
sea.js的初次尝试
糖糖小菜鸟前端er
03-22 1129
sea.js文档地址：http://seajs.org/docs/#docs sea.js是一个模块加载器，一个文件就是一个模块。 sea.js主要解决的问题是：模块化编程（针对js）、异步加载、无需考虑命名空间 初次尝试： 1.加载模块 sea.use加载一个或多个模块 define用来定义模块 目录结构： --test.html --a     |--a.js
js修改onclick动作的四种方式
chelen_jak的专栏
12-15 1575
转自：http://blog.csdn.net/liujimmy/article/details/4524081 第一种：button.onclick = Function("alert('hello');"); 第二种：button.onclick = function(){alert("hello"); }; 第三种：button.onclick = myAlert;
js给onclick赋值，传参数
chelen_jak的专栏
05-20 1万+
转自：http://blog.csdn.net/gdjlc/article/details/8730145
Seajs的学习笔记
12-09
Seajs，一个Web模块加载框架，追求简单、自然的代码书写和组织方式，：Sea.js 遵循 CMD 规范，模块化JS代码。依赖的自动加载、配置的简洁清晰，可以让程序员更多地专注编码。 2.优缺点 优点：1).提高可维护性。2)....
seajs学习教程之基础篇
01-19
介绍 众所周知前端开发模块化已经是大势所趋，目前模块化的规范有很多，众所周知的有commonJS，... 1、require为函数，该函数接受一个字符串作为模块标示符  2、require函数返回值为该模块API  3、require函数
seajs学习之模块的依赖加载及模块API的导出
10-21
模块的依赖加载在 SeaJS 中是一个关键功能，它确保在执行一个模块之前，其依赖的所有模块都已经加载到环境中。SeaJS 使用异步加载机制，这样可以避免阻塞页面渲染。当一个模块被请求加载时，SeaJS 首先检查该模块...
seajs配合spm应用之四弹出框
糯米糊糊的专栏
03-21 3354
前面描述了 seajs的弹出遮罩层, 还没讲到弹出框, 这里接着把那几个例子介绍完. 目前已经有的工作是, 点击toggle按钮,可以弹出一个背投一样的暗灰色遮罩层, 主要的作用就是遮住当前页面上所有的html元素, 使得用户集中精力于即将弹出来的对话框. 下面分析对话框. 目前对话框有2中,一种就是直接夹杂在当前页面里,或者直接js里显示好. 另外一种就是使用ajax请求, 获取某
http://www.cnblogs.com/ada-zheng/p/3284660.html
u011549541的专栏
02-20 870
转http://www.cnblogs.com/ada-zheng/p/3284660.html 有了 define 等模块定义规范的实现，我们可以开发出很多模块。但光有一堆模块不管用，我们还得让它们能跑起来。在 SeaJS 里，要启动模块系统很简单： seajs.use(‘./main’); seajs.use 用来在页面中加载模块。通过 use 方法，可以在页
seajs的使用方法个人总结
热门推荐
kongjiea笔记
08-21 2万+
/* * 使用步骤。1，引入seajs  2、定义define模块  3、 模块的调用 seajs.use  4 如何依赖模块(模块之间的依赖) require() * 步骤二：define参数说明  require 请求地址  exports 对外提供接口对象  *define中的三个参数可以都写，可以都不写，可以只有前1个，可以只有前2个  *   *步骤三：seajs.use参数说
seajs加载模板引擎实现前端模板化开发
一名普通码农的菜地
02-03 6738
lifesinger commented on 29 Jun 2013 文本插件 在 JavaScript 中嵌入 HTML 模板很不方便，特别是当模板内容有多行时。有了 Sea.js, 一切迎刃而解。 首先，需要引入文本插件： script src="path/to/sea.js">script> script src="path/to/seajs-text.
个人随笔JQuery tree的seajs.use(['dialog','$', 'dialog.css'], function(Dialog, $) {}
fengbonu的博客
06-10 1600
最近在开发中遇到一个印象比较深的问题，谨此记录下来备忘：  功能：点击jsp页面的一个选择按钮，弹出一个框，框中列表后台的动态数据-->员工信息列表，只能选择一条，将选中的员工回显到指定的文本框。 具体代码：（后台使用struts2处理请求） 第1个 jsp页面:   js代码： $(function(){  $("#btnSelSysstaff").click(fu
JS模块化开发：使用SeaJs高效构建页面
weixin_34343000的博客
11-07 108
一、扯淡部分 很久很久以前，也就是刚开始接触前端的那会儿，脑袋里压根没有什么架构、重构、性能这些概念，天真地以为前端===好看的页面，甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里，就更别说会知道js还有面向对象，设计模式，MVC，MVVM，模块化，构建工具等等这些高大上的概念了。现在想想还真是Too young too naive。前两天某大神在群里分享他招聘前端的心得的时候就...
seaJs学习笔记之怎么调用模块
梦龙小站
12-23 4633
之前我们已经了解了怎么用seaJs把javascript函数变成模块化。那么我们仅仅把javascript变成模块化是不够的，我们还需要使用这个模块。那么我们怎么在外面去调用它呢?现在我们就揭晓答案。
seaJs学习笔记之seaJs配置方法
梦龙小站
12-30 3228
seaJs在之前已经为大家介绍了很多，今天为大家介绍一下seaJs配置参数的方法。我们可以配置根目录，可以指定模块名字等。很多比较实用的配制方法，今天将为大家揭晓。
seaJs学习笔记之如何依赖模块
梦龙小站
12-24 3182
前几天我们已经为大家介绍了seaJs解决冲突问题的方法了。那么seaJs可以不可以帮大家避免javascript中的依赖问题呢?可以的，下面我们将为大家为大家seaJs解决依赖的方法。
seaJs学习笔记之如何变成模块
梦龙小站
12-20 2484
之前已经为大家介绍了一些有关javascript模块化的相关知识，相信大家也对javascript模块化有了一定的了解。接下来我们就要正式开始介绍seaJs的使用方法了。 　　首先使用seaJs这个库，就要先引入这个库。在本地下载好最新的seaJs库，并引入到页面中。
使用gulp实现Seajs模块的按需合并与压缩
本文主要讨论如何在基于gulp的工作流中实现Seajs模块的合并与压缩，针对多页面应用的需求，强调按需加载和优化浏览器缓存的策略。 在前端开发中，构建工具如grunt和gulp常用于自动化任务，包括JavaScript文件的管理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值