• 小谈前端代码的一些问题


    最近在做一个项目,已经到了后期,通常我们在后期主要是做一些代码优化的工作,本文主要谈谈前端的代码优化方面的一些问题,分为CSS篇和JS篇

    一、CSS篇

      1)内联元素inline,inline元素对一些Css不起作用,例如margin-top,margin-bottom,vertical-align,overflow,height,width如果是内联元素,然后设置这些属性,是根本不会起到作用的,因为内联元素本身是没有高度的。

      类似这样的代码: <span style="margin-top:10px; height:100;100"><img src="xxx.png" width="100" height="100"></span> 

      2)block 元素,块状元素 ,顾名思义,就是一个块状的,有同学给加了一个属性 100%,我觉得这个是不合理的,本身就是100%,何必还要添加呢。

    这个类型的元素对垂直 属性 vertical-align 也是不起作用的。

      3)设置了float或者position:absolute 的元素 也是不支持 vertical-align和margin 的,因为他们都脱离了文档,所以不可能还能垂直居中的。

      4)触发haslayout 属性,一般都用zoom:1来触发这个属性,但是如果有高度或者宽度 ,同样就触发了这个haslayout属性,就不需要这个zoom:1了。同样有

    很多同学写成这样的 <span style="display:inline-block;*display:inline,*zoom:1"></span> 其实后面的这个*display:inline,*zoom:1可以去掉,有这个display:inline-block一样可以起到这个作用,在ie6,7下触发了haslayout属性。

    二、JS篇

      1)对一些常见的有规律的函数的处理方式,通过数组这种形式来统一处理

      2)有判断多种情况的,基于值的形式,出现不同分支的,一般用三目来处理

      3)赋值的形式,有很多不同的值形式不同,通过正则表达式来处理 tangram里面有baidu.format 函数来处理

      4)判断是否存在然后执行,通过 && 符号来 判断

      5)基于数据的开发,通常写成小数据模板的形式,然后render数据

      6)多用异步接口去数据,对事件的绑定,用class的形式要优于id的绑定形式,因为id可能并没有,从而导致报错。

      7)拼字符串 通过数组join() 的形式

      8)循环数组的时候,开始得到数组的长度,不要在每次都获取

      9)数组赋值 arr[l] = ele 

    三、我是怎么写CSS,调试js的

      1)拿到PSD,在标准模式下,在chrome,firefox下调整成和设计图一模一样的

      2)在ie6下看效果,调整一些css,会写一些hack

      3)在ie7,8下看效果,如果特殊情况,特殊处理

      4)调试js,在chrome的console下调试,搜索关键字,单步跟踪,都可以找到问题的。


  • 相关阅读:
    java:Session(概述,三层架构实例(实现接口封装JDBC),Session实现简单购物车实例)
    java:JSP(JSPWeb.xml的配置,动态和静态导入JSP文件,重定项和请求转发,使用JSP实现数据库的增删改查实例)
    java:LeakFilling(Servlet,JSP)
    java:Servlet(Create,LifeCycle,ServletWeb.xml文件的配置,交互式,Tomcat文件分析,单例安全模式)
    i春秋 小漏洞也有大梦想
    sqlmap 使用总结
    apk逆向实例 TopCtf
    python scrapy 报错 DEBUG: Ignoring response 403
    scrapy基本使用(二)
    scrapy基本使用(一)
  • 原文地址:https://www.cnblogs.com/yupeng/p/2410344.html
Copyright © 2020-2023  润新知