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

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

　　好了，经过A小伙伴儿不屑的努力，终于可以拖拽，还有实现改变层大小了。seaJs的好处就是自己开发自己，互相不影响，也不用考虑命名冲突，随便起自己想起的名字就行。就在这时候，产品经理说，还是要改一下需求吧。拖拽不限制范围不太好，还是限制一下范围吧。

　　这时候，A小伙伴儿和C小伙伴儿都不用管啥，B小伙伴儿一个人就可以搞定了。这个需求只需要改下drag.js就可以了。


　　依赖限制范围模块的拖拽drag2.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;
				
				var L = require("./rang.js").rang(ev.clientX - disX, document.documentElement.clientWidth - obj.offsetWidth, 0);
				var T = require("./rang.js").rang(ev.clientY - disY, document.documentElement.clientHeight - obj.offsetHeight, 0);

				obj.style.left = L + "px";
				obj.style.top = T + "px";

			}

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

			return false

		}

	}
	
	exports.drag = drag;

})

　　依赖限制范围模块rang.js的javascript代码

//某一前辈开发的限制范围模块
define(function  (require, exports, module) {
    /*
        iNum 当前的值
        iNumMax 最大值
        iNumMin 最小值
    */
    function rang (iNum, iNumMax, iNumMin) {
        if (iNum > iNumMax) {
            return iNumMax;
        }else if (iNum < iNumMin) {
            return iNumMin;
        }else {
            return iNum;
        }
    }

    exports.rang = rang;

})

　　A小伙伴儿的main4.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("./drag2.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/main4.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/i/ex/d.html


　　我们刷新之后，便发现范围已经限制住了。那 这个需求改完之后，发现只需要B小伙伴儿进行修改就可以了。不需要A和C小伙伴儿基本上不用操作任何东西，也不用关心会不会冲突，会不会依赖了。接下来，产品说了，要把改变层大小也限制一下范围。这个需求就由C小伙伴儿来完成了。


　　限制范围模块的拖拽改变层大小scale2.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;

				var W = require("./rang.js").rang(ev.clientX - disX + disW, 500, 100);
				var H = require("./rang.js").rang(ev.clientY - disY + disH, 500, 100);

				obj1.style.width = W + "px";
				obj1.style.height = H + "px";

			}

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

			return false

		}
	}

	exports.scale = scale;

})

　　A小伙伴儿的main5.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("./drag2.js").drag(oDiv3);

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

        oDiv1.style.display = "block";

        //调取C小伙伴儿的拖拽改变层大小模块
        require("./scale2.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/main5.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/i/ex/e.html

 

　　刷新之后不难看出，层的拖拽范围被限定到了最大值500，最小值100了。这个绿色的也是限制范围的拖拽了。好，产品过几个月说把拖拽的限制范围取消了，感觉没必要对拖拽限制范围。这时候只需要B小伙伴儿进行操作就可以了。只需要把之前的依赖rang去掉就可以了。再去掉之前，先问大家个问题，rang在drag2.js中加载了至少一次，那么会不会真加载很多次呢?其实不会，seaJs在这里做了处理，多次依赖同一个js，在上面的网址打开网络刷新即可看到，只需要加载一次，在性能上也做了优化。


　　取消限制范围的拖拽drag3.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;
				
				/*
				限制范围的拖拽
				var L = require("./rang.js").rang(ev.clientX - disX, document.documentElement.clientWidth - obj.offsetWidth, 0);
				var T = require("./rang.js").rang(ev.clientY - disY, document.documentElement.clientHeight - obj.offsetHeight, 0);
				*/

				var L = ev.clientX - disX;
				var T = ev.clientY - disY;

				obj.style.left = L + "px";
				obj.style.top = T + "px";

			}

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

			return false

		}

	}
	
	exports.drag = drag;

})

