近来都是接触前端。所以学多点这方面的东西，虽说有实战到项目里面去了，但可能还没走到所谓正确的道路上去。欢迎交流。
转载请说明来着：http://blog.csdn.net/wowkk
---------------------------------------------------------------------------------------------
假设Web前端做多了一点。那就会意识到，不管项目大小，都得考虑到一个“架构”的问题。
由于仅仅要是项目。就会涉及到“管理”。假设不规范，就肯定会乱。假设涉及到团队协作。情况就会更加糟糕。
假设没有架构的观念，大家都把css、js都写在html里，而且css想怎么写就怎么写，js接口想怎么放就怎么放，不仅像垃圾堆一样让人恶心，维护起来也是个噩梦。获取就是直接清空又一次堆放垃圾？
这里所谈的架构。并非什么伟大的东西。也没名字，仅仅是关乎前端质量。像后端的“三层架构”一样，能够走遍大部分管理系统。
PS：本文思想主要学自《编写高质量代码--Web前端开发修炼之道》，由于所做项目必须保密。所以演示代码会比較少。具体内容得去这本书中学习。
眼下我的做法有以下几步：
一：保证文档流清晰
当确定好页面各模块（版面）后，不通过不论什么css代码修饰，用Div标签把布局代码写好出来。打开页面。能看懂个模块的组织逻辑就能够进入下一步。
二：引入bass.css文件
bass.css为基础样式文件。引入这个文件。能够清除浏览器带来的默认样式，比方直接放个div在页面，它和body是有个间距在那的，对于新手来说，清除这个边距都有得受的。还有就是解决有时有些不是非常好理解的浏览器差异。
它的主要特性就是：“通用性”和“原子性”，能够引用到不论什么页面中，而且每一个css类都不可再分。比方 .fl{float:left;display:inline;} 出现浮动效果，而且解决IE6的双外边距BUG。
通过组合使用bass.css里面的类来装修html页面元素。
比方class="bc w200"表示元素宽度200px & 居中。
以下是一个bass.css文件代码。能够通过须要自己新增代码进去（好像代码大部分来自 http://developer.yahoo.com/yui 雅虎的前端框架，比較成熟的代码）
三：引入common.css文件
首先是分析各页面组成模块，假设有同样的表现的地方，就抽取出来。作为共同类。然后一般还会在引入page.css文件，不同页面引入不同的page.css来各自表现自己的页面。
但我们主要是做Web App项目，页面会比較少。所以舍弃了page.css文件。仅仅引入了common.css文件，也不须要怎么抽取共同元素，当commoncss + page.css使用。四：js控制接口
一是变量的初始化：提到接口，那就会有相应的数据，一般得使用全局变量。相应接口所使用到的全局变量，不能和局部变量等混淆。解决方法就是使用命名空间var GLOBAL={}; 之后就能够直接使用诸如GLOBAL.state1 = "全局变量1"来保存接口所用的数据。
上面的代码是写在html页面的，第二个部分见下个部分。五：引入common.js文件
本来有base.css就应该有base.js的，但我们使用的是JQuery.js所以免去了。common.js基本的存储“接口”：注意到了吗。JQuery是不存在stateUpage这个函数的。我们在处理模块的时候。所实用插件的思想封装起来了。所以，页面整合的人和模块插件的人能够同一时候工作起来。模块写好了，仅仅须要给一行<div>的代码给整合的人放到页面上。调用下初始化函数（此时插件会又一次组合代码替换到相应的位置）。总结：
(没时间画出流程图了，赶紧睡觉明天还要上早课~~)依照这种模式，前端工作就能够流程化了。当某个地方须要改动时，不管是css样式，还是某个模块。负责那部分的人改动好相应的文件，然后发过来替换源文件就可以。在配合设计师的工作上也能够比較灵活，后面有空再分解下这方面的流程。