Question

我试图在jquery插件中包装canvas函数，以便可以通过多个实例调用它。

我希望能够遍历找到的项目并像这样调用插件

HTML ...

<div id="select1" class="foo" data-init="multi">A</div>
<div id="select2" class="foo" data-init="multi">B</div>
<div id="select3" class="foo" data-init="multi">C</div>
<div id="select4" class="foo" data-init="multi">D</div>

JS ...

var complicatedObj = {
    init: function(element){
        this.el = element;
        console.log("init method", this.el);
       //start a complicated process 
       //like rendering a canvas applicaation

        this.bindEvent();
        this.addRandom(this.el);
    },
    addRandom: function(el){
        $(el).text(Math.random());
    },
    reInit: function(){
        console.log("re-initialize method");
    },
    bindEvent: function(){
        $(this.el).click(function() {
            console.log("Letter.", $(this).text());
        });
    }
}
//An application with complicated functions -- initialize, re-initialize


$.multiInstance = {
    id: 'multiInstance',
    version: '1.0',
    defaults: { // default settings
        foo: 'bar'
    }
};

(function ($) {
    //Attach this new method to jQuery
    $.fn.extend({

        multiInstance: function (params) {
            //Merge default and user parameters
            var otherGeneralVars = 'example';

            return this.each(function () {
                var $this = $(this), opts = $.extend({},$.multiInstance.defaults, params);

                switch (params) {
                    case "init":
                        complicatedObj.init($this);
                        break;
                    case "reInit":
                        complicatedObj.addRandom($this);
                        break;
                }  

                //console.log("$this", $this);


                console.log("params", params);
                //$this.text(opts.foo);
            });
        }
    })
})(jQuery);


/*
$("#select1").multiInstance();
$("#select2").multiInstance({foo:"foobar"})
$("#select3").multiInstance("init");*/

$('[data-init="multi"]').each(function( index ) {
    //console.log( index + ": " + $( this ).text());
    $(this).multiInstance("init");
});

setTimeout(function(){ $('#select3').multiInstance("reInit"); }, 2000);

但我需要能够调用不同的方法，将参数传递给这些方法 - 然后在发生更改时 - 提供回调以捕获对实例的更改

这是构建插件的正确方法吗...我希望能够创建应用程序的多个实例 - 但也可以在外部控制它 - 并且还可以从外部结果中提取值。

Answer 1

这是我试图包装到自己的jquery插件中的应用程序。

https://jsfiddle.net/7a4738jo/10/

的CSS ..

