分類目錄歸檔：JavaScript開(kāi)發(fā)

2019
01-09

不要再問(wèn)我移動(dòng)適配的問(wèn)題了

移動(dòng)端適配的問(wèn)題，一般來(lái)說(shuō)我們都不會(huì)去深究，因?yàn)檫@種東西都是配置一次就再也不用管的了，接到設(shè)計(jì)圖就按照祖?zhèn)魈茁窋]就完事了。按部就班的必定只能成為活動(dòng)頁(yè)寫(xiě)手，研究透徹以后，才能成為一名專業(yè)的活動(dòng)頁(yè)寫(xiě)手嘛。糾纏不清的關(guān)系文章開(kāi)始，我們需要來(lái)捋清楚像素、視口以及縮放之間種種藕斷絲連的關(guān)系，來(lái)抽絲剝繭一波。像素像素我們寫(xiě)得多了，不就是px嘛，為什么要拿出來(lái)說(shuō)呢？因?yàn)橄袼剡€不僅僅就是px... 繼續(xù)閱讀 >

2019
01-03

2018 年瀏覽器混戰(zhàn)：為什么技術(shù)救不了 Edge？

隨著微軟正式確認(rèn)放棄Edge，并基于Chromium引擎重啟新的瀏覽器，我想借此機(jī)會(huì)分享一些有關(guān)當(dāng)前Web瀏覽器格局的想法。Edge：注定要失敗在推出3年之后，從市場(chǎng)份額來(lái)看，Edge無(wú)疑是失敗的。根據(jù)用戶的使用數(shù)據(jù)來(lái)看，它的份額僅為4-5％。這個(gè)數(shù)字居然是來(lái)自一家半壟斷運(yùn)營(yíng)桌面操作系統(tǒng)的公司，而它曾經(jīng)擁有80-90％的市場(chǎng)份額，幾乎是完全壟斷的。更糟糕的是，如果再算上移動(dòng)市場(chǎng)，市場(chǎng)份額急劇下降至2％... 繼續(xù)閱讀 >

2019
01-03

前端模塊化詳解(完整版)

前言在JavaScript發(fā)展初期就是為了實(shí)現(xiàn)簡(jiǎn)單的頁(yè)面交互邏輯，寥寥數(shù)語(yǔ)即可；如今CPU、瀏覽器性能得到了極大的提升，很多頁(yè)面邏輯遷移到了客戶端（表單驗(yàn)證等），隨著web2.0時(shí)代的到來(lái)，Ajax技術(shù)得到廣泛應(yīng)用，jQuery等前端庫(kù)層出不窮，前端代碼日益膨脹，此時(shí)在JS方面就會(huì)考慮使用模塊化規(guī)范去管理。本文內(nèi)容主要有理解模塊化，為什么要模塊化，模塊化的優(yōu)缺點(diǎn)以及模塊化規(guī)范,并且介紹下開(kāi)發(fā)中最流行的CommonJS,AMD,... 繼續(xù)閱讀 >

2019
01-03

ES6核心特性

前言ES6雖提供了許多新特性，但我們實(shí)際工作中用到頻率較高并不多，根據(jù)二八法則，我們應(yīng)該用百分之八十的精力和時(shí)間，好好專研這百分之二十核心特性，將會(huì)收到事半功倍的奇效！一、開(kāi)發(fā)環(huán)境配置這部分著重介紹：babel編譯ES6語(yǔ)法，如何用webpack實(shí)現(xiàn)模塊化。1.babel為啥需要babel？ES6提供了許多新特性，但并不是所有的瀏覽器都能夠完美支持。下圖是各個(gè)瀏覽器對(duì)ES6兼容性一覽表(以export為例)由上圖可知，有些瀏覽... 繼續(xù)閱讀 >

2019
01-03

淺探前端圖片優(yōu)化

