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