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的打包比较"偏门",在查了不少的文档和技术分享后终于琢磨出了自己的打包策 ...
随机推荐
- 2014 Multi-University Training Contest 5
hdu4911 max(逆序数-k,0) #include <iostream> #include<stdio.h> #include<vector> #inclu ...
- JavaWeb学习总结(十四)--Apache的DBUtils
一.commons-dbutils简介 commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化 ...
- Wincap安装出现“error opening file for writing wpcap.dll”之解决办法
Wincap安装出现"error opening file for writing wpcap.dll"之解决办法 安装Wireshark时,一直出现下面的错误,选择忽略这个错误, ...
- Android 热补丁动态修复框架小结
一.概述 最新github上开源了很多热补丁动态修复框架,大致有: https://github.com/dodola/HotFix https://github.com/jasonross/Nuwa ...
- opencl gauss filter优化(三)
1.根据前两次的最终结果: 使用普通buffer,Horizontal 5ms, Vertical 17 ms 使用image buffer:Horizontal 9.4ms, Vertical 6. ...
- Linux chmod命令修改文件与文件夹权限的命令附实例
Linux chmod命令修改文件与文件夹权限的命令附实例 作者:佚名 字体:[增加 减小] 来源:互联网 时间:05-01 20:46:07我要评论 在linux中要修改一个文件夹或文件的权限我们需 ...
- const修饰指针
关于const修饰指针的情况,一般分为如下4种情况: ; const int *a =&b; //情况1 int const *a =&b; //情况2 int* const a =& ...
- COM组件(ATL篇)
目录 第1章创建进程内组件 1 1.1 目标 1 1.2 创建项目 3 1.2.1 VC++6.0 3 1.2.2 VC++2010 5 1.3 增加COM类 6 ...
- java final
final:(最终的)看不懂时有必要分析内存画图,不同方法的局部变量是相互独立的额不要被所起的名所困扰. 1)每个方法运行时jvm,都会为其开辟一片内存空间.内存空间是属于这个方法的, 同时,方法中的 ...
- LaTeX内容总结
欢迎关注我的社交账号: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://gith ...