性能優(yōu)化是前端開(kāi)發(fā)必不可少的一環(huán)，而圖片優(yōu)化又是性能優(yōu)化中必不可少的一環(huán)，但不知道有多少開(kāi)發(fā)者在網(wǎng)頁(yè)的開(kāi)發(fā)過(guò)程中會(huì)注意圖片的使用，圖片使用不當(dāng)可能會(huì)導(dǎo)致網(wǎng)頁(yè)加載卡頓、網(wǎng)頁(yè)加載速度慢等問(wèn)題，這篇文章將會(huì)將我以往對(duì)圖片的處理做個(gè)總結(jié)。不同格式圖片優(yōu)劣對(duì)比有人可能會(huì)問(wèn)說(shuō)好的圖片優(yōu)化呢？怎么說(shuō)到圖片格式了，其實(shí)在不同的場(chǎng)景選擇使用不同格式的圖片就是對(duì)圖片的一種優(yōu)化，這是最直接最重要但是最容易... 繼續(xù)閱讀 >

2018
12-13

2018年值得期待11個(gè)Javascript動(dòng)畫(huà)庫(kù)

在瀏覽網(wǎng)頁(yè)尋找一個(gè)整潔的Javascript動(dòng)畫(huà)庫(kù)時(shí)，我發(fā)現(xiàn)很多“recommended”的動(dòng)畫(huà)庫(kù)一段時(shí)間都沒(méi)有維護(hù)。經(jīng)過(guò)一些研究，我收集了11個(gè)最好的庫(kù)，在你的應(yīng)用程序中使用。我還添加了一些，主要是非維護(hù)的，有用的庫(kù)。使用UI組件時(shí)，您還可以使用Bit輕松地在不同應(yīng)用程序之間共享這些組件，而不是復(fù)制粘貼它們，從不同項(xiàng)目進(jìn)行更改并與其他項(xiàng)目協(xié)作。Bit-使用代碼組件共享和構(gòu)建_Bit可幫助您在項(xiàng)目和應(yīng)用程序之間... 繼續(xù)閱讀 >

2018
12-07

如何優(yōu)雅處理前端異常？

前端一直是距離用戶最近的一層，隨著產(chǎn)品的日益完善，我們會(huì)更加注重用戶體驗(yàn)，而前端異常卻如鯁在喉，甚是煩人。一、為什么要處理異常？異常是不可控的，會(huì)影響最終的呈現(xiàn)結(jié)果，但是我們有充分的理由去做這樣的事情。1.增強(qiáng)用戶體驗(yàn)；2.遠(yuǎn)程定位問(wèn)題；3.未雨綢繆，及早發(fā)現(xiàn)問(wèn)題；4.無(wú)法復(fù)線問(wèn)題，尤其是移動(dòng)端，機(jī)型，系統(tǒng)都是問(wèn)題；5.完善的前端方案，前端監(jiān)控系統(tǒng)；對(duì)于JS而言，我們面對(duì)的僅僅只是異常，異常的出現(xiàn)... 繼續(xù)閱讀 >

2018
12-03

jQuery的沒(méi)落和技術(shù)發(fā)展的一般規(guī)律

jQuery的成就jQuery是一個(gè)偉大的庫(kù)，它解決了domapi兼容的問(wèn)題，使得dom操作更簡(jiǎn)便它支持類似css選擇器的方式來(lái)選擇組件支持批量的操作數(shù)組中的元素，也叫隱式迭代支持鏈?zhǔn)讲僮鳎梢栽谝粭l語(yǔ)句中完成很復(fù)雜的邏輯有易于使用的插件擴(kuò)展機(jī)制deffered的異步方案比promise更早。等等。jquery可以說(shuō)在dom操作領(lǐng)域做的很棒了，幾乎統(tǒng)治了一個(gè)時(shí)代，甚至影響了w3c，domapi中的querySelector就有j... 繼續(xù)閱讀 >

2018
11-16

JavaScript 箭頭函數(shù)：適用與不適用場(chǎng)景

現(xiàn)代JavaScript中最引人注目的功能之一是引入了箭頭函數(shù)，用 => 來(lái)標(biāo)識(shí)。這種函數(shù)有兩大優(yōu)點(diǎn)–非常簡(jiǎn)潔的語(yǔ)法，和更直觀的作用域和 this的綁定。這些優(yōu)點(diǎn)有時(shí)導(dǎo)致箭頭函數(shù)比其他形式的函數(shù)聲明更受歡迎。例如，受歡迎的 airbnbeslint配置 會(huì)在您創(chuàng)建匿名函數(shù)時(shí)強(qiáng)制使用JavaScript箭頭函數(shù)。然而，就像工程中的任何東西一樣，箭頭函數(shù)優(yōu)點(diǎn)很明顯，同時(shí)也帶來(lái)了一些負(fù)面的東西。使用他們的時(shí)候... 繼續(xù)閱讀 >

