Como biblioteca da interface do usuário, não pretendo deixar todos aprender meu núcleo de kit e memorizar minha API. Esse tipo de método de aprendizado de acompanhamento não tem significado. Hoje, o jQuery é popular, todo mundo aprende JQ e amanhã o Seajs se tornará popular, e todos cantarão Seajs. Assim, em KitJs, preparei especialmente um açúcar de sintaxe (suger.js) para usuários de JQ, o que simula completamente a API JQ. Além da implementação, a interface é a mesma, o que também é conveniente para todos transformarem diretamente os componentes do kit. Obviamente, como fã puramente técnico, é muito mais interessante entender profundamente como uma tecnologia é implementada do que usá-la para ideologia. Obviamente, se você plagiar diretamente o código do componente do kit para considerações de KPI ou o bônus do projeto do chefe para concluir seu KPI, não me importo com esse comportamento. Contanto que você beba água e não se esqueça de cavar o poço e pode promover kitjs ao soprar água com colegas, sou muito grato a você. Ao mesmo tempo, o kit também é uma biblioteca muito jovem. Devido ao desenvolvimento contínuo, existem alguns problemas de compatibilidade de bugs e navegador, o que é inevitável. Estou sozinho e tenho energia limitada. Nesta era de guerra no front-end, mais amigos que pensam da mesma forma são bem-vindos para torná-lo maior e progredir juntos.
Ao mesmo tempo, um componente de diálogo KITJS foi lançado hoje, com o endereço de demonstração sendo http://xueduany.github.com/kitjs/kitjs/demo/dialog/demo.html
(I) Formato do diretório do kit
De volta ao tópico, no kitjs, o kit.js é a existência do arquivo principal. Ele contém alguns dos objetos e objetos mais usados, operações herdadas e um lote de string.js, math.js etc. são expandidas de acordo com a divisão de funções no mesmo diretório de nível. Cada arquivo JS independente contém um construtor de classe e uma instância de um objeto global.
Tomando o kit.js como exemplo, ele inclui a classe $ kit e a instância $ kit $ kit (começando com $ é para evitar conflitos com variáveis comumente usadas).
Todos os outros tipos estão pendurados em instâncias de instância de $ kit e $ kit da maneira Link, como o Math.js, que inclui as instâncias $ kit.math e $ kit.math, para que haja apenas dois poluentes no escopo global. Ao mesmo tempo, no kit.js, definimos um espaço para nome chamado $ kit.ui. No diretório físico, usamos o diretório de widgets do mesmo nível que o kit.js, e o diretório com várias letras iniciais é organizado em uma linha.
Todos os diretórios no diretório do widget são diretórios de componentes do KITJS. Cada arquivo JS independente contém apenas um construtor de classe para componentes independentes (não instance). Também pode ser compatível com o modo de módulo de Commonjs (pode cumprir os módulos/1.1 especificação de Commonjs e transformação AMD. O método de transformação específico será mencionado em detalhes posteriormente)
(Ii) o modelo de código padrão do componente do kit, a anotação está em conformidade com a especificação JSDOC
Vamos tomar os componentes de diálogo como exemplo, cada componente é semelhante ao seguinte
Primeiro de tudo, o comentário do jsdoc, que classe é a declaração @class, @require xxx.js, quais componentes são declarados dependentes de
(Iii) método de construtor e inicialização
Cada classe define um construtor em uma função padrão (config) {} way. Deve -se notar aqui que o construtor de cada componente KITJS se reserva um parâmetro de configuração por padrão como entrada para configuração personalizada.
Ao mesmo tempo, no construtor de classe, há um membro estático, objeto DefaultConfig, usado para armazenar a configuração padrão do componente KitJS
Ao usar os componentes do KITJS, a primeira coisa que você precisa fazer é inicializar um novo objeto de instância através da nova instância. Isso é apenas para inicializar um objeto de componente JS. Ainda não há HTML. Você precisa executar o método init, criar html e adicioná -lo ao doc, o que é equivalente a derramar carne e sangue na alma ^_ ^.
Alguns alunos podem perguntar: por que não colocar o método init diretamente no construtor e liberá -lo separadamente?
1. Porque a classe pai precisa ser instanciada durante a herança. Quando a classe infantil herda da classe pai, o objeto de protótipo da classe criança será definido para a nova instância da classe pai. Se o método de inicialização do init for colocado no construtor, o HTML da classe pai será executado diretamente e o código de lixo será gerado.
2 Devido ao carregamento preguiçoso, o código HTML precisa ser executado no momento certo, em vez de imediatamente quando a inicialização é inicializada
Portanto, a maneira padrão de usar os componentes do KITJS é
Após a instanciação, execute o método init (o método init retornará o objeto de componente atual, com o código de retorno 7)
Conforme mostrado na figura acima, todos os métodos da API na caixa de diálogo são pendurados no protótipo, e herança e passando para o objeto de instância através da extensão do protótipo.
Observe o código do construtor do componente $ kit.ui.dialog.yesorno,
(Iv) herança de kitjs
Ele declarou o relacionamento de herança com o objeto $ kit.ui.dialog através do método $ kit.Irit. Aqui, haverá um colega de classe que deseja perguntar, por que ele deveria herdar no construtor em vez de escrevê -lo diretamente fora?
A razão é:
1.kitjs é uma relação de herança baseada em protótipo
2. Para usar os componentes do KITJS, você deve instanciar o objeto componente. Cada componente é criado através do construtor por meio da nova instância.
Por isso, coloquei a execução do relacionamento de herança no construtor de código, para que, ao instanciar um novo componente, herdarei os membros e os métodos de sua classe pai passo a passo de acordo com o método de herança do construtor do componente atual.
Quando uma classe infantil precisa modificar o método da classe pai, você só precisa definir um método de mesmo nome no protótipo da classe criança para substituir o método de herança da classe pai.
Em termos de nomeação, os Kitjs seguem, e a subclasse continua o nome da classe pai como espaço para nome e mantém a cadeia, como mostrado na figura acima $ kit.ui.dialog, $ kit.ui.dialog.yesorno
A implementação de herança de kitjs também é muito simples
Instanciar um objeto de classe pai, copiar todos os membros da instância da classe pai no protótipo da subclasse e redefinir o construtor de protótipo da subclasse como o construtor de subclasse e, em seguida, pendure um link para o construtor de subclasse e aponte para a classe pai. Por meio do método $ kit.Irit, no processo de instanciação da subclasse $ kit.ui.dialog.yesorno, você pode herdar todos os membros da classe pai $ kit.ui.dialog que não existem e realizar a herança semelhante às linguagens estáticas.
(V) parâmetros de configuração , desmontagem de acoplamento/remoção de pele de HTML e CSS?
O construtor de componentes do kit está acostumado a passar em um parâmetro do tipo mapa e sempre personaliza o componente. Quando o componente do kit for inicializado, ele substituirá automaticamente o padrão DefaultConfig padrão com o parâmetro de configuração enviado do usuário e inicia a inicialização.
Para qualquer componente, é impossível se livrar das mudanças na estrutura HTML e mudanças no estilo CSS
O kit decompõe esse acoplamento na configuração do parâmetro de configuração.
Primeiro de tudo, use a tecnologia de modelo HTML. O kit defende o método $ kit.newhtml para root diretamente a string html, gerar html dom e inserir fluxos de documentos,
Portanto, extraímos o conteúdo HTML aproximado do componente, o encapsulamos em um modelo de sequência HTML e o armazenamos no DefaultConfig do componente. Se o usuário precisar modificar o modelo HTML, use uma configuração personalizada ao inicializá -la e substituir o campo de modelo no padrão padrão.
No acoplamento e decomposição de modelos HTML e CSS, o Kit usa um truque para decompor o nome da classe usando modelos JS.
Substitua o html na configuração na forma de $ {xxx} por $ kit.tpl no método init
Ao mesmo tempo, todos os estilos são definidos no CSS.
Se houver vários conjuntos de skins que precisam ser comutados, você poderá optar por modificar o nome da classe do modelo especificando o nome da classe real correspondente a $ {cls} durante a inicialização para alcançar o efeito da substituição da pele.
(Vi) Resumo
Basicamente, através da análise de código do componente $ kit.ui.dialog.yesorno, temos um entendimento aproximado da estrutura de implementação de componentes dos kitjs. De fato, não é difícil projetar um componente de página, mas projetar um componente de página que possa se adaptar a vários requisitos e se deformar rapidamente e se adaptar ao desenvolvimento em várias ocasiões. O kit divide os modelos HTML e CSS, personaliza os parâmetros de configuração e o defaultConfig, e as subclasses obtêm as propriedades e métodos da classe dos pais por meio da herança e, ao mesmo tempo, refletem o código relevante de acordo com diferentes necessidades de negócios, que podem basicamente atender às empresas de interface do negócio de vários níveis de vários níveis.
Os kitjs incluem biblioteca básica e biblioteca da interface do usuário.
Biblioteca Básica: Função Seletor, Função de Operação DOM, Função de Animação, Aprimore os Eventos DOM, Aumente a Estrutura de Dados Hashtree, Função de IO, Função de Armazenamento Local, Multithreading, Range, etc.
Há também um suger.js que simula o formato de operação jQuery
A biblioteca da interface do usuário inclui: elementos aprimorados de formulário, camadas pop-up, players de mídia, estruturas de verificação, fluxo em cascata, ligação, apresentações de slides, calendários, componentes de upload, motores de modelo, etc.