我刚开始研究并在骨干JS上做了一些练习。在我做了一些关于主干的基本编码后，我在一个 html 文件中发现，它的代码太多，很难组织我的代码，比如组织我的模型、视图、函数、模板等。
如果我有 5-10 个视图、20 个模型、20+ 模板怎么办。那么我的一个 html 文件会是 1000 多行代码吗？
以下是我的主干示例代码：
</head>
<body>
<!-- Html -->
<div class="container">
<h1>Backbone Test</h1>
<hr/>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="_nav" data-nav=""><a href="#">Home</a></li>
<li class="_nav" data-nav="about"><a href="#about">About</a></li>
<li class="_nav" data-nav="contact"><a href="#contact">Contact Us</a></li>
</ul>
</div>
</div>
<div class="page">
<!--Load Backbone Template @ Here-->
</div>
</div>
<!-- Template -->
<script type="text/template" id="tpl_homePage">
<p>Home</p>
<div style="width:100px;height:100px;background:red;cursor:pointer;" id="box"></div>
</script>
<script type="text/template" id="tpl_aboutPage">
<p>About</p>
</script>
<script type="text/template" id="tpl_contactPage">
<p>Contact</p>
</script>
<!-- Js -->
<script src="js/jquery.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script>
//Modal
var homePage_model = Backbone.Model.extend({
defaults: {
score: 0,
attempts: 0,
currentLocation: 1,
currentColor: 'red'
}
});
//View
var _homePage = Backbone.View.extend({
el:'.page',
model: new homePage_model(),
render:function(){
var template = _.template($("#tpl_homePage").html());
this.$el.html(template);
},
events: {
'click div#box' : 'start',
},
start:function(){
// alert("start");
alert(this.model.defaults.score);
}
});
var _aboutPage = Backbone.View.extend({
el:'.page',
render:function(){
var template = _.template($("#tpl_aboutPage").html());
this.$el.html(template);
}
});
var _contactPage = Backbone.View.extend({
el:'.page',
render:function(){
var template = _.template($("#tpl_contactPage").html());
this.$el.html(template);
}
});
var homePage = new _homePage();
var aboutPage = new _aboutPage();
var contactPage = new _contactPage();
//Route
var Router = Backbone.Router.extend({
routes:{
'' : 'home',
'about':'about',
'contact':'contact',
}
});
var router = new Router();
//Router on
router.on('route:home',function(){
homePage.render();
});
router.on('route:about',function(){
aboutPage.render();
});
router.on('route:contact',function(){
contactPage.render();
});
Backbone.history.start();
//Etc
$(window).bind('hashchange', function() {
setNav();
});
$(document).ready(function() {
setNav();
});
function setNav(){
var hash = window.location.hash.replace(/^#/,'');
$("._nav").removeClass("active");
_.each($("._nav"),function(d){
var o = ($(d).data("nav"));
if(o == hash)$(d).addClass("active");
});
}
</script>
</body>
对于主干js的模板，是这样使用php include的一种方式吗？
<script type="text/template" id="home_tpl">
<?PHP include "home_tpl.php"; ?>
</script>
<script type="text/template" id="about_tpl">
<?PHP include "about_tpl.php"; ?>
</script>
我想知道使用主干 Js 构建/格式化整个网站/应用程序的行业/正确方法。
这种结构/格式是否有任何关键字，所以我可以在谷歌上搜索？
非常感谢并感谢您的帮助
p:s/对不起我的英语不好。