整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
文地址：Understanding Design Patterns in JavaScript
原文作者：Sukhjinder Arora
譯者：HelloGitHub-Robert
當(dāng)啟動一個新的項目時候，我們不應(yīng)該馬上開始編程。而是首先應(yīng)該定義項目的目的和范圍，然后列出其功能或規(guī)格。如果你已經(jīng)開始編程或者正在從事一個復(fù)雜的項目，則應(yīng)該選擇一個最適合你項目的設(shè)計模式。
在軟件工程中，設(shè)計模式是針對軟件設(shè)計中常見問題的可重用解決方案。設(shè)計模式也是經(jīng)驗豐富的開發(fā)人員針對特定問題的最佳實踐。它可以被當(dāng)作編程的模板。
許多工程師要么認(rèn)為設(shè)計模式浪費(fèi)時間，要么不知道如何恰當(dāng)?shù)氖褂迷O(shè)計模式。但如果能正確使用設(shè)計模式，則可以幫助你寫出更好的可讀性更高的代碼，并且代碼更容易被維護(hù)和理解。
最重要的是，設(shè)計模式為軟件開發(fā)人員提供了通用的詞匯表。它們能讓學(xué)習(xí)你代碼的人很快了解代碼的意圖。例如，如果你的項目中使用了裝飾器模式，那么新的開發(fā)可以很快就知道這段代碼的作用，從而他們可以將更多精力放在解決業(yè)務(wù)問題上，而不是試圖理解代碼在做什么。
我們已經(jīng)知道了什么是設(shè)計模式和它的重要性，下面我們深入研究一下 JavaScript 中的 7 種設(shè)計模式。
模塊是一段獨(dú)立的代碼，因此我們可以更新模塊而不會影響代碼的其它部分。模塊還允許我們通過為變量創(chuàng)建單獨(dú)的作用域來避免命名空間污染。當(dāng)它們與其它代碼解耦時，我們還可以在其它項目中重用模塊。
模塊是任何現(xiàn)代 JavaScript 應(yīng)用程序不可或缺的一部分，有助于保持代碼干凈，獨(dú)立和有條理。在 JavaScript 中有許多方法可以創(chuàng)建模塊，其中一種是模塊模式。
與其它編程語言不同，JavaScript 沒有訪問修飾符，也就是說，你不能將變量聲明為私有的或公共的。因此，模塊模式也可用來模擬封裝的概念。
模塊模式使用 IIFE（立即調(diào)用的函數(shù)表達(dá)式），閉包和函數(shù)作用域來模擬封裝的概念。例如：
const myModule = (function() {
const privateVariable = 'Hello World';
function privateMethod() {
console.log(privateVariable);
}
return {
publicMethod: function() {
privateMethod();
}
}
})();
myModule.publicMethod();由于是 IIFE 因此代碼會被立即執(zhí)行，并將返回對象賦值給了 myModule 變量。由于閉包，即使在 IIFE 完成后，返回的對象仍可以訪問 IIFE 內(nèi)部定義的函數(shù)和變量。
因此，IIFE 內(nèi)部定義的變量和函數(shù)對外部是看不見的，從而使其成為 myModule 模塊的私有成員。
執(zhí)行代碼后，myModule 變量看起來像下面所示：
const myModule = {
publicMethod: function() {
privateMethod();
}};因此當(dāng)我們調(diào)用 publicMethod() 時候，它將調(diào)用 privateMethod() 例如：
// Prints 'Hello World'
module.publicMethod();揭示模塊模式是 Christian Heilmann 對模塊模式的略微改進(jìn)。模塊模式的問題在于，我們必須創(chuàng)建新的公共函數(shù)才能調(diào)用私有函數(shù)和變量。
在這種模式下，我們將返回的對象的屬性映射到要公開暴露的私有函數(shù)上。這就是為什么將其稱為揭示模塊模式。例如：
const myRevealingModule = (function() {
let privateVar = 'Peter';
const publicVar = 'Hello World';
function privateFunction() {
console.log('Name: '+ privateVar);
}
function publicSetName(name) {
privateVar = name;
}
function publicGetName() {
privateFunction();
}
/** reveal methods and variables by assigning them to object properties */
return {
setName: publicSetName,
greeting: publicVar,
getName: publicGetName
};
})();
myRevealingModule.setName('Mark');
// prints Name: Mark
myRevealingModule.getName();這種模式讓我們更容易知道哪些函數(shù)和變量是公共的，無形中提高了代碼的可讀性。執(zhí)行代碼后 myRevealingModule 看起來像下所示：
const myRevealingModule = {
setName: publicSetName,
greeting: publicVar,
getName: publicGetName
};當(dāng)我們調(diào)用 myRevealingModule.setName('Mark') 時，實際調(diào)用了內(nèi)部的 publicSetName。當(dāng)調(diào)用 myRevealingModule.getName() 時，實際調(diào)用了內(nèi)部的 publicGetName 例如：
myRevealingModule.setName('Mark');
// prints Name: Mark
myRevealingModule.getName();與模塊模式相比，揭示模塊模式的優(yōu)勢有：
在 ES6 之前，JavaScript 沒有內(nèi)置模塊，因此開發(fā)人員必須依靠第三方庫或模塊模式來實現(xiàn)模塊。但是自從 ES6，JavaScript 內(nèi)置了模塊。
ES6 的模塊是以文件形式存儲的。每個文件只能有一個模塊。默認(rèn)情況下，模塊內(nèi)的所有內(nèi)容都是私有的。通過使用 export 關(guān)鍵字來暴露函數(shù)、變量和類。模塊內(nèi)的代碼始終在嚴(yán)格模式下運(yùn)行。
有兩種方法可以導(dǎo)出函數(shù)和變量聲明：
// utils.js
export const greeting = 'Hello World';
export function sum(num1, num2) {
console.log('Sum:', num1, num2);
return num1 + num2;
}
export function subtract(num1, num2) {
console.log('Subtract:', num1, num2);
return num1 - num2;
}
// This is a private function
function privateLog() {
console.log('Private Function');
}// utils.js
function multiply(num1, num2) {
console.log('Multiply:', num1, num2);
return num1 * num2;
}
function divide(num1, num2) {
console.log('Divide:', num1, num2);
return num1 / num2;
}
// This is a private function
function privateLog() {
console.log('Private Function');
}
export {multiply, divide};與導(dǎo)出模塊相似，有兩種使用 import 關(guān)鍵字導(dǎo)入模塊的方法。例如：
// main.js
// importing multiple items
import { sum, multiply } from './utils.js';
console.log(sum(3, 7));
console.log(multiply(3, 7));// main.js
// importing all of module
import * as utils from './utils.js';
console.log(utils.sum(3, 7));
console.log(utils.multiply(3, 7));// utils.js
function sum(num1, num2) {
console.log('Sum:', num1, num2);
return num1 + num2;
}
function multiply(num1, num2) {
console.log('Multiply:', num1, num2);
return num1 * num2;
}
export {sum as add, multiply};// main.js
import { add, multiply as mult } from './utils.js';
console.log(add(3, 7));
console.log(mult(3, 7));一個單例對象是只能實例化一次的對象。如果不存在，則單例模式將創(chuàng)建類的新實例。如果存在實例，則僅返回對該對象的引用。重復(fù)調(diào)用構(gòu)造函數(shù)將始終獲取同一對象。
JavaScript 是一直內(nèi)置單例的語言。我們只是不稱它們?yōu)閱卫?，我們稱它們?yōu)閷ο笞置媪俊＠纾?/p>
const user = {
name: 'Peter',
age: 25,
job: 'Teacher',
greet: function() {
console.log('Hello!');
}
};因為 JavaScript 中的每個對象都占用一個唯一的內(nèi)存位置，并且當(dāng)我們調(diào)用該 user 對象時，實際上是在返回該對象的引用。
如果我們嘗試將 user 變量復(fù)制到另一個變量并修改該變量。例如：
const user1 = user;
user1.name = 'Mark';我們將看到兩個對象都被修改，因為 JavaScript 中的對象是通過引用而不是通過值傳遞的。因此，內(nèi)存中只有一個對象。例如：
// prints 'Mark'
console.log(user.name);
// prints 'Mark'
console.log(user1.name);
// prints true
console.log(user === user1);可以使用構(gòu)造函數(shù)來實現(xiàn)單例模式。例如：
let instance = null;
function User() {
if(instance) {
return instance;
}
instance = this;
this.name = 'Peter';
this.age = 25;
return instance;
}
const user1 = new User();
const user2 = new User();
// prints true
console.log(user1 === user2);調(diào)用此構(gòu)造函數(shù)時，它將檢查 instance 對象是否存在。如果對象不存在，則將 this 變量分配給 instance 變量。如果該對象存在，則只返回該對象。
單例也可以使用模塊模式來實現(xiàn)。例如：
const singleton = (function() {
let instance;
function init() {
return {
name: 'Peter',
age: 24,
};
}
return {
getInstance: function() {
if(!instance) {
instance = init();
}
return instance;
}
}
})();
const instanceA = singleton.getInstance();
const instanceB = singleton.getInstance();
// prints true
console.log(instanceA === instanceB);在上面的代碼中，我們通過調(diào)用 singleton.getInstance 方法來創(chuàng)建一個新實例。如果實例已經(jīng)存在，則此方法僅返回該實例。如果該實例不存在，則通過調(diào)用該 init() 函數(shù)創(chuàng)建一個新實例。
工廠模式使用工廠方法創(chuàng)建對象而不需要指定具體的類或構(gòu)造函數(shù)的模式。
工廠模式用于創(chuàng)建對象而不需要暴露實例化的邏輯。當(dāng)我們需要根據(jù)特定條件生成不同的對象時，可以使用此模式。例如：
class Car{
constructor(options) {
this.doors = options.doors || 4;
this.state = options.state || 'brand new';
this.color = options.color || 'white';
}
}
class Truck {
constructor(options) {
this.doors = options.doors || 4;
this.state = options.state || 'used';
this.color = options.color || 'black';
}
}
class VehicleFactory {
createVehicle(options) {
if(options.vehicleType === 'car') {
return new Car(options);
} else if(options.vehicleType === 'truck') {
return new Truck(options);
}
}
}這里，創(chuàng)建了一個 Car 和一個 Truck 類（具有一些默認(rèn)值），該類用于創(chuàng)建新的 car 和 truck對象。而且定義了一個VehicleFactory 類，用來根據(jù) options 對象中的 vehicleType 屬性來創(chuàng)建和返回新的對象。
const factory = new VehicleFactory();
const car = factory.createVehicle({
vehicleType: 'car',
doors: 4,
color: 'silver',
state: 'Brand New'
});
const truck= factory.createVehicle({
vehicleType: 'truck',
doors: 2,
color: 'white',
state: 'used'
});
// Prints Car {doors: 4, state: "Brand New", color: "silver"}
console.log(car);
// Prints Truck {doors: 2, state: "used", color: "white"}
console.log(truck);我為類 VehicleFactory 創(chuàng)建了一個新的 factory 對象。然后，我們通過調(diào)用 factory.createVehicle 方法并且傳遞 options 對象，其 vehicleType 屬性可能為 car 或者 truck 來創(chuàng)建新 Car 或 Truck 對象。
裝飾器模式用于擴(kuò)展對象的功能，而無需修改現(xiàn)有的類或構(gòu)造函數(shù)。此模式可用于將特征添加到對象中，而無需修改底層的代碼。
此模式的一個簡單示例為：
function Car(name) {
this.name = name;
// Default values
this.color = 'White';
}
// Creating a new Object to decorate
const tesla= new Car('Tesla Model 3');
// Decorating the object with new functionality
tesla.setColor = function(color) {
this.color = color;
}
tesla.setPrice = function(price) {
this.price = price;
}
tesla.setColor('black');
tesla.setPrice(49000);
// prints black
console.log(tesla.color);這種模式的一個更實際的例子是：
假設(shè)汽車的成本取決于其功能的數(shù)量。如果沒有裝飾器模式，我們將不得不為不同的功能組合創(chuàng)建不同的類，每個類都有一個 cost 方法來計算成本。例如：
class Car() {
}
class CarWithAC() {
}
class CarWithAutoTransmission {
}
class CarWithPowerLocks {
}
class CarWithACandPowerLocks {
}但是，通過裝飾器模式，我們可以創(chuàng)建一個基類 car 并且通過裝飾器函數(shù)給不同的對象添加對應(yīng)的成本邏輯。
class Car {
constructor() {
// Default Cost
this.cost = function() {
return 20000;
}
}
}
// Decorator function
function carWithAC(car) {
car.hasAC = true;
const prevCost = car.cost();
car.cost = function() {
return prevCost + 500;
}
}
// Decorator function
function carWithAutoTransmission(car) {
car.hasAutoTransmission = true;
const prevCost = car.cost();
car.cost = function() {
return prevCost + 2000;
}
}
// Decorator function
function carWithPowerLocks(car) {
car.hasPowerLocks = true;
const prevCost = car.cost();
car.cost = function() {
return prevCost + 500;
}
}首先，我們創(chuàng)建了小轎車的基類 Car。然后針對要添加的特性創(chuàng)建了裝飾器并且此裝飾器以 Car 對象為參數(shù)。然后通過返回更新后的小汽車成本來覆蓋對象的成本函數(shù)，且添加了一個用來標(biāo)識某個特性是否已經(jīng)被添加的屬性。
要添加新的功能，我們只需要像下面一樣就可以：
const car = new Car();
console.log(car.cost());
carWithAC(car);
carWithAutoTransmission(car);
carWithPowerLocks(car);最后，我們可以像這樣計算汽車的成本：
// Calculating total cost of the car
console.log(car.cost());我們已經(jīng)了解了 JavaScript 中使用的各種設(shè)計模式，但是這里沒有涉及到可以用 JavaScript 實現(xiàn)的設(shè)計模式。
盡管了解各種設(shè)計模式很重要，但不要過度使用它們也同樣重要。在使用設(shè)計模式之前，你應(yīng)該仔細(xì)考慮你的問題是否適合該設(shè)計模式。要知道某個模式是否適合你的問題，應(yīng)該好好研究該設(shè)計模式以及它的應(yīng)用。
最后，歡迎優(yōu)秀的你加入 HelloGitHub 的「譯文亦舞」系列，讓你的才華舞動起來！把優(yōu)秀的文章分享給更多的人。要求：
關(guān)注 HelloGitHub 頭條號第一時間收到推送
IETF（互聯(lián)網(wǎng)工程任務(wù)組）發(fā)布了第一個HTML草案，而且還是通過因特網(wǎng)草案的形式發(fā)布，所以當(dāng)時并沒有人鳥它，因此這個HTML1.0并沒有被大眾承認(rèn)，但為了好排名，只好給個名分它。
互聯(lián)網(wǎng)工程任務(wù)組
IETF繼續(xù)發(fā)布了HTML2.0，這也是首次被大眾所認(rèn)可，HTML2.0實際上是各個版本的超集，當(dāng)時各大瀏覽器廠商有自己獨(dú)特的標(biāo)準(zhǔn)，這些標(biāo)準(zhǔn)互不兼容，誰也不服誰，很明顯給開發(fā)帶來極大的困難。于是IETF干脆當(dāng)了一次和事佬，將一些優(yōu)秀的標(biāo)準(zhǔn)集合在一起，希望讓大家一起遵守。雖然大佬級別的任然不鳥它，可卻得到了二、三階梯的瀏覽器廠商們支持并擁護(hù)。
隨著層出不窮的標(biāo)準(zhǔn)推出，標(biāo)準(zhǔn)統(tǒng)一化的工作很艱難。W3C終于出來主持大局,取代IETF，成為HTML的標(biāo)準(zhǔn)組織，發(fā)布了HTML3.2推薦標(biāo)準(zhǔn)。W3C靠著一系列的手段，讓大佬們都得往自己的標(biāo)準(zhǔn)兼容，就連頑固不化的IE，也得要部分兼容。
W3C大佬
在新千年前，W3C推出了HTML 4.01。這一年讓HTML到達(dá)了它的第一個高潮。該推薦版本就是我們熟知的HTML的第四個標(biāo)準(zhǔn)版本,可以說是現(xiàn)代HTML5的基石。已經(jīng)被大部分瀏覽器廠商采納，開發(fā)人員只需要按照該標(biāo)準(zhǔn)進(jìn)行開發(fā)即可。從1993-1999之間短短的6年時間，HTML語言有著很大的發(fā)展，基于諸多人的努力，終于產(chǎn)生了我們現(xiàn)在用的HTML語言。
h4使得html更加完善
在新千年的開始，W3C決定搞事情。當(dāng)時css3剛崛起，因為css一直是由W3C規(guī)劃升級版本，語法規(guī)則比較單一標(biāo)準(zhǔn)；而HTML接手比較晚，導(dǎo)致HTML的語法規(guī)則很松散，能自動包容錯誤，不能稱之為嚴(yán)格的規(guī)范。正好當(dāng)時有一款語言XML，語法規(guī)則很嚴(yán)謹(jǐn)，并且可以實現(xiàn)同樣的功能用于網(wǎng)頁展示，所以W3C希望XML能夠替代HTML，但是W3C擔(dān)心嚴(yán)謹(jǐn)?shù)恼Z法規(guī)則會讓瀏覽器廠商和程序編寫人員一時間接受不了，所以就發(fā)布了一個過渡版本XHTML1.0，然后再向XML轉(zhuǎn)變。
XML寫法極其嚴(yán)格
W3C試圖用嚴(yán)格的標(biāo)準(zhǔn)來使互聯(lián)網(wǎng)發(fā)展更加規(guī)范。出發(fā)點(diǎn)雖好，但效果不佳，因為改用XHTML標(biāo)準(zhǔn)將導(dǎo)致互聯(lián)網(wǎng)99%的HTML網(wǎng)頁需要重寫。所以O(shè)pera、Mozilla基金會、蘋果這些瀏覽器廠商則組建了民間組織WHATWG。WHATWG希望標(biāo)準(zhǔn)應(yīng)當(dāng)具備向后兼容性，能夠跟隨市場及技術(shù)的發(fā)展而動態(tài)調(diào)整，所有的改動改善都是HTML5,寬松的寫法；而不希望是W3C制定一個死的標(biāo)準(zhǔn)，頒布之后再不修改，添加只能發(fā)布新版本 5.1,5.2等，嚴(yán)格的寫法增加開發(fā)人員的負(fù)擔(dān)；HTML由此分裂成兩個陣營的版本。
兩大陣營
在W3C還在爭論是XHTML2還是HTML5的時候，互聯(lián)網(wǎng)格局已經(jīng)發(fā)生了變化。人們不再滿足看新聞和發(fā)郵件，更多的時候看流視頻和網(wǎng)頁游戲。此時此刻HTML正處于內(nèi)戰(zhàn)當(dāng)中，這塊新需求功能就被Adobe的Flash搶去了。
Adobe通過Flash不僅攫取了大量的財富，而且也狠狠打了W3C的一巴掌。于此同WHATWG在HTML上取得突破性進(jìn)展。W3C為了盡快奪回Adobe搶占的市場，也為了自身的話語權(quán)，轉(zhuǎn)而與WHATWG合作，一邊推行以WHATWG的成果作為基礎(chǔ)的HTML5，另一邊則推行自家的XHTML2.0。
W3C同時推行兩套標(biāo)準(zhǔn)
第一個HTML5草案誕生。同年，IE、Chrome、FireFox、Safari幾大瀏覽器巨頭開始相繼支持HTML5。
官方html5的logo
W3C宣布終止XHTML2的項目，解散了XHTML團(tuán)隊。HTML 5既支持松散語法，也支持XHTML1般的嚴(yán)格語法。
W3C發(fā)布了歷時8年定稿的html5推薦標(biāo)準(zhǔn) ，也就是html第五個標(biāo)準(zhǔn)版本。此后也發(fā)布了5.1、5.2版本。
W3C發(fā)布了html5.1、html5.2
歷經(jīng)15年，html從統(tǒng)一到分裂，再到對峙，最后到統(tǒng)一，才再一次回到正軌。有人稱這15年來，技術(shù)標(biāo)準(zhǔn)停滯不前，甚至還出現(xiàn)了倒退的嫌疑，等同于歐洲的黑暗中世紀(jì)；
取消原先的寬松寫法
而也有人稱這15年，是技術(shù)發(fā)展的黃金時期，新標(biāo)準(zhǔn)挑戰(zhàn)舊權(quán)威的地位，迫使舊標(biāo)準(zhǔn)要么融合，要么被淘汰。而新標(biāo)準(zhǔn)挑戰(zhàn)成功后，帶來的連鎖反應(yīng)，則讓更多的新標(biāo)準(zhǔn)來挑戰(zhàn)舊權(quán)威，等同于歐洲的文藝復(fù)興時期；
被廢除的H4的元素
HTML5迅速被引起火爆，一方面他成功抓住了移動端的熱潮，游戲、購物等都離不開手機(jī)；另一方面，HTML5并不是單純的修改語法，而是提供了全新的框架和平臺，包括提供免插件的視頻、圖像動畫、本體存儲、跨平臺以及更多酷炫而且重要的功能，并使這些應(yīng)用標(biāo)準(zhǔn)化。
在2019年的今天，html的關(guān)注點(diǎn)早已不是兼容性，在現(xiàn)代瀏覽器下，追求更多的是高性能和高體驗，如跨平臺和vr等。兼容性問題大多數(shù)存在于使用率極低的舊時代的瀏覽器里。
VR只是其中的一個方向
W3C開發(fā)完html4以后，開發(fā)下一代html的時候，把親兒子拋棄了，扶持干兒子xhtml。蘋果公司、Mozilla基金會等不忍心，于是另起爐灶創(chuàng)立了民間組織WHATWG，繼續(xù)撫養(yǎng)html。后來W3C的干兒子不爭氣，html則在WHATWG撫養(yǎng)下越發(fā)強(qiáng)大，W3C見狀便和WHATWG合作（威逼），把培養(yǎng)好的親兒子html接回來，當(dāng)做下一代的html標(biāo)準(zhǔn)，因為親爹（W3C）和干爹(WHATWG)對于html發(fā)展道路有不同的看法，這也導(dǎo)致了現(xiàn)存了兩套html的標(biāo)準(zhǔn)，這也是導(dǎo)致兼容性問題出現(xiàn)的根本原因。
現(xiàn)存的兩套標(biāo)準(zhǔn)
縱觀目前為止HTML標(biāo)準(zhǔn)的發(fā)展歷程，可以說就是商業(yè)利益不斷博弈的過程。它的誕生，既是為了滿足人們的需求，也是為了達(dá)到洗牌利益重新分配的目的。它的強(qiáng)大，既是為了造福全球，也是為了擊敗競爭對手。就結(jié)果而言，巨頭們出于各自的目的造出了強(qiáng)大的HTML5。它的崛起，意味著變革將至。誰能在這場變革中更好的利用它，誰便可以占得先機(jī)。
更多精彩內(nèi)容可以移步到視頻區(qū)，視頻效果更佳哦ヾ(???ゞ)
更多教學(xué)內(nèi)容請持續(xù)關(guān)注我，或搜索關(guān)注
微信公眾號：前端旺
示：點(diǎn)擊上方"藍(lán)色字體"↑ 可以訂閱噢！
摘要 51RGB官方微信
網(wǎng)頁制作中規(guī)范使用DIV+CSS命名規(guī)則，可以改善優(yōu)化功效特別是團(tuán)隊合作時候可以提供合作制作效率，具體DIV CSS命名規(guī)則CSS命名大全內(nèi)容篇。
常用DIV+CSS命名大全集合，即CSS命名規(guī)則
我們開發(fā)CSS+DIV網(wǎng)頁（Xhtml）時候,比較困惑和糾結(jié)的事就是CSS命名，特別是新手不知道什么地方該如何命名，怎樣命名才是好的方法。
1、所有的命名最好都小寫
2、屬性的值一定要用雙引號("")括起來，且一定要有值如 class="helloweb" , id="helloweb"
3、每個標(biāo)簽都要有開始和結(jié)束，且要有正確的層次，排版有規(guī)律工整
4、空元素要有結(jié)束的tag或于開始的tag后加上"/"
5、表現(xiàn)與結(jié)構(gòu)完全分離，代碼中不涉及任何的表現(xiàn)元素，如：style、font、bgColor、border 等
6、<h1>到<h6>的定義，應(yīng)遵循從大到小的原則，體現(xiàn)文檔的結(jié)構(gòu)，并有利于搜索引擎的查詢。
7、給每一個表格和表單加上一個唯一的、結(jié)構(gòu)標(biāo)記 id
8、給圖片加上alt 標(biāo)簽，優(yōu)點(diǎn)是在于在圖片發(fā)生錯誤時，alt 可以體現(xiàn)給用戶
9、盡量使用英文命名原則
10、盡量不縮寫，除非一看就明白的單詞
下面給大家介紹常見CSS命名和DIV CSS命名方法。
外套 wrap ------------------用于最外層
頭部 header ---------------用于頭部
主要內(nèi)容 main ------------用于主體內(nèi)容（中部）
左側(cè) main-left -------------左側(cè)布局
右側(cè) main-right -----------右側(cè)布局
導(dǎo)航條 nav -----------------網(wǎng)頁菜單導(dǎo)航條
內(nèi)容 content --------------用于網(wǎng)頁中部主體
底部 footer -----------------用于底部
以下為CSS樣式命名與CSS文件命名參考表，DIV CSS命名集合：
| CSS樣式命名 | 說明 |
|---|---|
| 網(wǎng)頁公共命名 | |
| #wrapper | 頁面外圍控制整體布局寬度 |
| #container或#content | 容器,用于最外層 |
| #layout | 布局 |
| #head, #header | 頁頭部分 |
| #foot, #footer | 頁腳部分 |
| #nav | 主導(dǎo)航 |
| #subnav | 二級導(dǎo)航 |
| #menu | 菜單 |
| #submenu | 子菜單 |
| #sideBar | 側(cè)欄 |
| #sidebar_a, #sidebar_b | 左邊欄或右邊欄 |
| #main | 頁面主體 |
| #tag | 標(biāo)簽 |
| #msg #message | 提示信息 |
| #tips | 小技巧 |
| #vote | 投票 |
| #friendlink | 友情連接 |
| #title | 標(biāo)題 |
| #summary | 摘要 |
| #loginbar | 登錄條 |
| #searchInput | 搜索輸入框 |
| #hot | 熱門熱點(diǎn) |
| #search | 搜索 |
| #search_output | 搜索輸出和搜索結(jié)果相似 |
| #searchBar | 搜索條 |
| #search_results | 搜索結(jié)果 |
| #copyright | 版權(quán)信息 |
| #branding | 商標(biāo) |
| #logo | 網(wǎng)站LOGO標(biāo)志 |
| #siteinfo | 網(wǎng)站信息 |
| #siteinfoLegal | 法律聲明 |
| #siteinfoCredits | 信譽(yù) |
| #joinus | 加入我們 |
| #partner | 合作伙伴 |
| #service | 服務(wù) |
| #regsiter | 注冊 |
| arr/arrow | 箭頭 |
| #guild | 指南 |
| #sitemap | 網(wǎng)站地圖 |
| #list | 列表 |
| #homepage | 首頁 |
| #subpage | 二級頁面子頁面 |
| #tool, #toolbar | 工具條 |
| #drop | 下拉 |
| #dorpmenu | 下拉菜單 |
| #status | 狀態(tài) |
| #scroll | 滾動 |
| .tab | 標(biāo)簽頁 |
| .left .right .center | 居左、中、右 |
| .news | 新聞 |
| .download | 下載 |
| .banner | 廣告條 |
| 電子貿(mào)易相關(guān) | |
| .products | 產(chǎn)品 |
| .products_prices | 產(chǎn)品價格 |
| .products_description | 產(chǎn)品描述 |
| .products_review | 產(chǎn)品評論 |
| .editor_review | 編輯評論 |
| .news_release | 最新產(chǎn)品 |
| .publisher | 生產(chǎn)商 |
| .screenshot | 縮略圖 |
| .faqs | 常見問題 |
| .keyword | 關(guān)鍵詞 |
| .blog | 博客 |
| .forum | 論壇 |
| CSS文件命名 | 說明 |
|---|---|
| master.css,style.css | 主要的 |
| module.css | 模塊 |
| base.css | 基本共用 |
| layout.css | 布局，版面 |
| themes.css | 主題 |
| columns.css | 專欄 |
| font.css | 文字、字體 |
| forms.css | 表單 |
| mend.css | 補(bǔ)丁 |
| print.css | 打印 |
CSS命名其它說明：
DIV+CSS命名小結(jié)：無論是使用“.”（小寫句號）選擇符號開頭命名，還是使用“#”(井號)選擇符號開頭命名都無所謂，但我們最好遵循，主要的、重要的、特殊的、最外層的盒子用“#”(井號)選擇符號開頭命名，其它都用“.”（小寫句號）選擇符號開頭命名，同時考慮命名的CSS選擇器在HTML中重復(fù)使用調(diào)用。
通常我們最常用主要命名有：wrap（外套、最外層）、header（頁眉、頭部）、nav(導(dǎo)航條)、menu(菜單)、title(欄目標(biāo)題、一般配合h1\h2\h3\h4標(biāo)簽使用)、content (內(nèi)容區(qū))、footer(頁腳、底部)、logo（標(biāo)志、可以配合h1標(biāo)簽使用）、banner（廣告條，一般在頂部）、copyRight（版權(quán)）。其它可根據(jù)自己需要選擇性使用。
建議：主要的、重要的、最外層的盒子用“#”(井號)選擇符號開頭命名，其它都用“.”（小寫句號）選擇符號開頭命名。
2.CSS樣式文件命名如下：
主要的 master.css
布局，版面 layout.css
專欄 columns.css
文字 font.css
打印樣式 print.css
主題 themes.css
如果遇到不常用的，可以借助翻譯工具進(jìn)行翻譯取其英文命名。
以上為DIV+CSS的命名規(guī)則總結(jié)，相信通過規(guī)范的CSS 命名會給你以后做網(wǎng)站網(wǎng)頁的維護(hù)帶來方便。
想認(rèn)識志同道合的朋友一起學(xué)習(xí)web
加入我們的學(xué)習(xí)QQ群 190166743
豐富的學(xué)習(xí)資源，周一到周四免費(fèi)直播公開課
長按圖片，識別二維碼即可入群
你可能感興趣的精彩內(nèi)容
微信：UI設(shè)計自學(xué)平臺加關(guān)注
長按關(guān)注：《UI設(shè)計自學(xué)平臺》
↓↓↓
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
