Polymer 将外部初始函数转换为聚合物函数

我想用这个codrops教程创建一个聚合物

我可以创建一个基本组件，但脚本particleslideshow.js不会启动

我想这是因为我需要将它的代码移到polymerinit脚本中，但我不确定如何做到这一点。 这是文件中的脚本。有没有办法把这个移到聚合物上。我想我想知道init中的内容以及外部文件中可以保留的内容

var self = window;

;(function(self) {

    var canvas,
        context, 
        particles = [], 
        text = [], 
        nextText = [], 
        shape = {}, 
        mouse = { x: -99999, y: -99999 }, 
        currentTransition = 'circle', 
        left, right, 
        layout = 0, 
        type = ['circle', 'ovals', 'drop', 'ribbon'], 
        FPS = 60,

        /*
         * List words.
         */

        words = [ 'circle', 'ovals', 'drop', 'ribbon' ],

        /*
         * List colors.
         */

        colors = {
            circle: [ '#e67e22', '#2c3e50' ],
            ovals: [ '#c0392b', '#ff7e15' ],
            drop: [ '#1d75cf', '#3a5945' ],
            ribbon: [ '#702744', '#f98d00' ]
        };

    /*
     * Init.
     */

    function init() {

        console.log(document.querySelector('.ip-slideshow').length);
        console.log(shadow.querySelector('.ip-slideshow').length);

        var slideshowContainer = document.querySelector('.ip-slideshow');

        canvas = document.createElement('canvas');

        canvas.width = innerWidth;
        canvas.height = 500;

        slideshowContainer.appendChild(canvas);

        // Browser supports canvas?
        if(!!(capable)) {

            context = canvas.getContext('2d');

            // Events
            if('ontouchmove' in window) {
                canvas.addEventListener('touchup', onTouchUp, false);
                canvas.addEventListener('touchmove', onTouchMove, false);   
            }
            else {
                canvas.addEventListener('mousemove', onMouseMove, false);
            }

            // Arrows
            handleClick('bind', 'left');
            handleClick('bind', 'right');

            window.onresize = onResize;

            createParticles();

            // Arrows elements
            left = document.querySelector('.ip-nav-left');
            right = document.querySelector('.ip-nav-right');

            // Show right arrow
            right.classList.add('ip-nav-show');

        }
        else {
            console.error('Sorry, switch to a better browser to see this experiment.');
        }

    }

    /*
     * Checks if browser supports canvas element.
     */

    function capable() {
        return canvas.getContext && canvas.getContext('2d');
    }

    /*
     * On resize window event.
     */

    function onResize() {

        canvas.width = window.innerWidth;
        canvas.height = 500;

        // Reset the text particles, and align again on the center of screen
        nextText = [];
        updateText();

    }

    function scrollX() {
        return window.pageXOffset || window.document.documentElement.scrollLeft; 
    }

......

    /*
     * Request new frame by Paul Irish.
     * 60 FPS.
     */

    window.requestAnimFrame = (function() {

        return  window.requestAnimationFrame       || 
                window.webkitRequestAnimationFrame || 

                function(callback) {

                    window.setTimeout(callback, 1000 / FPS);

                };

    })();

    window.addEventListener ? window.addEventListener('load', init, false) : window.onload = init;

})(self);

---

如果您更改脚本，而不是

window.addEventListener ? window.addEventListener('load', init, false) : window.onload = init;

你做了类似的事情

self.initParticlesSlideshow = init;

然后您可以在如下元素的

domReady

中调用它：

Polymer('my-element', {
  domReady: function() {
    initParticlesSlideshow();
  }
});

有很多其他的方法可以做到这一点，还有很多其他的细节；我只是想让你开始=P