【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践

　　1.遇到的问题

　　2.目标

　　3.探讨

　　4.架构设想

　　5.流程

      6.初步实现

　　7.存在问题

　　8.最后

 

 遇到的问题

         我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想，不知大家还记不记得，题目：【PC网站前端架构探讨系列】结合公司网站首页，谈前端模块化开发与网站性能优化实践 。但是，仍然会存在下列问题：

            问题1----模块内部脚本和页面联系密切

　　　　 问题2----所有脚本文件集中放于一个目录，脚本目录不清晰，没有层次

　　　当然还有其他很多问题，但就以上两大问题来说，会对后期代码维护带来不便！

  目   标

　　    尽量将页面和脚本进行分离，以及方便开发人员维护管理，形成一个固定的代码规范；其二，项目的结构清晰，层次明确，功能突出。所以，需要设计一个合理的前端架构来解决当前以及后期会遇到的问题

  探   讨

       思想方面：

　　　　针对耦合性问题，业界流行的新一种架构思想——“MVC””MVVC”,但大多这种思想用于WAP开发中,国内很少的PC网站有用过，比如,有道好像用的是Backbone框架…

       

       技术角度：

　　     在seajs模块划分的基础上

             1. backbone+underscore(MVC)

             2. knockout(MVVM)

　　     目前这两种用的较多，而且社区文档比较多，但是都比较适合单页面的应用，最主要就是开发方式会有很大转变….很难上手…感觉不太适合普通中小型的PC网站开发以及后期维护

       

      下面列出相关示例代码：（Backbone）

       

 1    define('module/home/index', ['backbone'], function(reuqire) {
 2     var Backbone = reuqire('backbone');
 3     App.Models.Home = Backbone.Model.extend({});
 4 
 5     App.Collections.Home = Backbone.Collection.extend({
 6         model: App.Models.Home
 7     });
 8 
 9     App.Views.Home = Backbone.View.extend({
10         el: '#container',
11         initialize: function(c) {
12             this.Collections = c;
13             this.render();
14         },
15         render: function() {
16             var html = '';
17             this.Collections.each(function(m) {
18                 html += '<div><a href="' + m.get('link') + '">' + m.get('name') + '</a></div>';
19             });
20             this.$el.html(html);
21         }
22     })
23 
24     return function() {
25         //模拟数据
26         var hc = new App.Collections.Home();
27         hc.add([
28             {'name': '加载模块A', 'link': '#at/m/a/name:moduleA/other:nothing'},
29             {'name': '加载模块B', 'link': '#at/m/b'}
30         ]);
31         new App.Views.Home(hc);
32     }
33 });

View Code