zoukankan      html  css  js  c++  java
  • 前端规范

    规范的目的
    (1).提高团队开发效率。
    (2).有利于项目的后期维护。
    (3).提高代码质量

    前端规范主要包括如下几个部分:
    (1).HTML规范。
    (2).CSS规范。
    (3).JavaScript规范

    --------通用规范-------
    文件命名规范
    文件名统一使用小写,字母、数组和下划线,避免操作系统对大写不敏感及书写错误
    使用英文字符起始
    文件的名称尽量见词达意,有多个单词组成使用减号( - )分割 例如:result-fail
    testScript.js
    testMainClass.css
    test_reg.html
    script.js

    上面的都是不推荐方式,逐个分析如下:
    (1).第一行问题在于,文件名称都中有大写字符,规范要求都是小写。
    (2).第二行的问题与第一行相同。
    (3).第三行使用下划线作为分隔符,要使用中划线分隔。
    (4).第四行使用数字作为名称的开头,规范要求始终使用英文字符作为起始。

    外部资源引入
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    推荐写法
    <script src="//libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    URL所指向的具体路径,不要指定协议部分(http:, https:)其他类型协议是不能够省略,比如FTP协议。

    文本缩进
    两个空格or 四个空格(统一)

    编码格式
    (1).在HTML中指定编码<meta charset="utf-8">。
    (2).无需使用@charset 指定样式表的编码,它默认为UTF-8 。
    (3).js文件同样推荐使用utf-8编码方式。




    id和class命名
    属性命名: 只能是26个英文字母、数字和连字符(-),其他字符都不要出现,包括汉字
     
    属性值大小写
    (1)、id与class属性值推荐小写形式
    (2)属性的定义,统一使用双引号

    <!-- 推荐命名方式 -->
    <div class="side"></div>
    <!-- 不推荐命名方式 -->
    <div class="Side"></div>


    连接符使用
    属性值是多个单词的合成时,推荐单词之间使用连字符。
    <!-- 推荐命名方式 -->
    <div class="side-bar"></div>
    <!-- 不推荐命名方式 -->
    <div class="side_bar"></div>
     

    -------- HTML编码规范-------
    推荐使用HTML5标准的文档类型:<!DOCTYPE html>
    标签闭合
    脚本加载方式
    引入js及 css时可省略type属性
    单双引号 ,推荐使用 ‘’
    标签属性一律使用小写
    代码注解明确
    禁止id属性重复

    --------javascript编码规范-------
    变量命名使用驼峰
    var testModules = {};
    私有属性、变量和方法已下划线 “ _ ”开头
    var _privateMethod = {};
    常量,使用全部字母大写,单词间下划线分隔的命名 “_”
    var USR_ID = {};







    True 和 False 布尔表达式
    类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 == null。
    下面的布尔表达式都返回 false:
    1)  null
    2)  undefined
    3)  '' 空字符串
    4)  0 数字0
    但小心下面的, 可都返回 true:
    1)  '0' 字符串0
    2)  [] 空数组
    3)  {} 空对象

    条件(三元)操作符 (?:)
    三元操作符用于替代 if 条件判断语句。

    // Not recommended
    if (val != 0) {
    return foo();
    } else {
    return bar();
    }

    // Recommended
    return val ? foo() : bar();

    性能优化
    1、  js中减少DOM操作,使用时结构合理
    2、  缓存数组长度 ; 在 for 缓存 length
    3、  异步加载不确定JS文件(第三方文件) 动态加载
    4、  减少动画使用 slideup/down()fadein/fadeout()等方法及animate()方法


  • 相关阅读:
    五秒原则,做一件事之前数 5 秒,1,2,3,4,5 立马去做。比如睡觉:数五秒,立马放下手机,闭眼。
    Perl 安装 JSON 包
    Perl: hash散列转换为Json报错集, perl.c,v $$Revision: 4.0.1.8 $$Date: 1993/02/05 19:39:30 $
    叫法: 表名 表字段名 定义每个表字段
    失误1: 把i放到循环体内部,i++失效
    沈南鹏@《遇见大咖》: A轮没投,投了8个月以后就证明了张一鸣是对了,在美国都没有张一鸣这种模式
    xshell通过xftp传输Windows文件到Linux:在输入put后,再摁 TAB 键,可显示当前文件夹的文件
    LeetCode84 Largest Rectangle in Histogram
    全排列问题及其引申问题
    LeetCode Weekly Contest 8
  • 原文地址:https://www.cnblogs.com/congxueda/p/10591151.html
Copyright © 2011-2022 走看看