Implementando Mixins em JavaScript

Problema Você deseja implementar Ruby-mixins estilo em JavaScript para estender facilmente a funcionalidade do objeto. Teoria Em Ruby, mixins são uma maneira de estender a funcionalidade de um objeto através da adopção das funcionalidades de outro objeto. Quando você criar um tipo de JavaScript, os métodos e as propriedades associadas com o tipo depende da declaração do tipo. Para estender a funcionalidade de um exemplo, uma propriedade é atribuída a uma função ou outro objeto.

 Fonte: / website / ROOT / artigos ajax / javascript / DefinedClass função mixins.html () () DefinedClass.prototype.defined1 = function () () DefinedClass.prototype.defined2 = function () ()

A função DefinedClass é usado para definir um tipo. Dois métodos, defined1 e defined2, estão associados com o tipo DefinedClass. Cada método é associado com a propriedade de protótipo, de forma cada vez DefinedClass é instanciado, estes métodos irá partilhar a instância mesma função. Assim, se você atribuir a propriedade de defined1 ou defined2, então todas as instâncias do DefinedClass será capaz de compartilhar o exemplo mesma propriedade. Solução Para estender uma instância de DefinedClass, você poderá individualmente atribuir as propriedades da instância. Individualmente copiar uma propriedade é entediante, uma solução mais eficiente é para copiar as propriedades de um objeto para outro objeto. Muitos quadros, como protótipo e Dojo Toolkit, fornecem a capacidade de copiar as propriedades. A seguir é a implementação mixin para Prototype.

 Fonte: / website / ROOT / protótipo / dist / prototype.js Object.extend = function (destination, source) (for (property in source) (destination [property] = source [property]; destino return);

A função Object.extend tem dois parâmetros: o destino e origem. O parâmetro de destino representa um objeto que tem propriedades acrescentou. O parâmetro de origem representa um objeto que terão suas propriedades copiadas. As propriedades são copiados usando um laço for, porque não é possível percorrer as propriedades de uma instância do objeto de qualquer outra forma. O identificador de propriedade, não o valor da propriedade, é iterada. Para recuperar o valor da propriedade, você pode usar a seguinte sintaxe: O problema source.property com esta notação é que a propriedade é definida explicitamente, e usá-lo no contexto da implementação de uma função mixin é complicado. A solução é usar a notação de matriz JavaScript e recuperar a propriedade como um array. Voltando à solução Prototype, já que cada propriedade da fonte é iterativo, o valor é recuperado e atribuído ao destino. Vamos aplicar o método extend usando o seguinte exemplo, declaração de objeto.

 Fonte: / website / ROOT / artigos ajax / javascript / MyExtensions mixins.html = (teste: function (tstValue) (assertEquals (tstValue, MyExtensions.test.value);))

A declaração da classe MyExtensions é uma referência estática para um único imóvel incorporado que é um exemplo do tipo de objeto. Queremos copiar a propriedade para uma instância de DefinedClass, como mostra o seguinte teste.

 Fonte: / website / ROOT / artigos ajax / javascript / prototype_mixin mixins.html: function () (var = cls DefinedClass novo (); if (MyExtensions.test.value) (testManager.failed ();) Object.extend (CLS, MyExtensions ); cls.test.value = 3; cls.test (3); cls.test.value = 10; cls.test (10);)

O código de teste vai além da simples chamada de Object.extend, mas revela que a maioria dos toolkits implementar mixins usando tipos de pato com base em referências. Não é errado, mas porque as funções são objetos que serão compartilhados entre os vários tipos de classe. Para entender isso, olhe para a implementação de MyExtensions.test. As referências de implementação da propriedade função test.value e referências cruzadas com o parâmetro tstValue. Na implementação da função prototype_mixin, uma instância de DefinedClass é criado e, em seguida, estendido com os métodos de MyExtensions. A propriedade cls.test.value é atribuído um valor de 3, e do método é chamado.

A aplicação do teste verifica o valor de MyExtensions.test.value como 3. Se o método de ensaio do CLS foi uma cópia do MyExtension.test método, então o teste seria um fracasso porque MyExtensions.test.value não tenha sido atribuído, como evidenciado pelo bloco de teste se. Mas o código de teste não falha, o que indica que duck typing cls.test MyExtensions.test e são um eo mesmo método. Referenciado baseado tem alguns comportamentos estranhos, uma das quais é mostrado no código a seguir.

 Fonte: / website / ROOT / artigos ajax / javascript / GetExtensionFunctionality função mixins.html () ((return teste: function (tstValue) (assertEquals (tstValue, this.test.value);))) prototype_inconsistent_mixin: function () (var CLS1 = DefinedClass novo (); var cls2 = DefinedClass novo (); Object.extend (CLS1, GetExtensionFunctionality ()); Object.extend (cls2, GetExtensionFunctionality ()); cls1.test.value = 3; try (cls2.test (3 );) catch (e) (if (e.jsUnitMessage) (info ( "prototype_inconsistent_mixin" exceção "Esperado (" + + e.jsUnitMessage ")");))),

Aqui, a funcionalidade estendida é definida no contexto de uma chamada de método. No exemplo anterior, o método de teste foi compartilhada por várias classes. No teste, CLS1 e cls2 também deve compartilhar o mesmo método de ensaio. Executando o código de teste irá resultar em uma exceção esperada cls.test.value afirmando que não tem o valor 3. Em suma, o problema é que você tem duas maneiras de chamar Object.extend, e você terá dois comportamentos completamente diferentes devido a natureza do valor-referência e tipagem pato base. É algo que você precisa estar ciente, porque você pode ter algum comportamento estranho. Claro, um contra-argumento poderia ser que, se você pensar sobre a natureza da propriedade prototype , o mesmo tipo de comportamento resulta. Eu concordo que é o caso, mas também perceber que os exemplos não usar o identificador de protótipo. Um desenvolvedor de JavaScript sabe que as ramificações do protótipo são, e assim vai saber quando usar e quando não usar a palavra-chave. Nos exemplos, este artigo é um comportamento protótipo foi ilustrado sem o uso do protótipo. Nós sabemos sobre essa situação e têm dois métodos mixin: um que copia referências (tipagem pato de referência) e um que faz uma cópia completa (digitação pato valor). O valor total baseado pato-digitado implementação mixin segue.

 Fonte: / website / root / scripts / Jaxson / Common.js mixin: function (copyTo, copyFrom, forceCopy) ( copiedFrom var = eval (ops.singleSerialize (copyFrom));for (propriedade em copyFrom) (if ((copyTo [propriedade] & & vigor) | | copyTo! [propriedade]) (copyTo [propriedade] = copiedFrom [property];)))

Na implementação do método mixin, o primeiro passo é gerar um buffer de exemplo a ser copiado (ops.singleSerialize), e depois executar o buffer usando eval. O processo de gerar um buffer e depois executá-lo tem o efeito de clonagem do objeto e suas propriedades. Então, quando o clone é iterativo, o objeto a ser alargado tem referências para o objeto clonado, e não o objeto original. Isto cumpre a exigência de que o objeto a ser alargado tem copiado as propriedades do objeto de origem.

No código-fonte do artigo, você também vai encontrar um método chamado ops.refMixin, que se comporta como as outras implementações mixin e atribui as referências ao objeto a ser prorrogado. Quando mixins de execução, manter os seguintes pontos em mente:

• Mixins são uma maneira de estender a funcionalidade de um objeto através da adopção das funcionalidades de outro objeto. Em JavaScript, você pode replicar esta técnica, copiando as referências ou copiando a funcionalidade diretamente.

• Mixins são uma forma de protótipo baseado em programação, onde o comportamento do objeto é determinada em tempo de execução.

• Você não pode escrever propriedades que fazem parte das funções e, portanto, acho que a cópia de referência não é um problema. Mas esteja avisado: se a sua fonte de referências propriedades do objeto que os objetos de referência, o objeto não é copiado, mas sim a referência ao objeto.

• Você vai usar mixins extensivamente quando escrever o código JavaScript, que deve ter cuidado com seus objetos e referências.

um artigo submetido por Sonja Lande

Isenção de responsabilidade:O nosso site não se responsabiliza pelo conteúdo deste artigo. Webarticles é uma fonte de informação livre.
Importante: Este artigo "Aplicação Mixins em JavaScript" foi traduzida por um software automático. Nós sentimos muito por quaisquer erros de ortografia que pode ter ocorrido. Obrigado pela sua compreensão.