2018
10-13

JavaScript和JSON創(chuàng)建者對(duì)JavaScript未來(lái)的展望

近期在倫敦召開(kāi)的FullStack大會(huì)上，BrendanEich和DouglasCrockford分別做演講探討了JavaScript的未來(lái)。Eich是JavaScript的創(chuàng)建者；Crockford是JSON的創(chuàng)建者，也是《JavaScript語(yǔ)言精粹》（“JavaScript:TheGoodParts”）一書(shū)的作者。Eich的大會(huì)演講主要聚焦于一些需迭代改進(jìn)的語(yǔ)言特性。Crockford引導(dǎo)聽(tīng)眾聚焦于JavaScript軟件工程的下一步發(fā)展，他稱之為一種全球分布的、安全的異步編程模式。Crockford指出，包... 繼續(xù)閱讀 >

2018
09-13

JavaScript性能優(yōu)化小竅門(mén)實(shí)例匯總

在眾多語(yǔ)言中，JavaScript已經(jīng)占有重要的一席之地，利用JavaScript我們可以做很多事情，應(yīng)用廣泛。在web應(yīng)用項(xiàng)目中，需要大量JavaScript的代碼，將來(lái)也會(huì)越來(lái)越多。但是由于JavaScript是一個(gè)作為解釋執(zhí)行的語(yǔ)言，而且它的單線程機(jī)制，決定了性能問(wèn)題是JavaScript的弱點(diǎn)，也是開(kāi)發(fā)者在寫(xiě)JavaScript的時(shí)候需注意的一個(gè)問(wèn)題。因?yàn)榻?jīng)常會(huì)遇到Web2.0應(yīng)用性能欠佳的問(wèn)題，主因就是JavaScript性能不足，導(dǎo)致瀏覽器... 繼續(xù)閱讀 >

2018
08-30

漂在舊金山

舊金山是美國(guó)房?jī)r(jià)最高的城市，因?yàn)樗驮诠韫扰赃叄写罅康目萍脊尽Ｃ磕辏瑹o(wú)數(shù)年輕人涌向那里，尋找自己的夢(mèng)想，結(jié)果形成了一個(gè)類似"北漂"的特殊群體。昨天，我讀到美國(guó)Salon雜志的一篇文章，關(guān)于舊金山普通程序員的生活。讀完很有感觸，就把它翻譯了出來(lái)。硅谷不僅僅是光鮮亮麗的科技巨頭，更多的是努力奮斗的普通程序員。================================漂在舊金山原載salon.com譯者... 繼續(xù)閱讀 >

2018
08-28

JavaScript 引擎基礎(chǔ)：原型優(yōu)化

本文就所有JavaScript引擎中常見(jiàn)的一些關(guān)鍵基礎(chǔ)內(nèi)容進(jìn)行了介紹——這不僅僅局限于V8引擎。作為一名JavaScript開(kāi)發(fā)者，深入了解JavaScript引擎是如何工作的將有助于你了解自己所寫(xiě)代碼的性能特征。在前一篇文章中，我們討論了JavaScript引擎是如何通過(guò)Shapes和InlineCaches來(lái)優(yōu)化對(duì)象與數(shù)組的訪問(wèn)的。本文將介紹優(yōu)化流程中的權(quán)衡與取舍，并對(duì)引擎在優(yōu)化原型屬性訪問(wèn)方面的工作進(jìn)行介紹。原文JavaScript... 繼續(xù)閱讀 >

2018
08-28

小程序開(kāi)發(fā)實(shí)踐總結(jié) - WEB前端

從微信發(fā)布小程序以來(lái)，各大公司紛紛跟進(jìn)都想從微信這個(gè)流量池里撈一杯羹。我司也不例外，我們整個(gè)前端團(tuán)隊(duì)這半年來(lái)基本上都是在開(kāi)發(fā)小程序。前前后后也開(kāi)發(fā)了四五個(gè)小程序了。總覺(jué)得要留下點(diǎn)什么，既是記錄那些年我們踩過(guò)的坑，也是希望大家別再掉坑。那些年我們踩過(guò)的坑css樣式不能引用本地圖片資源，只能引用線上資源( background-image )，引用本地圖片資源只能用 <image> 標(biāo)簽。{{}... 繼續(xù)閱讀 >

2018
08-21

JS傳參技巧總結(jié)

1.隱式創(chuàng)建html標(biāo)簽<inputtype="hidden"name="tc_id"value="{{tc_id}}">這種方法一般配合ajax，上面的value使用了模板引擎2.window['data']window['name']="thewindowobject";3.使用localStorage，cookie等存儲(chǔ)window.localStorage.setItem("name","xiaoyueyue");window.localStorage.getItem("name")特點(diǎn)：1、localStorage是持久存儲(chǔ)，不主動(dòng)刪除一直存在sessionStorage是臨時(shí)存儲(chǔ),關(guān)閉瀏覽... 繼續(xù)閱讀 >

2018
08-08

同樣是晶體管，為什么寄存器比內(nèi)存快呢？

計(jì)算機(jī)的存儲(chǔ)層次（memoryhierarchy）之中，寄存器（register）最快，內(nèi)存其次，最慢的是硬盤(pán)。同樣都是晶體管存儲(chǔ)設(shè)備，為什么寄存器比內(nèi)存快呢？MikeAsh寫(xiě)了一篇很好的解釋，非常通俗地回答了這個(gè)問(wèn)題，有助于加深對(duì)硬件的理解。下面就是我的簡(jiǎn)單翻譯。原因一：距離不同距離不是主要因素，但是最好懂，所以放在最前面說(shuō)。內(nèi)存離CPU比較遠(yuǎn)，所以要耗費(fèi)更長(zhǎng)的時(shí)間讀取。以3GHz的CPU為例，電流每... 繼續(xù)閱讀 >

2018
08-08

SVG 圖像入門(mén)教程

一、概述SVG是一種基于XML語(yǔ)法的圖像格式，全稱是可縮放矢量圖（ScalableVectorGraphics）。其他圖像格式都是基于像素處理的，SVG則是屬于對(duì)圖像的形狀描述，所以它本質(zhì)上是文本文件，體積較小，且不管放大多少倍都不會(huì)失真。SVG文件可以直接插入網(wǎng)頁(yè)，成為DOM的一部分，然后用JavaScript和CSS進(jìn)行操作。<!DOCTYPEhtml><html><head></head><body><svgid="mysvg"xmlns="http://www.w3.org/2000/sv... 繼續(xù)閱讀 >

2018
08-08

網(wǎng)上JS正則基礎(chǔ)教程沒(méi)有涉及的一些知識(shí)

正則起源最近看完了《精通正則表達(dá)式》，收獲頗豐，略過(guò)了一些晦澀難懂的理論部分，主要看了實(shí)戰(zhàn)和教程部分。下面引用一下百度百科里的內(nèi)容。正則表達(dá)式的“鼻祖”或許可一直追溯到科學(xué)家對(duì)人類神經(jīng)系統(tǒng)工作原理的早期研究。美國(guó)新澤西州的WarrenMcCulloch和出生在美國(guó)底特律的WalterPitts這兩位神經(jīng)生理方面的科學(xué)家，研究出了一種用數(shù)學(xué)方式來(lái)描述神經(jīng)網(wǎng)絡(luò)的新方法，他們創(chuàng)造性地將神經(jīng)系統(tǒng)中的神經(jīng)... 繼續(xù)閱讀 >

2018
08-08

重讀 ES6 - async+await 同步/異步方案

異步編程一直是JavaScript編程的重大事項(xiàng)。關(guān)于異步方案，ES6先是出現(xiàn)了基于狀態(tài)管理的Promise，然后出現(xiàn)了Generator函數(shù)+co函數(shù)，緊接著又出現(xiàn)了ES7的async+await方案。本文力求以最簡(jiǎn)明的方式來(lái)疏通async+await。異步編程的幾個(gè)場(chǎng)景先從一個(gè)常見(jiàn)問(wèn)題開(kāi)始：一個(gè)for循環(huán)中，如何異步的打印迭代順序？我們很容易想到用閉包，或者ES6規(guī)定的let塊級(jí)作用域來(lái)回答這個(gè)問(wèn)題。for(let... 繼續(xù)閱讀 >

2018
08-08

javascript引擎工作原理

1.什么是JavaScript解析引擎？簡(jiǎn)單地說(shuō)，JavaScript解析引擎就是能夠“讀懂”JavaScript代碼，并準(zhǔn)確地給出代碼運(yùn)行結(jié)果的一段程序。比方說(shuō)，當(dāng)你寫(xiě)了 vara=1+1; 這樣一段代碼，JavaScript引擎做的事情就是看懂（解析）你這段代碼，并且將a的值變?yōu)?。學(xué)過(guò)編譯原理的人都知道，對(duì)于靜態(tài)語(yǔ)言來(lái)說(shuō)（如Java、C++、C），處理上述這些事情的叫編譯器（Compiler），相應(yīng)地對(duì)于JavaScript這樣的... 繼續(xù)閱讀 >

2018
08-08

CSS 的空格處理

一、空格規(guī)則HTML代碼的空格通常會(huì)被瀏覽器忽略。<p>??hello??world??</p>上面是一行HTML代碼，文字的前部、內(nèi)部和后部各有兩個(gè)空格。為了便于識(shí)別，這里使用半圓形符號(hào)?表示空格。瀏覽器的輸出結(jié)果如下。helloworld可以看到，文字的前部和后部的空格都會(huì)忽略，內(nèi)部的連續(xù)空格只會(huì)算作一個(gè)。這就是瀏覽器處理空格的基本規(guī)則。如果希望空格原樣輸出，可以使用<pre>標(biāo)簽。<pre>??hello??world??</pre>另... 繼續(xù)閱讀 >

2018
07-10

Web Worker 使用教程

一、概述JavaScript語(yǔ)言采用的是單線程模型，也就是說(shuō)，所有任務(wù)只能在一個(gè)線程上完成，一次只能做一件事。前面的任務(wù)沒(méi)做完，后面的任務(wù)只能等著。隨著電腦計(jì)算能力的增強(qiáng)，尤其是多核CPU的出現(xiàn)，單線程帶來(lái)很大的不便，無(wú)法充分發(fā)揮計(jì)算機(jī)的計(jì)算能力。WebWorker的作用，就是為JavaScript創(chuàng)造多線程環(huán)境，允許主線程創(chuàng)建Worker線程，將一些任務(wù)分配給后者運(yùn)行。在主線程運(yùn)行的同時(shí)，Worker線程在后臺(tái)運(yùn)... 繼續(xù)閱讀 >

2018
06-20

JavaScript 的 this 原理

一、問(wèn)題的由來(lái)學(xué)懂JavaScript語(yǔ)言，一個(gè)標(biāo)志就是理解下面兩種寫(xiě)法，可能有不一樣的結(jié)果。varobj={foo:function(){}};varfoo=obj.foo;//寫(xiě)法一obj.foo()//寫(xiě)法二foo()上面代碼中，雖然obj.foo和foo指向同一個(gè)函數(shù)，但是執(zhí)行結(jié)果可能不一樣。請(qǐng)看下面的例子。varobj={foo:function(){console.log(this.bar)},bar:1};varfoo=obj.foo;varbar=2;obj.foo()//1foo()//2這種差異的原因，就在于... 繼續(xù)閱讀 >

2018
06-20

深入理解js的同步與異步

JavaScript語(yǔ)言的一大特點(diǎn)就是單線程，也就是說(shuō)，同一個(gè)時(shí)間只能做一件事。那么，為什么JavaScript不能有多個(gè)線程呢？這樣能提高效率啊。JavaScript的單線程，與它的用途有關(guān)。作為瀏覽器腳本語(yǔ)言，JavaScript的主要用途是與用戶互動(dòng)，以及操作DOM。這決定了它只能是單線程，否則會(huì)帶來(lái)很復(fù)雜的同步問(wèn)題。比如，假定JavaScript同時(shí)有兩個(gè)線程，一個(gè)線程在某個(gè)DOM節(jié)點(diǎn)上添加內(nèi)容，另一個(gè)線程刪除了這個(gè)節(jié)點(diǎn)，這時(shí)瀏覽器... 繼續(xù)閱讀 >