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效果就算是 有复杂的效果 也没有涉及到 需要去调用后端数据的层面.总体来说,以前的页面逻辑会相对简单后端会做更多的事. 而现在,这些任务都抛给前 ...
随机推荐
- JavaScript设计模式基础之面向对象的JavaScript(二)
多态 多态的实际含义:同一操作作用与不同的对象上面,可以产生不同的解释和不同的执行结果,就是说,给不同的对象发送同一个消息 的时候,这些对象会根据这个消息分别给出不同的反馈 代码如下: class D ...
- 我的MySql掉队了
本来今天高高兴兴,突然: raise MigrationSchemaMissing("Unable to create the django_migrations table (%s)&qu ...
- 组管理命令--groupadd.groupmod.groupdel.gpasswd
添加用户组 格式 groupadd [参数] 组名 参数选项 -g GID:指定新组的GID,默认值是已有的最大的GID加1.-r:建立一个系统专用组,与-g不同时使用时,则分配一个1-499的GID ...
- 笔记本无法从DHCP服务器获取地址怎么解决?
首先,开始/运行,输入 cmd,再输入ipconfig,看看你的IP地址是不是正常的,假如不是,就是获取不到IP地址.如果得到的IP是:169.254.x.x 表示客户机无法得到DHCP的响应.(如果 ...
- Python中的函数(4)
一.传递列表 你经常会发现,向函数传递列表很有用,这种列表包含的可能是名字.数字或者更复杂的对象(如字典). 将列表传递给函数后,函数就能直接访问其内容. 栗子:假设有一个用户列表,我们要和其中每一位 ...
- css选择器(1)——元素选择器、类名和id选择器
css的主要优点之一就是它能很容易地向所有同类型的元素应用一组样式.当然它是通过选择器来实现这一点的. 基本规则结构: 语法= 选择器 +声明块 1.元素选择器——直接使用html元素名,指向文档元素 ...
- win10和office2013激活
1.去网上找kms,也可以在这下载————http://pan.baidu.com/s/1sjEAvwD————PS:找好对应的版本 2.首次运行时,只能点击激活windows VL和office 2 ...
- LeetCode(74) Search a 2D Matrix
题目 Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the fo ...
- HDU 1166 排兵布阵(线段树单点更新)
题意: 给定n个兵营的士兵初始值, 然后有最多40000个操作: 操作一共有两种, 一个是查询给定[a,b]区间兵营的士兵总和. 另一个是增加/减少指定兵营的士兵数目. 输出每次查询的值. 分析: 线 ...
- LA 4064 (计数 极角排序) Magnetic Train Tracks
这个题和UVa11529很相似. 枚举一个中心点,然后按极角排序,统计以这个点为钝角的三角形的个数,然后用C(n, 3)减去就是答案. 另外遇到直角三角形的情况很是蛋疼,可以用一个eps,不嫌麻烦的话 ...