前端规范学习笔记

最新推荐文章于 2024-04-22 16:45:06 发布

qq_36992097

最新推荐文章于 2024-04-22 16:45:06 发布

阅读量271

点赞数

分类专栏：前端文章标签：编码规范

本文链接：https://blog.csdn.net/qq_36992097/article/details/80895293

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前端规范学习笔记

前端规范学习笔记

命名规则:

列表内容文件名用英文单词，多个单词用驼峰命名法。
文件名、ID、CLASS等所有命名避免以下词汇。
‘ad’ ‘ads’ ‘adv”banner”sponsor’ ‘gg’ ‘guangg’ ‘guanggao’等

html书写规范：

为每个HTML页面的第一行添加标准模式（standard mode）的声明，确保在每个浏览器中拥有一致的展现。

文档类型声明统一为HTML5声明类型，编码统一为UTF-8。

非特殊情况下CSS样式文件外链至HEAD之间，JAVASCRIPT文件外链至页面底部。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <!-- 逻辑代码 -->
    <!-- 逻辑代码底部 -->
    <script src="lib/jquery/jquery-2.1.1.min.js"></script>
</body>
</html>

css书写规范:

css属性显示顺序。

显示属性
元素位置
元素属性
元素内容属性
使用选择器时，命名比较短的词汇或者缩写的不允许直接定义样式。

hd，.bd，.td{};

浏览器将检查整个文档中的所有链接和每个链接的父元素，并遍历文档树去查找ID为header的祖先元素，如果找不到header将追溯到文档的根节点，解决方法如下：

避免使用通配规则和相邻兄弟选择器、子选择符、后代选择符、属性选择符等选择器
不要限定id选择器，如div#header(提权的除外)
不要限定类选择器，如ul.recommend（提权的除外）
不要使用 ul li a 这样长的选择符

六个不要三个避免一个使用

不要在标签上直接写样式
不要在CSS中使用expression
不要在CSS中使用@import
不要在CSS中使用!important
不要在CSS中使用“*”选择符
不要将CSS样式写为单行
避免使用filter
避免使用行内（inline）样式
避免使用“*”设置{margin: 0; padding: 0;}
使用after或overflow的方式清浮动

javaScript书写规范:

命名规范

常量名
全部大写并单词间用下划线分隔
如：CSS_BTN_CLOSE、TXT_LOADING

代码格式

"()"前后需要跟空格
"="前后需要跟空格
","后面需要跟空格
JSON对象需格式化对象参数
if、while、for、do语句的执行体用"{}"括起来

使用严格的条件判断符。用===代替==，用!==代替!=，避免掉入==造成的陷阱在条件判断时，这样的一些值表示false。

null
undefined与null相等
字符串''
数字0
NaN

在==时，则会有一些让人难以理解的陷阱。

(function () {
        var undefined;
        undefined == null; // true
        1 == true; //true
        2 == true; // false
        0 == false; // true
        0 == ''; // true
        NaN == NaN;// false
        [] == false; // true
        [] == ![]; // true
    })();

下面类型的对象不建议用new构造。

new Number
new String
new Boolean
new Object //用{}代替
new Array //用[]代替

图片规范：

命名应用小写英文、数字、_组合，便于团队其他成员理解。

header_btn.gif
header_btn2.gif

页面元素类图片均放入img文件夹,
测试用图片放于img/testimg文件夹，psd源图放入img/psdimg文件夹。
图片格式仅限于gif、png、jpg等。
用png图片做图片时,要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果,请为ie-6单独定义背景，并尽量避免使用半透明的png图片。
背景图片请尽可能使用sprite技术, 减小http请求。

注释规范：

JAVASCRIPT、CSS文件注释需要标明作者、文件版本、创建/修改时间、重大版本修改记录、函数描述、文件版本、创建或者修改时间、功能、作者等信息。

@file 文件名
@addon 把一个函数标记为另一个函数的扩张，另一个函数的定义不在源文件中
@argument 用大括号中的自变量类型描述一个自变量
@author 函数/类作者的姓名
@base 如果类是继承得来，定义提供的类名称
@class 用来给一个类提供描述，不能用于构造器的文档中
@constructor 描述一个类的构造器
@deprecated 表示函数/类已被忽略
@fileoverview 表示文档块将用于描述当前文件，这个标签应该放在其它任何标签之前
@final 指出函数/类
@member 定义随后的函数为提供的类名称的一个成员
@param 用大括号中的参数类型描述一个参数
@private 表示函数/类为私有，不应包含在生成的文档中
@requires 表示需要另一个函数/类
@throws 描述函数/类可能产生的错误
@type 指定函数/成员的返回类型
@version 函数/类的版本号