目錄

• 使用瀏覽器執(zhí)行前端 JavaScript
• JavaScript 數(shù)據(jù)類型
• JavaScript 編程邏輯
• JavaScript 打印數(shù)據(jù)
• JavaScript 框架
• JavaScript DOM 和 BOM
• JavaScript 混淆
• 使用 Node.js 執(zhí)行后端 JavaScript
• Node.js 模塊
• 參考資料

使用瀏覽器執(zhí)行前端 JavaScript

大多數(shù)瀏覽器通過 F12 可以調(diào)出調(diào)試窗口殉农，如圖所示。在調(diào)試窗口中可以執(zhí)行相關(guān)代碼夏哭。JS 是一種解釋性語言，由解釋器對(duì)代碼進(jìn)行解析品擎。

console.log("Hello World!")

[圖片上傳失敗...(image-686ed8-1561872071507)]

在瀏覽器中蛮原，會(huì)集成 JS 的解析引擎仰剿，不同的瀏覽器擁有不同的解析引擎创淡，這就使得 JS 的執(zhí)行在不同瀏覽器上有不同的解釋效果。

嵌入在 HTML 中的 JS 代碼通常有以下幾種形式：

直接插入代碼塊
<script>console.log('Hello World!');</script>

加載外部 JS 文件
<script src="Hello.js"></script>

使用 HTML 標(biāo)簽中的事件屬性
<a href="javascript:alert('Hello')"></a>

JavaScript 數(shù)據(jù)類型

作為弱類型的語言南吮，JS 的變量聲明不需要指定數(shù)據(jù)類型：

var pi=3.14;
var pi='ratio of the circumference of a circle to its diameter';

當(dāng)然琳彩，可以通過“ new ”來聲明變量類型：

var pi=new String;
var pi=new Number;
var pi=new Boolean;
var pi=new Array;
var pi=new Object;

上一個(gè)示例也展示了 JS 的數(shù)據(jù)類型，分別是字符串、數(shù)字露乏、布爾值碧浊、數(shù)組和對(duì)象。

有兩個(gè)特殊的類型是 Undefined 和 Null瘟仿，形象一點(diǎn)區(qū)分辉词，前者表示有坑在但坑中沒有值，后者表示沒有坑猾骡。另外，所有 JS 變量都是對(duì)象敷搪，但是需要注意的是兴想，對(duì)象聲明的字符串和直接賦值的字符串并不嚴(yán)格相等。

JavaScript 編程邏輯

基礎(chǔ)

JS 語句使用分號(hào)分隔赡勘。

邏輯語句

if 條件語句：

if (condition)
{
  代碼塊
}
else
{
  代碼塊
}

switch 條件語句：

switch(n)
{
  case 1:
    代碼塊
    break;
  case 2:
    代碼塊
    break;
  default:
    代碼塊
}

for/for in 循環(huán)語句：

for (代碼1嫂便；代碼2；代碼3)
{
  代碼塊
}
for (x in xs)
{
  代碼塊
}

while/do while 循環(huán)語句：

while (條件)
{
  代碼塊
}
do
{
  代碼塊
}
while (條件);

JavaScript 打印數(shù)據(jù)

在瀏覽器中調(diào)試代碼時(shí)闸与，經(jīng)常用到的手段是打印變量毙替。

[圖片上傳失敗...(image-bf23c3-1561872071507)]

[圖片上傳失敗...(image-902050-1561872071507)]

JavaScript 框架

JS 同樣有許多功能強(qiáng)大的框架。大多數(shù)的前端 JS 框架使用外部引用的方式將 JS 文件引入到正在編寫的文檔中践樱。

jQuery

jQuery 封裝了常用的 JS 功能厂画，通過選擇器的機(jī)制來操縱 DOM 節(jié)點(diǎn)，完成復(fù)雜的前端效果展示拷邢。

Angular

實(shí)現(xiàn)了前端的 MVC 架構(gòu)袱院，通過動(dòng)態(tài)數(shù)據(jù)綁定來簡化數(shù)據(jù)轉(zhuǎn)遞流程。

