Web前端代码规范——学习笔记

最新推荐文章于 2024-04-23 08:02:12 发布
最新推荐文章于 2024-04-23 08:02:12 发布
阅读量277 收藏
点赞数
文章标签： Web前端 代码规范
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cookie923/article/details/80737147
版权

通用规范：

  • tab键用两个空格代替（Windows：tab键占四个空格，Linux：tab占八个空格）

  • css和javascript代码后加; 以便压缩工具“断句”

  • 文件内容编码统一为utf-8

  • css、javascript中非注释类中文字符须转换成unicode编码使用，避免编码错误时乱码显示

文件规范

  • 文件名用英文单词，多个单词采用驼峰命名法
  • 一些浏览器会将含有这些词的作为广告拦截。
    因此，文件命名、id、class等所有命名避免以下词汇：
    ad、ads、adv、banner、sponsor、gg、guangg、guanggao等。

html书写规范：

为每个HTML页面的第一行添加标准模式（standard mode）的声明，确保在每个浏览器中拥有一致的展现。
文档类型声明统一为HTML5声明类型，编码统一为utf-8。

<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="author" content="smile@kang.cool">//作者
<meta name="description" content="hello">//网页描述
<meta name="keywords" content="a,b,c">//关键字,“，”分隔
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08：21：57 GMT">//设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅
<meta http-equiv="Pragma" content="no-cache">//禁止浏览器从本地机的缓存中调阅页面内容
<meta http-equiv="Window-target" content="_top">//用来防止别人在框架里调用你的页面
<meta http-equiv="Refresh" content="5;URL=http://kahn1990.com/">//跳转页面，5指时间停留5秒 网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引
<meta name="robots" content="none">//content的参数有all,none,index,noindex,follow,nofollow，默认是all
<link rel="Shortcut Icon" href="favicon.ico">//收藏图标
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">//网页不会被缓存

  • HTML属性应当按照以下给出的顺序依次排列，来确保代码的易读性。
    class
    id 、 name
    data-*
    src、for、 type、 href
    title、alt
    aria-*、 role

    class –> nHeadTitle –>class遵循小驼峰命名法（little camel-case）
    id –> n_head_title –> id遵循名称+_
    name –> N_Head_Title –> name属性命名遵循首个字母大写+_

  <div class="nHeadTitle" id="n_head_title" name="N_Head_Title"></div>

p.s. document.getElementById兼容所有浏览器，但IE浏览器会混淆元素的ID和NAME属性，所以要区分ID和NAME命名。

<input type="text" name="test">
<div id="test"></div>
<button onclick="alert(document.getElementById('test').tagName)"></button>
<!-- ie6下为INPUT -->

CSS规范

为了欺骗W3C的验证工具,可将代码分为两个文件，一个是针对所有浏览器,一个只针对IE。即将所有符合W3C的代码写到一个文件中,而一些IE中必须而又不能通过W3C验证的代码（如:cursor:hand;）放到另一个文件中，再用下面的方法导入。

<!-- 放置所有浏览器样式-->
<link rel="stylesheet" type="text/css" href="">
<!-- 只放置IE必须，而不能通过w3c的-->
<!--[if IE]
    <link rel="stylesheet" href="">
<![endif]-->

  • CSS样式新建或修改尽量遵循以下原则
    根据新建样式的适用范围分为三级：全站级、产品级、页面级。
    尽量通过继承和层叠重用已有样式。
    不要轻易改动全站级CSS。改动后，要经过全面测试。

  • CSS属性显示顺序
    显示属性，元素位置，元素属性，元素内容属性

CSS书写顺序

.header {
/* 显示属性 */
    display || visibility
    list-style
    position top || right || bottom || left
    z-index
    clear
    float
/* 自身属性 */
    width max-width || min-width
    height max-height || min-height
    overflow || clip
    margin
    padding
    outline
    border
    background
/* 文本属性 */
    color
    font
    text-overflow
    text-align
    text-indent
    line-height
    white-space
    vertical-align
    cursor
    content
};

兼容多个浏览器时，将标准属性写在底部。

-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari和Chrome */
-o-border-radius: 15px; 
border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 *//标准属性

使用选择器时，命名比较短的词汇或者缩写的不允许直接定义样式。

