模塊化開發插件，組件

時間 2019-11-29

標籤模塊化開發插件組件简体版

原文原文鏈接

requireJs插件的開發：css

<!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再次封裝的插件html

/*
    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組件化開發jquery

<!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>

組件的jsweb

define(["jquery"],function($){
    return {
        load:function($el){
            $(".div",$el).on("click",function(){
                alert(".div");
            })
        },
        reload:function($el){},
        unload:function($el){}
    }
});

組件的htmljson

<style>
    .div{
        background: red;
        width: 500px;
        height: 50px;
        margin:10px;
    }
</style>
<div class="div">1</div>

在組件開發時先把html添加上，才調用js，js的加載給上生命週期，這樣方便發開單頁面應用。數組

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。