React

利用組件來構(gòu)建前端UI的框架

Vue

MVVM 構(gòu)架的前端庫瞭稼，理論上講忽洛，將它定義為數(shù)據(jù)驅(qū)動(dòng)、組件化的框架环肘，但這些概念也可能適用于其他框架欲虚，所以可能只有去真正使用到所有框架才能領(lǐng)悟到它們之間的區(qū)別。

其他

還有許許多多針對(duì)不同功能的框架悔雹，比如針對(duì)圖表可視化复哆、網(wǎng)絡(luò)信息傳遞或者移動(dòng)端優(yōu)化等等。

雙向數(shù)據(jù)綁定

傳統(tǒng)基于 MVC 的架構(gòu)的思想是數(shù)據(jù)單向的傳送到 View 視圖中進(jìn)行顯示荠商，但是有時(shí)我們還需要將視圖層的數(shù)據(jù)傳輸回模型層寂恬，這部分的功能就由前端 JS 來接手，因此許多近幾年出現(xiàn)的新框架都使用數(shù)據(jù)雙向綁定來完成MVVM的新構(gòu)架莱没，這就帶給了用戶更多的權(quán)限接觸到程序的編程邏輯初肉，進(jìn)而產(chǎn)生一些安全問題，比較典型的就是許多框架曾經(jīng)存在的模板注入問題饰躲。

JavaScript DOM 和 BOM

JavaScript 混淆

由于前端代碼的可見性盛正，出于知識(shí)產(chǎn)權(quán)或者其他目的，JS 代碼通過混淆的方法使得自己既能被瀏覽器執(zhí)行屑埋，又難以被人為解讀豪筝。常見的混淆方法有重命名變量名和函數(shù)名、擠壓代碼摘能、拼接字符续崖、使用動(dòng)態(tài)執(zhí)行函數(shù)在函數(shù)與字符串之間進(jìn)行替換等。下面對(duì)比代碼混淆前后的差異团搞。

混淆前：

console.log('Hello World!');

混淆后：

console["\x6c\x6f\x67"]('\x48\x65\x6c\x6c\x6f \x57\x6f\x72\x6c\x64\x21');

更加復(fù)雜的混淆后：

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('1.0(\'3 2!\');',4,4,'log|console|World|Hello'.split('|'),0,{}))

由于之前提到的特性严望，無論混淆有多么復(fù)雜，最終它都能夠在瀏覽器中被解釋執(zhí)行逻恐。

使用 Node.js 執(zhí)行后端 JavaScript

在 安裝完成 Node.js 后著蟹，我們可以嘗試編寫第一個(gè)后端 JS 程序。

1.打開文本編輯器梢莽，寫入

console.log("Hello World");

并保存為 hello.js

2.使用

node hello.js

來執(zhí)行文件萧豆。

[圖片上傳失敗...(image-10fbae-1561872071507)]

Node.js 模塊

Node.js 同樣通過豐富的模塊提供強(qiáng)大的功能，模塊使用 npm 進(jìn)行管理昏名。

• events：事件模塊涮雷，提供事件觸發(fā)和事件監(jiān)聽功能
• util：核心功能模塊，用于彌補(bǔ)核心 JS 功能的不足
• fs：文件操作模塊轻局，提供文件操作 API
• http：Web 協(xié)議模塊洪鸭，提供 Web 協(xié)議交互功能
• express：Web 框架，用于快速構(gòu)建 Web 應(yīng)用服務(wù)
• vm：沙箱模塊仑扑，提供干凈的上下文環(huán)境

后端 JS 就會(huì)存在其他語言后端所同樣存在安全問題览爵，包括基礎(chǔ)的 Web 攻擊、服務(wù)端模板注入镇饮、沙箱逃逸蜓竹、內(nèi)存溢出等問題。

參考資料

• JavaScript 教程
• Node.js 教程
• 淺談 Node.js 安全

來源：GitHub