.hd,.bd,.td{};//如这些命名

可用上级节点进行限定

.recommend-mod .hd

多选择器规则之间换行，即当样式针对多个选择器时每个选择器占一行

button.btn,
input.btn,
input[type="button"] {…};
六个不要三个避免一个使用：
>不要在标签上直接写样式
>不要在CSS中使用expression
>不要在CSS中使用@import
>不要在CSS中使用!important
>不要在CSS中使用“*”选择符
>不要将CSS样式写为单行
>避免使用filter
>避免使用行内（inline）样式
>避免使用“*”设置{margin: 0; padding: 0;}
>使用after或overflow的方式清浮动

减少使用影响性能的属性。

position:absolute;
float:left;//如这些定位或浮动属性

减少在CSS中使用滤镜表达式和图片repeat，尤其在body当中，渲染性能极差， 如果需要用repeat的话，图片的宽或高不能少于8px。

javaScript书写规范

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

长句可采用断行，但为了避免和JSLint的检验机制冲突，“.”或“+”这类操作符放在行尾。

TEMPL_SONGLIST.replace('{TABLE}', da['results']).
    replace('{PREV_NUM}', prev).
    replace('{NEXT_NUM}', next).
    replace('{CURRENT_NUM}', current).
    replace('{TOTAL_NUM}', da.page_total);

如果模块代码中，使用其它全局变量想跳过JSLint的检查，可以在该文件中加入/*global*/声明。

/*global alert: true, console: true, top: true, setTimeout: true */

从string到number的转换，使用parseInt，必须显式指定第二个参数的进制。

字符串拼接应使用数组保存字符串片段，使用时调用join方法。避免使用+或+=的方式拼接较长的字符串，每个字符串都会使用一个小的内存片段，过多的内存片段会影响性能。

尽量避免使用存在兼容性及消耗资源的方法或属性。

不要使用with，void，evil，eval_r，innerText

注重HTML分离, 减小reflow, 注重性能。

javascript编码规范：
用更合理的方式写 JavaScriptAirbnb JavaScript Style Guide()
中文翻译版