　　A小伙伴儿的main6.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("./drag3.js").drag(oDiv3);

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

		oDiv1.style.display = "block";

		//调取C小伙伴儿的拖拽改变层大小模块
		require("./scale2.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/main6.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/i/ex/f.html


　　刷新不难看出，不管怎么变，互相之间没有太大的冲突，也不会因为依赖而出现问题，这就是javascript模块化的好处。seaJs学习笔记之seaJs实现webQQ部分功能就为大家介绍到这里，有了seaJs可以让开发变得容易。更多有关seaJs的相关知识敬请关注梦龙小站有关seaJs的更新。


云圣天
关注
专栏目录
Seajs的学习笔记
12-09
Seajs，一个Web模块加载框架，追求简单、自然的代码书写和组织方式，：Sea.js 遵循 CMD 规范，模块化JS代码。依赖的自动加载、配置的简洁清晰，可以让程序员更多地专注编码。 2.优缺点 优点：1).提高可维护性。2)....
seajs学习教程之基础篇
01-19
介绍 众所周知前端开发模块化已经是大势所趋，目前模块化的规范有很多，众所周知的有commonJS，Module/Wrappings和AMD等，而且ES6也着手开始制定模块化机制的... 2、require函数返回值为该模块API  3、require函数
一步步学会使用SeaJS 2.0
C860_zy的专栏
04-19 3583
本文分为以下8步，熟悉之后就能够熟练使用SeaJS，从此之后你的生活会变得更加轻松愉悦！ 1、SeaJS是什么？ 2、下载并检阅SeaJS 3、建立工程和各种目录 4、引入SeaJS库 5、编写自己的代码 6、引入自己的代码 7、压缩合并 8、总结展望 --------------------------------------------------
seaJs学习笔记之seaJs的异步加载和加载多个js文件
热门推荐
梦龙小站
12-27 1万+
到目前为止，seaJs的大部分使用方法已经为大家介绍完了，有关javascript的模块化大部分功能也已经向大家介绍完了。下面再向大家深入的介绍一下seaJs。Define除了可以对回调函数进行操作之外，还可以对数据进行加载。Define中的第三个参数module主要是辅助调试的作用，它是对模块内部进行调试作用。可以通过module可以获得这个模块的id，可以获取到这个模块依赖哪些模块的数
Seajs使用实例入门
lijunjie818的博客
10-12 872
1.在项目中引入sea.js，其中内容为：var BASEPATH="/TestSea";!function(a,b){function c(a){return function(b){return{}.toString.call(b)=="[object "+a+"]"}}function d(){return A++}function e(a){if(a=="about:blank")a=wi...
seaJs学习笔记之seaJs实现webQQ部分功能1
梦龙小站
12-25 2322
之前已经为大家介绍过了seaJs的大概几个用法，主要有引入seaJs库、用define转换成模块、用use进行调用模块通过对外接口exports找到模块的对外接口和用require进行模块间的依赖。
css3 和 html5 笔记
miyayeeh的博客
06-24 514
1.css3 ie下大部分不兼容 ie9以下 浏览器低版本不兼容 需要写 -webket-transition:1s -moz-transition: 1s -o-transition:1s transition:1s 这些 2.Css3 选择器 --属性选择器(1) E[attr]只使用属性名，但没有确定任何属性值 E[attr=...
开发资源总结 （转载）
weixin_30300523的博客
07-24 522
转载：http://segmentfault.com/a/1190000002691861 这是对自己这几年开发的一个总结，各种项目、资源、书籍、博客等。作为我自己的一个阶段性总结，也希望对大家有些帮助。项目源地址(Github)https://github.com/lyfeyaj/awesome-resources欢迎大家各种拍砖、纠错、最好是有 Pull Request 喜欢么？或...
seajs学习之模块的依赖加载及模块API的导出
10-21
模块的依赖加载在 SeaJS 中是一个关键功能，它确保在执行一个模块之前，其依赖的所有模块都已经加载到环境中。SeaJS 使用异步加载机制，这样可以避免阻塞页面渲染。当一个模块被请求加载时，SeaJS 首先检查该模块...
seajs配置问题详解以及seajs一些插件的使用
高山上的鱼
12-06 5530
base配置： seajs.config({ base:"http://localhost:8080/sealJs/"}note:  这里是设置基础的文件夹，所有路径都是相对于他来说的 alias配置：（alias就是当模块标识很长的时候用的方式） alias: { 'jquery1': 'moduler1/fakeJquery',/*相对地址，相对于base来说的，表示htt
seaJs学习笔记之怎么调用模块
梦龙小站
12-23 4647
之前我们已经了解了怎么用seaJs把javascript函数变成模块化。那么我们仅仅把javascript变成模块化是不够的，我们还需要使用这个模块。那么我们怎么在外面去调用它呢?现在我们就揭晓答案。
seaJs学习笔记之seaJs配置方法
梦龙小站
12-30 3245
seaJs在之前已经为大家介绍了很多，今天为大家介绍一下seaJs配置参数的方法。我们可以配置根目录，可以指定模块名字等。很多比较实用的配制方法，今天将为大家揭晓。
seaJs学习笔记之如何依赖模块
梦龙小站
12-24 3199
前几天我们已经为大家介绍了seaJs解决冲突问题的方法了。那么seaJs可以不可以帮大家避免javascript中的依赖问题呢?可以的，下面我们将为大家为大家seaJs解决依赖的方法。
seaJs学习笔记之如何变成模块
梦龙小站
12-20 2501
之前已经为大家介绍了一些有关javascript模块化的相关知识，相信大家也对javascript模块化有了一定的了解。接下来我们就要正式开始介绍seaJs的使用方法了。 　　首先使用seaJs这个库，就要先引入这个库。在本地下载好最新的seaJs库，并引入到页面中。
seaJs学习笔记之javascript的冲突问题
梦龙小站
11-27 2427
seaJs是一个处理模块化的JS开源库，在学习seaJs之前还是要了解一下什么是JS模块化的一些概念，知道这个之后，会更好的了解seaJs的使用。首先先看一下下面的这个问题。当你的网站开发越来越复杂的......
seaJs学习笔记之seaJs的准备
梦龙小站
12-19 2181
Javascript模块化就来解决javascript中冲突、性能和依赖问题的。针对javascript模块化，我个人认为使用sea.js是比较好的。sea.js是一个适合web端的模块加载器，是一个现成的库。我们可以先来学习一下怎么使用sea.js。
使用gulp实现Seajs模块的按需合并与压缩
本文主要讨论如何在基于gulp的工作流中实现Seajs模块的合并与压缩，针对多页面应用的需求，强调按需加载和优化浏览器缓存的策略。 在前端开发中，构建工具如grunt和gulp常用于自动化任务，包括JavaScript文件的管理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值