zoukankan      html  css  js  c++  java

  • 编码规范（本文档属于半成品）

     

    1. 引言

    1.1  编写目的

    这是一份旨在增强团队的开发协作，提高代码质量和打造开发基石的编码风格规范。目前其中包含了HTML、JavaScript 和css/scss 几个部分。

     

    1.2  项目背景

    随着IT信息化的高速发展，IT系统已经成为各行业的重要资产与重要保障。业务持续性无中断要求对IT管理提出了更高的诉求。对于IT系统的运行维护已经成为了各行各业各单位领导和信息服务部门普遍关注的问题。随着技术的发展，IT的运维管理已经从系统化、集约化、数据化向着智能化发展。

    高昂的运维成本，逐年增加的报告文档，知识体系的共享缺乏，重复的日常检查，没有权威的问题解决方案可查询……这些日益突出的繁琐问题，也召唤着自动化运维系统的诞生。

     

    1.3  定义

    1.3.1  运维

    运维一般是指对大型组织已经建立好的网络软硬件的维护，其中传统的运维是指信息技术运维（IT运维）。

    运维的最终结果是对软件运行中各种性能的维护。

     

    1.3.2  采集

    运维一般是

     

    【列出文档中用到的专有术语的定义和缩写词的原文】

     

    1.4  参考资料

    【可包括：

    A、项目经理核准的计划任务书、合同或上级机关的批文

    文档所引用的资料、规范等；列出这些资料的作者、标题、编号、发表日期、出版单位或者来源】

     

    1. 一般规范

    2.1  适用范围

    可应用在HTML、JavaScript 和css 上的通用规则。

    2.2  通用规则详情

    2.2.1  文件/资源命名

    • 在web项目中，所有的文件名应该遵循同一名名约定。
    • 请确保文件命名总是以字母开头而不是数字。而以特殊字符开头命名的文件，一般都有特殊的含义和用处。
    • 资源的字母名称必须全为小写。

    在某些大小写敏感的操作系统中，当文件通过工具压缩混淆后，大小写不同导致引用文件不同的错误，很难被发现

    • 需要对文件增加前后缀或特定的扩展名（比如 .min.js, .min.css），抑或一串前缀，建议使用点分隔符来区分

     

    实例

    不推荐

    MyScript.js

    myCamelCaseName.css

    i_love_underscores.html

    1001-scripts.js

    my-file-min.css

    推荐

    my-script.js

    my-camel-case-name.css

    i-love-underscores.html

    thousand-and-one-scripts.js

    my-file.min.css

     

    2.2.2  协议

    • 不要指定引入资源所带的具体协议（http:，https:），除非两者都不可用。

    不指定协议使得 URL 从绝对的获取路径转变为相对的，在请求资源协议无法确定时非常好用，而且还能为文件大小节省几个字节。

     

    实例

    不推荐

    <script src="http://cdn.com/foundation.min.js"></script>

    .example {

    background: url(http://static.example.com/images/bg.jpg);

    }

    推荐

    <script src="//cdn.com/foundation.min.js"></script>

    .example {

    background: url(//static.example.com/images/bg.jpg);

    }

     

    2.2.3  文本缩进

    一次缩进两个空格

    2.2.4  注释

    注释是了解代码写法和目的的唯一途径。

    最好写你的代码为什么要这么写，背后的考量是什么，而不仅仅是代码都干了什么。

    一些注释工具可以帮助你写出更好的注释。JSDoc 或 YUIDoc 就是用来写 JavaScript 注释用的。你甚至可以使用工具来为这些注释生成文档，这也是激励开发者们写注释的一个好方法，因为一旦有了这样方便的生成文档的工具，他们通常会开始花更多时间在注释细节上。

    2.2.5  代码检查

    对于 JavaScript，建议使用 JSLint 或 JSHint。

     

    1. 页面的实现规范

    3.1  Html 页面编码规范

    此节为了统一html页面编写规范，使得html 代码简练、清晰，能够页面加载的更为迅速，且能在多种设备中运行良好。

     

    在设计与开发过程中需要遵循的原则

    结构分离：使用html 增加结构，而不是样式内容

    保持整洁：为工作流添加代码验证工具；使用工具或样式向导维护代码结构和格式

    学习新语言：获取元素结构和雨衣标记

    确保可访问

    测试： 是网站在多种设备中能够良好运行

     

    HTML,CSS 和JavaScript三者的关系

    HTML 是用于调整页面结构和内容的标记语言。HTML 不能用于修饰样式内容，也不能在头标签中输入文本内容，使代码变得冗长和复杂，相反使用CSS 来修饰布局元素和外观比较合适。HTML元素默认的外观是由浏览器默认的样式表定义的，如在Chrome中h1标签元素会渲染成32px的Times 粗体。

    三条通用设计规则：

    使用HTML 来构造页面结构，CSS修饰页面呈现，JavaScript实现页面功能。CSS ZenGarden 很好地展示了行为分离。

    如果能用CSS或JavaScript实现就少用HTML代码。

    将CSS和JavaScript文件与HTML 分开存放。这可有助于缓存和调试。

     

    文档结构方面也可以做优化，如下：

    使用HTML5 文档类型，以下是空文件：

    <!DOCTYPE html>

    <html>

     

    <head>

     <title>Recipes: pesto</title>

    </head>

     

    <body>

     

      <h1>Pesto</h1>

     

      <p>Pesto is good!</p>

     

    </body>

    </html>

     

    在文档起始位置引用CSS文件，如下：

    <head>

      <title>My pesto recipe</title>

     

      <link rel="stylesheet" href="/css/global.css">

      <link rel="stylesheet" href="css/local.css">

     

    </head>

     

    使用这两种方法，浏览器会在解析HTML代码之前将CSS信息准备好。因此有助于提升页面加载性能。

    在页面底部body结束标签之前输入JavaScript代码，这样有助于提升页面加载的速度，因为浏览器在解析JavaScript代码之前将页面加载完成，使用JavaScript会对页面元素产生积极的影响。

    <body>

     

      ...

     

      <script src="/js/global.js">

      <script src="js/local.js">

     

    </body>

    使用Defer和async属性，脚本元素具有async 属性无法保证会按顺序执行。

    可在JavaScript代码中添加Handlers。千万别加到HTML内联代码中，比如下面的代码则容易导致错误且不易于维护：

    index.html:

    <head>

      

      ...

     

      <script src="js/local.js">

     

    </head>

     

    <body onload="init()">

     

      ...

     

      <button onclick="handleFoo()">Foo</button>

     

      ...

     

    </body>

     

    下面的写法比较好：

    index.html:

    <head>

     

      ...

     

    </head>

     

    <body>

     

      ...

     

      <button id="foo">Foo</button>

     

      ...

     

      <script src="js/local.js">

     

    </body>

    js/local.js:

    init();

    var fooButton =

        document.querySelector('#foo');

    fooButton.onclick = handleFoo();

    验证

    优化网页的一种方法就是浏览器可处理非法的HTML 代码。合法的HTML代码很容易调试，且占内存少，耗费资源少，易于解析和渲染运行起来更快。非法的HTML代码让实现响应式设计变得异常艰难。

    当使用模板时，合法的HTML代码显得异常重要，经常会发生模板单独运行良好，当与其他模块集成时就报各种各样的错误，因此一定要保证HTML代码的质量，可采取以下措施：

    在工作流中添加验证功能：使用验证插件如HTMLHint或SublineLinter帮助你检测代码错误。

    使用HTML5文档类型

    确保HTML的层次结构易于维护，要避免元素嵌套处于左开状态。

    保证添加各元素的结束标签。

    删除不必要的代码 ；没有必要为自关闭的元素添加结束标签；Boolean 属性不需要赋值，如果存在则为True;

    <video src="foo.webm" autoplay controls>

    代码格式

    格式一致性使得HTML代码易于阅读，理解，优化，调试。

    语义标记

    语义指意义相关的事物，HTML 可从页面内容中看出语义：元素和属性的命名一定程度上表达了内容的角色和功能。HTML5 引入了新的语义元素，如<header>，<footer>及<nav>。

    选择合适的元素来编写代码可保证代码的易读性：

    使用<h1>(<h2>,<h3>…)表示标题，<ul>或<ol>实现列表

    注意使用<article> 标签之前应添加<h1>标签；

    选择合适的HTML5语义元素如<header>，<footer>,<nav>,<aside>;

    使用<p>描述Body 文本，HTML5 语义元素可以形成内容，反之不成立。

    使用<em>和<strong>标签替代<i>和<b>标签。

    使用<label>元素，输入类型，占位符及其他属性来强制验证。

    将文本和元素混合，并作为另一元素的子元素，会导致布局错误，

    例如：

    <div>Name: <input type="text" id="name"></div>

    换种写法会更好：

       1:  <div>

       2:    <label for="name">Name:</label><input type="text" id="name">

       3:  </div>

     

    布局

    要提高HTML代码的性能，要遵循HTML 代码以实现功能和为目标，而不是样式。

    使用<p>元素修饰文本，而不是布局；默认<p>是自动提供边缘，而且其他样式也是浏览器默认提供的。

    避免使用<br>分行，可以使用block元素或CSS显示属性来代替。

    避免使用<hr>来添加水平线，可使用CSS的border-bottom 来代替。

    不到关键时刻不要使用div标签。

    尽量少用Tables来布局。

    可以多使用Flex Box

    使用CSS 来调整边距等。

    CSS

    虽然本文讲解的是如何优化HTML，下面介绍了一些使用css的基本技能：

    避免内联css

    最多使用ID类 一次

    当涉及多个元素时，可使用Class来实现。

    以上就是本文介绍的优化HTML代码的技巧，一个高质量高性能的网站，往往取决于对细节的处理，因此我们在日常开发中，能够考虑到用户体验，后期维护等方面，则会产生更高效的开发。

     

     

     

    1. 数据库的实现规范

    4.1  命名规范

    • 在数据库中，所有的表名应该遵循同一命名约定。
    • 数据库中所有字段都采用小写，如果分割使用 _
    • 所有表示时间格式 常用类型 timestamp , 格式为 yyyy-MM:-dd hh:mm:ss

     

    1. 其他说明

    本文档未完成部分还代补充。
  • 相关阅读:
    SQL之CASE WHEN用法详解
    MySQL笔记汇总
    Linux常用命令
    TCP/IP速记
    数据结构和算法速记
    多线程相关概念
    线程安全&Java内存模型
    线程通讯wait&notify
    创建多线程的4种方式
    重写ThreadPoolTaskExecutor
  • 原文地址：https://www.cnblogs.com/panie2015/p/5630378.html
Copyright © 2011-2022 走看看