À medida que os programas JavaScript se tornam cada vez mais complexos, eles geralmente exigem que uma equipe se desenvolva em colaboração, e a modularização do código e as especificações organizacionais se tornam extremamente importantes. O padrão MVC é um modelo clássico de organização de código.
(… Introdução ao MVC.)
(1) modelo
O modelo representa a camada de dados, ou seja, a fonte de dados exigida pelo programa e geralmente é representada no formato JSON.
(2) Ver
A visualização representa a camada de apresentação, que é a interface do usuário. Para páginas da web, é o código HTML da página da web vista pelos usuários.
(3) Controlador
O controlador representa a camada de controle, usada para processar os dados originais (modelo) e transferi -los para a visualização.
Como a programação da Web é diferente da programação do cliente, com base no MVC, a comunidade JavaScript produziu várias estruturas de variantes MVP (Model-View-Presentador), MVVM (modelo-viewmodel), etc. Algumas pessoas chamam coletivamente todos os vários modos desse tipo de estrutura MV*.
A vantagem de uma estrutura é que ela organiza o código razoavelmente, facilita o trabalho em equipe e a manutenção futura, e a desvantagem é que ele tem um certo custo de aprendizado e o limita a escrevê -lo.
Carregamento da espinha dorsal
A cópia do código é a seguinte:
<script src = "/javascripts/lib/jquery.js"> </sCript>
<script src = "/javascripts/lib/subscore.js"> </sCript>
<script src = "/javascripts/lib/backbone.js"> </sCript>
<script src = "/javascripts/jst.js"> </sCript>
<script src = "/javascripts/router.js"> </sCript>
<script src = "/javascripts/init.js"> </sCript>
Backbone.View
Uso básico
O método Backbone.View é usado para definir uma classe de visualização.
A cópia do código é a seguinte:
var appview = backbone.view.extend ({
render: function () {
$ ('main'). Append ('<H1> título de primeiro nível </h1>');
}
});
O código acima define uma classe de visualização AppView através do método de extensão do backbone.View. Existe um método de renderização dentro desta classe para colocar a exibição na página da web.
Ao usá -lo, você precisa criar uma nova instância da classe View e, em seguida, chamar o método de renderização através da instância, para que a visualização possa ser exibida na página da web.
A cópia do código é a seguinte:
var AppView = new AppView ();
AppView.render ();
O código acima cria um novo aplicativo de instância do View Class AppView e, em seguida, ligue para o AppView.render, e o conteúdo especificado será exibido na página da web.
Ao criar uma nova instância de visualização, geralmente você precisa especificar um modelo.
A cópia do código é a seguinte:
var document = novo documento ({
Modelo: Doc
});
Método inicialize
A visualização também pode definir o método inicializar. Ao gerar uma instância, o método será chamado automaticamente para inicializar a instância.
A cópia do código é a seguinte:
var appview = backbone.view.extend ({
inicializar: function () {
this.render ();
},
render: function () {
$ ('main'). Append ('<H1> título de primeiro nível </h1>');
}
});
var AppView = new AppView ();
Depois que o código acima define o método inicializar, ele elimina a etapa de chamar manualmente o appView.render () após gerar a instância.
atributo el, $ el atributo
Além de especificar o elemento da página da web com vinculação de "Visualizar" diretamente no método Render, você também pode especificar o elemento da página da web usando o atributo EL da visualização.
A cópia do código é a seguinte:
var appview = backbone.view.extend ({
el: $ ('main'),
render: function () {
isto. $ el.append ('<h1> título de primeiro nível </h1>');
}
});
O código acima liga diretamente os elementos da página da web ao método de renderização, e o efeito é exatamente o mesmo. No código acima, além do atributo EL, também é o atributo $ el. O primeiro representa o elemento DOM especificado e o último representa o objeto jQuery correspondente ao elemento DOM.
Tagname Attribute, atributo ClassName
Se o atributo El não for especificado, ele também poderá ser especificado através do atributo tagname e do atributo ClassName.
A cópia do código é a seguinte:
var document = backbone.view.extend ({
tagname: "li",
ClassName: "Document",
render: function () {
// ...
}
});
Método de modelo
A propriedade de modelo da visualização é usada para especificar o modelo de página da web.
A cópia do código é a seguinte:
var appview = backbone.view.extend ({
Modelo: _.template ("<H3> Olá < %= Who %> <H3>"),
});
No código acima, a função de modelo da biblioteca de funções sublinheira aceita uma sequência de modelos como um parâmetro e retorna a função de modelo correspondente. Com esta função de modelo, desde que o valor específico seja fornecido, o código da página da web poderá ser gerado.
A cópia do código é a seguinte:
var appview = backbone.view.extend ({
El: $ ('#contêiner'),
Modelo: _.template ("<H3> Olá < %= Who %> <H3>"),
inicializar: function () {
this.render ();
},
render: function () {
this. $ el.html (this.template ({who: 'World!'}));
}
});
A renderização do código acima chama o método do modelo para gerar código de página da web específico.
Em aplicações práticas, os modelos geralmente são colocados em tags de script. Para impedir que os navegadores analisem de acordo com o código JavaScript, o atributo de tipo está definido como texto/modelo.
A cópia do código é a seguinte:
<script type = "text/modelo" data-name = "templatename">
<!-Conteúdo do modelo Chegue aqui->
</script>
Você pode usar o seguinte código para compilar o modelo.
A cópia do código é a seguinte:
window.templates = {};
var $ fontes = $ ('script [type = "text/modelo"]');
$ fontes.each (função (índice, el) {
var $ el = $ (el);
modelos [$ el.data ('nome')] = _.template ($ el.html ());
});
atributo de eventos
O atributo de eventos é usado para especificar o evento da visualização e suas funções de manuseio correspondentes.
A cópia do código é a seguinte:
var document = backbone.view.extend ({
Eventos: {
"Clique em .iCon": "aberto",
"Clique em .button.edit": "OpenEditDialog",
"Clique em .Button.Delete": "Destroy"
}
});
Um dos código acima especifica o evento de clique de três seletores CSS e suas três funções de manuseio correspondentes.
Método sistento
O método sistento é usado para especificar uma função de retorno de chamada para um evento específico.
A cópia do código é a seguinte:
var document = backbone.view.extend ({
inicializar: function () {
this.listento (this.model, "alteração", this.render);
}
});
O código acima é o evento de alteração do modelo e a função de retorno de chamada é especificada como renderização.
Remova o método
O método de remoção é usado para remover uma exibição.
A cópia do código é a seguinte:
UpdateView: function () {
View.Remove ();
view.render ();
};
Subview
A visualização da criança pode ser chamada na visualização dos pais. O seguinte é uma maneira de escrever.
A cópia do código é a seguinte:
render: function () {
this. $ el.html (this.template ());
this.Child = new Child ();
this.Child.AppendTo ($. ('.
}
Backbone.Router
O roteador é um objeto de roteamento fornecido pela Backbone, que é usado para corresponder ao URL solicitado pelo usuário com a função de processamento de back -end um por um.
Primeiro, uma nova classe de roteador é definida.
A cópia do código é a seguinte:
Roteador = backbone.router.extend ({
Rotas: {
}
});
atributo de rotas
A coisa mais importante no objeto de backbone.Router é a propriedade Rotes. É usado para definir o método de processamento de caminho.
O atributo de rotas é um objeto e cada membro representa uma regra de processamento de caminho. O nome da chave é a regra do caminho e o valor da chave é o método de processamento.
Se o nome da chave for uma string vazia, ela representa o caminho raiz.
A cópia do código é a seguinte:
Rotas: {
'': 'PhonesIndex',
},
PhonesIndex: function () {
new PhonesIndexView ({el: 'Seção#main'});
}
Um asterisco representa qualquer caminho e você pode definir os parâmetros do caminho para capturar os valores específicos do caminho.
A cópia do código é a seguinte:
var aproteter = backbone.router.extend ({
Rotas: {
"*Ações": "Defra -Troute"
}
});
var app_router = novo apropriado;
App_Router.on ('Route: Defaultroute', function (ações) {
console.log (ações);
})
No código acima, os parâmetros por trás do caminho raiz serão capturados e a função de retorno de chamada será transmitida.
Como escrever regras de caminho.
A cópia do código é a seguinte:
var myRouter = backbone.router.extend ({
Rotas: {
"Ajuda": "Ajuda",
"Search/: Query": "Search"
},
ajuda: function () {
...
},
Pesquisa: função (consulta) {
...
}
});
Rotas: {
"Ajuda/: página": "Ajuda",
"Download/*Path": "Download",
"Pasta/: Nome": "OpenFolder",
"Pasta/: Nome-: Mode": "OpenFolder"
}
Router.on ("Route: Ajuda", Function (Page) {
...
});
Backbone.history
Depois de configurar o roteador, você pode iniciar o aplicativo. O objeto de backbone.history é usado para monitorar alterações nos URLs.
A cópia do código é a seguinte:
App = novo roteador ();
$ (document) .ready (function () {
Backbone.history.start ({pushState: true});
});
Abra o método PushState. Se o aplicativo não estiver no diretório raiz, você precisará especificar o diretório raiz.
A cópia do código é a seguinte:
Backbone.history.start ({pushState: true, root: "/public/search/"})
Backbone.model
O modelo representa uma única entidade de objeto.
A cópia do código é a seguinte:
var user = backbone.model.extend ({
Padrões: {
nome: '',
e-mail: ''
}
});
var user = new user ();
O código acima usa o método de extensão para gerar uma classe de usuário, que representa o modelo do modelo. Em seguida, use o novo comando para gerar uma instância do modelo. O atributo padrão é usado para definir o atributo padrão. O código acima indica que o objeto do usuário possui dois atributos Nome e email por padrão, e seus valores são iguais a uma string vazia.
Ao gerar uma instância, você pode fornecer valores específicos para cada atributo.
A cópia do código é a seguinte:
VAR Usuário = novo usuário ({
ID: 1,
Nome: 'Nome',
E -mail: '[email protected]'
});
O código acima fornece os valores específicos de cada atributo ao gerar uma instância.
atributo idattribute
As instâncias do modelo devem ter uma propriedade que serve como a chave primária para distinguir outras instâncias. O nome deste atributo é definido pelo atributo idattribute e geralmente é definido como ID.
A cópia do código é a seguinte:
var music = backbone.model.extend ({
idattribute: 'id'
});
Obter método
O método GET é usado para retornar o valor de uma determinada propriedade da instância do modelo.
A cópia do código é a seguinte:
var usuário = novo usuário ({name: "name", idade: 24});
var idade = user.get ("idade"); // 24
var name = user.get ("nome"); // "nome"
Método de conjunto
O método SET é usado para definir o valor de uma determinada propriedade da instância do modelo.
A cópia do código é a seguinte:
var user = backbone.model.extend ({
Comprar: function (newCarsName) {
this.set ({car: newCarsName});
}
});
var user = novo usuário ({name: 'bmw', modelo: 'i8', tipo: 'car'});
user.buy ('Porsche');
var car = user.get ("carro"); // 'Porsche'
no método
O método on é usado para ouvir alterações nos objetos.
A cópia do código é a seguinte:
var user = novo usuário ({name: 'bmw', modelo: 'i8'});
user.on ("Alterar: nome", função (modelo) {
var name = model.get ("nome"); // "Porsche"
console.log ("Alterou o nome do meu carro para" + nome);
});
user.set ({name: 'Porsche'});
// mudou o nome do meu carro para a Porsche
O método on no código acima é usado para ouvir eventos e "alteração: nome" significa que o atributo de nome foi alterado.
atributos de urlroot
Esta propriedade é usada para especificar o caminho para operar no modelo no lado do servidor.
A cópia do código é a seguinte:
var user = backbone.model.extend ({
urlroot: '/usuário'
});
O código acima especifica que o caminho para o servidor correspondente ao modelo é /usuário.
Evento de busca
O evento Fetch é usado para buscar o modelo no servidor.
A cópia do código é a seguinte:
var user = novo usuário ({id: 1});
user.Fetch ({
Sucesso: function (usuário) {
console.log (user.tojson ());
}
})
No código acima, a instância do usuário contém o atributo ID (o valor é 1). O método Fetch usa o verbo http pode emitir uma solicitação ao URL "/Usuário/1" e recupera a instância do servidor.
Salvar método
O método de salvar é usado para notificar o servidor para criar ou atualizar o modelo.
Se uma instância do modelo não contiver um atributo de ID, o método de salvamento criará a instância usando o método POST.
A cópia do código é a seguinte:
var user = backbone.model.extend ({
urlroot: '/usuário'
});
var user = new user ();
var userDetails = {
Nome: 'Nome',
E -mail: '[email protected]'
};
User.Save (UserDetails, {
Sucesso: function (usuário) {
console.log (user.tojson ());
}
})
O código acima especifica primeiro que o URL correspondente do modelo é /usuário na classe, depois crie uma nova instância e, finalmente, chame o método de salvamento. Tem dois parâmetros. O primeiro é o atributo específico do objeto de instância, e o segundo é um objeto de função de retorno de chamada, que define a função de retorno de chamada para o evento de sucesso (salve com sucesso). Especificamente, o método Salvar emitirá uma solicitação de postagem para /Usuário e fornecerá {Nome: 'Nome', E -mail: '[email protected]'} como dados.
Se uma instância do modelo contiver um atributo de identificação, o método de salvamento atualizará a instância usando o método PUT.
A cópia do código é a seguinte:
VAR Usuário = novo usuário ({
ID: 1,
Nome: 'Zhang San',
E -mail: '[email protected]'
});
user.save ({name: 'li si'}, {
Sucesso: função (modelo) {
console.log (user.tojson ());
}
});
No código acima, a instância do objeto contém um atributo de ID (o valor é 1), o SAVE usará o método PUT para fazer uma solicitação ao URL "/Usuário/1" para atualizar a instância.
Destruir o método
O método de destruição é usado para excluir a instância no servidor.
A cópia do código é a seguinte:
VAR Usuário = novo usuário ({
ID: 1,
Nome: 'Nome',
E -mail: '[email protected]'
});
user.Destroy ({
Sucesso: function () {
console.log ('destruído');
}
});
O método de destruição no código acima usará o verbo http excluir para emitir uma solicitação ao URL "/Usuário/1" e excluir a instância do modelo correspondente.
Backbone.collection
A coleção é uma coleção do mesmo tipo de modelos. Por exemplo, o modelo é um animal, a coleção é um zoológico; Modelo é uma pessoa única, a coleção é uma empresa.
A cópia do código é a seguinte:
var música = backbone.model.extend ({});
Var álbum = backbone.collection.extend ({
Modelo: música
});
No código acima, a música é modelo, álbum é coleção e álbum tem um atributo de modelo igual à música, então significa que o álbum é uma coleção de música.
Adicionar método, remover o método
A instância do modelo pode ser colocada diretamente na instância da coleta ou adicionada usando o método Add.
A cópia do código é a seguinte:
var música1 = nova música ({id: 1, nome: "Título da música 1", artista: "Zhang San"});
var música2 = nova música ({id: 2, nome: "título da música 2", artista: "li si"});
var myalbum = novo álbum ([Song1, Song2]);
var song3 = nova música ({id: 3, nome: "título da música 3", artista: "zhao wu"});
MYALBUM.ADD (SONG3);
O método Remover é usado para remover uma instância do modelo da instância de coleta.
A cópia do código é a seguinte:
MYALBUM.REMOVE (1);
O código acima mostra que o parâmetro do método Remover é o atributo ID da instância do modelo.
Obtenha o método do conjunto de métodos
O método GET é usado para obter a instância do modelo do ID especificado da coleção.
A cópia do código é a seguinte:
MYALBUM.GET (2))
Método de busca
O método de busca é usado para buscar dados de coleta do servidor.
A cópia do código é a seguinte:
Var Songs = new Backbone.Collection;
Songs.url = '/Songs';
Songs.Fetch ();
Backbone.events
A cópia do código é a seguinte:
var obj = {};
_.extend (obj, backbone.events);
obj.on ("show-message", função (msg) {
$ ('#exibição'). Texto (msg);
});
obj.Trigger ("Show-Message", "Hello World");