浅谈前端代码规范

来源：互联网发布：有深度的动漫知乎编辑：程序博客网时间：2024/06/02 14:48

1、实现的目标：
代码一致性和最佳实践。通过代码风格的一致性，降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践，确保页面性能得到最佳优化和高效的代码。
2、HTML
属性顺序一致保证易读性

id
class
name
data-xxx
src,for,type,href
title,alt

引号统一双引号

HEAD模板

<!DOCTYPE html><html lang="zh-cmn-Hans"><head>    <!-- 设置编码格式 -->    <meta charset="utf-8">    <!--IE兼容模式 优先使用最新版的IE和Chrome内核 -->    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <title>Style Guide</title>    <!--SEO优化-->    <meta name="description" content="不超过150个字符">    <meta name="keywords" content="">    <meta name="author" content="name, email@gmail.com">    <!-- 为移动设备添加 viewport -->    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <!-- iOS 图标 -->    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />    <link rel="shortcut icon" href="path/to/favicon.ico"></head>

3、CSS
3-1、良好的注释：将样式按组件（component）来分割。命名也要按功能来区分。

/* ========================组件块样式==========================*//* 子组件块样式==========================*//*子组件块样式==========================*/

3-2、合理的缩进
3-3、避免过分嵌套（3层）

4、JavaScript
4-1、注释原则
如无必要，勿增注释，如有必要，尽量详细。合理的注释，空行排版等，可以让代码更易阅读、更具美感。

单行注释 //
多行注释多个//

4-2、命名
变量：驼峰命名法

私有属性、变量和方法以下划线开头：var _privateMethod = {}；

常量，使用全部的大写字母，单词间下划线分隔：var HTML_ENTITY = {}；

  4-3、命名语法：
  类名，使用名词：
  function Engine(options){};

函数名，使用动宾短语：
function getStyle(element){};

  boolean类型的变量使用is或has开头：
  var isReady = false;
  var hasMoreCommands = false;

4-4、接口命名规范

option表示选项active表示当前，不要用currentindex表示索引trigger触点元素triggerType触发类型、方式context表示传入的this对象object传入的对象element推荐全写length推荐全写prev/next前一个、后一个

4-5、jQuery
  1、存放jQuery对象的变量以$开头；
  2、将jQuery选择器返回的对象缓存到本地变量复用；
  3、使用驼峰命名法；
  4、尽可能的使用ID选择器，性能更好；
  5、在父元素中选择子元素使用.find()方法性能更好；

$("#myLink")  .addClass("bold")  .on("click", myClickHandler)  .on("mouseover", myMouseOverHandler)  .show();

6、尽量使用链式写法而不是使用变量缓存或者多次调用选择器方法；
7、当链式超过3个或者更加复杂时，使用换行和缩进来保持代码的可读性；
8、正则表达式仅准用.test()和.exec();
9、性能优化：异步加载第三方内容、避免使用jQuery动画。
文章转自：手册地址

0 0