前端开发规范

所需积分/C币:32 2019-03-03 21:38:04 281KB PDF
312
收藏 收藏
举报

详细的前端开发规范
柠檬学院WEB前端开发规范 在编码思想上,我们可以将页面拆分成不同的层级(布局、模块、元件)。 什么是CSS命名空间? 通过统一的命名规范定义命名的范围,成为 css class&id命名空间 布局:以语义化的单词| ayout作为命名空间,例如主栏布局命名 layout-main, 只改变 layout-命名空间后面的命名, layout始终保留。布局的命名空间为 layout-XXx 模块:灰面是由一个或多个模块组成,模块的英文单词是 module,规范筍写成mod,如新闻模块 mod-news,照片展示模块 mod-photo-show。模块的命名空间为 mod-xxx。 元件:元件是属于模块内部的,也可以说模块是由元件和它内部的自有元素组成。如用户照片信息元件 cell-user-photo。元件的命名空 同为 cell-xXX 23.添加文档样式 1)引用外部文件方式添加样式 2)严禁编写标记内代码,比如<dⅳ style=" display: none;">就应该写成<diⅳcass="hide">,然后在样式表中去完成样式 代码编写。 3)严禁在文档中使用< style type="text/css"></stve>代码块 4)如果是发布版本,请压缩合并代码,将多个样式文件合并为单个文件,在线css代码压缩工具 http://www.csscompressor.com/ 24.属性简写 为了节省字节数及文件大小,以卜属性请使用简写方式: padding top right bottom left marg top right bottom left border. style width color border-top style width color border-right style width color border-bottom: style width color border-left: style width color border-color top right bottom left top right bottom left border-width top right bottom left background color url(image) repeat position; list-style: type position url(image) font-weight 400/700; 25.字体 1)仝局定义字体:boy{ont:12 px arial, helvetica,sans- serif; line-height:15;} 2) font-family )等宽字体组合:Aral, Helvetica, sans-serit; b)不等宽(宽扁)字体组合: Verdana, Trebuchet ms,sans- serif 中文字体:除非内容文木需要,不推荐强制定义 9 柠檬学院WEB前端开发规范 26.编写兼容的CSS代码 1)页面必须在ie6~8、 firefox、 opera、 safari、 chrome下显示兼容 2)尽量不使用拒E有条件注释方式,对某一版本浏览器编写额外的样式表。针对某一版本浏览器编写额外的样式表, 会对维护和管理照成困难。如出现有显示不兼容现象应首先考虑代码是否有问题(如属性是否对当前浏览器支 持),必须编写与常用浏览尜都兼容的代码; 不推荐的引用方式 :![if IE 6 <link type="text/css" rel="stylesheet" href=ie6.css"/> <lendifl--> <I--[if Ite ie 7> <link type="text/css" rel="stylesheet" href=ie7. css"/> H[endif] 3)尽量不要使用! important或下划线等招数编写代码 27.CSS通用命名 (1)页面框架命名,一般具有唯一性,推荐用D命名 ID名称 命名 1D名称 命名 头部 heade 主体 main 脚部 footer 容器 wrapper/ container side-bar 栏目 column 布局 layout (2模块结构命名 CLASS名称 命名 CLASS名称 命名 模块(如:新闻模块)mod( mod-news) 标题栏 title 内容 content 次级内容 sub-content (2)导航结构命名 CLASS名称 命名 CLASS名称 命名 导航 nav 主导航 ma lahav 子导航 ub nav 顶部导航 top-nav 菜单 menu 子菜单 sub-menu (3)一般元素命名 CLASS名称 命名 CLASS名称 命名 二级 sub 面包屑 breadcrumb 标志 ogo 广告 Bner 4/19 柠檬学院WEB前端开发规范 (禁用 banner或ad) 登陆 login 注册 regsiter/ reg 搜索 search 加入 JoIn 状态 status 按钮 btn 滚动 O11 标签页 tab 文章列表 list 短消息 msg/ message 当前的 current 提示小技巧 tips 图标 注释 note 指南 gui de 服务 service 热点 hot 新闻 news 下载 download 投票 vote 合作伙伴 partner 友情链接 link 版权 copyright demo 下拉框 select 摘要 summary 翻页 pages 主题风格 themes 设置 set 成功 按钮 文本 颜色 color/ 背景 边框 border/bor 居中 center 上 o/t bottom/b 左 left/l 右 ht/r add 删除 e 间隔 sp 段落 p 弹出层 pop 公共 global/gb 操作 密码 pwd 透明 tran info 重点 hit 顶览 pVw 单行输入框 nput 首页 index 日志 blog 相册 photo 留言板 guestbook 用户 user confirm 取消 cancel 报错 error 3.图片部分 1)背景图片:bg001,bg002,b8003. 2)一股图片:imgo01mg0o2,img003 3)特定图片:如 banner,logo按照具体情况命名 4)按钮图片:btn- submit,btn- cancel. 5/19 柠檬学院WEB前端开发规范 5)运用 css sprite技术集中小的背景图或图标,减小页面htte请求,但注意,请务必在对应的 sprite psd源图中划参 考线,并保存至 images目录下 6)图片格式仅限于 gif png jpg 刁)在保证视觉效果的情况下选择最小的图片格式与图片质量,以减少加载吋间 4. JavaScript部分 4,1.Js命名规范: 1)」s文件命名:英文命名,后缀Js.共用 wichung-common j,其他依实际模块需求命名 42.在文档中引用js 1)使用外部文件方式引用js: 2)将引用js的代码集中放置在一起,可放置在</head>之前或</boy>之前,严禁在boy间分散放置; 3)使DOM结构和js代码分离,禁止写在标记内部 4)如果是发布版本,请将多个稳定版本的j文件压缩、归类放置到单个文件内,压缩和最小化j文件,在线 packer 压缩工具:http://dean.edwards.name/packer/ 5)引入J5斥文件,文件名须包含库名称及版本号及是否为压缩版,比如 jquery-1.4.1 min. s;引入插件,文件名格式 为库名称+插件名称,比如 jQuery. cookie. js; 4.3.优化 jQuery代码,提高性能: 1.原则上仅引入 jQuery库,若需引入第三方库,须与团队其他人员讨论决定; 2. jQuery变量命名: Sname,普通变量命名:name; 3.选择器从最近的D开始继承或直接使用1D选择器:S(# id tag"); 4.选择器在使用cass前加上标签名:S('span.span1") 5.尽量使用1D选择器代替cas 6.要获取子元素请使用子选择器,而不要使用后代选择器:S("d>span"); 7.缓存 jQuery对象,不要在代码中重复山现相同的选择器: var btη=S("#id"); 8.使用data(存储临时变量; 9.避免使用lve0方法绑定事件 10.在父级元素监听事件,对目标元素进行操作 S(#id"). click(function(e)var input=S(e. target): 1 11.推迟加载拖放、动画、视觉特效等代码,把可能会影响页面加载速度的代码绑定到S( window)Joad事件中。 下面是一些关于 jQuery优化方面的建议 1,总是从D选择器开始继承 在 jQuery中最快的选择器是ID选择器,因为它直接来自于 JavaScript的 get element Byld0方法。 例如有一段HTML代码: 6/19 柠檬学院WEB前端开发规范 <diy id=content> <form method="post"action="#"> <h2>父通信号灯</h2 <ul id=traffic-light> <li><input type="radio"class="on"name=light "value="red"/> E<li> <li><input type="radio"class="off"name="light"value="yellow"/> sisli> <li><input type="radio"class=off"name="light"value="green"/> ARE</li> /u> <input class="button"id="traffic-button"type="submit"value=Go"/> </form> 如果采用下面的选择器,那么效率是低效的 var traffic-button=S(#content. button"); 因为 button已经有1D了,我们可以直接使用ID选择器。如卜所示: var traffic-button = S(#traffic-button" 当然这只是对于单一的元素来讲。如果你需要选择多个元素,这必然会涉及到DoM遍历和循环, 为了提高性能,建议从最近的ID开始继承。 如下所示: yar traffic- lights= S(#traffic-light input!") 2,在cass前使用tag(标签名) 在 jQuery中第快的选择器是tag(标签)选择器(比如:S("head")) 眼ID选择器累时,因为它来自原生的 getElements By TagName()方法。 继续看刚才那段HTML代码: <diy id="content <form method="post"action=#"> <h2>交通信号灯</h2> <ul id=traffic-light <li>input type="radio"class="on"name="light"value=red"/> T E1</li> <lix<input type="radio"class="off"name=" light"value="yellow"/> st E</li> <li><input type="radio"class"off"name='light"value="green "/ ExE</li> 7/19 柠檬学院WEB前端开发规范 <input class="button"id="traffic-button"type="submit"value=Go"/> </form> </div> 比如需要选择红绿单选框, 那么可以使用一个 tag name来限制(修饰) ) class,如下所示 var active-light =s( input on") 当然也可以结合就近的|,如下所小 var active- light=s( #traffic-light input on ") 在使用tag来修饰cass的时候,我们需要注意以下几点: (1)不要使用tag来修饰1D,如下所小: var content=s(div#content ) 这样·来,选择器会先遍历所有的d元素,然后匹配# content。 好像 jQuery从1.3.1开始改变了选择器核心后,不存在这个问题了。暂时无法考证。) (2)不要画蛇添足的使用D来修饰D,如卜所示 var traffic-light= S("#content #traffic-light "); 注:如果使用属性选择器,乜请尽量使用t3g来修饰,如下所小 s(p[row="c3221"])htm0;而不是这样: SOrrow="c3221yhtm(; 特别提示: tag. class的方式在E下的性能好于.cass方式。 但在 Firefox下却低于直接cass方式 google浏览器卜两种都差不多。 我页面上有300个元素,他们的性能差距都在50毫秒以内。 3,将 jQuery对象缓存起来 把 jQuery对象缓存起来就是要告诉我们要养成将 jQuery对象缓存进变量的习惯。 下面是个 jQuery新手写的段代码: S(#traffic- light input on").bind("click", function (..) S(#traffic- light input on"). css("border","1px dashed yellow"); 19 柠檬学院WEB前端开发规范 s(#traffic-light input on"). css("background-color","orange s( #traffic-light input on ).fadeIn("slow") 但切记不要这么做 我们应该先将对象缓存进一个变量然后再操作,如卜所示 var Active- light=$("#traffic-light input on") Sactive-light. bind("click", function(.D); Sactive-light. css("border","1px dashed yellow "); Sactive-light. css("background-color","orange) Sactive-light fadeIn ("slow") 记住,永远不要让相同的选择器在你的代码里出现多次. 注:(1)为了区分普通的 JavaScript对象和 jQuery对象,可以在变量首字母前加上s符号。 (2)上面代码可以使用」 jQuery的链式操作加以改善。如下所示 var Active- light =S("#traffic-light input on ") Sactive-light. bind("click", function(i..J css("border,1px dashed yellow css(background-color","orange") fadeIn ("slow ); 如果你打算在其他函数中使用 jQuery对象,那么你必须把它们缓存到全局环境中。 如下代码所示 ∥/在全局范围定义一个对象(例如: window对象) window. Smy =( head S( head traffic-light S( #traffic-light") traffic-button: S(#traffic-button }; function do-something(t ∥/现在你可以引用存储的结果并操作它们 19 柠檬学院WEB前端开发规范 var script =document. createElement("script" ); Smy. head append(script) ∥/当你在凶数内部操作是,叫以继续将查询存入全局对象中去. Smy. cool-results =S("#some-ul li"); Smy. other-results=S("#some-table td") ∥/将全局函数作为一个普通的 jquery对象去使用 Smy. other-results css(" border-color"red") Smy traffic-light. css("border-color,"green"); ∥/你也可以在其他函数中使用它 4,对直接的DoM操作进行限制 这里的基本思想是在内存中建立你确实想要的东西,然后更新DOM。 这并不是一个 jQuery最仹实践,但必须进行有效的 JavaScript操作。直接的DOM操作速度很慢。 例如,你想动态的创建一组列表元素,千万不要这样做,如下所示: var top-100st=[.∥/假设这里是100个独一无二的字符串 Stylist=S{"# mylist");∥/ jQuery选择到<u>元素 for(var i=0, I=top. length; i<l; i++t Smylist. append( <li> +top -100-list[i]+</i>"); 我们应该将整套元素字符串在插入进dom中之前先全部创建好,如下所示: var top-100st=[… mylist=s("# mylist",top-100i=";∥/这个变量将用来存储我们的列表元素 for (var i=0, I=top-100-list length; k<l; i++) top-100l+="li>"+top-100ist+"</i>"; Smylist. html(top -100-li) 注:记得以前还看过一朋友写过这样的代码 for(i=0;i<1000;i++){ var smyList=S(#my List: 10/19

...展开详情
试读 19P 前端开发规范
立即下载 身份认证后 购VIP低至7折
一个资源只可评论一次,评论内容不能少于5个字
您会向同学/朋友/同事推荐我们的CSDN下载吗?
谢谢参与!您的真实评价是我们改进的动力~
关注 私信
上传资源赚钱or赚积分
最新推荐
前端开发规范 32积分/C币 立即下载
1/19
前端开发规范第1页
前端开发规范第2页
前端开发规范第3页
前端开发规范第4页

试读结束, 可继续读2页

32积分/C币 立即下载