2.精通前端系列技术之seajs模块化使工作更简单(二)
drag.js
// JavaScript Document //B开发 define(function(require,exports,module){ function drag(obj){
var disX = ;
var disY = ; 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 = ev.clientX - disX;
var T = ev.clientY - disY; //L = require('./range.js').range(L , document.documentElement.clientWidth - obj.offsetWidth , 0);
//T = require('./range.js').range(T , 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; });
main.js
// JavaScript Document //A开发 define(function(require,exports,module){ var oInput = document.getElementById('input1');
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3'); require('./drag.js').drag(oDiv3); oInput.onclick = function(){ oDiv1.style.display = 'block'; require('./scale.js').scale(oDiv1,oDiv2); }; });
range.js
// JavaScript Document define(function(require,exports,module){ function range(val , max , min){ if( val > max ){
return max;
}
else if( val < min ){
return min;
}
else{
return val;
} } exports.range = range; });
scale.js
// JavaScript Document //C开发 define(function(require,exports,module){ function scale(obj1,obj2){ var downX = ;
var downY = ;
var downW = ;
var downH = ; obj2.onmousedown = function(ev){
var ev = ev || window.event;
downX = ev.clientX;
downY = ev.clientY;
downW = obj1.offsetWidth;
downH = obj1.offsetHeight; document.onmousemove = function(ev){
var ev = ev || window.event; var W = ev.clientX - downX + downW;
var H = ev.clientY - downY + downH; W = require('./range.js').range(W , , );
H = require('./range.js').range(H , , ); obj1.style.width = W + 'px';
obj1.style.height = H + 'px';
}; document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}; return false; }; } exports.scale = scale; });
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:200px; height:200px; background:red; position:absolute; display:none;}
#div2{ width:30px; height:30px; background:yellow; position:absolute; right:; bottom:;}
#div3{ width:100px; height:100px; background:blue; position:absolute; right:; top:;}
</style>
<script src="../sea/sea.js"></script>
<script> //A开发 seajs.use('./main.js'); </script>
</head> <body>
<input type="button" value="弹窗" id="input1">
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
</body>
</html>
2.精通前端系列技术之seajs模块化使工作更简单(二)的更多相关文章
- 2.精通前端系列技术之JavaScript模块化开发 seajs(一)
在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下 问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完 ...
- 2.精通前端系列技术之JS模块化开发-深入学习seaJs(四)
深入学习seajs 配置信息 alias : 别名配置 paths : 路径配置 vars : 变量配置 map : 映射配置 preload : 预加载项 debug : 调试模式 base : 基 ...
- 2.精通前端系列技术之seajs和gruntJs结合开发(三)
1.我们先来了解下模块化历史 模块化历史 nodeJS的出现(http://nodejs.org/) commonJS规范(http://www.commonjs.org/) 浏览器JS的模块化? A ...
- 3.精通前端系列技术之深入学习Jquery(一)
使用Jquery的好处: •简化JS的复杂操作 •不再需要关心兼容性(原生js获取元素样式.事件需要做兼容性) •提供大量实用方法 1.选择网页元素 <!DOCTYPE html PUBLIC ...
- 1.精通前端系列技术之js正则表达式
在不会正则的时候,我们寻找字符串某些规律或者截取部分特殊字符的时候,我们需要写很多行代码来获取我们想要的字符串,在使用正则之后,代码量会大量简洁很多 1.字符串的比较,判断是否数字类型的字符串,我们用 ...
- [后端人员耍前端系列]AngularJs篇:30分钟快速掌握AngularJs
一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...
- seaJs模块化开发简单入门
随着前端技术的日益成熟,功能越来越丰富强大,规范也越来越健全,在这样的背景环境下很快便有了CommonJs.AMD.CMD等一系列规范,使前端发开趋向模块化.规范化.CMD模块化的代表之一就是国内开发 ...
- 通往成功的钥匙--Web前端开发技术
互联网是一个服务性行业,用户对网站良好的体验度,直接影响到网站的效果.无论你做了多少广告推广,没有用户体验度等于零.Web前端技术是为了解决用户体验度而诞生的.无论是百度.新浪.阿里巴巴等大型网站,还 ...
- gulp基于seaJs模块化项目打包实践【原创】
公司还一直在延续使用jq+seajs的技术栈,所以只能基于现在的技术栈进行静态文件打包,而众所周知seajs的打包比较"偏门",在查了不少的文档和技术分享后终于琢磨出了自己的打包策 ...
随机推荐
- mysql复制的配置
# 78服务器 server-id=78 # 从哪个数开始 auto_increment_offset=1 # 每次增加多少 auto_increment_increment=2 log-bin=m ...
- 算法_栈的Java的通用数组实现
栈是一个常用的最简单的数据结构,这里提供了其实现.内部维护了一个数组,并且可以动态的调整数组的大小.而且,提供了迭代器支持后进先出的迭代功能.Stack的实现是所有集合类抽象数据类型实现的模板,它将所 ...
- BestCoder Valentine's Day Round
昨晚在开赛前5分钟注册的,然后比赛刚开始就掉线我就不想说了(蹭网的下场……),只好用手机来看题和提交,代码用电脑打好再拉进手机的(是在傻傻地用手机打了一半后才想到的办法). 1001,也就是 hdu ...
- 解决SQL命令行回退的问题
场景 在linux或者aix上安装后Oracle后,在SQL命令行下无法通过键盘的退格键回退,如下 解决方法 安装软件 # rpm -ivh rlwrap-0.41-1.el6.x86_64.rpm ...
- 在Linux或者Unix下打开,每一行都会出多出^M这样的字符
Windows上写好的文件,在Linux或者Unix下打开,每一行都会出多出^M这样的字符,这是因为Windows与*nix的换行符不同所致,我们看看文件格式有什么不同. 在Linux下查看文件格式: ...
- iOS 使用Keychain 保存 用户名和密码到 本地
iOS 使用Keychain 保存 用户名和密码到 本地 之前曾把一些简单的数据保存在了plist,文件,及NsuserDefault里面, 但是如果要保存密码之类的,保存在本地就很不安全了: 但是利 ...
- unity3d magnitude的意义
http://blog.csdn.net/fzhlee/article/details/8663564 magnitude (Read Only) 返回向量的长度,也就是点P(x,y,z)到原点( ...
- Linux下安装最新的Eclipse
欢迎关注我的社交账号: 博客园地址: http://www.cnblogs.com/jiangxinnju/p/4781259.html GitHub地址: https://github.com/ji ...
- Android Support Library控件详细介绍之RecyclerView
RecyclerView控件 依赖 compile 'com.android.support:recyclerview-v7:24.1.1'RecyclerView也是容器控件,大多数的效果显示可通 ...
- base(C# 参考)
原文地址:https://msdn.microsoft.com/zh-cn/library/hfw7t1ce.aspx base 关键字用于从派生类中访问基类的成员: 调用基类上已被其他方法重写的方法 ...