<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

首頁

082018-5

如何成為前端開發高手？

web前端開發工程是是一個很新的職業，在國內乃至國際上真正開始受到重視的時間不超過五年。web前端開發，是從網頁制作演變而來的，名稱上有很明顯的時代特征。隨著人們對用戶體驗的要求越來越高，前端開發的技術難度越來越大，web前端開發工程師這一職業終于從設計和制作不分的局面中獨立出來。

早期的前端其實就是table布局，后來發展到所謂的div+css網站重構，再到現在的讓人眼花繚亂的各種各樣的新技術，web前端技術發展是非?？焖俚?，因此選擇了前端這個行業就意味著不停的學習吧。讓我們先看看張克軍繪制的前端知識體系結構：

前端開發的核心是HTML+CSS+JavaScript。本質上他們構成了一個MVC框架，即HTML作為信息模型（Model），css控制樣式（View），JavaScript負責調度數據和實現某種展現邏輯（Controller）。

HTML

1.標簽的分類，

2.標簽表示一個元素

3.按性質分類：block-level 和 inline-level

4.按語義分類：

Headings:h1,h2,h3,h4,h5,h6

paragraphs:p

Text formatting:em,strong,sub,del,ins,small

Lists:ul,li,ol,dl,dt,dd

Tables:table,thead,tbody,tr,th,td

Forms and input: form,input,select,textarea

Others:div,span,a,img,

HTML5:header,footer,article,section

XHTML

XHTML于2000年的1月26日成為W3C標準。W3C將XHTML定義為的HTML版本，XHTML將逐漸取代HTML。XHTML是通過把HTML和XML各自的長處加以結合形成的。XHTML語法規則如下：

屬性名和標簽名稱必須小寫

屬性值必須加引號

屬性不能簡寫

用ID屬性代替name屬性

XHTML元素必須被正確地嵌套

XHTML元素必須被關閉

標簽語義化

為表達語義而標記文檔，而不是為了樣式，結構良好的文檔可以向瀏覽器傳達盡可能多的語義，不論是瀏覽器位于掌上電腦還是時髦的桌面圖形瀏覽器。結構良好的文檔都能向用戶傳達可視化的語義即使是在老的瀏覽器，或是在被用戶關閉了CSS的現代瀏覽器中。同時結構良好的HTML代碼也有助于搜索引擎索引你的網站。

不要使用table布局，table是用來表格顯示的。

不要到處濫用div標簽，div是用來分塊用的。

不要使用樣式標簽，如font，center，big，small，b，i，樣式可以用CSS來控制，b和i可以用strong和em來代替。

不要使用換行標簽<br />和空格來控制樣式，請用CSS。

盡量不要使用內聯CSS

CSS

1.css基礎知識

層疊和繼承

優先級

盒模型

定位

浮動

2.css進階

css sprite

瀏覽器兼容性

IE haslayout和block format content

css frameworks

css3

css性能優化

less and sass

css sprite主要用于前端性能優化的一種技術，原理是通過多張背景圖合成在一張圖片上從而減少http請求，加快載入速度。

瀏覽器兼容性

絕大部分情況下，我們需要考慮瀏覽器的兼容性，目前正在使用的瀏覽器版本非常多，IE6，IE7，IE8，IE9，IE10，Chrome，Firefox，Safari。

IE haslayout和block format content

IE haslayout是一個Internet explore for Windows的私有概念，他決定了一個元素如何顯示以及約束其包含的內容、如何與其他元素交互和建立聯系、如何響應和傳遞應用程序事件、用戶事件等。而有些HTML元素則默認就有layout。目前只有IE6和IE7有這個概念。BFC是W3C css2.1規范中的一個概念，他決定了元素如何應對其內容進行定位。以及與其他元素的關系和相互作用。這個其實和瀏覽器的兼容性有關，因為決大部分的兼容性問題都是他們引起的。參考：css BFC和IE haslayout介紹。

css framework

css框架是一系列css文件的集合體，包含了基本的元素重置，頁面排版、網格布局、表單樣式，通用規則等代碼塊，用于簡化web前端開發的工作，提高工作效率。目前常見框架有：

960 grid system

blueprint css

bluetrip

minimum page

還是一個比較出名的和特殊的框架是Twitter的bootstrap，bootstrap是快速開發web應用程序前端的工具包。它是一個css和HTML的集合，它使用了的瀏覽器技術，給你的web開發提供了時尚的版式，表單，buttons，表格，網格系統等等。它是基于less開發的，不支持IE6，在IE7和IE8里效果也不咋地。

css3

雖然css3還沒有正式成為標準，但是IE9+，Chrome，Firefox等現代瀏覽器都支持css3。css3提供了好多以前需要用JavaScript和切圖才能搞定的功能，目前主要功能更有：圓角、多背景、@font-face、動畫與漸變、漸變色、box陰影、RGBa-加入透明色、文字陰影。

