HTML 開發(fā)技巧

HTML編碼原則

1.         結(jié)構(gòu)分離：使用HTML 增加結(jié)構(gòu)，而不是樣式內(nèi)容。

2.         保持整潔：為工作流添加代碼驗(yàn)證工具；使用工具或樣式向?qū)ЬS護(hù)代碼結(jié)構(gòu)和格式。

3.         學(xué)習(xí)新語言：獲取元素結(jié)構(gòu)和語義標(biāo)記。

4.         確?？稍L問： 使用ARIA 屬性和Fallback 屬性等。

5.         測試： 使網(wǎng)站在多種設(shè)備中能夠良好運(yùn)行，可使用emulators和性能工具。

標(biāo)簽選擇技巧

1.         使用<h1>(<h2>,<h3>…)表示標(biāo)題，<ul>或<ol>實(shí)現(xiàn)列表。

2.         注意使用<article> 標(biāo)簽之前應(yīng)添加<h1>標(biāo)簽。

3.         選擇合適的HTML5語義元素如<header>，<footer>,<nav>,<aside>。

4.         使用<p>描述Body 文本，HTML5 語義元素可以形成內(nèi)容，反之不成立。

5.         使用<em>和<strong>標(biāo)簽替代<i>和<b>標(biāo)簽。

6.         使用<label>元素，輸入類型，占位符及其他屬性來強(qiáng)制驗(yàn)證。

7.         將文本和元素混合，并作為另一元素的子元素，會導(dǎo)致布局錯(cuò)誤，

標(biāo)簽編碼技巧

1.         使用 <p> 元素修飾文本，而不是布局。

2.         避免使用 <br> 分行，可以使用block元素或CSS顯示屬性來代替。

3.         避免使用 <hr> 來添加水平線，可使用CSS的border-bottom 來代替。

4.         不到關(guān)鍵時(shí)刻不要使用div標(biāo)簽。

5.         盡量少用Tables來布局。

6.         可以多使用Flex Box

7.         使用CSS 來調(diào)整邊距等。

CSS 開發(fā)技巧

使用padding代替margin

頁面布局中， padding 和 margin 兩個(gè)是常用的屬性，但如果 margin 使用的過于頻繁的時(shí)候，盒模型的垂直距離可能就會發(fā)生重疊。原因是，所有相鄰的兩個(gè)或多個(gè)盒元素的 margin 將會合并為一個(gè) margin 共享。相鄰的定義為：同級或者嵌套的盒元素，并且它們之間沒有非空內(nèi)容、 Padding 或 Border 分隔。所以就可以在首位元素使用 padding 來替代 margin 。

水平居中的布局技巧

水平居中布局是開發(fā)中比較常見的布局形式，在標(biāo)題和內(nèi)容區(qū)域中經(jīng)常出現(xiàn)。下面介紹四種實(shí)現(xiàn)水平居中的方法。（注：下面各個(gè)實(shí)例中實(shí)現(xiàn)的是son元素的對齊操作，son元素的父容器是father元素）

使用inline-block和text-align實(shí)現(xiàn)

.father{text-align: center;}

.son{display: inline-block;}

使用margin:0 auto實(shí)現(xiàn)

.son{width:200px;margin:0 auto;}

使用table實(shí)現(xiàn)

.son{display:table;margin:0 auto;}

使用絕對定位實(shí)現(xiàn)

.father{position:relative;}

.son{position:absolute;left:50%;transform:translate(-50%);}

常用CSS框架

在實(shí)際編碼過程中，經(jīng)常使用第三方開源免費(fèi)的CSS框架，可以快速完成項(xiàng)目。下面就介紹3個(gè)常見的CSS框架。

mini.css

min.css是一個(gè)輕量級的css框架，壓縮后的大小是10kb，同時(shí)擁有相當(dāng)多的UI元素和布局。官網(wǎng)地址是：https:///。如下圖所示。

pure.css

pure.css壓縮后僅為3.8KB，適配移動端，它是模塊化開發(fā)，按需求導(dǎo)入相關(guān)的模塊包即可。官網(wǎng)地址是：https:///。如下圖所示。

mobi.css

mobi.css非常?。▔嚎s后僅 2.6KB），主要針對移動用戶。但是其內(nèi)置主題和插件系統(tǒng)還有很大的增長空間。如果基本樣式不能滿足你的要求，可以在框架之上以模塊化的方式進(jìn)行構(gòu)建。官網(wǎng)地址是：https://。如下圖所示。

JavaScript 開發(fā)技巧

代碼編寫技巧

在實(shí)際編程過程中，JavaScript中也有很多實(shí)用的代碼編寫技巧。下面介紹常見的4個(gè)小技巧。

將數(shù)組去重。

使用Set和擴(kuò)展運(yùn)算符即可實(shí)現(xiàn)。

var j = [...new Set([1, 2, 3, 3])]

>> [1, 2, 3]

過濾數(shù)組中的false值

