整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
ES6（ECMAScript 2015）及之后的版本引入了許多讓JavaScript編程更加高效、簡(jiǎn)潔的新特性。以下是其中一些關(guān)鍵特性及示例：
const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(n => n * n); // 使用箭頭函數(shù)const name = "World";
console.log(`Hello, ${name}!`); // 使用模板字符串Promise是解決JavaScript異步編程的一個(gè)重要概念。它代表了一個(gè)尚未完成，但未來會(huì)完成的操作。Promise有三種狀態(tài)：pending（等待中）、fulfilled（已成功）和rejected（已失敗）。
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Data fetched"), 2000);
});
};
fetchData().then(data => console.log(data)); // 輸出：Data fetchedasync和await是基于Promise的語法糖，使異步代碼看起來和同步代碼類似，從而簡(jiǎn)化了異步操作的書寫。
const fetchData = async () => {
const data = await new Promise((resolve, reject) => {
setTimeout(() => resolve("Data fetched with async/await"), 2000);
});
console.log(data);
};
fetchData(); // 輸出：Data fetched with async/await現(xiàn)代JavaScript框架，如Vue.js，大量使用了ES6+的新特性來提升開發(fā)效率和程序的可讀性。例如，Vue 3 利用了Proxy來實(shí)現(xiàn)響應(yīng)式系統(tǒng)，同時(shí)也在其組件系統(tǒng)中廣泛使用了ES6+的特性，如模塊導(dǎo)入、箭頭函數(shù)等。
函數(shù)式編程是一種編程范式，它將計(jì)算視為數(shù)學(xué)函數(shù)的評(píng)估，并避免改變狀態(tài)和可變數(shù)據(jù)。JavaScript作為一種多范式語言，支持函數(shù)式編程的核心概念，如純函數(shù)、高階函數(shù)等。
const pureAdd = (a, b) => a + b; // 純函數(shù)const withLogging = fn => (...args) => {
console.log(`Calling function with arguments: ${args}`);
const result = fn(...args);
console.log(`Function returned: ${result}`);
return result;
};
const add = (a, b) => a + b;
const addWithLogging = withLogging(add);
addWithLogging(2, 3); // 日志輸出調(diào)用細(xì)節(jié)和結(jié)果在現(xiàn)代Web開發(fā)中，構(gòu)建高效的動(dòng)態(tài)用戶界面(UI)是至關(guān)重要的。JavaScript通過操作DOM（文檔對(duì)象模型）使得開發(fā)者能夠創(chuàng)建富交互的Web應(yīng)用。通過監(jiān)聽用戶的行為（如點(diǎn)擊、滾動(dòng)等事件），JavaScript可以動(dòng)態(tài)地修改HTML和CSS，提供動(dòng)態(tài)內(nèi)容的加載、動(dòng)畫效果以及即時(shí)的用戶反饋。
document.getElementById('addButton').addEventListener('click', function() {
const listItem = document.createElement('li');
listItem.textContent = '新的列表項(xiàng)';
document.getElementById('myList').appendChild(listItem);
});隨著單頁應(yīng)用（SPA）的流行，狀態(tài)管理變得越來越復(fù)雜。狀態(tài)管理是指在用戶與應(yīng)用交互過程中，對(duì)狀態(tài)的有效管理和更新。常見的狀態(tài)管理方案包括Redux、Vuex（Vue的狀態(tài)管理方案）、以及React的Context API。
Redux示例：
Redux通過一個(gè)全局的store來存儲(chǔ)狀態(tài)，組件通過dispatch發(fā)送action來更新狀態(tài)，通過subscribe監(jiān)聽狀態(tài)變化。
// 創(chuàng)建Reducer
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
// 創(chuàng)建store
let store = Redux.createStore(counter);
store.subscribe(() => console.log(store.getState()));
// 發(fā)送action
store.dispatch({ type: 'INCREMENT' });模塊化是指將大型的JavaScript應(yīng)用分解成小的、可維護(hù)的、可重用的代碼塊。ES6引入了import和export語法，使得模塊化開發(fā)成為可能。
示例：
// math.js
export function add(x, y) {
return x + y;
}
// app.js
import { add } from './math.js';
console.log(add(2, 3));Web性能優(yōu)化是提高用戶體驗(yàn)的關(guān)鍵。它包括減少頁面加載時(shí)間、優(yōu)化渲染路徑、減少JavaScript執(zhí)行時(shí)間等。一些常見的性能優(yōu)化技巧包括使用壓縮和合并資源文件、懶加載圖片和腳本、利用瀏覽器緩存等。
懶加載圖片示例：
使用Intersection Observer API實(shí)現(xiàn)圖片的懶加載。
document.addEventListener("DOMContentLoaded", function() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img);
});
});JavaScript的工程化是指使用工具和流程來提高開發(fā)效率和代碼質(zhì)量。自動(dòng)化測(cè)試則確保代碼更改不會(huì)破壞現(xiàn)有功能。
構(gòu)建工具示例：Webpack
Webpack是一個(gè)模塊打包器，它可以處理依賴并將模塊打包成靜態(tài)資源。
自動(dòng)化測(cè)試示例：Jest
Jest是一個(gè)JavaScript測(cè)試框架，支持單元測(cè)試和集成測(cè)試。
// sum.js
function sum(a, b) {
return a + b;
}
module.exports = sum;
// sum.test.js
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});在Web開發(fā)中，安全是一個(gè)重要考慮因素。常見的Web安全問題包括跨站腳本攻擊（XSS）、跨站請(qǐng)求偽造（CSRF）、SQL注入等。
// 使用DOMPurify清理HTML
const clean = DOMPurify.sanitize(dirtyHTML);
document.getElementById('someDiv').innerHTML = clean;響應(yīng)式編程是一種異步編程范式，關(guān)注于數(shù)據(jù)流和變化傳播。RxJS是一個(gè)庫，用于使用可觀察對(duì)象來編寫響應(yīng)式編程代碼，使得處理事件、異步請(qǐng)求和回調(diào)更加簡(jiǎn)潔。
示例：從輸入框中捕獲輸入事件
const { fromEvent } = rxjs;
const input = document.querySelector('input');
const observable = fromEvent(input, 'input');
observable.subscribe(event => console.log(event.target.value));在JavaScript項(xiàng)目中的選擇：如果項(xiàng)目需要高度靈活的數(shù)據(jù)查詢能力，GraphQL可能是更好的選擇。如果項(xiàng)目有簡(jiǎn)單的數(shù)據(jù)需求，或者已經(jīng)存在RESTful API的基礎(chǔ)設(shè)施，那么繼續(xù)使用REST可能更合適。
TypeScript是JavaScript的一個(gè)超集，添加了類型系統(tǒng)和對(duì)ES6+的支持。TypeScript提供的類型安全可以幫助開發(fā)者在編譯時(shí)期捕獲錯(cuò)誤，提高代碼的質(zhì)量和可維護(hù)性。
示例：一個(gè)簡(jiǎn)單的TypeScript函數(shù)
function greet(person: string, date: Date): string {
return `Hello ${person}, today is ${date.toDateString()}!`;
}
console.log(greet("Maddy", new Date()));漸進(jìn)式Web應(yīng)用（PWA）是一種可以提供類似于原生應(yīng)用體驗(yàn)的Web應(yīng)用。通過Service Workers，PWA可以在離線時(shí)仍然提供核心功能。
注冊(cè)一個(gè)Service Worker示例：
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
console.log('Service Worker registered with scope:', registration.scope);
}).catch(function(err) {
console.log('Service Worker registration failed:', err);
});
}在sw.js中，你可以緩存關(guān)鍵資源，攔截網(wǎng)絡(luò)請(qǐng)求，并提供離線支持。
WebAssembly (Wasm) 是一種新的編碼方式，讓在網(wǎng)頁中運(yùn)行的代碼可以接近原生執(zhí)行速度，通過提供一個(gè)新的、高效的格式來在網(wǎng)頁上運(yùn)行代碼。它對(duì)前端開發(fā)的主要影響是性能的顯著提升，特別是對(duì)于需要大量計(jì)算的應(yīng)用，如游戲、視頻編輯、圖像處理等。
使用場(chǎng)景：
示例：將C/C++代碼編譯為WebAssembly并在網(wǎng)頁中運(yùn)行。
<script>
fetch('example.wasm').then(response =>
response.arrayBuffer()
).then(bytes =>
WebAssembly.instantiate(bytes)
).then(results => {
results.instance.exports.exportedFunc();
});
</script>D3.js 是一個(gè)JavaScript庫，用于使用Web標(biāo)準(zhǔn)制作動(dòng)態(tài)、交互式的數(shù)據(jù)可視化。它強(qiáng)大之處在于能夠綁定任意數(shù)據(jù)到DOM元素，并且對(duì)數(shù)據(jù)進(jìn)行動(dòng)態(tài)變化的表示，如通過SVG、Canvas來繪圖。
示例：使用D3.js創(chuàng)建一個(gè)簡(jiǎn)單的柱狀圖。
<script src="https://d3js.org/d3.v6.js"></script>
<script>
const data = [4, 8, 15, 16, 23, 42];
const width = 420,
barHeight = 20;
const x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, width]);
const chart = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
const bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", (d, i) => "translate(0," + i * barHeight + ")");
bar.append("rect")
.attr("width", x)
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", d => x(d) - 3)
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(d => d);
</script>在前端安全中，防范XSS和CSRF攻擊是兩個(gè)主要的考慮點(diǎn)。
服務(wù)端渲染（SSR）是指JavaScript和應(yīng)用程序界面在服務(wù)器上渲染成HTML，然后發(fā)送到客戶端的過程。這對(duì)SEO非常有利，因?yàn)樗阉饕媾老x可以直接分析渲染好的頁面內(nèi)容。
優(yōu)勢(shì)：
前端監(jiān)控是指對(duì)Web應(yīng)用的性能、錯(cuò)誤、用戶行為等進(jìn)行實(shí)時(shí)監(jiān)控。這有助于及時(shí)發(fā)現(xiàn)問題，優(yōu)化用戶體驗(yàn)和應(yīng)用性能。
性能指標(biāo)：
工具：Google的Lighthouse、WebPageTest、Chrome DevTools等都是優(yōu)秀的性能監(jiān)控和分析工具。
CSS-in-JS 是一種在JavaScript中編寫CSS的技術(shù)，它允許開發(fā)者在JS文件中直接包含CSS樣式，從而使樣式和組件邏輯緊密耦合。這種做法有助于避免樣式?jīng)_突，使得組件更加可重用。
框架選擇：流行的CSS-in-JS庫包括Styled-components、Emotion 和 JSS。這些庫提供了將CSS寫入JavaScript的能力，同時(shí)保持了CSS的動(dòng)態(tài)性和復(fù)用性。
代碼示例（使用Styled-components）：
import styled from 'styled-components';
const Button = styled.button`
background: palevioletred;
color: white;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
// 在組件中使用
render() {
return <Button>點(diǎn)擊我</Button>;
}Web組件 是一套不同的技術(shù)，允許開發(fā)者創(chuàng)建可重用的定制元素 — 并且它們的功能性在Web應(yīng)用中是封裝的。Web組件的核心技術(shù)包括Custom Elements、Shadow DOM和HTML templates。
微前端 是一種設(shè)計(jì)思想，允許將前端應(yīng)用分解為更小、獨(dú)立交付的片段。每個(gè)團(tuán)隊(duì)可以獨(dú)立開發(fā)和部署自己的功能區(qū)塊，最終集成到一個(gè)更大的應(yīng)用中。微前端架構(gòu)的目的是促進(jìn)團(tuán)隊(duì)之間的技術(shù)棧獨(dú)立性，加速開發(fā)流程。
使用JavaScript進(jìn)行跨平臺(tái)開發(fā)的策略包括React Native和Electron。
這些工具和框架讓開發(fā)者能夠重用代碼并保持應(yīng)用在不同平臺(tái)間的一致性。
設(shè)計(jì)模式是解決常見問題的可重用解決方案。
let instance = null;
class Singleton {
constructor() {
if (!instance) {
instance = this;
}
return instance;
}
}class Subject {
constructor() {
this.observers = [];
}
subscribe(observer) {
this.observers.push(observer);
}
notify(data) {
this.observers.forEach(observer => observer.update(data));
}
}JavaScript的垃圾回收機(jī)制是自動(dòng)的，但是開發(fā)者仍需注意避免內(nèi)存泄漏。內(nèi)存泄漏通常是由不再需要的對(duì)象引用導(dǎo)致的，使得垃圾回收器無法釋放它們。
WebGL是一個(gè)JavaScript API，用于在不需要插件的情況下，在任何兼容的Web瀏覽器內(nèi)渲染高性能的交互式2D和3D圖形。它通過引入與OpenGL ES 2.0緊密一致的API，使得可以在HTML <canvas> 元素中使用，從而充分利用用戶設(shè)備提供的硬件圖形加速?。為了開始使用WebGL，你需要?jiǎng)?chuàng)建一個(gè)canvas元素并在你的JavaScript代碼中初始化WebGL上下文??。對(duì)于想要深入了解和實(shí)踐WebGL，探索3D游戲開發(fā)，MDN提供了關(guān)于如何構(gòu)建基本示例，包括使用A-Frame、Babylon.js、PlayCanvas和Three.js等流行框架的步驟??。
Node.js的出現(xiàn)使得JavaScript能夠被用于服務(wù)器端編程，從而開啟了全棧開發(fā)的大門，允許開發(fā)者使用同一種語言來編寫前端和后端代碼。這意味著開發(fā)者可以構(gòu)建和維護(hù)具有復(fù)雜功能的Web應(yīng)用，同時(shí)保持技術(shù)棧的一致性。Node.js的非阻塞I/O模型特別適合處理大量并發(fā)連接，使其成為構(gòu)建高性能Web應(yīng)用的理想選擇。
隨著前端應(yīng)用的復(fù)雜性增加，采用恰當(dāng)?shù)募軜?gòu)模式變得至關(guān)重要。微服務(wù)架構(gòu)允許將應(yīng)用分解為小的、松耦合的服務(wù)，每個(gè)服務(wù)執(zhí)行特定的業(yè)務(wù)功能，并通過輕量級(jí)通信機(jī)制進(jìn)行交互。這種方式提高了應(yīng)用的可維護(hù)性和可擴(kuò)展性。另一種模式是后端為前端（BFF），它介于客戶端和微服務(wù)之間，為客戶端提供精確的API，進(jìn)一步優(yōu)化了數(shù)據(jù)交換和應(yīng)用性能。
為了觸及全球用戶，前端應(yīng)用需要支持多語言。國際化（i18n）是設(shè)計(jì)和開發(fā)應(yīng)用以便它可以輕松地適配不同語言和地區(qū)，而不需要進(jìn)行重大改動(dòng)的過程。本地化（l10n）是將應(yīng)用適配到特定區(qū)域或語言的過程，包括翻譯文本和適配格式（如日期和貨幣）。通過使用國際化庫如i18next，開發(fā)者可以更容易地實(shí)現(xiàn)多語言支持。
Web3和區(qū)塊鏈技術(shù)正在改變前端開發(fā)的景觀，提供了創(chuàng)建去中心化應(yīng)用（DApps）的新方法。這些應(yīng)用運(yùn)行在區(qū)塊鏈上，提供高度的透明度、安全性和不可篡改性。Web3技術(shù)使得前端開發(fā)者能夠直接與區(qū)塊鏈交互，為用戶提供全新的在線交互體驗(yàn)。隨著這些技術(shù)的成熟和發(fā)展，預(yù)計(jì)將會(huì)出現(xiàn)更多創(chuàng)新的Web應(yīng)用和服務(wù)。
如果喜歡，可以點(diǎn)贊收藏，關(guān)注喲~
React 是 Facebook 在 2011 年開發(fā)的前端 JavaScript 庫。
它遵循基于組件的方法，有助于構(gòu)建可重用的UI組件。
它用于開發(fā)復(fù)雜和交互式的 Web 和移動(dòng) UI。
盡管它僅在 2015 年開源，但有一個(gè)很大的支持社區(qū)。
它使用虛擬DOM而不是真正的DOM。
它可以用服務(wù)器端渲染。
它遵循單向數(shù)據(jù)流或數(shù)據(jù)綁定。
它提高了應(yīng)用的性能
可以方便地在客戶端和服務(wù)器端使用
由于 JSX，代碼的可讀性很好
React 很容易與 Meteor，Angular 等其他框架集成
使用React，編寫UI測(cè)試用例變得非常容易
React 只是一個(gè)庫，而不是一個(gè)完整的框架
它的庫非常龐大，需要時(shí)間來理解
新手程序員可能很難理解
編碼變得復(fù)雜，因?yàn)樗褂脙?nèi)聯(lián)模板和 JSX
JSX 是J avaScript XML 的簡(jiǎn)寫。是 React 使用的一種文件，它利用 JavaScript 的表現(xiàn)力和類似 HTML 的模板語法。這使得 HTML 文件非常容易理解。此文件能使應(yīng)用非常可靠，并能夠提高其性能。下面是JSX的一個(gè)例子：
render(){
return(
<div>
<h1> Hello World from Edureka!!</h1>
</div>
);
}Virtual DOM 是一個(gè)輕量級(jí)的 JavaScript 對(duì)象，它最初只是 real DOM 的副本。它是一個(gè)節(jié)點(diǎn)樹，它將元素、它們的屬性和內(nèi)容作為對(duì)象及其屬性。 React 的渲染函數(shù)從 React 組件中創(chuàng)建一個(gè)節(jié)點(diǎn)樹。然后它響應(yīng)數(shù)據(jù)模型中的變化來更新該樹，該變化是由用戶或系統(tǒng)完成的各種動(dòng)作引起的。
Virtual DOM 工作過程有三個(gè)簡(jiǎn)單的步驟。
每當(dāng)?shù)讓訑?shù)據(jù)發(fā)生改變時(shí)，整個(gè) UI 都將在 Virtual DOM 描述中重新渲染。
然后計(jì)算之前 DOM 表示與新表示的之間的差異。
完成計(jì)算后，將只用實(shí)際更改的內(nèi)容更新 real DOM。
瀏覽器只能處理 JavaScript 對(duì)象，而不能讀取常規(guī) JavaScript 對(duì)象中的 JSX。所以為了使瀏覽器能夠讀取 JSX，首先，需要用像 Babel 這樣的 JSX 轉(zhuǎn)換器將 JSX 文件轉(zhuǎn)換為 JavaScript對(duì)象，然后再將其傳給瀏覽器。
組件是 React 應(yīng)用 UI 的構(gòu)建塊。這些組件將整個(gè) UI 分成小的獨(dú)立并可重用的部分。每個(gè)組件彼此獨(dú)立，而不會(huì)影響 UI 的其余部分。
每個(gè)React組件強(qiáng)制要求必須有一個(gè) render()。它返回一個(gè) React 元素，是原生 DOM 組件的表示。如果需要渲染多個(gè) HTML 元素，則必須將它們組合在一個(gè)封閉標(biāo)記內(nèi)，例如 form、group、div 等。此函數(shù)必須保持純凈，即必須每次調(diào)用時(shí)都返回相同的結(jié)果。
Props 是 React 中屬性的簡(jiǎn)寫。它們是只讀組件，必須保持純，即不可變。它們總是在整個(gè)應(yīng)用中從父組件傳遞到子組件。子組件永遠(yuǎn)不能將 prop 送回父組件。這有助于維護(hù)單向數(shù)據(jù)流，通常用于呈現(xiàn)動(dòng)態(tài)生成的數(shù)據(jù)。
狀態(tài)是 React 組件的核心，是數(shù)據(jù)的來源，必須盡可能簡(jiǎn)單。基本上狀態(tài)是確定組件呈現(xiàn)和行為的對(duì)象。與props 不同，它們是可變的，并創(chuàng)建動(dòng)態(tài)和交互式組件。可以通過 this.state()訪問它們。
React 組件的生命周期有三個(gè)不同的階段：
初始渲染階段：這是組件即將開始其生命之旅并進(jìn)入 DOM 的階段。
更新階段：一旦組件被添加到 DOM，它只有在 prop 或狀態(tài)發(fā)生變化時(shí)才可能更新和重新渲染。這些只發(fā)生在這個(gè)階段。
卸載階段：這是組件生命周期的最后階段，組件被銷毀并從 DOM 中刪除。
componentWillMount() – 在渲染之前執(zhí)行，在客戶端和服務(wù)器端都會(huì)執(zhí)行。
componentDidMount() – 僅在第一次渲染后在客戶端執(zhí)行。
componentWillReceiveProps() – 當(dāng)從父類接收到 props 并且在調(diào)用另一個(gè)渲染器之前調(diào)用。
shouldComponentUpdate() – 根據(jù)特定條件返回 true 或 false。如果你希望更新組件，請(qǐng)返回true 否則返回 false。默認(rèn)情況下，它返回 false。
componentWillUpdate() – 在 DOM 中進(jìn)行渲染之前調(diào)用。
componentDidUpdate() – 在渲染發(fā)生后立即調(diào)用。
componentWillUnmount() – 從 DOM 卸載組件后調(diào)用。用于清理內(nèi)存空間。
在 React 中，事件是對(duì)鼠標(biāo)懸停、鼠標(biāo)單擊、按鍵等特定操作的觸發(fā)反應(yīng)。處理這些事件類似于處理 DOM 元素中的事件。但是有一些語法差異，如：
用駝峰命名法對(duì)事件命名而不是僅使用小寫字母。
事件作為函數(shù)而不是字符串傳遞。
事件參數(shù)重包含一組特定于事件的屬性。每個(gè)事件類型都包含自己的屬性和行為，只能通過其事件處理程序訪問。
合成事件是圍繞瀏覽器原生事件充當(dāng)跨瀏覽器包裝器的對(duì)象。它們將不同瀏覽器的行為合并為一個(gè) API。這樣做是為了確保事件在不同瀏覽器中顯示一致的屬性。
需要管理焦點(diǎn)、選擇文本或媒體播放時(shí)
觸發(fā)式動(dòng)畫
與第三方 DOM 庫集成
高階組件是重用組件邏輯的高級(jí)方法，是一種源于 React 的組件模式。 HOC 是自定義組件，在它之內(nèi)包含另一個(gè)組件。它們可以接受子組件提供的任何動(dòng)態(tài)，但不會(huì)修改或復(fù)制其輸入組件中的任何行為。你可以認(rèn)為 HOC 是“純（Pure）”組件。
代碼重用，邏輯和引導(dǎo)抽象
渲染劫持
狀態(tài)抽象和控制
Props 控制
純（Pure） 組件是可以編寫的最簡(jiǎn)單、最快的組件。它們可以替換任何只有 render() 的組件。這些組件增強(qiáng)了代碼的簡(jiǎn)單性和應(yīng)用的性能。
key 用于識(shí)別唯一的 Virtual DOM 元素及其驅(qū)動(dòng) UI 的相應(yīng)數(shù)據(jù)。它們通過回收 DOM 中當(dāng)前所有的元素來幫助 React 優(yōu)化渲染。這些 key 必須是唯一的數(shù)字或字符串，React 只是重新排序元素而不是重新渲染它們。這可以提高應(yīng)用程序的性能。
React 路由是一個(gè)構(gòu)建在 React 之上的強(qiáng)大的路由庫，它有助于向應(yīng)用程序添加新的屏幕和流。這使 URL 與網(wǎng)頁上顯示的數(shù)據(jù)保持同步。它負(fù)責(zé)維護(hù)標(biāo)準(zhǔn)化的結(jié)構(gòu)和行為，并用于開發(fā)單頁 Web 應(yīng)用。 React 路由有一個(gè)簡(jiǎn)單的API。
Router 用于定義多個(gè)路由，當(dāng)用戶定義特定的 URL 時(shí)，如果此 URL 與 Router 內(nèi)定義的任何“路由” 的路徑匹配，則用戶將重定向到該特定路由。所以基本上我們需要在自己的應(yīng)用中添加一個(gè) Router 庫，允許創(chuàng)建多個(gè)路由，每個(gè)路由都會(huì)向我們提供一個(gè)獨(dú)特的視圖。
就像 React 基于組件一樣，在 React Router v4 中，API 是 ‘All About Components’。可以將 Router 可視化為單個(gè)根組件（BrowserRouter），其中我們將特定的子路由（route）包起來。
無需手動(dòng)設(shè)置歷史值：在 React Router v4 中，我們要做的就是將路由包裝在BrowserRouter 組件中。
包是分開的：共有三個(gè)包，分別用于 Web、Native 和 Core。這使我們應(yīng)用更加緊湊。基于類似的編碼風(fēng)格很容易進(jìn)行切換。
類組件（ Class components ）
無論是使用函數(shù)或是類來聲明一個(gè)組件，它決不能修改它自己的 props 。
所有 React 組件都必須是純函數(shù)，并禁止修改其自身 props 。
React是單項(xiàng)數(shù)據(jù)流，父組件改變了屬性，那么子組件視圖會(huì)更新。
屬性 props 是外界傳遞過來的，狀態(tài) state 是組件本身的，狀態(tài)可以在組件中任意修改組件的屬性和狀態(tài)改變都會(huì)更新視圖。
函數(shù)組件（functional component）
函數(shù)組件接收一個(gè)單一的 props 對(duì)象并返回了一個(gè)React元素
區(qū)別
函數(shù)組件和類組件當(dāng)然是有區(qū)別的，而且函數(shù)組件的性能比類組件的性能要高，因?yàn)轭惤M件使用的時(shí)候要實(shí)例化，而函數(shù)組件直接執(zhí)行函數(shù)取返回結(jié)果即可。為了提高性能，盡量使用函數(shù)組件。
state 和 props都是普通的JavaScript對(duì)象。盡管它們兩者都具有影響渲染輸出的信息，但它們?cè)诮M件方面的功能不同。即
props 是一個(gè)從外部傳進(jìn)組件的參數(shù)，主要作為就是從父組件向子組件傳遞數(shù)據(jù)，它具有可讀性和不變性，只能通過外部組件主動(dòng)傳入新的 props 來重新渲染子組件，否則子組件的 props以及展現(xiàn)形式不會(huì)改變。
state 的主要作用是用于組件保存、控制以及修改自己的狀態(tài)，它只能在 constructor 中初始化，它算是組件的私有屬性，不可通過外部訪問和修改，只能通過組件內(nèi)部的 this.setState來修改，修改 state 屬性會(huì)導(dǎo)致組件的重新渲染。
在調(diào)用方法之前，子類構(gòu)造函數(shù)無法使用 this 引用 super() 。
在ES6中，在子類的 constructor 中必須先調(diào)用 super 才能引用 this 。
在 constructor 中可以使用 this.props
在HTML當(dāng)中，像 input , textarea , 和 select 這類表單元素會(huì)維持自身狀態(tài)，并根據(jù)用戶輸入進(jìn)行更新。但在React中，可變的狀態(tài)通常保存在組件的狀態(tài)屬性中，并且只能用setState() 方法進(jìn)行更新。
非受控組件
非受控組件，即組件的狀態(tài)不受React控制的組件，例如下邊這個(gè)
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Demo1 extends Component {
render() {
return (
<input />
)
}
}
ReactDOM.render(<Demo1/>, document.getElementById('content'))在這個(gè)最簡(jiǎn)單的輸入框組件里,我們并沒有干涉input中的value展示,即用戶輸入的內(nèi)容都會(huì)展示在上面。如果我們通過props給組件設(shè)置一個(gè)初始默認(rèn)值,defaultValue屬性是React內(nèi)部實(shí)現(xiàn)的一個(gè)屬性,目的類似于input的placeholder屬性。
受控組件
同樣的，受控組件就是組件的狀態(tài)受React控制。上面提到過，既然通過設(shè)置input的value屬性, 無法改變輸入框值,那么我們把它和state結(jié)合在一起,再綁定onChange事件,實(shí)時(shí)更新value值就行了。
class Demo1 extends Component {
constructor(props) {
super(props);
this.state = {
value: props.value
}
}
handleChange(e) {
this.setState({
value: e.target.value
})
}
render() {
return (
<input value={this.state.value} onChange={e =>
this.handleChange(e)}/>
)
}
}hooks 是react 16.8 引入的特性，他允許你在不寫class的情況下操作state 和react的其他特性。
hooks 只是多了一種寫組件的方法，使編寫一個(gè)組件更簡(jiǎn)單更方便，同時(shí)可以自定義hook把公共的邏輯提取出來，讓邏輯在多個(gè)組件之間共享。
Hook 是什么
Hook 是什么？ Hook 是一個(gè)特殊的函數(shù)，它可以讓你“鉤入” React 的特性。例如，useState 是允許你在 React 函數(shù)組件中添加 state 的 Hook。稍后我們將學(xué)習(xí)其他 Hook。
什么時(shí)候我會(huì)用 Hook？ 如果你在編寫函數(shù)組件并意識(shí)到需要向其添加一些 state，以前的做法是必須將其它轉(zhuǎn)化為 class。現(xiàn)在你可以在現(xiàn)有的函數(shù)組件中使用 Hook。
ReactHooks的優(yōu)點(diǎn)
無需復(fù)雜的DOM結(jié)構(gòu)
簡(jiǎn)潔易懂
React的StrictMode是一種幫助程序組件，可以幫助您編寫更好的react組件，您可以使用包裝一些組件， 并且基本上可以：
驗(yàn)證內(nèi)部組件是否遵循某些推薦做法，如果不在控制臺(tái)中，則會(huì)發(fā)出警告。
驗(yàn)證不贊成使用的方法，如果使用了嚴(yán)格模式，則會(huì)在控制臺(tái)中警告您。
通過識(shí)別潛在風(fēng)險(xiǎn)來幫助您預(yù)防某些副作用。
React文檔官網(wǎng)并未對(duì) Context 給出“是什么”的定義，更多是描述使用的 Context 的場(chǎng)景，以及如何使用 Context 。
官網(wǎng)對(duì)于使用 Context 的場(chǎng)景是這樣描述的：
In Some Cases, you want to pass data through the component tree without having to pass the props down manuallys at every level. you can do this directly in React with the powerful "context" API.
簡(jiǎn)單說就是，當(dāng)你不想在組件樹中通過逐層傳遞 props 或者 state 的方式來傳遞數(shù)據(jù)時(shí)，可以：
使用 Context 來實(shí)現(xiàn) 跨層級(jí) 的組件數(shù)據(jù)傳遞。
使用props或者state傳遞數(shù)據(jù)，數(shù)據(jù)自頂下流。
使用 Context ，可以跨越組件進(jìn)行數(shù)據(jù)傳遞。
React Fiber 并不是所謂的纖程（微線程、協(xié)程），而是一種基于瀏覽器的單線程調(diào)度算法，背后的支持 API 是大名鼎鼎的：requestIdleCallback。Fiberl是一種將 recocilation （遞歸 diff），拆分成無數(shù)個(gè)小任務(wù)的算法；它隨時(shí)能夠停止，恢復(fù)。停止恢復(fù)的時(shí)機(jī)取決于當(dāng)前的一幀（16ms）內(nèi)，還有沒有足夠的時(shí)間允許計(jì)算。
把樹形結(jié)構(gòu)按照層級(jí)分解，只比較同級(jí)元素。
給列表結(jié)構(gòu)的每個(gè)單元添加唯一的 key 屬性，方便比較。
React 只會(huì)匹配相同 class 的 component（這里面的 class 指的是組件的名字） 合并操作，調(diào)用 component 的 setState 方法的時(shí)候, React 將其標(biāo)記為 dirty.
到每一個(gè)事件循環(huán)結(jié)束, React 檢查所有標(biāo)記 dirty 的 component 重新繪制. 選擇性子樹渲染。開發(fā)人員可以重寫 shouldComponentUpdate 提高 diff 的性能。
setState 是修改其中的部分狀態(tài)，相當(dāng)于 Object.assign，只是覆蓋，不會(huì)減少原來的狀態(tài)replaceState 是完全替換原來的狀態(tài)，相當(dāng)于賦值，將原來的 state 替換為另一個(gè)對(duì)象，如果新狀態(tài)屬性減少，那么 state 中就沒有這個(gè)狀態(tài)了
React.createClass()、ES6 class 和無狀態(tài)函數(shù)。
在 React 組件中，應(yīng)該在 componentDidMount 中發(fā)起網(wǎng)絡(luò)請(qǐng)求。這個(gè)方法會(huì)在組件第一次“掛載”(被添加到 DOM)時(shí)執(zhí)行，在組件的生命周期中僅會(huì)執(zhí)行一次。
更重要的是，你不能保證在組件掛載之前 Ajax 請(qǐng)求已經(jīng)完成，如果是這樣，也就意味著你將嘗試在一個(gè)未掛載的組件上調(diào)用 setState，這將不起作用。
在 componentDidMount 中發(fā)起網(wǎng)絡(luò)請(qǐng)求將保證這有一個(gè)組件可以更新了。
<!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html>標(biāo)簽之前。告知瀏覽器的解析器,用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。
標(biāo)準(zhǔn)模式的排版 和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。
HTML5 不基于 SGML，因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運(yùn)行）；
而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型。**
首先：CSS規(guī)范規(guī)定，每個(gè)元素都有display屬性，確定該元素的類型，每個(gè)元素都有默認(rèn)的display值，如div的display默認(rèn)值為“block”，則為“塊級(jí)”元素；span默認(rèn)display屬性值為“inline”，是“行內(nèi)”元素。
（1）行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語氣）
（2）塊級(jí)元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見的空元素：
<img><input><link><meta>
鮮為人知的是：
<area><base><col><command><embed><keygen><param><source><track><wbr>
4.頁面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？
link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;
頁面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁面被加載完再加載;
import是CSS2.1 提出的，只在IE5以上才能被識(shí)別，而link是XHTML標(biāo)簽，無兼容問題;
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁的語法解釋會(huì)有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則：解析和執(zhí)行javascript來實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。
Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]
Webkit內(nèi)核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
移除的元素：
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;
對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
用正確的標(biāo)簽做正確的事情。
html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對(duì)瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO;
使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。
在用戶沒有連網(wǎng)時(shí)，可以正常訪問站點(diǎn)或應(yīng)用，在用戶與網(wǎng)絡(luò)連接時(shí)更新用戶機(jī)器上的緩存文件。
原理：HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲(chǔ)技術(shù))，通過這個(gè)文件上的解析清單離線存儲(chǔ)資源，這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會(huì)通過被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁面展示。
如何使用：
頁面頭部像下面一樣加入一個(gè)manifest的屬性；
在cache.manifest文件的編寫離線存儲(chǔ)的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
在離線狀態(tài)時(shí)，操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)。
在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會(huì)請(qǐng)求manifest文件，如果是第一次訪問app，那么瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲(chǔ)。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲(chǔ)了，那么瀏覽器就會(huì)使用離線的資源加載頁面，然后瀏覽器會(huì)對(duì)比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會(huì)重新下載文件中的資源并進(jìn)行離線存儲(chǔ)。
離線的情況下，瀏覽器就直接使用離線存儲(chǔ)的資源。
iframe會(huì)阻塞主頁面的Onload事件；
搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;
iframe和主頁面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁面的并行加載。
使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe，最好是通過javascript
動(dòng)態(tài)給iframe添加src屬性值，這樣可以繞開以上兩個(gè)問題。
label標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>WebSocket、也可以調(diào)用localstorge、cookies等本地存儲(chǔ)方式，還可以使用頁面的路有參數(shù)傳遞
localstorge另一個(gè)瀏覽上下文里被添加、修改或刪除時(shí)，它都會(huì)觸發(fā)一個(gè)事件，
我們通過監(jiān)聽事件，控制它的值來進(jìn)行頁面信息通信；
14.如何在頁面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域？
map+area或者svg
border-radius
純js實(shí)現(xiàn) 需要求一個(gè)點(diǎn)在不在圓上簡(jiǎn)單算法、獲取鼠標(biāo)坐標(biāo)等等
title屬性沒有明確意義只表示是個(gè)標(biāo)題，H1則表示層次明確的標(biāo)題，對(duì)頁面信息的抓取也有很大的影響；
strong是標(biāo)明重點(diǎn)內(nèi)容，有語氣加強(qiáng)的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí)：會(huì)重讀，而是展示強(qiáng)調(diào)內(nèi)容。
i內(nèi)容展示為斜體，em表示強(qiáng)調(diào)的文本；
h5新增的屬性
可以通過ele.dataset獲取到標(biāo)簽上的data-x的屬性
返回一個(gè)對(duì)象
解決：解決方案是做成PNG8.
解決：方案是加一個(gè)全局的*{margin:0;padding:0;}來統(tǒng)一。
解決：解決方案是在float的標(biāo)簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)
漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“9”這一標(biāo)記，將IE游覽器從所有情況中分離出來。 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識(shí)別。
css
.bb{
background-color:#f1ee18;/*所有識(shí)別*/
.background-color:#00deff\9; /*IE6、7、8識(shí)別*/
+background-color:#a200ff;/*IE6、7識(shí)別*/
_background-color:#1e0bd1;/*IE6識(shí)別*/
}
解決：解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.
解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。
解決：可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
解決：方法是改變CSS屬性的排列順序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
該標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁，而 Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁。
1）所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記
2）所有標(biāo)簽的元素和屬性的名字都必須使用小寫
3）所有的XML標(biāo)記都必須合理嵌套
4）所有的屬性必須用引號(hào)""括起來
5）把所有<和&特殊符號(hào)用編碼表示
6）給所有屬性賦一個(gè)值
7）不要在注釋內(nèi)容中使“--”
8）圖片必須有說明文字
title是global attributes之一，用于為元素提供附加的advisory information。通常當(dāng)鼠標(biāo)滑動(dòng)到元素上的時(shí)候顯示。
alt是<img>的特有屬性，是圖片內(nèi)容的等價(jià)描述，用于圖片無法加載時(shí)顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設(shè)置有意義的值，搜索引擎會(huì)重點(diǎn)分析。
改版的時(shí)候更方便 只要改css文件。
頁面加載速度更快、結(jié)構(gòu)化清晰、頁面顯示簡(jiǎn)潔。
表現(xiàn)與結(jié)構(gòu)相分離。
易于優(yōu)化（seo）搜索引擎更友好，排名更容易靠前。
派生選擇器（用HTML標(biāo)簽申明）
id選擇器（用DOM的ID申明）
類選擇器（用一個(gè)樣式類名申明）
屬性選擇器（用DOM的屬性申明，屬于CSS2，IE6不支持，不常用，不知道就算了）
除了前3種基本選擇器，還有一些擴(kuò)展選擇器，包括
后代選擇器（利用空格間隔，比如div .a{ }）
群組選擇器（利用逗號(hào)間隔，比如p,div,#a{ }）
那么問題來了，CSS選擇器的優(yōu)先級(jí)是怎么樣定義的？
一般而言，選擇器越特殊，它的優(yōu)先級(jí)越高。也就是選擇器指向的越準(zhǔn)確，它的優(yōu)先級(jí)就越高。
復(fù)雜的計(jì)算方法：
用1表示派生選擇器的優(yōu)先級(jí)
用10表示類選擇器的優(yōu)先級(jí)
用100標(biāo)示ID選擇器的優(yōu)先級(jí)
div.test1 .span var 優(yōu)先級(jí) 1+10 +10 +1
span#xxx .songs li 優(yōu)先級(jí)1+100 + 10 + 1
xxx li 優(yōu)先級(jí) 100 +1
那么問題來了，看下列代碼，<p>標(biāo)簽內(nèi)的文字是什么顏色的？
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body>
答案：red。與樣式定義在文件中的先后順序有關(guān)，即是后面的覆蓋前面的，與在<p class=’classB classA’>中的先后關(guān)系無關(guān)。
塊級(jí)元素(block)特性：
總是獨(dú)占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;
內(nèi)聯(lián)元素(inline)特性：
和相鄰的內(nèi)聯(lián)元素在同一行;
寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設(shè)置的），就是里面文字或圖片的大小。
那么問題來了，瀏覽器還有默認(rèn)的天生inline-block元素（擁有內(nèi)在尺寸，可設(shè)置高寬，但不會(huì)自動(dòng)換行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。
外邊距重疊就是margin-collapse。
在CSS當(dāng)中，相鄰的兩個(gè)盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個(gè)單獨(dú)的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。
折疊結(jié)果遵循下列計(jì)算規(guī)則：
兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值。
兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值。
兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和。
rgba()和opacity都能實(shí)現(xiàn)透明效果，但最大的不同是opacity作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度，
而rgba()只作用于元素的顏色或其背景色。（設(shè)置rgba透明的元素的子元素不會(huì)繼承透明效果！）
* 1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標(biāo)簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul < li）
6.后代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.偽類選擇器（a: hover, li: nth - child）
* 可繼承： font-size font-family color, UL LI DL DD DT;
* 不可繼承 ：border padding margin width height ;
* 優(yōu)先級(jí)就近原則，樣式定義最近者為準(zhǔn);
* 載入樣式以最后載入的定位為準(zhǔn);優(yōu)先級(jí)為:
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級(jí)高CSS3新增偽類舉例：
p:first-of-type 選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素。
p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素。
p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素。
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素。
:enabled、:disabled 控制表單控件的禁用狀態(tài)。
:checked，單選框或復(fù)選框被選中。給div設(shè)置一個(gè)寬度，然后添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;}
居中一個(gè)浮動(dòng)元素
確定容器的寬高 寬500 高 300 的層
設(shè)置層的外邊距
.div {
Width:500px ; height:300px;//高度可以不設(shè)
Margin: -150px 0 0 -250px;
position:relative;相對(duì)定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
* IE瀏覽器的內(nèi)核Trident、 Mozilla的Gecko、google的WebKit、Opera內(nèi)核Presto；
* png24為的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.
* 瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來統(tǒng)一。
* IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。
浮動(dòng)ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}
這種情況之下IE會(huì)產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)
漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“\9”這一標(biāo)記，將IE游覽器從所有情況中分離出來。
接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識(shí)別。
css
.bb{
background-color:#f1ee18;/*所有識(shí)別*/
.background-color:#00deff\9; /*IE6、7、8識(shí)別*/
+background-color:#a200ff;/*IE6、7識(shí)別*/
_background-color:#1e0bd1;/*IE6識(shí)別*/
}
* IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性.
解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.
* IE下,even對(duì)象有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event對(duì)象有pageX,pageY屬性,但是沒有x,y屬性.
* （條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。
* Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
超鏈接訪問過后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
!important > id > class > 標(biāo)簽
!important 比 內(nèi)聯(lián)優(yōu)先級(jí)高
可繼承： font-size font-family color, ul li dl dd dt;
不可繼承 ：border padding margin width height ;
講 DOM 先從 HTML 講起，講 HTML 先從 XML 講起。XML 是一種可擴(kuò)展的標(biāo)記語言，所謂可擴(kuò)展就是它可以描述任何結(jié)構(gòu)化的數(shù)據(jù)，它是一棵樹！
document.write只能重繪整個(gè)頁面
innerHTML可以重繪頁面的一部分
createDocumentFragment() //創(chuàng)建一個(gè)DOM片段
createElement() //創(chuàng)建一個(gè)具體的元素
createTextNode() //創(chuàng)建一個(gè)文本節(jié)點(diǎn)
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)
getElementsByTagName() //通過標(biāo)簽名稱
getElementsByName() //通過元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)，會(huì)得到一個(gè)數(shù)組，其中包括id等于name值的)
getElementById() //通過元素Id，唯一性
attribute是dom元素在文檔中作為html標(biāo)簽擁有的屬性；
property就是dom元素在js中作為對(duì)象擁有的屬性。
所以：
對(duì)于html的標(biāo)準(zhǔn)屬性來說，attribute和property是同步的，是會(huì)自動(dòng)更新的，
但是對(duì)于自定義的屬性來說，他們是不同步的，
src用于替換當(dāng)前元素，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。
Src source,指向外部資源的位置,如果我們添加<script src ="js.js"></script>瀏覽器會(huì)暫停其他資源的下載和處理,直到該資源加載,編譯,執(zhí)行完畢(圖片和框架也是如此),這也就是為什么js腳本要放在底部。
src用于替換當(dāng)前元素,href用于在當(dāng)前文檔和引入資源之間建立聯(lián)系。
cookie 本身不是用來做服務(wù)器端存儲(chǔ)的（計(jì)算機(jī)領(lǐng)域有很多這種“狗拿耗子”的例子，例如 CSS 中的 float），它是設(shè)計(jì)用來在服務(wù)器和客戶端進(jìn)行信息傳遞的，因此我們的每個(gè) HTTP 請(qǐng)求都帶著 cookie。但是 cookie 也具備瀏覽器端存儲(chǔ)的能力（例如記住用戶名和密碼），因此就被開發(fā)者用上了。
使用起來也非常簡(jiǎn)單，document.cookie = ....即可。
但是 cookie 有它致命的缺點(diǎn)：
存儲(chǔ)量太小，只有 4KB
所有 HTTP 請(qǐng)求都帶著，會(huì)影響獲取資源的效率
API 簡(jiǎn)單，需要封裝才能用
后來，HTML5 標(biāo)準(zhǔn)就帶來了sessionStorage和localStorage，先拿localStorage來說，它是專門為了瀏覽器端緩存而設(shè)計(jì)的。
存儲(chǔ)量增大到 5MB
不會(huì)帶到 HTTP 請(qǐng)求中
API 適用于數(shù)據(jù)存儲(chǔ) localStorage.setItem(key, value) localStorage.getItem(key)
sessionStorage的區(qū)別就在于它是根據(jù) session 過去時(shí)間而實(shí)現(xiàn)，而localStorage會(huì)永久有效，應(yīng)用場(chǎng)景不同。例如，一些需要及時(shí)失效的重要信息放在sessionStorage中，一些不重要但是不經(jīng)常設(shè)置的信息，放在localStorage中。
標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、提高搜索機(jī)器人搜索幾率、使用外 鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁面速度更快、內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件，容易維 護(hù)、改版方便，不需要變動(dòng)頁面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性；
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
