requireJs插件的开发：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./require.js"></script>
</head>
<body>
<div id="container"></div>
<script>
/*
reuqireJs 的依赖分两种:
一种是不符合AMD标准的，一种是符合AMD标准
shim的使用在对不符合AMD标准的依赖，它只是分好依赖的加载顺序，只要依赖文件加载完就开始加载它，因此不符合标准的依赖，所依赖的文件也要有提供给全局使用的对外接口，不是就出现只提供AMD接口而不提供全局接口的情况下是无法给不符合标准的文件所依赖的。
当符合标准是，就是使用了define这个方法，那么可以直接在define的第一个参数编写依赖文件数组，然后第二个是方法如:
define(["jquery","touch"],function($,touch){...});
require.config可以定义好基本配置，如路径的别名，然后直接使用别名就可以使用了，当然还有很多配置如加版本号，以包的方式引入等等
资料地址:http://blog.csdn.net/sanxian_li/article/details/39394097
*/
require.config({
paths:{
"touch":"touch",
"jquery":"../jquery",
"touchMove":"touchMove"
},
"shim":{
"touchMove":{
deps:["touch","jquery"]
}
}
});
require(["jquery","touch","touchMove","text"],function($,touch,sw,text){
$("#container").touch();
});
</script>
</body>
</html>
touch.js再次封装的插件
/* touchJs的再封装一次的jquery插件 符合模块化规范 */ /* @params: 图片的位置参数有： left top scaleVal 缩放 rotateVal 旋转 originPos 旋转中心 pos 定位 relative absolute等 方法有 drag scale rotate 为true或函数都会启用，函数会运动后回调会有参数返回如缩放值，旋转值等 target为旋转缩放拖拽等动作的目标，没有就为触发目标为目标 传Jquery对象 tStartFn 点击回调 dStartFn 开始拖拽回调 */ ;(function (factory) { 'use strict'; if (typeof define === 'function' && (define.amd || define.cmd)) { //amd cmd define(["jquery","touch"],factory); //CommonJS } else if (typeof exports === 'object') { module.exports = factory(); } else { factory(); } }( function ($,touch) { 'use strict'; function initStart(_this,option){ var jsonObj={ left: 0, top: 0, scaleVal: 1, rotateVal: 0, originPos:"center", pos:"relative" }; var touchjs = { left: 0, top: 0, scaleVal: 1, //缩放 rotateVal: 0, //旋转 curStatus: 0, //记录当前手势的状态, 0:拖动, 1:缩放, 2:旋转 //初始化 init: function ($targetObj, callback,tStartFn) { touch.on($targetObj, 'touchstart', function (ev) { touchjs.curStatus = 0; ev.preventDefault();//阻止默认事件 tStartFn&&tStartFn(); }); touchjs.left = jsonObj.left; touchjs.top = jsonObj.top; touchjs.scaleVal = jsonObj.scaleVal; touchjs.rotateVal = jsonObj.rotateVal; callback&&callback(touchjs.left, touchjs.top, touchjs.scaleVal, touchjs.rotateVal); }, //拖动 drag: function ($targetObj, callback) { var $target=jsonObj.target||$targetObj; touch.on($targetObj, 'drag', function (ev) { $target.css("left", touchjs.left + ev.x).css("top", touchjs.top + ev.y); }); touch.on($targetObj,'dragstart',function(ev){ jsonObj.dStartFn&&jsonObj.dStartFn(ev.x,ev.y); }); touch.on($targetObj, 'dragend', function (ev) { touchjs.left = touchjs.left + ev.x; touchjs.top = touchjs.top + ev.y; callback&&callback(touchjs.left, touchjs.top,touchjs); }); }, //缩放 scale: function ($targetObj, callback) { var initialScale = touchjs.scaleVal || 1; var currentScale; var $target=jsonObj.target||$targetObj; touch.on($targetObj, 'pinch', function (ev) { if (touchjs.curStatus == 2) { return; } touchjs.curStatus = 1; currentScale = ev.scale - 1; currentScale = initialScale + currentScale; touchjs.scaleVal = currentScale; var transformStyle = 'scale(' + touchjs.scaleVal + ') rotate(' + touchjs.rotateVal + 'deg)'; $target.css("transform", transformStyle).css("-webkit-transform", transformStyle); callback&&callback(touchjs.scaleVal); }); touch.on($targetObj, 'pinchend', function (ev) { if (touchjs.curStatus == 2) { return; } initialScale = currentScale; touchjs.scaleVal = currentScale; callback&&callback(touchjs.scaleVal); }); }, //旋转 rotate: function ($targetObj, callback) { var angle = touchjs.rotateVal || 0; var $target=jsonObj.target||$targetObj; touch.on($targetObj, 'rotate', function (ev) { if (touchjs.curStatus == 1) { return; } touchjs.curStatus = 2; var totalAngle = angle + ev.rotation; if (ev.fingerStatus === 'end') { angle = angle + ev.rotation; } touchjs.rotateVal = totalAngle; var transformStyle = 'scale(' + touchjs.scaleVal + ') rotate(' + touchjs.rotateVal + 'deg)'; $target.css("transform", transformStyle).css("-webkit-transform", transformStyle); $target.attr('data-rotate', touchjs.rotateVal); callback&&callback(touchjs.rotateVal); }); } }; function initFn(option){ $.extend(true,jsonObj,option); var $target=jsonObj.target||_this; $target.css("-webkit-transform-origin",jsonObj.originPos) .css("transform-origin",jsonObj.originPos) .css("position",jsonObj.pos); touchjs.init(_this,jsonObj.callback,jsonObj.tStartFn); startUp(["drag","scale","rotate"]); } function startUp(arr){ for(var i=0;i<arr.length;i++){ if(typeof jsonObj[arr[i]] == "function"){ touchjs[arr[i]](_this,jsonObj[arr[i]]); }else if(typeof jsonObj[arr[i]] == "boolean" && jsonObj[arr[i]]){ touchjs[arr[i]](_this); } } } initFn(option); } $.fn.touch=function(option){ initStart($(this),option); } return initStart; }));
requireJs组件化开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./require.js"></script>
</head>
<body>
<div id="container"></div>
<div class="div">2</div>
<script>
/*
reuqireJs
使用text.js很好的和reuqireJs配置开发组件
*/
require.config({
paths:{
"text":"text",
"jquery":"../jquery",
}
});
require(["jquery"],function($,touch,sw,text){
//组件的js 组件的html
//当然也可以把css也加上
require(["./c", "text!t1.html"],
function(module, html) {
var id='com'+Date.now();
$('#container').html("<div id='"+id+"'>"+html+"</div>");
module.load($("#"+id));
}
)
});
</script>
</body>
</html>
组件的js
define(["jquery"],function($){ return { load:function($el){ $(".div",$el).on("click",function(){ alert(".div"); }) }, reload:function($el){}, unload:function($el){} } });
组件的html
<style>
.div{
background: red;
500px;
height: 50px;
margin:10px;
}
</style>
<div class="div">1</div>
在组件开发时先把html添加上，才调用js，js的加载给上生命周期，这样方便发开单页面应用。