24Web前端架构
近来都是接触前端。所以学多点这方面的东西,虽说有实战到项目里面去了,但可能还没走到所谓正确的道路上去。欢迎交流。
转载请说明来着: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来各自表现自己的页面。
四:js控制接口
解决方法就是使用命名空间var GLOBAL={}; 之后就能够直接使用诸如GLOBAL.state1 = "全局变量1"来保存接口所用的数据。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd293a2s=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
五:引入common.js文件
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd293a2s=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
总结:
当某个地方须要改动时,不管是css样式,还是某个模块。负责那部分的人改动好相应的文件,然后发过来替换源文件就可以。在配合设计师的工作上也能够比較灵活,后面有空再分解下这方面的流程。
24Web前端架构的更多相关文章
- 基于AngularJS的企业软件前端架构[转载]
这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/ ...
- 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践
目 录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...
- 【PC网站前端架构探讨系列】结合公司网站首页,谈前端模块化开发与网站性能优化实践
说在前面 上午给大家分享的个人认为比较全,比较官方,比较清晰的grunt使用教程,被挪出首页了,不过没关系,毕竟不是原创,大家想看,我现在贴出地址: http://www.cnblogs.com/sy ...
- 我的前端架构之二--统一扩展Js方法
我的前端架构汇总 MyJs_Core.js 这是一个核心的Js文件,它扩展了原生的Js方法.如下: Array对象: 1) indexOf 2) max 3) min 4) removeAt 5) i ...
- 用“MEAN”技术栈开发web应用(一)AngularJs前端架构
前言 不知何时突然冒出“MEAN技术栈”这个新词,听起来很牛逼的样子,其实就是我们已经熟悉了的近两年在前端比较流行的技术,mongodb.express.angularjs.nodejs,由于这几项技 ...
- Turtle Online:致力于打造超接地气的PC前端架构,组件+API,快速搭建前端开发
架构创作初衷 每当新开一个项目时,都会绞尽脑汁去考虑采用哪种框架:requirejs/seajs.jquery/zepto.backbone.easeUI/Bootstrap/AngularJS……, ...
- [置顶] HTML语义和前端架构
关于语义学 语义学是研究符号和意义之间的关系以及它们表示的内容.在语言学中,则主要是研究符号(例如单词,短语或者语音)在语言中所表达的意义.而在前端开发时,语义学则更多的关注HTML元素,属性以及它的 ...
- web富客户端应用下,前端架构、系列(二)。
序 我们在上面的文章中已经建立起来一个比较简单的 前端架构 虽然这个看上去很简陋. 不过毕竟也是思想的结晶. 从这一篇文章开始,我将陆续完善这一个前端架构.. 重新构思 上一篇我们把前端架构分为3个模 ...
- web富客户端应用下,前端架构问题。
前言: 以前的工作大部分都是,前端做页面 稍微写几个js效果就算是 有复杂的效果 也没有涉及到 需要去调用后端数据的层面.总体来说,以前的页面逻辑会相对简单后端会做更多的事. 而现在,这些任务都抛给前 ...
随机推荐
- NodeJs运行服务器-day01
//读取内置模块http,这个模块开发服务器用的var http =require('http'); var server=http.createServer(function(req,res){ r ...
- C语言程序返回值为int的时候,不同值代表不同的意义
这个是我自己给自己的代码定的标准,方便自己阅读与编码.他人代码情况不可套用 1 执行成功 0 出现错误,不影响程序执行 -1 执行失败 -2 程序内部致命错误,退出程序
- JavaScript中的内置函数
JavaScript中的内置函数 制作人:全心全意 在使用JavaScript语言时,除了可以自定义函数之外,还可以使用JavaScript的内置函数,这些内置函数是由JavaScript语言自身提供 ...
- 04 Beautiful Soup
Beautiful Soup 简介 简单来说,Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据.官方解释如下: ''' Beautiful Soup提供一些简单的.py ...
- SpringMVC中controller的跳转
controller中的重定向 (1)不需要传递参数重定向 方式一:使用ModelAndView return new ModelAndView("redirect:/toLi ...
- list、tuple、dict内部功能释义
一.list内部功能释义 运用频次:☆☆☆☆☆ 1. append():列表末尾插入元素 [示例] >>> L1=[11,22,33] >>> L1.append( ...
- 如何使用Visual Studio 2008(VS2008)编译C语言
大家在学习C语言的时候接触的一般都是VC6.0.但是VC6.0只能编译C或者C++,不支持C#,集成度不是很高.而且界面并不十分友好,不能自动猜测关键字,函数的参数也不能自动标示.最关键的是,编译的时 ...
- ubunt设置终端快捷键设置 及 常用快捷键
Ctrl+A:将光标移动到命令行的开始处. Ctrl+E:将光标移动到命行令的结尾处. Ctrl+U:删除行首到光标出的字符. Ctrl+Z:把当前进程送到后台处理. & bg 部分快 ...
- IDEA maven 无法加载已经安装的模块依赖包
今天打包一直报如下错误 Reactor Summary for freechain-op 1.0.1.OP: [INFO] [INFO] freechain-op .................. ...
- POJ1780 Code
KEY公司开发出一种新的保险箱.要打开保险箱,不需要钥匙,但需要输入一个正确的.由n位数字组成的编码.这种保险箱有几种类型,从给小孩子玩的玩具(2位数字编码)到军用型的保险箱(6位数字编码).当正确地 ...