浅谈前端代码规范

最新推荐文章于 2024-03-13 10:00:24 发布

JesusAllen30

最新推荐文章于 2024-03-13 10:00:24 发布

阅读量541

点赞数

分类专栏：转载的web前端技术文章标签：前端优化性能

转载的web前端技术专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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	表示当前，不要用current
index	表示索引
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动画。
文章转自：手册地址

JesusAllen30

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈前端代码规范

1、实现的目标：代码一致性和最佳实践。通过代码风格的一致性，降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践，确保页面性能得到最佳优化和高效的代码。 2、HTML 属性顺序一致保证易读性idclassnamedata-xxxsrc,for,type,hreftitle,alt 引号统一双引号 HEAD模板<!DOCTYPE html><html lang
复制链接

扫一扫

专栏目录