`
xiaomiya
  • 浏览: 131874 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

前端工程师编写高质量代码

阅读更多

其实,友情也好,爱情也好,久而久之都会转化为亲情。说也奇怪,和新朋友会谈文学、谈哲学、谈人生道理等等,和老朋友却只话家常,柴米油盐,细细碎碎,种种琐事。很多时候,心灵的契合已经不需要太多的言语来表达。

先说下网站重构吧,
下面是自己从事工作中的一个积累总结,也有在书本上看到的。基本上都有用到项目中,也是很实用的,也希望看到这个博客的前端开发者学习,有好的建议可以提出来。
1,零乱的页面实现,对于后期的维护很头痛的一件事情。
2,web的标准:结构,样式,和行为的分离。网页源代码由三部分组成:.html,.css,.js  标签中混有样式和行为的写法是不推荐的。标准本身是手段不是目的,目的是让代码更易于维护。
提高可维护性:精简,重用,有序。
3,为用户提供良好的交互体验。
4,Ajax提交数据的方式:Ajax是一种利用javascript和XMLHttpRequest对象在客户端和服务器传送数据的技术。
XMLHttpRequest对象是用Javascript来创建的对象。Ajax是JS的一个子集。
5,我们要提高可读性:注释
6,提高重用性:公共组件和私有组件的维护。
7,我们有时候会遇到冗余和精简的矛盾冲突:选择集中还是分离。。。。(下面有说明或者明天,慢慢道来)。
8.古人云,磨刀不误砍柴工:前期的构思很重要,(不管是程序员搭建数据库,还是前端的前期设计)。规范的制定,公共组件的设计。和复杂功能的技术方案。。(后面还会有一个前端的规范的一个文档的。)

前端无外乎就是HTML,CSS,JS。

下面来说,好的HTML也就是高质量的HTML,需要具备的。
HTML
先来比较下table和css布局。
1,table布局的网页特点:1,代码量大,结构混乱。
                                         2,标签语义不明确对搜索引擎不友好。。(语义)
2,CSS布局(DIV+CSS)有点:1,代码量少,结构精简。
                                                    2,语义清晰。语义清晰就会对搜索引擎更友好。
(搜索引擎看不到视觉效果,看到的只是代码,只能通过标签来判断内容的语义。)
3,有很多人都在问对于HTML,CSS,Javascript的这三大元素中,我认为HTML是重要的,因为结构才是重点,样式是用来修饰结构的。正确的做法是:先确定HTML,确定语义的标签,再来选用适合的CSS。
4,还有我们是如何确定你的标签是否语义良好。一个很简单的方法就是:去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性。浏览器也会根据标签的语义给定一个默认的样式。。。
5,常见模块我们真的很了解吗?
    1,标题和内容。
    2,表单
(每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在label标签中设置“for=someld”来让说明文本和相应的input关联起来。)
    3,表格
(表格标题要用caption,表头要用thead包围,主体部分用tbody包围,尾部要用tfoot包围,表头和一般单元格要区分开,表头有用th,一般单元格用td。)
语义化标签应注意的一些其他问题。
1,尽量少用无语义的标签DIV和span
2,在语义不明显,既可以用P也可以用div的地方,尽量用P,因为P默认情况下有上下间距,去样式后的可读性更好,对兼容特殊终端有利。
3,不要使用纯样式标签。例如;b,font,u等。改用css设置。语义上需要强调的文本可以包在strong或者em标签里。有强调的语意。strong默认是加粗,em默认是斜体。。

下面讲讲CSS,编写高质量的CSS
1,怪异模式和DTD
    标准模式和怪异模式这两种模式的差异比较大,比较典型的就是IE对盒模型的解析:在标准模式中,网页元素的宽度是由padding,border,width三者的宽度相加决定的。在怪异模式中,width本身就包括了padding和border的宽度。此外,标准模式下块级元素的经典居中的方法是设定width,然后margin:0 auto;在怪异模式下也无法正常工作。
    怪异模式的目的就是为了兼容老式浏览器下的代码,它的很多解析方式是不符合标准的。所以,一般情况下,我们应该避免触发怪异模式,应选用标准模式。
      那么怪异模式是如何被触发的呢?与DTD有关,DTD是一种保证HTML文档格式正确的有效方式。
DTD的类型包括(HTML4.01) 严格型(strict),过渡型(loose),(XHTML1.0),严格型(transitional),过渡型(strict)。
如果漏写DTD声明,FF仍然会按照标准模式来解析网页,但在IE中(6.7.8)就会触发怪异模式。
2,如何组织CSS
      1,base层,是提供css reset功能和粒度最小的通用类,原子类。
      2,common层
      3,page层
通用原子类里有几个类比较特殊,需要特别说明一下。
.fl类和.fr类。这两个类,除了设置float:left和float:right之外。还设置了display:inline。熟悉cssbug的工程师应该一眼就能认出其作用——解决IE6的双外边距BUG。在IE6 下,如果对元素设置了浮动,同时又设置了margin-left或者margin-right。margin值会加倍。例如,设置margin-left:10px在IE6 下会显示为margin-left:20px。解决这个BUG的办法就是设置display:inline。所以我们在设计通用原子类时,将display:inline直接添加到.fl和.fr类时。可以避免挂浮动类时引入BUG。
.clearfix类。这个类用于在父容器直接清楚子元素浮动。通常情况下,为了让浮动元素的父容器能够根据浮动元素的高度而自适应高度。有三种做法:1,让父容器浮动起来。2,让浮动元素后面紧跟一个用于清除浮动的空标签。3,给父容器挂一个特殊class。即clearfix
.clearfix:after{content:"."; display:block; height:0; clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{ height:1%;}
清楚CSS浮动。高度自适应。。
.zoom类。在IE7发布之前,用height:1%来触发hasLayout。因为IE6为将height按照min-height来解析,所以用height:1%不会引入副作用。但是IE7发布以后,这种方式就不适用了,更好的触发hasLayout的方式是设置zoom:1,不用担心引入任何副作用。

模块化css——在css中引入面向对象编程思想
1,模块应在保证数量尽可能少的原则下,做到尽可能简单,以提高重用性。
2,挂多个class还是新建class——多用组合,少用继承。
3,如果不确定模块的上下margin特别稳定,最好不要将它写到模块的类里,而是使用类的组合,单独为上下margin挂用边距的原子类(例如mt10,mb20)。模块最好不要混用margin-top和margin-bottom。统一使用margin-top或者margin-bottom。
4,当不同选择符的样式设置有冲突时,会采用权重高的选择符设置的样式。如果css选择符权重相同,那么样式会遵循就近原则,哪个选择符最后定义,就采用哪个选择符的样式。为了保证样式容易被覆盖,提高可维护性,CSS选择符需保证权重尽可能低。

讲讲CSS sprite
将多张图片合并成一张大图,优点:会大大减少网页的HTTP请求数,减少服务器压力。
缺点:降低开发效率和增大维护难度。如果对于流量并不大的网站来说,css sprite带来的好处并不明显,而它付出的代价却很大,其实并不划算。所以,是否使用csssprite主要取决于网站流量。。。
     css常见问题
1,css编码风格:多行式和一行式。
2,ID和class
一般情况下,建议尽量使用class,少用id。
3.css hack
              1,IE条件注释法,只在IE下生效<!--[if IE]>....................<![endif]-->
                                           只在IE6小生效<!--[if IE 6]>.....................<![endif]-->
                                           只在IE6以上版本生效<!--[if gt IE 6]>..................<![endif]-->
                                           只在IE7上不生效<!--[if ! IE 7]>..................<![endif]-->
IE条件注释中间可以有外链css,style,script。
               2,选择符前缀hack法。如:*html只对IE6生效,*+html只对IE7生效。
选择符前缀法不能用于内联样式上,比如:<div style=""></div>
              3,样式属性前缀法_只在IE6下生效,*在IE6和IE7下生效。
4,解决超链接访问后hover样式不出现的问题。
              正确的伪类顺序、
关于啊标签的四种状态的排序问题,有个简单好记的原则,叫做love hate 原则,即,love hate
l(link)ov(visited)e h(hover)a(active)te
5,hasLayout ,前面一篇有讲过。
6,块级元素和行内元素。常见的:div,p,form,ul,ol,li。
                                                     span,strong,em
7,display:inline-block和hasLayout
如果触发行内元素的hasLayout,就会让行内元素拥有一些块级元素的特征。如:span{display:inline-block;}
例子就不写了。
8,relative,absolute,float
relative:会保留自己在z-index:0;层的占位,left,top,right,bottom值是相对于自己z-index:0层的位置。
absolute会完全脱离文档流,不再在z-index:0层,保留占位符,其left,top,right,bottom,值相当于自己最近一个设置了position:relative或position:absolute的祖先元素的。如果祖先没有设置,则相对boby的。

一,居中
1,水平居中
          (1)文本,图片等行内元素的水平居中{text-align:center;}
           (2)确定宽度的块级元素的水平居中{margin:0 auto;}
           (3)不确定宽度的块级元素的水平居中方法一:用table
                                                                                二:改变块级元素的display为linline类型,然后使用text-align:center来实现居中。
                                                                                三:通过给父元素设置float,然后父元素设置position:relative和left:10%,子元素设置position:relative和left:-50%来实现水平居中。
2,垂直居中
         (1)父元素高度不确定的文本,图片,块级元素的竖直居中。{通过给父容器设置相同的上下边距实现的。}
          (2)父元素高度确定的单行文本的竖直居中{height100px;line-height;100px;}
           (3) 父元素高度确定的多行文本,图片,块级元素的竖直居中。方法一:
                        方法二:对支持display:table-cell的IE8和firefox用display:table-cell和vertical_align:middle来实现居中,对不支持display:table-cell的IE6和IE7使用特定格式的hack,通过给父子两层元素分别设置top:50%和top:-50%来实现居中。 
二,网格布局,
z-index的相关问题以及Flash和IE6 下的select元素。
                Z轴在元素设置position为absolute或者relative后被激活。其大小由z-index设置,z-index越大,元素位置越靠上。
三,flash和IE6下select元素的显示问题。
flash嵌入网页中,有个wmode属性,用于指定窗口模式,其值有window(窗口),opaque(非窗口不透明),transparent(非窗口透明)三种。
四,IE6下select元素显示BUG
用iframe解决IE6下select与浮起元素的显示BUG
用iframe遮住select。
五,插入png图片
png格式因为其优秀的压缩算法和对透明度的完美支持,成为web中最流行的图片格式之一。
IE6下png的图片不显示透明效果。其他浏览器都挺好的。
为了解决IE6下png图片的般透明效果,的方案是:
一次性解决PNG透明度在IE6下显示问题的脚本

 

function correctPNG()
   {
   for(var i=0; i<document.images.length; i++)
      {
     var img = document.images[i]
     var imgName = img.src.toUpperCase()
     if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
        {
       var imgID = (img.id) ? "id='" + img.id + "' " : ""
       var imgClass = (img.className) ? "class='" + img.className + "' " : ""
       var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
       var imgStyle = "display:inline-block;" + img.style.cssText
       if (img.align == "left") imgStyle = "float:left;" + imgStyle
       if (img.align == "right") imgStyle = "float:right;" + imgStyle
       if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle     
       var strNewHTML = "<span " + imgID + imgClass + imgTitle
       + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
        + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
       + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
       img.outerHTML = strNewHTML
       i = i-1
        }
      }
   }
function alphaBackgrounds(){
   var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, '');
   var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
   for (i=0; i<document.all.length; i++){
      var bg = document.all[i].currentStyle.backgroundImage;
      if (bg){
         if (bg.match(/.png/i) != null){
            var mypng = bg.substring(5,bg.length-2);
    //alert(mypng);
            document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://xiaomiya2008.blog.163.com/blog/"+mypng+"', sizingMethod='crop')";
            document.all[i].style.backgroundImage = "url('')";
    //alert(document.all[i].style.filter);
         }                                               
      }
   }
}
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", correctPNG);
window.attachEvent("onload", alphaBackgrounds);
}

 它的实现原理是当页面加载完成后,先遍历页面内所有的图片元素,找到后缀为.png的图片,将他们改成span标签,设置为display:inline-block的类型,长宽和原png图片一样,然后配上progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘png 图片路径’,sizingMethod=‘crop’)的滤镜,实现png的透明效果,再遍历页面内所有元素,检查他们是否有png的背景图,如果有,则将背景图去掉,改用滤镜。这种方式调用非常方便,只要将这段代码放入网页中任意地方,当页面加载完成后,png图片都可以实现透明。但他也存在一定问题。

1)当页面全部加载完成前,png图片的透明部分仍然会显示为浅蓝;
2)遍历所有元素,执行效率不高;
3)当png是以背景形式插入网页的,它可能有background-position和background-repeat属性,而滤镜是不支持者两个属性的,如果设置了这两个属性,这两个属性的效果会丢失。

分享到:
评论

相关推荐

    编写高质量代码(WEB 前端)

    ### 编写高质量代码——Web前端开发修炼之道 #### 一、引言 随着互联网的发展,Web前端开发已经成为了一个至关重要的领域。从最初的静态页面到现在的动态交互式应用,前端技术经历了翻天覆地的变化。《编写高质量...

    编写高质量代码-Web前端开发修炼之道.azw3

    2.1 揭秘前端开发工程师 2.2 欲精一行,必先通十行 2.3 增加代码可读性——注释 2.4 提高重用性——公共组件和私有组件的维护 2.5 冗余和精简的矛盾——选择集中还是选择分散 2.6 磨刀不误砍柴工——前期的...

    《编写高质量代码-改善JavaScript程序的188个建议》PDF

    内容全部由编写高质量的JavaScript代码的最佳实践组成,从基本语法、应用架构、工具框架、编码风格、编程思想等5大方面对Web前端工程师遇到的疑难问题给出了经验性的解决方案,为Web前端工程师如何编写更高质量的...

    编写高质量代码-改善JavaScript程序的188个建议,完整扫描版

    《编写高质量代码:改善javascript程序的188个建议》是web前端工程师进阶修炼的必读之作,将为你通往“javascript技术殿堂”指点迷津!内容全部由编写高质量的javascript代码的最佳实践组成,从基本语法、应用架构、...

    编写高质量代码之Java_nodrm.azw3

    《编写高质量代码:改善javascript程序的188个建议》内容简介:本书是web前端工程师进阶修炼的必读之作,将为你通往“javascript技术殿堂”指点迷津!内容全部由编写高质量的javascript代码的最佳实践组成,从基本...

    编写高质量代码:改善JavaScript程序的188个建议_nodrm.azw3

    内容全部由编写高质量的JavaScript代码的最佳实践组成,从基本语法、应用架构、工具框架、编码风格、编程思想等5大方面对Web前端工程师遇到的疑难问题给出了经验性的解决方案,为Web前端工程师如何编写更高质量的...

    前端开发工程师分享PPT

    对于前端开发工程师来说,需要掌握如何构建高质量的桌面应用,包括但不限于响应式设计、高性能渲染等。 - **后台产品**:涉及到后台管理系统的前端开发,这类系统通常需要更复杂的交互逻辑和技术实现,如权限控制、...

    我的职业是前端工程师.pdf

    - **内容优化**:高质量的内容是SEO成功的关键。确保内容原创、有价值,并包含关键词。 #### 七、单页面应用技术 - **路由管理**:使用前端路由机制实现页面间的切换,无需重新加载整个页面。 - **数据管理**:...

    前端工程师gvim配置文件

    这个特性极大地提高了前端工程师编写和修改结构化代码的速度。 `zencoding.txt` 文件可能是Zen Coding的额外教程或示例,帮助开发者进一步掌握这项技能。通过学习这个文件,开发者可以了解更多的Zen Coding语法和...

    前端工程师新手必读.docx编程资料

    1. **市场需求增长**:随着移动互联网、社交媒体等领域的快速发展,越来越多的企业意识到优秀用户体验的重要性,这导致了对高质量前端开发人才的需求不断增加。 2. **技术迭代迅速**:前端技术更新换代速度快,新的...

    高级前端工程师简历模板

    在IT行业中,前端工程师是构建用户界面的关键角色,而作为高级前端工程师,职责更重,要求更高。这份“高级前端工程师简历模板”是为那些希望在这一领域展示自己专业技能和丰富经验的人量身定制的。 在撰写高级前端...

    从入门成为WEB前端工程师培训课程

    这个"从入门成为WEB前端工程师培训课程"涵盖了成为一名专业前端开发者所需的关键技能。以下是对这些关键知识点的详细解释: 1. **HTML (HyperText Markup Language)**:HTML是网页的基础,用于定义网页的结构。学习...

    前端工程师必看的一百本书籍

    7. 测试与调试:了解如何编写单元测试、集成测试,掌握浏览器开发者工具的使用,能够确保代码质量和问题定位。 8. 跨平台开发:随着移动互联网的发展,了解React Native、Flutter等跨平台框架,可以让前端工程师...

    web前端开发工程师工作的主要职责描述.pdf

    前端开发工程师需要熟悉 JavaScript 等语言的语法和特性,能够编写高质量的代码,确保网页的交互性和响应速度。 4. 网页优化:对网页进行优化,提高网页的加载速度和响应速度,确保用户体验优化。 前端开发工程师...

    前端工程师工作总结.doc

    8. **测试与调试**:前端工程师需要编写单元测试和集成测试,确保代码质量。Chrome开发者工具、Selenium等是常用的调试和测试工具。 9. **持续集成/持续部署(CI/CD)**:通过Jenkins、Travis CI等工具自动化构建和...

    述职报告模版-技术类(web前端).pptx

    - 代码库贡献:通过编写高质量的代码,分享最佳实践,提升团队的整体技术水平。 - 技术分享:定期进行内部技术分享,促进知识传播,提升团队协作效率。 - 文档编写:撰写技术指南、最佳实践文档,帮助新人快速...

    成都计算机软件行业高级Vue前端工程师岗位介绍JD模板.pdf

    1. **代码设计与实现:** 根据产品原型,高级Vue前端工程师需进行前端代码的结构性设计,确保代码的可维护性和扩展性,并实现核心业务功能。同时,需要编写清晰的技术文档,以便团队成员理解和协作。 2. **SaaS产品...

Global site tag (gtag.js) - Google Analytics