Eu preciso definir 'eu', 'elemento' etc. no início de todas as funções dentro de um widget jQuery

Question

Eu crio widgets jQuery algo assim

<script type="text/javascript">
(function ($) {
        $.widget("cb.bacon", {
            _create: function() {
                var self = this,
                    o = self.options,
                    el = self.element;

                 // Some code

            },

            _bacon: function() {
                var self = this,
                    o = self.options,
                    el = self.element;

                 // Some code
            },

            _smokey: function() {
                var self = this,
                    o = self.options,
                    el = self.element;

                 // Some code
            } 
        });
    })(jQuery);                 
</script>

Eu invariavelmente acabo tendo que declarar self, options, element em cada função que eu crio.

Existe algum entendimento do fundo que estou perdendo ou realmente tenho que fazer isso o tempo todo?

Answer 1

Você não precisa fazer isso, isso é apenas para facilitar o acesso a eles dentro da função.

o self A variável é útil quando você está usando um retorno de chamada em uma função jQuery, onde this seria definido para o elemento em que você está agindo. Por exemplo:

$('.bacon').each(function(){ $(this).css('background', self.getBackground()); });

As variáveis o e el Apenas contribui para menos digitação. Se você tem o Varible self, ou a referência this inalterado, você pode acessar o options e element propriedades do objeto diretamente.

Answer 2

Você precisa declarar essas coisas a cada vez, pois está usando um objeto literal. Você pode envolver o objeto literal como uma chamada de função e alcançar o que deseja dessa maneira.

<script type="text/javascript">
function makeTheBacon() {
    var self = this;
    var o = self.options;
    var el = self.element;

    self._create = function() {...};
    self._bacon = function() {...};
    self._smokey = function() {...};
    return self;
}

(function ($) {
    $.widget("cb.bacon", makeTheBacon());
})(jQuery);
</script>

Há também uma pergunta que toca nisso também usando funções no objeto literal aqui, mas isso parecia excessivamente detalhado, considerando sua pergunta original.