码迷,mamicode.com
首页 > Web开发 > 详细

24Web前端架构

时间:2014-05-13 08:27:39      阅读:433      评论:0      收藏:0      [点我收藏+]

标签:前端架构   前端代码质量   web   

近来都是接触前端,所以学多点这方面的东西,虽说有实战到项目里面去了,但可能还没走到所谓正确的道路上去。欢迎交流。

转载请说明来着: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 雅虎的前端框架,比较成熟的代码)

@charset "utf-8";
/* CSS Document */
/*CSS reset*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:‘‘;}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}

/*文字排版*/
.fontf{font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑", Heiti, "黑体",SimSun, "宋体", STXihei, "华文细黑",  sans-serif;}

.f12{font-size:12px;}

.fb{font-weight:bold}
.fn{font-weight:normal;}
.t2{text-indent:2em;}
.lh150{line-height:150%;}
.lh180{line-height:180%;}
.lh200{line-height:200%;}
.unl{text-decoration:underlline;}
.no_unl{text-decoration:none;}

/*定位*/
.m0a{margin: 0 auto;}
.tl{text-align:left;}
.tc{text-align:center;}
.tr{text-align:right;}
.bc{margin-left:0;margin-right:0;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.cb{clear:both;}
.cl{clear:left;}
.cr{clear:rigth;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.vm{verticle-align:middle;}
.pr{position:relative;}
.pa{position:absolute;}
.abs-right{position:absolute;right:0}
.zoom{zoom:1;}
.hidden{visiility:hidden;}
.none{display:none;}

/*宽度*/
.w10{width:10px;}

.w14p{width:14%}

/*高度*/
.h50{height:50px;}

.h10p{height:10%}


/*边距*/
.m10{margin:10px;}

/*上边距*/
.mt0{margin-top:0px;}
.mt25{margin-top:25px;}

.mt2p{margin-top:2%;}

/*下边距*/
.mb0{margin-bottom:0px;}
.mb5{margin-bottom:5px;}

.b9p{bottom:9%;}
/*左边距*/
.ml0{margin-left:0px;}
.ml20{margin-left:20px;}

.ml1p{margin-left:1%;}

/*右边距*/
.mr5{margin-right:5px;}

.p10{padding:10px;}

.pt5{padding-top:5px;}

.pb5{padding-bottom:5px;}

.pl5{padding-left:5px;}

.pr5{padding-right:5px;}

三:引入common.css文件

首先是分析各页面组成模块,如果有相同的表现的地方,就抽取出来,作为共同类。然后一般还会在引入page.css文件,不同页面引入不同的page.css来各自表现自己的页面。
但我们主要是做Web App项目,页面会比较少,所以舍弃了page.css文件,只引入了common.css文件,也不需要怎么抽取共同元素,当commoncss + page.css使用。

四:js控制接口

一是变量的初始化:提到接口,那就会有对应的数据,一般得使用全局变量。对应接口所使用到的全局变量,不能和局部变量等混淆。解决方法就是使用命名空间var GLOBAL={}; 之后就可以直接使用诸如GLOBAL.state1 = "全局变量1"来保存接口所用的数据。
bubuko.com,布布扣

bubuko.com,布布扣
上面的代码是写在html页面的,第二个部分见下个部分。

五:引入common.js文件

本来有base.css就应该有base.js的,但我们使用的是JQuery.js所以免去了。
common.js主要的存储“接口”:
bubuko.com,布布扣
注意到了吗。JQuery是不存在stateUpage这个函数的。
我们在处理模块的时候,全部用插件的思想封装起来了,所以,页面整合的人和模块插件的人可以同时工作起来。模块写好了,只需要给一行<div>的代码给整合的人放到页面上,调用下初始化函数(此时插件会重新组合代码替换到相应的位置)。

总结:

(没时间画出流程图了,赶紧睡觉明天还要上早课~~)
按照这样的模式,前端工作就可以流程化了。当某个地方需要修改时,无论是css样式,还是某个模块,负责那部分的人修改好对应的文件,然后发过来替换源文件即可。在配合设计师的工作上也可以比较灵活,后面有空再分解下这方面的流程。

24Web前端架构,布布扣,bubuko.com

24Web前端架构

标签:前端架构   前端代码质量   web   

原文地址:http://blog.csdn.net/wowkk/article/details/25562757

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!