css性能優化

css代碼是控制頁面顯示樣式與效果的最直接“工具” ，但是在性能調優時他們通常會被web開發工程師所忽略，而事實上不規范的css會對頁面渲染的效率有嚴重影響，尤其是對于結構復雜的web2.0頁面，這種影響更是不可磨滅的。所以，寫出規范的、高性能的css代碼會極大地提高應用程序的效率。

less and sass

less和sass都是css預處理器，用來為css增加一些編輯的特性，無需考慮瀏覽器的兼容問題，例如你可以在css中使用變量、簡單的程序邏輯、函數等等在編程語言中的一些基本技巧，可以讓你的css更加簡潔。適應性更強，代碼更直觀等諸多好處。

sass基于ruby開發，less既可以在客戶端運行，也可以借助node.js或者rhino在服務器端運行。

評論(0) 瀏覽(3191)

072018-5

echarts 實現關系圖表

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

1.效果如上，官方示例簡化

2.force1.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="ECharts"> <meta name="author" content="kener.linfeng@gmail.com"> <title>ECharts · Example</title> <script src="./js/echarts.js"></script> </head> <body> <div id="main" class="main" style="width: 800px;height: 800px"></div> <script src="./echartsExample.js"></script> </body> </html>

3.echartsExample.js

var myChart; var domMain = document.getElementById('main'); function requireCallback (ec) { echarts = ec; if (myChart && myChart.dispose) { myChart.dispose(); } myChart = echarts.init(domMain); window.onresize = myChart.resize; myChart.setOption(option, true); window.onresize = myChart.resize; } var option = { title : { text: '人物關系：喬布斯', subtext: '數據來自人立方', x:'right', y:'bottom' }, tooltip : { trigger: 'item', formatter: '{a} : ' }, toolbox: { show : true, feature : { restore : {show: true}, magicType: {show: true, type: ['force', 'chord']}, saveAsImage : {show: true} } }, legend: { x: 'left', data:['家人','朋友'] }, series : [ { type:'force', name : "人物關系", ribbonType: false, categories : [ { name: '人物' }, { name: '家人' }, { name:'朋友' } ], itemStyle: { normal: { label: { show: true, textStyle: { color: '#333' } }, nodeStyle : { brushType : 'both', borderColor : 'rgba(255,215,0,0.4)', borderWidth : 1 }, linkStyle: { type: 'curve' } }, emphasis: { label: { show: false // textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE }, nodeStyle : { //r: 30 }, linkStyle : {} } }, useWorker: false, minRadius : 15, maxRadius : 25, gravity: 1.1, scaling: 1.1, roam: 'move', nodes:[ {category:0, name: '喬布斯', value : 10, label: '喬布斯\n（主要）'}, {category:1, name: '麗薩-喬布斯',value : 2}, {category:1, name: '保羅-喬布斯',value : 3}, {category:1, name: '克拉拉-喬布斯',value : 3}, {category:1, name: '勞倫-鮑威爾',value : 7}, {category:2, name: '史蒂夫-沃茲尼艾克',value : 5}, {category:2, name: '奧巴馬',value : 8}, {category:2, name: '比爾-蓋茨',value : 9}, {category:2, name: '喬納森-艾夫',value : 4}, {category:2, name: '蒂姆-庫克',value : 4}, {category:2, name: '龍-韋恩',value : 1}, ], links : [ {source : '麗薩-喬布斯', target : '喬布斯', weight : 1, name: '女兒'}, {source : '保羅-喬布斯', target : '喬布斯', weight : 2, name: '父親'}, {source : '克拉拉-喬布斯', target : '喬布斯', weight : 1, name: '母親'}, {source : '勞倫-鮑威爾', target : '喬布斯', weight : 2}, {source : '史蒂夫-沃茲尼艾克', target : '喬布斯', weight : 3, name: '合伙人'}, {source : '奧巴馬', target : '喬布斯', weight : 1}, {source : '比爾-蓋茨', target : '喬布斯', weight : 6, name: '競爭對手'}, {source : '喬納森-艾夫', target : '喬布斯', weight : 1, name: '愛將'}, {source : '蒂姆-庫克', target : '喬布斯', weight : 1}, {source : '龍-韋恩', target : '喬布斯', weight : 1}, {source : '克拉拉-喬布斯', target : '保羅-喬布斯', weight : 1}, {source : '奧巴馬', target : '保羅-喬布斯', weight : 1}, {source : '奧巴馬', target : '克拉拉-喬布斯', weight : 1}, {source : '奧巴馬', target : '勞倫-鮑威爾', weight : 1}, {source : '奧巴馬', target : '史蒂夫-沃茲尼艾克', weight : 1}, {source : '比爾-蓋茨', target : '奧巴馬', weight : 6}, {source : '比爾-蓋茨', target : '克拉拉-喬布斯', weight : 1}, {source : '蒂姆-庫克', target : '奧巴馬', weight : 1} ] } ] }; var echarts; require.config({ paths: { echarts: './js' } }); launchExample(); var isExampleLaunched; function launchExample() { if (isExampleLaunched) { return; } // 按需加載 isExampleLaunched = 1; require( [ 'echarts', 'echarts/chart/force', 'echarts/chart/chord', ], requireCallback ); }
4.目錄文件結構

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(4527)

072018-5

你不知道的JavaScript：有趣的setTimeout

話不多說，先上代碼：

for(var j=0;j<10;J++){

setTimeout(function(){console.log(j);},5000)

}

看到這三行代碼，你也許會不耐煩道：又要講閉包？要吐槽了好么？別急，讓我們先來思考一下，這段代碼在瀏覽器中的執行結果是什么？

甲：順序打印0到9？

乙：這題我見過，打印十個10！

哪個答案正確？

執行結果顯示，瀏覽器打印出十個10，貌似乙對了，但是如果你足夠細心，你會發現幾個問題：為什么會循環打印十個10,而不是0到9？

從結果來看，for循環執行完跳出之后，才開始執行setTimeout（所以j才等于10），為什么不是每次迭代都執行一次setTimeout呢？

1、為什么會循環打印十個10？

許多人習慣用第二個問題中的執行結果來回答這個問題：“for循環執行完畢跳出之后才開始執行setTimeout，所以才打印了十個10”。這樣的答案，只能說是既應付了自己，又應付了別人。其實，要解答第一個問題，首先要解答第二個問題。

2、為什么不是每一次迭代都執行一次setTimeout？

大家都知道，JavaScript在ES6出現以前，是沒有塊狀作用域的，這就意味著，在for循環中用var定義的變量j，其實是屬于全局的，那其實整個全局作用域中只有一個j，每次for循環都是更新這個j。

那么現在的關鍵問題在于，為什么整個for循環會先于setTimeout執行，而不是我們正常理解的，一次迭代執行一次。這就涉及到了JavaScript的核心特性：單線程。

JavaScript設計的初衷，是瀏覽器用來與用戶進行交互和DOM操作的，這就決定了它必須是單線程的。設想JavaScript同時有兩個線程，一個線程在DOM節點內添加內容，一個線程刪除該節點，瀏覽器就會出現混亂。所以，為了避免復雜性，從一誕生，JavaScript就是單線程，這已經成為了這門語言的核心特征，將來也不會改變。

單線程就意味著，所有任務需要排隊，前一個任務結束，才會執行下一個任務，如果前一個任務耗時很長，后一個任務就不得不一直等著。

為了優化單線程的性能，JavaScript將任務分成兩種，一種是同步任務（synchronous），另一種是異步任務（asynchronous）。同步任務指的是，在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行后一個任務；異步任務指的是，不進入主線程，而進入“任務隊列（task queue）”的任務，只用主線程中的同步任務執行完畢，異步任務才會進入執行隊列執行。只要主線程空了，就會去讀取“任務隊列”，這就是JavaScript的運作機制。這個過程會不斷重復。

而setTimeout就被JavaScript定義為異步任務。每次for循環的迭代，都將setTimeout中的回調函數加入任務隊列等待執行。也就是說，只有同步任務中的for循環完全結束，主線程中才會去任務列表中找到尚未執行的十個setTimeout（十次迭代）回調函數并順序執行（先進先出）。而此時，j已經經過循環結束變成了10，所以此時主線程執行的，是十個一模一樣的打印i的回調函數，即打印十個10,。至此完美回答了第一和第二個問題，文章開頭的代碼與下面的代碼其實是等價的：

for(var i=0;i<10;i++){

setTimeout(console.log(i),5000);

setTimeout(console.log(i),5000);

setTimeout(console.log(i),5000);

setTimeout(console.log(i),5000);

setTimeout(console.log(i),5000);

setTimeout(console.log(i),5000);

setTimeout(console.log(i),5000);

setTimeout(console.log(i),5000);

setTimeout(console.log(i),5000);

setTimeout(console.log(i),5000);

}

小小的一個setTimeout，牽扯出了很多JavaScript的深層次問題，可見JavaScript還有許多地方是值得深入探究的。

評論(0) 瀏覽(3315)

032018-5

HTML條件注釋用法詮釋

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

HTML條件注釋用法詮釋

注釋內容以樣式為例，如下：

1、支持所有IE瀏覽器



1

2

3

2、支持非IE瀏覽器



1

2

3

上面是除了IE瀏覽器外所有瀏覽器都識別這個樣式，另外CSS-TRICKS的《How To Create an IE-Only Stylesheet》一文中提供了另一種寫法：

 <link rel="stylesheet" type="text/css" href="not-ie.css" /> 

1

2

3

3、僅僅支持IE10



1

2

3

4、支持IE10以下版本（IE9以及IE9以下版本）

這種方法是樣式表使用在低于IE10的瀏覽器,換句話說除了IE10以外的所有IE版本都將被支持。



1

2

3

也可以寫成



1

2

3

前面我們也說過了lt和lte的區別,lt表示小于版本號，不包括條件版本號本身；而lte是小于或等于版本號，包括了版本號自身。

上面這幾種方法，使用的是低于（lt）和低于或等于（lte）的方法來判斷，我們也可以使用大于gt和大于或等于gte達到上面的效果：

5、高于IE9的版本(IE10以及IE10以上版本)



1

2

3

或



1

2

3

6、指定多種IE版本



1

2

3

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3378)

022018-5

javascript中數組和對象的深拷貝和淺拷貝

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

1、首先理解一下“深拷貝”和“淺拷貝”的區別：

淺拷貝：a = b;//a和b中存的是相同的地址，該地址指向堆內存中相同的地方，即a和b就是一個東西，改變a的值b的值也會跟著改變，同理改變b的值a的值也會發生改變；

深拷貝：a和b中存的地址不同，但是地址對應的堆內存中的內容完全一致，即b是a的副本

2、

（1）數組和對象的淺拷貝一樣，簡單的賦值操作

var b = a;

如數組的淺拷貝：

[javascript] view plain copy

var a = ['1','2','3'];

var b = a;

b[0] = '5';

console.log('a',a);

console.log('b',b);

輸出的值為：

對象的淺拷貝：

[html] view plain copy

var a = {name:'1',age:'2',color:'3'};

var b = a;

b.name = '5';

console.log('a',a);

console.log('b',b);

輸出的值為：

（2）數組的深拷貝

ES5：var b = a.concat();

[javascript] view plain copy

var a = ['1','2','3'];

var b = a.concat();

b[0] = '5';

console.log('a',a);

console.log('b',b);

輸出的結果為：

ES6 let [...b] = a;

（3）對象的深拷貝

ES5:

[javascript] view plain copy

var a = {name:'1',age:'2',color:'3'};

function copyObj(a) {

var b = {};

for(var key in a) {

b[key] = a[key];

}

return b;

}

var c = copyObj(a);

c.name = '5';

console.log('c',c);

console.log('a',a);

輸出的結果為：

ES6：

let {...b} = a;

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3604)

012018-5

jQuery選擇器(二)基本選擇器+層次選擇器

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

1:獲取所有的<p>元素，對<p>元素繼續循環，因為獲取的是數組對象，給每個<p>元素添加行為事件

var items=document.getElementsByTagName("p"); for(var i=0;i<items.length;i++){ items[i].onclick=function(){ //do something } }

1

2

3

4

5

6

2：根據表格id獲取表格，在表格內獲取<tbody>元素，在<tbody>元素下獲取<tr>元素，循環輸出獲取的<tr>元素，對元素的索引值除以2取模，然后根據奇偶設置不同的背景色。

var item=docuement.getElementById("tb"); var tbody=item.getElementsByTagName("tbody")[0]; var trs=tbody.getElementByTagName("tr"); for(var i=0;i<trs.length;i++){ if(i%2==0){ trs[i].style.backgroundColor="#888"; } }

1

2

3

4

5

6

7

8

3：新建一個空數組，獲取所有name為”check”的多選框，循環判斷多選框是否被選中，如果被選中則添加到數組里，獲取輸出按鈕，然后為按鈕添加onclick事件，輸出數組長度即可。

var btn=document.getElementById("btn"); btn.onclick=function(){ var array=new Array(); var items=document.getElementsByName("check"); for(i=0;i<items.length;i++){ if(items[i].checked){ array.push(items[i].value); } } alert(array.length); }

1

2

3

4

5

6

7

8

9

10

11

12

基本選擇器：

#id $("#test")選取id為test的元素 .class $(".test")選取所有class為test的元素 element $("p")選取所有的<p>元素 $("div,span,p.myClass") 選取所有的<div>，<span>和擁有class為myClass的<p>標簽的一組元素

1

2

3

4

5

層次選擇器：

$("ancestor descendant") $("div span")選取<div>里面所有的<span>元素 $("parent>child") $("div >span")選取<div>元素下元素名為<span>的子元素 $("prev+next") $(".one+div")選取class為one的下一個<div>同輩元素 $("#two~div")選取id為two的元素后面的所有<div>同輩元素后面兩個用得少，因為在jQuery里可以用更加簡單的方法代替 $(".one+div") $(".one").next("div"); $("prev~div") $("#prev").nextAll("div");
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3352)

272018-4

HTML基礎應用

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

本篇文章基本介紹了學習HTML的一些基礎的語法與標簽，標簽包括換行</br>，加粗<b>,下劃線<hr/>斜體字<i>,字體<h1....6>，標題<title>......

<small>

<small> 標簽呈現小號字體效果

。如果被包圍的字體已經是字體模型所支持的最小字號，那么 <small> 標簽將不起任何作用。

<small> 標簽也可以嵌套，從而連續地把文字縮小。每個 <small> 標簽都把文本的字體變小一號，直到達到下限的一號字。

<sub>表示下標<sup>表示上標。

<p>與<pre>有些類似

pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。

<pre> 標簽的一個常見應用就是用來表示計算機的源代碼。

p 元素會自動在其前后創建一些空白。

<ul>與<ol>

兩者都指列表，前者是無序的，后者是有序的。

[html] view plain copy

<html>

<head>

<span style="color:#33ff33;"><title></span>HTML 5 Tag Reference</title>

</head>

<body>

<span style="color:#33ff33;"><h1></span>The content of the document......<span style="color:#33ff33;"><br/></span></h1>

<h2>The content of the document......<br/></h2>

<h3>The content of the document......<br/></h3>

<h4>The content of the document......<br/></h4>

<h5>The content of the document......</h5>



<h1>The content of the document......<br/></h1>

<h1><span style="color:#33ff33;"><small></span>The content of the document......</small><br/></h1>



<span style="color:#33ff33;"><pre></span>

HTML基礎應用



HTML基礎應用學習和掌握HTML語言的基本語法，常用的標簽的使用方法；學會使用HTML設計基本的簡單



網頁。



</pre>

<span style="color:#33ff33;"><hr/></span>

<span style="color:#33ff33;"><p>

<i></span>This is some text in a very short paragraph</i>

</p>

<span style="color:#33ff33;"><b></span>The content of the document......</b></br>



a<span style="color:#33ff33;"><sup>2</sup><sub>0</sub></span>+b<sup>2</sup><sub>0</sub>=c<sup>2</sup><sub>0</sub>



<span style="color:#33ff33;"><ul></span>

<li>sports</li>

<li> food </li>

<li> drink </li>

<li> friends </li>

</ul>

<span style="color:#33ff33;"><ol></span>

    <li>sports</li>

    <li> drink</li>

    <li> friends</li>

</ol>



<span style="color:#33ff33;"><dl> </span>

<dt>計算機</dt>

    <dd>用來計算的儀器 ... ...</dd>

<dt>顯示器</dt>

    <dd>以視覺方式顯示信息的裝置 ... ...</dd>

</dl>



</body>

</html>

效果：

其中<title>體現在最上方的搜索欄中。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3918)

262018-4

用Flow提升前端代碼健壯性

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

看一段常見代碼：

//例1 function foo(x) { return x + 10 } foo('Hello!') //例2 function main(params){ //fn1函數獲取了一個數據 var object = fn1(params) //fn2根據獲數據，產生一個結果 var result = fn2(object) return result }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

例2很明顯，這個過程非常的‘黑’，如果你想知道object包含什么數據的話，可以：

打印一下 console.log(object)

查看fn1的注釋，并且保佑它的注釋是正確，全面的

或結合1，2，然后仔細查看fn1的源碼，希望它不是很復雜

被上述步驟折磨完之后，終于能真正的寫點代碼了，但是依舊得非常小心，因為這里還有另一個函數：fn2

在修改代碼的時候，得保證result這個結果沒有被影響，那么如何保證呢？

很簡單，重復上面的步驟，搞清楚result包含的數據，在測試的時候確保其數據跟原先的相同。
…

動態類型一時爽，代碼重構火葬場
知乎傳送門:為什么說“動態類型一時爽，代碼重構火葬場”

是時候徹底優化這個煩人的問題了

引入類型系統

其實問題的根源就是因為javascript太靈活了，在代碼運行期間幾乎可以做任何的修改，

沒有東西可以在代碼層面保證某個變量，某個函數跟預期的一致。

所以要加入類型系統來確保代碼的可靠性，在后期維護的時候同樣能夠傳達出有效的信息

Flow & TypeScript

Flow是個JavaScript的靜態類型檢查工具，由Facebook出品的開源碼項目，問世只有兩三年，是個相當年輕的項目。簡單來說，它是對比TypeScript語言的解決方式。

會有這類解決方案，起因是JavaScript是一種弱(動態)數據類型的語言，弱(動態)數據類型代表在代碼中，變量或常量會自動依照賦值變更數據類型，而且類型種類也很少，這是直譯式腳本語言的常見特性，但有可能是優點也是很大的缺點。優點是容易學習與使用，缺點是像開發者經常會因為賦值或傳值的類型錯誤，造成不如預期的結果。有些時候在使用框架或函數庫時，如果沒有仔細看文件，亦或是文件寫得不清不楚，也容易造成誤用的情況。

這個缺點在應用規?；瘯r，會顯得更加嚴重。我們在團隊開發協同時，一般都是通過統一的代碼規范，來降低這個問題的發生，但JS語言本身無法有效阻止這些問題。TypeScript這樣的強(靜態)類型的JavaScript超集語言就開始流行，用嚴格的角度，以JavaScript語言為基底，來重新打造另一套具有強(靜態)類型特性的語言，就如同Java或C#這些語言一樣，這也是為什么TypeScript稱自己是企業級的開發JavaScript解決方案。

TypeScript存在的問題

TypeScript自然有它的市場，但它有一些明顯的問題：

首先是JavaScript開發者需要再進一步學習，內容不少

有一定陡峭的學習曲線

已經在使用的應用代碼，需要整個改用TypeScript代碼語法，才能發揮完整的功用。這對很多已經有內部代碼庫的大型應用開發團隊而言，將會是個重大的決定，因為如果不往全面重構的路走，將無法發揮強(靜態)類型語言的最大效用eg:angular2

*所以許多現行的開源碼函數庫或框架，并不會直接使用TypeScript作為代碼的語言，另一方面因為TypeScript并非是普及到一定程度的語言。
當然TypeScript也是個活躍的開源碼項目，發展到現在也有一段時間，它的背后有微軟公司的支持，全新打造過的Angular2框架中(由Google主導)，也采用了TypeScript作為基礎的開發語言*。

Flow你的新選擇

現在，Flow提供了另一個新的選項，它是一種強(靜態)類型的輔助檢查工具。Flow的功能是讓現有的JavaScript語法可以事先作類型的聲明(定義)，在開發過程中進行自動檢查，當然在最后編譯時，一樣可以用babel工具來移除這些標記。

相較于TypeScript是另外重新制定一套語言，最后再經過編譯為JavaScript代碼來運行。Flow走的則是非強制與非侵入性的路線。

Flow的優點

輕且易學易用
它的學習曲線沒有TypeScript來得高，雖然內容也很多，但半天學個大概，就可以漸進式地開始使用

Flow從頭到尾只是個檢查工具
不是新的程序語言或超集語言，所以它可以與各種現有的JavaScript代碼兼容，如果你哪天不想用了，就去除掉標記就是回到原來的代碼，沒什么負擔

so

選擇flow.js工具而不選擇TypeScript強類型語言的原因顯而易見？
flow.js對工程的侵入性很小，無需大量的額外工作就能使用起來

從一個小例子演示

這種類型不符的情況在代碼中非常容易發生，例如上面的例1:

function foo(x) { return x + 10 } foo('Hello!')

1

2

3

4

5

x這個傳參，我們在函數聲明時希望它是個數字類型，但最后使用調用函數時則用了字符串類型。最后的結果會是什么嗎？ “Hello!10”，這是因為加號(+)在JavaScript語言中，除了作為數字的加運算外，也可以當作字符串的連接運算。想當然這并不是我們想要的結果。

聰明如你應該會想要用類型來當傳參的識別名，容易一眼看出傳參要的是什么類型，像下面這樣:

function foo(number) { return number + 10 }

1

2

3

如果在復合類型的情況，例如這個傳參的類型可以是數字類型也可以是布爾類型，你又要如何寫得清楚？

如果是個復雜的對象類型時，結構又該如何先確定好？

另外還有函數的返回類型又該如何來寫？

利用Flow類型的定義方式，來解決這個小案例的問題，可以改寫為像下面的代碼:

// @flow function foo(x: number): number { return x + 10 } foo('hi')

1

2

3

4

5

6

7

當使用非數字類型的值作為傳入值時，就會出現由Flow工具發出的警告消息，像下面這樣:

[flow] Cannot call foo with 'hi' bound to x because string 1 is incompatible with number 2. (a.getting-start.js:6:5)

如果是要允許多種類型也是很容易可以加標記的，假使這個函數可以使用布爾與數字類型，但返回可以是數字或字符串，就像下面這樣修改過:

// @flow function foo(x: number | boolean): number | string { if (typeof x === 'number') { return x + 10 } return 'x is boolean' } foo(1) foo(true) foo(null) // 這一行有類型錯誤消息

1

2

3

4

5

6

7

8

9

10

11

12

在多人協同開發某個有規模的JavaScript應用時，這種類型的輸出輸入問題就會很常遇見。如果利用Flow工具的檢查，可以避免掉許多不必要的類型問題。

真實案例

可能你會認為Flow工具只能運用在小型代碼中，其實不然，Vue源碼中大量使用flowjs中類型檢測：

Flow使用

1. flow init
2. // @flow 或 /* @flow */
3. IDE插件或 flow check
在Visual Studio Code中因為它內建TypeScript與JavaScript的檢查功能，如果要使用Flow工具來作類型檢查，需要在用戶設置中，加上下面這行設置值以免沖突:

“javascript.validate.enable”: false

4 . babel插件在編譯時就會一并轉換Flow標記

{ "plugins": [ "transform-flow-strip-types" ] }

1

2

3

4

5

Flow支持的數據類型

Flow支持原始數據類型，如下面的列表:

boolean

number

string

null

void

類型別名&常見語法

// @flow export type Test = { titleOne?: string, titleTwo: ?string } var a: Test = {titleOne:"3",titleTwo:4} var b:string = "" //any export type NavigationGestureDirection = 'horizontal' | 'vertical'; type T = Array<string> var x: T = [] x["Hi"] = 2 //有Flow警告 type TT = Array<Test> var xx:TT = [] xx = [{titleOne: '1', titleTwo: false}] type MyObject = { foo: number, bar: boolean, baz: string, }; let val:MyObject = {foo:2,bar:false,baz:'444'}; var val1: MyObject = {foo:2,bar:false,baz:null}; var val2: MyObject = {foo:2,bar:false}; function method(val: MyObject):MyObject { return {foo:2,bar:false,baz:'2'}} class Foo { constructor(val: MyObject) { /* ... */ } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

React中的應用

如果你在React class里面使用了React.PropTypes規范，你可以對JSX上的attributes做靜態類型檢查：

var Hello = React.createClass ({ propTypes: { name: React.PropTypes.string.isRequired } ... }); //<Hello/> //Flow就會發現缺少屬性的錯誤 //<Hello name={42}/>//屬性類型的錯誤

1

2

3

4

5

6

7

8

import * as React from 'react'; type Props = { foo: number, bar?: string, }; function MyComponent(props: Props) { props.doesNotExist; // Error! You did not define a `doesNotExist` prop. return <div>{props.bar}</div>; } <MyComponent foo={42} />

1

2

3

4

5

6

7

8

9

10

11

12

13

14

更多關于支持React的細節請移步 https://flow.org/en/docs/react/components/
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3749)

252018-4

如何看待CSS中BEM的命名方式？

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

BEM的意識就是塊(block)、元素(element)、修飾符(modifier)，是由yandex團隊提出的一種CSS Class命名方法。

任何一個東西的存在都有其存在的道理，如果他毫無價值，那么肯定會被淘汰，后人可能都不了解，甚至都不會出現在后人的世界里。

關于BEM命名其最大的爭議就是其命名風格，它鼓勵一級一級的寫的非常具體，但是會很長。如此常的命名會影響書寫效率，名稱過長代碼量就會增多，文件體積就會變大(在gzip下這個不算是個問題)，從而會影響傳輸速度，用戶體驗度就低，但是作為一個職業人我們都不能單純把個人喜好和習慣作為借口來拒絕或否定其用途。

風格對于使用者來說并不是很重要，關鍵的是看其效果。正所謂人們常說的“不看療程，看療效”。

從擴展性上來看，嵌套過多閱讀性差，超過3層就很難閱讀了;嵌套越多，選擇器的層級也會隨之增多，那么性能不知不覺就會變差;如此長的名字，書寫上想沖突都難。

從編程原則上來說，這種命名方式不會暴露抽象類。假如樣式變了需要繼承另一個抽象類，不需要改HTML，只需要改css即可。

團隊開發中，風格無非是一種形式，可以約束人們達到一定程度上的統一。內部溝通會極大降低溝通成本。

BEM命名的方法雖然有自身的不足之處，但至少他可以使我們命名的時候達到一定的統一，我們可以學習其優秀的方面將其納為己用。在實際項目開發中將其巧妙而又靈活的運用起來也未嘗不是一件壞事。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3527)

252018-4

JS作用域、立即執行函數、閉包

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

作用域

首先先介紹一下作用域等一些基礎概念。

每個JavaScript函數都是一個對象，對象中有些屬性我們可以訪問，但有些不可以，這些屬性僅供JavaScript引擎存取，[[scope]]就是其中一個。

[[scope]] : 指的就是我們所說的作用域，其中存儲了執行期上下文的集合

作用域鏈： [[scope]] 中所存儲的執行期上下文對象的集合，這個集合呈鏈式鏈接，我們把這種鏈接叫做作用域鏈。

運行期上下文：當函數執行時，會創建一個稱為執行期上下文的內部對象（AO）。一個執行期上下文定義了一個函數執行的環境，函數每次執行時對應的執行環境都是的，所以多次調用一個函數會導致創建多個執行上下文，當函數執行完畢，它所產生的執行上下文被銷毀。

查找變量  ：從作用域鏈的頂端依次向下查找。

下面舉一些例子：

[html] view plain copy

function a(){

    function b(){

        function c(){



        }

        c();

    }

    b();

}

a();





a defined a.[[scope]] ----> 0 : GO          //a定義的時候產生GO對象

a doing   a.[[scope]] ----> 0 : aAO           //a執行的時候新產生AO對象

                            1 : GO



b defined  b.[[scope]] ----> 0 : aAO            //子級b定義會繼承父級a運行時產生的對象

                             1 : GO

b doing    b.[[scope]] ---->  0 : bAO            //子級b新產生AO對象

                              1 : aAO

                              2 : GO



c defined  c.[[scope]] ---->  0 : bAO            //c定義時會繼承b運行時產生的屬性

                              1 : aAO

                              2 : GO

c doing     c.[[scope]] ----> 0 : cAO            //c執行時同時又產生新的AO

                              1 ；bAO

                              2 : aAO

                              3 : GO

立即執行函數

之前學過函數的定義、函數表達式，還有一種函數叫做立即執行函數。

立即執行函數：函數執行過后立即被銷毀。

立即執行函數的官方寫法：

[html] view plain copy

// 立即執行函數的官方寫法

(function() {} ());  W3C建議此種

(function() {})();

針對初始化功能的函數，可以有參數。

[html] view plain copy

var num = function (a,b){

    return a + b;

}(1,2);



(function abc(){

    var a = 123;

    var b = 234;

    console.log(a+b);

}())

只有表達式才能被執行符號執行，能被執行符號執行的表達式，函數名字會被自動忽略。

[html] view plain copy

function test(){

    console.log("a");

}()    會出現語法解析錯誤，因為括號前面是函數聲明



(+ function test( ){

    console.log('a');

}())                    -------->打印出a

下面是一道曾阿里面試題

[html] view plain copy

function test(a, b, c, d){

    console.log(a + b + c + d);

}(1, 2, 3, 4);



// 不報錯也沒有執行

下面是幾道經典的例題，可以參考一下：

[html] view plain copy



[html] view plain copy

function test(){

    var arr = [];

    for(var i = 0; i < 10; i ++){

        arr[i] = function (){

            console.log(i);

        }

    }

    return arr;

}

var myArr = test();

for(var j = 0; j < 10; j++){

    myArr[j]();

}

[html] view plain copy



[html] view plain copy

// 輸出：10個10

那么采用立即執行函數呢？會有怎樣的結果呢？

[html] view plain copy

function test(){

    var arr = [];

    for(var i = 0; i < 10; i ++){

        (function(j){

            arr[i] = function (){

            console.log(j + " ");

        }

        }(i))

    }

    return arr;

}

var myArr = test();

for(var j = 0; j < 10; j++){

    myArr[j]();

}

[html] view plain copy



[html] view plain copy

// 輸出結果  0 1 2 3 4 5 6 7 8 9

大家可以自行思考一下。

閉包

閉包的現象：當內部函數保存到外部時會產生閉包。

閉包會導致原有的作用域鏈不釋放，造成內存泄漏

（內存泄漏：內存占用（比如：手握沙子，握得越緊手里剩得就越少））

閉包觸發的情況：

兩個或多個函數互相嵌套，把里面的函數保存到外部，這樣的情況一定會產生閉包。從外面還可以調用里面的函數。

閉包的作用：

          實現公有變量

                  eg：函數累加器

          可以做緩存（存儲結構）

                  eg：eater

              可以實現封裝，屬性私有化

                  eg：person（）

              模塊化開發，防止污染全局變量

[html] view plain copy

// 函數累加器

function add(){

    var count = 0;

    function demo(){

        count ++;

        console.log(count);

    }

    return demo;

}

var counter = add();

counter();

counter();

counter();

counter();

counter();

counter();





// eater

function test(){

    var food = "apple";

    var obj = {

        eatFood : function (){

            if(food != ""){

                console.log("I am eating  " + food);

                food = "";

            }

            else{

                console.log("There is nothing!");

            }

        },

        pushFood : function (myFood){

            food = myFood;

        }

    }

    return obj;

}

var person = test();

person.eatFood();

person.eatFood();

person.pushFood('banana');

person.eatFood();

附加一個逗號操作符：

      先看前面的表達式，再看后面的表達式，把后面表達式的計算結構返回

例題：

[html] view plain copy

var f =(

    function f(){

        return "1";

    },

    function g(){

        return 2;

    }

)();

console.log(typeof(f));



// -------number



var x = 1;

if(function f(){}){

    x += typeof f;

}

console.log(x);

// --------> 1undefined

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3913)

« 1 ... 84 85 86 87 88 89 90 ... 104 »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合