Cookie923
关注
Web 前端进阶—— JS 学习笔记
cccloveforever的博客
04-21 1034
原型链：简单来讲就是原型组成的链，比如函数的原型是Function，Function的原型是Object，Object 的原型仍然是Object，一直追溯到最终的原型对象。函数通过prototype来追溯原型对象，对象通过proto来追溯原型对象。通过一个构造函数创建出来的多个实例，如果都要添加一个方法，给每个实例去添加并不是一个明智的 选择。这时就该用上原型了。在实例的原型上添加一个方法，这个原型的所有实例便都有了这个方法。//B继承了A,通过原型，形成链条。
黑马程序员前端JavaScript高级——ES6学习笔记
weixin_44566194的博客
10-29 2990
黑马程序员前端教程的PPT和代码学习笔记，里面包含了面向对象的编程思想，以及构造函数，类和对象、原型链、箭头函数、数组和字符串新增方法、函数递归、深拷贝浅拷贝、正则表达式等知识点。本文是对CSDN其他博主记录的一个补充，因为黑马也是今年才陆续补充一些知识点的视频的，本文将其收录于此，雷同勿怪。
WEB前端技术笔记整理
08-28
这里整理前端的几种技术，适合初学者学习，和程序员复习，还有个人的一点见解，希望有帮助。
前端代码笔记
weixin_49770265的博客
05-16 124
cursor:pointer;鼠标移入变成手的形状 no-repeat;不重复出现 color：字体颜色 background-color: #e64b16;颜色 background: url();背景图片 text-decoration: line-through;中划线 overflow: hidden;超出部分隐藏 font-weight: bold;字体加粗 line-height: 20px;行高 opacity: 0.5;透明度 ：last-child;选择到最后一个元..
前端代码笔记（不断更新...）
不吃鱼的猫
05-16 271
ajax上传文件进度条（上传时后台完整接收显示进度100%） $.ajax({ url: url, type: "POST", data: data, processData:false, //必须 contentType:false, //必须......
前端项目代码学习笔记
dong123ohyes的专栏
11-12 1389
1.proxy_pass 代理规则（是否以“／”结尾） （1）配置proxy_pass时，当在后面的url加上了/，相当于是绝对路径，则Nginx不会把location中匹配的路径部分加入代理uri。 比如下面配置，我们访问http://IP/proxy/test.html，最终代理到URL是http://127.0.0.1/test.html （2）如果配置proxy_pass时，后面没有/，Nginx则会把匹配的路径部分加入代理uri。 比如下面配置，...
前端学习笔记（代码）
weixin_46048220的博客
02-12 496
fruit.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fruit</title> <link rel="stylesheet" href="css/fruitCss.css"> <script type="text/javascript" src="js/fruit.js">
前端学习笔记——node.js
lxy95512的博客
03-20 1449
初识 Node.js 什么是 Node.js Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 中的 JavaScript 运行环境 注意： 浏览器是 JavaScript 的前端运行环境。 Node.js 是 JavaScript 的后端运行环境。 Node.js 中无法调用 DOM 和 BOM 等浏览器内置 API。 Node.js 可以做什么 Node.js 作为一个 JavaScript 的运行环境，仅仅提供了基础的功能和
【学习笔记】PythonWeb（Ⅰ）—— Flask
Eddie_hyh的博客
04-08 1294
PythonWeb第一部分：Flask
Web 前端基础—— JavaScript 学习笔记
最新发布
cccloveforever的博客
04-23 1033
在代码块内，使用 let、const 命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时 性死区”。当用户触发了动作时才加载对应的功能。触发的动作，是要看具体的业务场景而言，包括但不限于 以下几个情况：鼠标点击、输入文字、拉动滚动条，鼠标移动、窗口大小更改等。加载的文件，可 以是 JS、图片、CSS、HTML 等。
Web前端开发详细教程, Web前端开发代码大全, 包含各种框架详解
07-07
Web前端开发详细教程, Web前端开发代码大全, 包含各种框架详解
web前端常用代码
07-07
常用代码 eg.滚动<marquee direction=UP width="196" height="106" onmouseout=start() onmouseover=stop() scrollAmount=2> </marquee>
前端js代码规范
08-29
前端代码规范
前端网页HTML
12-08
前端网页开发代码，包含HTML和css等脚本语言。
Web前端开发案例-源代码
08-04
html 和css 学习源码容翔实、结构清晰、循序渐进，基例实战紧密结合，既可作为HTML5+CSS3初学者的入门，也适合作为中高级用户对新技术作进一步学习的参考
Web前端常用代码笔记整理（01）
weixin_33812433的博客
10-08 220
1.[] 和 Array 调用 slice 方法引起的问题 问题表示：在某些场景下，需要将函数的 arguments 参数作为一个数组调用，但是 arguments 是一个奇异对象，所以试着将 arguments 转化为一个数组； function argToArr(){ return [].slice.call(argument...
web前端代码大全_Web前端开发知识体系大全
weixin_39946534的博客
12-12 2363
//Web前端开发知识体系大全//Web前端开发的知识点很多，这里将知识划分为：理论知识，类库框架，编码开发，运行环境。第一，理论知识是非常重要的，每一种程序开发，都不能离开基础理论。第二，掌握了理论基础，就能学习编码了，在此之前得先学习第三方框架和类库，例如jQuery。第三，有了这些理论知识和类库框架，就可真正的编码了。第四，为了能高效、稳定的运行在相应的环境中，还学要懂得运行环境。...
Web前端常用代码笔记整理（02）
weixin_34406086的博客
12-19 150
1.canvas图片预加载及进度条的实现 /*star *loading模块 *实现图片的预加载，并显示进度条 *参数：图片数组对象，加载完成的回调函数 */ function loadImages(sources,callback){ var loadedImages = 0; var numIm...
前端开发笔记
huangqiang80的博客
07-18 512
前端开发笔记 文章目录前端开发笔记1、判断对象和数组是否为空2、js 分割字符串3、js 指定小数位数4、vue中使用input监听事件5、楼层跳转时，设置滚动条跳转距离6、vue添加监听和消除滚动条事件7、正则身份证验证8、vue中数组更新后，不能及时响应9、uniapp解决input设置高度后文字不垂直剧中10、uniapp文本输入限制为正整数11、uniapp用globalData定义全局变量 1、判断对象和数组是否为空 1.判断空对象 let obj = {} Object.keys(obj).le
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值