將Boolean傳遞給filter函數(shù)，就可以過濾掉數(shù)組中的所有假值。

myArray.map(item => {

    // 編寫邏輯代碼

}).filter(Boolean);

創(chuàng)建空對象

用下面的方法創(chuàng)建的對象，不包含任何屬性或方法。

let dict = Object.create(null);

對象合并

使用擴(kuò)展運(yùn)算符（…），可以方便地合并對象。

const person = { name: 'David Walsh', gender: 'Male' };

const tools = { computer: 'Mac', editor: 'Atom' };

const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };

const summary = {...person, ...tools, ...attributes};

數(shù)據(jù)類型檢測

Typeof

typeof操作符返回一個(gè)字符串，表示未經(jīng)計(jì)算的操作數(shù)的類型；該運(yùn)算符數(shù)據(jù)類型（返回字符串，對應(yīng)列表如下圖）。

instanceof

instanceof運(yùn)算符用于測試構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在對象的原型鏈中的任何位置； 觀察下列代碼，字面量產(chǎn)出的原始數(shù)據(jù)類型無法使用instanceof判斷。

var str = "This is a simple string";

var num = 1111;

var boolean = true;

var und = undefined;

var nl = null;

var sb = Symbol('1111');

var obj = {}; // 非原始類型數(shù)據(jù)字面量定義

console.log(str instanceof String);         // false

console.log(num instanceof Number);         // false

console.log(boolean instanceof Boolean);    // false

console.log(nl instanceof Object);          // false

console.log(sb instanceof Symbol);          // false

console.log(obj instanceof Object);         // true

var strN = new String("This is a simple string");

var numN = new Number(1111);

var booleanN = new Boolean(true);

var objN = new Object();

console.log(strN instanceof String);            // true

console.log(numN instanceof Number);            // true

console.log(booleanN instanceof Boolean);       // true

console.log(objN instanceof Object);            // true

數(shù)組常用操作

多維數(shù)組一行代碼實(shí)現(xiàn)一維轉(zhuǎn)換

var arr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];

var resultArr = arr.toString().split(',').map(Number);

console.log(resultArr);

統(tǒng)計(jì)字符串中相同字符出現(xiàn)的次數(shù)

var str = 'aaabbbccc66aabbc6';

var strInfo = str.split('').reduce((p, c) => (p[c]++ || (p[c] = 1), p), {});

console.log(strInfo); // {6: 3, a: 5, b: 5, c: 4}

將類數(shù)組對象轉(zhuǎn)成數(shù)組

var likeArrObj = {

    0: 1,

    1: 2,

    2: 3,

    length: 3

}

var arr1 = Array.prototype.slice.call(likeArrObj); // 或者使用[].slice.call(likeArrObj);

console.log(arr1); // [1, 2, 3]

調(diào)試技巧

' debugger'

除了console.log , debugger是快速友好的調(diào)試工具。一旦執(zhí)行到這行代碼，Chrome瀏覽器會在執(zhí)行時(shí)自動停止。

if(thisThing) {

    debugger;

}

將objects顯示為表格

可以使用 console.log 查看并滾動瀏覽該對象，或者使用console.table展開，更容易看到正在處理的內(nèi)容。

varanimals = [

    {animal:'Horse',name:'Henry',age:43},

    {animal:'Dog',name:'Fred',age:13},

    {animal:'Cat',name:'Frodo',age:18}

];

console.table(animals);

在谷歌瀏覽器中顯示的界面如下圖所示。

使用 console.time() 和 console.timeEnd() 來標(biāo)記循環(huán)耗時(shí)

要想確切知道某段代碼需要執(zhí)行多長時(shí)間，尤其是在調(diào)試慢循環(huán)時(shí)，該技巧代碼會非常有用。

console.time('Timer1');

varitems = [];

for(vari =0; i <100000; i++){

    items.push({index: i});

}

console.timeEnd('Timer1');

WebStorm 開發(fā)技巧

常用快捷鍵（Windows）

常用插件

安裝插件的方式非常簡單，找到File -> settings -> Plugins 即可調(diào)出設(shè)置中的插件選項(xiàng)，或者直接快捷鍵 ctrl + alt + s也可調(diào)出設(shè)置菜單。下面簡單介紹常用的插件。

ideaVim

此插件可以讓 webstorm 編輯器支持 vim。

.ignore

可以支持 .gitignore 的語法規(guī)則,并提供了一些自動將文件加入 .gitignore 中的功能。

eslint

語法檢查的插件

AceJump

用于光標(biāo)的快速定位與跳轉(zhuǎn),默認(rèn)的快捷鍵是ctrl + ;,按快捷鍵之后,再按下自己想要將光標(biāo)跳轉(zhuǎn)到的目標(biāo)的字母,這時(shí)會出現(xiàn)很多A,B,C,D,E…… 的序號,按下相應(yīng)的字母即可跳轉(zhuǎn)到相應(yīng)的地方。(區(qū)分大小寫)