body {
    background-color: #CCCCCC;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

canvas{
    background: grey;
}

HTML ..

<script type="text/javascript" src="https://code.createjs.com/easeljs-0.6.0.min.js"></script>
<canvas id='canvas1' data-init="canvas360" width="465" height="465"></canvas>
<canvas id='canvas2' data-init="canvas360" width="465" height="465"></canvas>

... JS

var stage;

function init(element) {   
    var canvas = $(element)[0];
    if (!canvas || !canvas.getContext) return;

    stage = new createjs.Stage(canvas);  
    stage.enableMouseOver(true);
    stage.mouseMoveOutside = true; 
    createjs.Touch.enable(stage);

    var imgList = ["http://jsrun.it/assets/N/b/D/X/NbDXj.jpg", 
                   "http://jsrun.it/assets/f/K/7/y/fK7yE.jpg", 
                   "http://jsrun.it/assets/j/U/q/d/jUqdG.jpg", 
                   "http://jsrun.it/assets/q/o/4/j/qo4jP.jpg", 
                   "http://jsrun.it/assets/i/Q/e/1/iQe1f.jpg", 
                   "http://jsrun.it/assets/5/k/y/R/5kyRi.jpg", 
                   "http://jsrun.it/assets/x/T/I/h/xTIhA.jpg", 
                   "http://jsrun.it/assets/4/X/G/F/4XGFt.jpg", 
                   "http://jsrun.it/assets/6/7/n/r/67nrO.jpg", 
                   "http://jsrun.it/assets/k/i/r/8/kir8T.jpg", 
                   "http://jsrun.it/assets/2/3/F/q/23Fqt.jpg", 
                   "http://jsrun.it/assets/c/l/d/5/cld59.jpg", 
                   "http://jsrun.it/assets/e/J/O/f/eJOf1.jpg", 
                   "http://jsrun.it/assets/o/j/Z/x/ojZx4.jpg", 
                   "http://jsrun.it/assets/w/K/2/m/wK2m3.jpg", 
                   "http://jsrun.it/assets/w/K/2/m/wK2m3.jpg", 
                   "http://jsrun.it/assets/4/b/g/V/4bgVf.jpg", 
                   "http://jsrun.it/assets/4/m/1/8/4m18z.jpg", 
                   "http://jsrun.it/assets/4/w/b/F/4wbFX.jpg", 
                   "http://jsrun.it/assets/4/k/T/G/4kTGQ.jpg", 
                   "http://jsrun.it/assets/s/n/C/r/snCrr.jpg", 
                   "http://jsrun.it/assets/7/f/H/u/7fHuI.jpg", 
                   "http://jsrun.it/assets/v/S/d/F/vSdFm.jpg", 
                   "http://jsrun.it/assets/m/g/c/S/mgcSp.jpg", 
                   "http://jsrun.it/assets/t/L/t/P/tLtPF.jpg", 
                   "http://jsrun.it/assets/j/7/e/H/j7eHx.jpg", 
                   "http://jsrun.it/assets/m/o/8/I/mo8Ij.jpg", 
                   "http://jsrun.it/assets/n/P/7/h/nP7ht.jpg", 
                   "http://jsrun.it/assets/z/f/K/S/zfKSP.jpg", 
                   "http://jsrun.it/assets/2/3/4/U/234U6.jpg", 
                   "http://jsrun.it/assets/d/Z/y/m/dZymk.jpg"];  

    var images = [], loaded = 0, currentFrame = 0, totalFrames = imgList.length; 
    var rotate360Interval, start_x;

    var bg = new createjs.Shape();
    stage.addChild(bg);  

    var bmp = new createjs.Bitmap();      
    stage.addChild(bmp);

    var myTxt = new createjs.Text("HTC One", '24px Ubuntu', "#ffffff");
    myTxt.x = myTxt.y =20;
    myTxt.alpha = 0.08;
    stage.addChild(myTxt);   


    function load360Image() {
        var img = new Image();
        img.src = imgList[loaded];
        img.onload = img360Loaded;
        images[loaded] = img;   
    }

    function img360Loaded(event) {
        loaded++;        
        bg.graphics.clear()
        bg.graphics.beginFill("#222").drawRect(0,0,stage.canvas.width * loaded/totalFrames, stage.canvas.height);
        bg.graphics.endFill();

        if(loaded==totalFrames) start360();
        else load360Image();
    }


    function start360() {
        document.body.style.cursor='none';

        // 360 icon
        var iconImage = new Image();
        iconImage.src = "http://jsrun.it/assets/y/n/D/c/ynDcT.png";
        iconImage.onload = iconLoaded;        

        // update-draw
        update360(0);

        // first rotation
        rotate360Interval = setInterval(function(){ if(currentFrame===totalFrames-1) { clearInterval(rotate360Interval); addNavigation(); } update360(1); }, 25);
    }

    function iconLoaded(event) {
        var iconBmp = new createjs.Bitmap();
        iconBmp.image = event.target;
        iconBmp.x = 20;
        iconBmp.y = canvas.height - iconBmp.image.height - 20;
        stage.addChild(iconBmp);
    }

    function update360(dir) {
        currentFrame+=dir;
        if(currentFrame<0) currentFrame = totalFrames-1;
        else if(currentFrame>totalFrames-1) currentFrame = 0;
        bmp.image = images[currentFrame];
    }


    //------------------------------- 
     function addNavigation() { 
        stage.onMouseOver = mouseOver;
        stage.onMouseDown = mousePressed;        
        document.body.style.cursor='auto';
    }

    function mouseOver(event) {
        document.body.style.cursor='pointer';
    }

    function mousePressed(event) {
        start_x = event.rawX;
        stage.onMouseMove = mouseMoved;
        stage.onMouseUp = mouseUp;

        document.body.style.cursor='w-resize';        
    }

    function mouseMoved(event) {
        var dx = event.rawX - start_x;
        var abs_dx = Math.abs(dx);

        if(abs_dx>5) {
            update360(dx/abs_dx);
            start_x = event.rawX;
        }
    }

    function mouseUp(event) {
        stage.onMouseMove = null;
        stage.onMouseUp = null;         
        document.body.style.cursor='pointer';
    }    

    function handleTick() { 
         stage.update();
    }    

    document.body.style.cursor='progress';
    load360Image();


     // TICKER
    createjs.Ticker.addEventListener("tick", handleTick);
    createjs.Ticker.setFPS(60);
    createjs.Ticker.useRAF = true;
}




// Init
$(document).ready(function() {
    //create multiple instances of canvas
    $('[data-init="canvas360"]').each(function(index) {
      init(this);
    });
});

Javascript jQuery插件 - 多个实例，外部控件

1 个答案: