首頁

詳解JS 變量、作用域及內(nèi)存

藍(lán)藍(lán)設(shè)計的小編

基本類型值有:undefined,NUll,Boolean,Number和String,這些類型分別在內(nèi)存中占有固定的大小空間,他們的值保存在??臻g,我們通過按值來訪問的。

 

1)值類型:數(shù)值、布爾值、null、undefined。
2)引用類型:對象、數(shù)組、函數(shù)。
 
如果賦值的是引用類型的值,則必須在堆內(nèi)存中為這個值分配空間。由于這種值的大小不固定(對象有很多屬性和方法),因此不能把他們保存到棧內(nèi)存中。但內(nèi)存地址大小是固定的,因此可以將內(nèi)存地址保存在棧內(nèi)存中。
 
<script type="text/javascript”>
var box = new Object();  //創(chuàng)建一個引用類型
var box = "trigkit4";   //基本類型值是字符串
box.age = 21;    //基本類型值添加屬性很怪異,因為只有對象才可以添加屬性。
alert(box.age);  //不是引用類型,無法輸出;
</script>
 

如何讀懂并寫出裝逼的函數(shù)式代碼

藍(lán)藍(lán)設(shè)計的小編

今天在微博上看到了 有人分享了下面的這段函數(shù)式代碼,我把代碼貼到下面,不過我對原來的代碼略有改動,對于函數(shù)式的版本,咋一看,的確令人非常費(fèi)解,仔細(xì)看一下,你可能就暈掉了,似乎完全就是天書,看上去非常裝逼,哈哈。不過,我感覺解析那段函數(shù)式的代碼可能會一個比較有趣過程,而且,我以前寫過一篇《函數(shù)式編程》的入門式的文章,正好可以用這個例子,再升華一下原來的那篇文章,順便可以向大家更好的介紹很多基礎(chǔ)知識,所以寫下這篇文章。

先看代碼

這個代碼平淡無奇,就是從一個數(shù)組中找到一個數(shù),O(n)的算法,找不到就返回 null。

下面是正常的 old-school 的方式。不用多說。

//正常的版本 function find (x, y) { for ( let i = 0; i < x.length; i++ ) { if ( x[i] == y ) return i;
  } return null;
} let arr = [0,1,2,3,4,5] console.log(find(arr, 2)) console.log(find(arr, 8))

HTML5手勢檢測原理和實(shí)現(xiàn)

藍(lán)藍(lán)設(shè)計的小編

前言

隨著 Hybrid 應(yīng)用的豐富,HTML5 工程師們已經(jīng)不滿足于把桌面端體驗簡單移植到移動端,他們覬覦移動原生應(yīng)用人性化的操作體驗,特別是原生應(yīng)用與生俱來的豐富的手勢系統(tǒng)。HTML5 沒有提供開箱即用的手勢系統(tǒng),但是提供了更底層一些的對 touch 事件的監(jiān)聽?;诖?,我們可以做出自己的手勢庫。

手勢

常用的 HTML5 手勢可以分為兩類,單點(diǎn)手勢和兩點(diǎn)手勢。單點(diǎn)手勢有 tap(單擊),double tap(雙擊),long tap(長按),swipe(揮),move(移動)。兩點(diǎn)手勢有 pinch(縮放),rotate(旋轉(zhuǎn))。

接下來我們實(shí)現(xiàn)一個檢測這些手勢的 javaScript 庫,并利用這個手勢庫做出炫酷的交互效果。

1.jpg

2016年7個JavaScript框架

藍(lán)藍(lán)設(shè)計的小編

當(dāng)涉及到Web開發(fā)時,JavaScript框架往往是一些開發(fā)人員和企業(yè)的平臺??赡埽阌袡C(jī)會嘗試過一兩個的JavaScript框架,但你仍然有點(diǎn)不確定哪個才是最佳的最值得掌握的,或者哪個值得你建議你的開發(fā)人員選擇用于下一個web開發(fā)項目。

JavaScript正在以驚人的速度前進(jìn),并且添加新的技能到你的存儲庫變得有不斷的壓力。為了做到這一點(diǎn),知道和了解更多的JavaScript框架在現(xiàn)在看來是必要的。在ValueCoders進(jìn)行了徹底的研究后,我們?nèi)雵似渲衅邆€框架,它們是:

1.AngularJS 2.0&1.x

在最受期待的AngularJS 2.0正式發(fā)布之后,框架的普及已經(jīng)達(dá)到了一個新的水平。然而,如果你不確定的話,跳到新版本仍然是一個冒險的決定。讓我們通過這個流程圖來幫助你做出決定:

1.png

JavaScript 數(shù)組中的 indexOf 方法詳解

藍(lán)藍(lán)設(shè)計的小編

最近項目遇到一個小問題代碼我會簡化成小例子展示給大家。

用心看到最后會有收獲哈,基礎(chǔ)扎實(shí)的童鞋可以直接跳到數(shù)組類型使用。

說到 indexOf 大家并不陌生,判斷字符串是否包涵子字符串時特別常用(正則不熟練同學(xué)的利器)。

String 類型的使用

溫習(xí)一下大家熟知的字符串用法,舉個例子

let str = 'orange';

str.indexOf('o'); //0 str.indexOf('n'); //3 str.indexOf('c'); //-1

這里 0 和 3 分別是 o 和 n 在字符串中出現(xiàn)的位置。起始下標(biāo)是 0。而 -1 代表未匹配。

JavaScript arguments 對象詳解

藍(lán)藍(lán)設(shè)計的小編

1. 什么是 arguments

MDN 上解釋:

arguments 是一個類數(shù)組對象。代表傳給一個function的參數(shù)列表。

我們先用一個例子直觀了解下 JavaScript 中的 arguments 長什么樣子。

function printArgs() { console.log(arguments);
}

printArgs("A", "a", 0, { foo: "Hello, arguments" });

執(zhí)行結(jié)果是:

jQuery XML 解析器和搜索機(jī)制

藍(lán)藍(lán)設(shè)計的小編

介紹

這里所描述的過程將使你能夠創(chuàng)建一個簡單的基于jQuery / XML的解析器和搜索機(jī)制。此過程將通過一個AJAX請求檢索XML,然后在jQuery中分析數(shù)據(jù),為搜索機(jī)制做準(zhǔn)備。該解決方案將基于不區(qū)分大小寫的全部或部分關(guān)鍵字匹配地返回結(jié)果。來自于關(guān)鍵字搜索的返回結(jié)果設(shè)置將被格式化為一個直接鏈接到相應(yīng)網(wǎng)站的超鏈接。jQuery搜索方法非常類似于Mike Endale的一個項目,不過增加了一個DOM解析器,正則表達(dá)式以及結(jié)果集分組。

背景

客戶端需要一個簡單的搜索工具來查找基于關(guān)鍵字搜索的本地內(nèi)部網(wǎng)站。關(guān)鍵字搜索必須不區(qū)分大小寫,并允許返回部分匹配的結(jié)果。歸咎于客戶端內(nèi)容管理系統(tǒng)的架構(gòu),因此(SharePoint)只能執(zhí)行客戶端腳本。其解決方案的另一個障礙是,源數(shù)據(jù)將來自多個源。數(shù)據(jù)被存儲在多個Excel電子表格,CSV文件和MS Access數(shù)據(jù)庫內(nèi)。這就對我們提出了這樣的需要:開發(fā)具有一系列查詢和一個宏的Access解決方案,充當(dāng)可合并、擦洗,并最后格式化數(shù)據(jù)作為XML輸出的偽ETL。對于這個解決方案的目的,我們將詳細(xì)介紹JavaScript XML分析器的設(shè)計,而不是偽Access ETL宏工具的設(shè)計。

使用代碼

該解決方案的做法是利用一個簡單的基于JavaScript / XML的搜索來發(fā)送數(shù)據(jù)結(jié)果到HTML / JavaScript前端。前端將引用腳本:jQuery,XML和CSS文件。XML格式將因為它的可讀性和它是數(shù)據(jù)交換行業(yè)標(biāo)準(zhǔn)格式之一的事實(shí)而被使用。 XML數(shù)據(jù)將通過使用AJAX的客戶端jQuery解析,并通過Internet Explorer 11呈現(xiàn)。

解決方案將使用RegExp對象來處理關(guān)鍵字匹配,驗證和特殊字符處理。RegExp對象字符串將檢查危險語法從而提高解決方案的穩(wěn)定性和整體可用性。

我們將默認(rèn)使用JavaScript分組功能來返回匹配結(jié)果作為折疊的紀(jì)錄集。折疊的記錄集線項目將被URL鏈接到相關(guān)的Project Workspace網(wǎng)站。在擴(kuò)展的組記錄集下,結(jié)果將存在于相關(guān)的子記錄中,當(dāng)通過On Click事件展開的時候。

選擇 Reac??tJS 的五大理由

藍(lán)藍(lán)設(shè)計的小編

ReactJS是一個開源的JavaScript庫,并且由Facebook和Instagram這樣的頂尖IT企業(yè)以及開發(fā)者社區(qū)所維護(hù)。該框架廣泛使用于為web應(yīng)用程序開發(fā)用戶界面的時候。這個特殊的框架被發(fā)明時帶有這樣一個目的:

“構(gòu)建數(shù)據(jù)隨著時間的推移一次又一次改變的大型應(yīng)用程序?!?

我們經(jīng)常使用的工具有很多,但只有少數(shù)徹底改變了我們的工作流程。ReactJS就是其中之一。隨著現(xiàn)在可用框架變得越來越多,我們很難找到一個最終不會窮途末路的框架。這就是為什么在ValueCoders我們建議去往React。

01.png

能用HTML/CSS解決的問題就不要使用JS

藍(lán)藍(lán)設(shè)計的小編

為什么說能使用html/css解決的問題就不要使用JS呢?兩個字,因為簡單。簡單就意味著更快的開發(fā)速度,更小的維護(hù)成本,同時往往具有更好的體驗,下面介紹幾個實(shí)例。

1. 導(dǎo)航高亮

導(dǎo)航高亮是一種很常見的問題,包括當(dāng)前頁面的導(dǎo)航在菜單里面高亮和hover時高亮。你可以用js控制,但是用一點(diǎn)CSS技巧就可以達(dá)到這個目的,不需要使用JS。

1.png

2.png

在正常態(tài)時,每個導(dǎo)航的默認(rèn)樣式為:

JavaScript 閉包的底層運(yùn)行機(jī)制

藍(lán)藍(lán)設(shè)計的小編

當(dāng)JavaScript在運(yùn)行的時候,它需要一些空間讓它來存儲本地變量(local variables)。我們將這些空間稱為作用域?qū)ο螅⊿cope object),有時候也稱作LexicalEnvironment。例如,當(dāng)你調(diào)用函數(shù)時,函數(shù)定義了一些本地變量,這些變量就被存儲在一個作用域?qū)ο笾?。你可以將作用域函?shù)想象成一個普通的JavaScript對象,但是有一個很大的區(qū)別就是你不能夠直接在JavaScript當(dāng)中直接獲取這個對象。你只可以修改這個對象的屬性,但是你不能夠獲取這個對象的引用。

作用域?qū)ο蟮母拍钍沟肑avaScript和C、C++非常不同。在C、C++中,本地變量被保存在棧(stack)中。在JavaScript中,作用域?qū)ο笫窃诙阎斜粍?chuàng)建的(至少表現(xiàn)出來的行為是這樣的),所以在函數(shù)返回后它們也還是能夠被訪問到而不被銷毀。

日歷

鏈接

個人資料

存檔