prinsip asas


Prinsip asas

Pemisahan struktur, gaya dan tingkah laku

Cuba pastikan dokumen dan templat hanya mengandungi struktur HTML, gaya diletakkan dalam helaian gaya dan tingkah laku diletakkan dalam skrip. HTML 结构，样式都放到样式表里，行为都放到脚本里。

缩进

统一两个空格缩进（总之缩进统一即可），不要使用 Tab 或者 Tab、空格混搭。

文件编码

使用不带 BOM 的 UTF-8 编码。

  • 在 HTML中指定编码 <meta charset="utf-8"> ；
  • 无需使用 @charset 指定样式表的编码，它默认为 UTF-8 （参考 @charset）；

一律使用小写字母

<!-- Recommended --><img src="google.png" alt="Google"><!-- Not recommended --><A HREF="/">Home</A>
/* Recommended */color: #e5e5e5;/* Not recommended */color: #E5E5E5;

省略外链资源 URL 协议部分

省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免Mixed Content 问题，减小文件字节数。

其它协议（ftp 等）的 URL 不省略。

<!-- Recommended --><script src="//www.w3cschool.cn/statics/js/autotrack.js"></script><!-- Not recommended --><script src="http://www.w3cschool.cn/statics/js/autotrack.js"></script>
/* Recommended */.example {  background: url(//www.google.com/images/example);
}/* Not recommended */.example {  background: url(http://www.google.com/images/example);
}

统一注释

通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。

HTML 注释

  • 模块注释

    <!-- 文章列表列表模块 --><div class="article-list">...</div>

  • 区块注释

    <!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: Ashu(Aaaaaashu@gmail.com)
-->

CSS 注释

组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；

/* ==========================================================================
   组件块
 ============================================================================ *//* 子组件块
 ============================================================================ */.selector {  padding: 15px;  margin-bottom: 15px;
}/* 子组件块
 ============================================================================ */.selector-secondary {  display: block; /* 注释*/}.selector-three {  display: span;
}

JavaScript 注释

  • 单行注释

必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。

  • 多行注释

避免使用 /*...*/

Indentation
  • Satukan lekukan dua ruang (pendek kata, lekukan boleh disatukan), jangan gunakan Tab atau Tab, dan ruang bercampur bersama .
  • Pengekodan fail
  • Gunakan pengekodan UTF-8 tanpa BOM.
  • Nyatakan pengekodan dalam HTML <meta charset="utf-8">;
    Tidak perlu menggunakan @charset untuk menentukan pengekodan helaian gaya , ia lalai kepada UTF-8 (rujuk @charset);
Sentiasa gunakan huruf kecil

/**
 * 函数描述
 *
 * @param {string} p1 参数1的说明
 * @param {string} p2 参数2的说明，比较长
 *     那就换行了.
 * @param {number=} p3 参数3的说明（可选）
 * @return {Object} 返回值描述
 */function foo(p1, p2, p3) {    var p3 = p3 || 10;    return {
        p1: p1,
        p2: p2,
        p3: p3
    };
}
/**
 * @fileoverview Description of file, its uses and information
 * about its dependencies.
 * @author user@meizu.com (Firstname Lastname)
 * Copyright 2015 Meizu Inc. All Rights Reserved.
 */

Abaikan bahagian protokol URL sumber pautan luar🎜🎜Abaikan http / https< dalam URL daripada sumber pautan luaran (gambar dan sumber media lain) /code> protokol, menjadikan URL sebagai alamat relatif, mengelakkan Kandungan Campuran masalah dan mengurangkan saiz fail Bilangan bahagian. 🎜🎜URL protokol lain (ftp, dsb.) tidak ditinggalkan. 🎜rrreeerrreee🎜Anotasi bersatu🎜🎜Dengan mengkonfigurasi editor, kekunci pintasan boleh disediakan untuk mengeluarkan mod anotasi yang diiktiraf sebulat suara. 🎜

komen HTML

🎜🎜🎜Komen modul🎜rrreee🎜🎜🎜Sekat ulasan🎜rrreee🎜🎜

komen CSS

🎜Gunakan baris kosong antara blok komponen, blok pemisah subkomponen , tiga baris kosong memisahkan blok sub-komponen; 🎜rrreee

komen JavaScript

🎜🎜Komen satu baris🎜🎜🎜 mesti menduduki satu baris. // diikuti dengan ruang dan lekukan adalah konsisten dengan kod yang diulas pada baris seterusnya. 🎜🎜🎜Komen berbilang baris🎜🎜🎜Elakkan menggunakan komen berbilang baris seperti /*...*/ . Apabila terdapat berbilang baris kandungan ulasan, gunakan berbilang ulasan satu baris. 🎜🎜🎜Anotasi Fungsi/Kaedah🎜🎜Anotasi fungsi/kaedah mesti mengandungi penerangan fungsi dan pengecam anotasi mesti digunakan apabila terdapat parameter dan nilai pulangan. ;🎜🎜Parameter dan anotasi nilai pulangan mesti mengandungi maklumat jenis dan penerangan;🎜🎜Apabila fungsi tersebut adalah fungsi dalaman dan tidak boleh diakses dari luar, anda boleh menggunakan bendera @dalam;🎜🎜rrreee🎜🎜Anotasi fail🎜🎜🎜 Anotasi fail digunakan untuk memberitahu tidak Bagi pembaca yang biasa dengan kod ini, apa yang terkandung dalam fail ini. Kandungan umum fail, pengarangnya, kebergantungan dan maklumat keserasian harus disediakan. Seperti berikut:🎜rrreee

Pengesahan kod

  • Gunakan W3C HTML Validator untuk mengesahkan kesahihan kod HTML anda
  • Gunakan W3C CSS Validator untuk mengesahkan kesahihan kod CSS
    • anda; benar-benar Tujuannya adalah untuk membolehkan pembangun memahami dengan mendalam jenis sintaks atau kaedah penulisan yang tidak standard dan tidak disyorkan selepas melalui proses pengesahan ini berkali-kali Walaupun mereka terpaksa menggunakan kaedah penulisan bukan standard dalam beberapa senario, mereka masih boleh melakukannya dengan baik.

←