pgpc接口如何添加

書名： JavaScript前端開發(fā)模塊化教程
作者名：趙建保
本章字?jǐn)?shù)： 2014字
更新時(shí)間： 2019-12-20 19:23:29

1.4 任務(wù)實(shí)施

1.4.1 安裝和配置Visual Studio Code

直接訪問Visual Studio Code官網(wǎng)（網(wǎng)址https://code.visualstudio.com/Download），或者在搜索引擎中搜索關(guān)鍵詞“vscode”，打開官方下載頁面，如圖1-7所示，根據(jù)計(jì)算機(jī)操作系統(tǒng)類型選擇相應(yīng)版本，記住下載的安裝文件保留的路徑。

圖1-7 下載Visual Studio Code編輯器

打開下載的安裝文件所在文件夾，雙擊下載的安裝文件，根據(jù)提示執(zhí)行安裝操作，如圖1-8所示，默認(rèn)安裝路徑為“C:\Program Files\Microsoft VS Code”。

圖1-8 Visual Studio Code安裝

啟動(dòng)Visual Studio Code編輯器，編輯器左邊顯示了所有文件夾和文件，右邊顯示了已經(jīng)打開的文件內(nèi)容，Visual Studio Code界面如圖1-9所示。Visual Studio Code會(huì)記錄上次編輯器關(guān)閉時(shí)文件夾、文件、已經(jīng)打開的文件等狀態(tài)信息。

圖1-9 啟動(dòng)Visual Studio Code

1.4.2 安裝常用擴(kuò)展

1. 安裝/卸載擴(kuò)展（插件）

從菜單中選擇【查看】→【擴(kuò)展】菜單項(xiàng)（快捷鍵：Ctrl+Shift+X），或單擊左側(cè)邊框的擴(kuò)展圖標(biāo)按鈕 49916-00-36-2 進(jìn)入擴(kuò)展視圖界面安裝/卸載擴(kuò)展，在頂部搜索框中輸入需要安裝的擴(kuò)展插件，找到之后在擴(kuò)展插件后面的選項(xiàng)中單擊【安裝】按鈕即可。卸載擴(kuò)展只需要單擊【卸載】按鈕即可。

選擇擴(kuò)展（插件）可以根據(jù)擴(kuò)展的用途來搜索，帶snippets一般是代碼提示類擴(kuò)展，帶viewer一般是代碼運(yùn)行預(yù)覽類擴(kuò)展，帶support一般是代碼語言支持，帶document一般是參考文檔類擴(kuò)展，帶format一般是代碼格式化整理擴(kuò)展，當(dāng)然擴(kuò)展兼有多項(xiàng)功能，注意閱讀官方文檔。

擴(kuò)展下載安裝完畢之后需要單擊【啟用】才生效，有些擴(kuò)展需要重啟編輯器才生效。

2. 常用擴(kuò)展介紹

HTML Snippets為HTML文檔提供代碼提示功能，支持HTML5。VS colorPicker為CSS文檔和HTML文檔提供顏色選擇，當(dāng)輸入“#”后會(huì)出現(xiàn)顏色選擇器浮窗，單擊相應(yīng)顏色之后會(huì)插入文檔中，默認(rèn)用十六進(jìn)制表示。live HTML Previewer為HTML文檔提供預(yù)覽功能，需要用命令或者快捷鍵調(diào)出，會(huì)在編輯器中新增一列，用于運(yùn)行HTML文件。按F1鍵在命令框中輸入“Show sidepreview”，新增一列顯示HTML，能邊寫邊看到效果，實(shí)時(shí)預(yù)覽。可以在HTML文檔中單擊鼠標(biāo)右鍵，選擇【Open in browser】菜單項(xiàng)，系統(tǒng)會(huì)默認(rèn)在瀏覽器中打開頁面，該模式下不能提供實(shí)時(shí)預(yù)覽，保存時(shí)不自動(dòng)刷新瀏覽器。

1.4.3 Chrome瀏覽器

Chrome下載與安裝的方法是，通過搜索引擎或直接輸入Chrome在線安裝版本鏈接地址：https://www.google.cn/chrome/，如圖1-10所示，下載后按提示安裝即可。

圖1-10 在線下載安裝Chrome瀏覽器

1.4.4 Chrome開發(fā)者工具

Chrome瀏覽器為開發(fā)者提供了強(qiáng)大的開發(fā)調(diào)試工具，按Ctrl+Shift+I組合鍵或F12鍵，或者在瀏覽器窗口單擊鼠標(biāo)右鍵，再從彈出的菜單中選擇【檢查】命令均可打開開發(fā)者工具面板。Elements用于查看整個(gè)頁面DOM、編輯HTML、查看元素CSS和查找元素等；Console控制臺(tái)用于JavaScript開發(fā)調(diào)試，如圖1-11所示；Sources列舉了頁面加載圖片、CSS、JavaScript等資源來源；Network用于網(wǎng)頁性能和優(yōu)化分析，包括資源響應(yīng)時(shí)間、等待時(shí)間、狀態(tài)碼、MINEType、資源大小等；Timeline用于查看渲染進(jìn)程；Profiles用于檢測(cè)CPU占用程度、堆棧申請(qǐng)的內(nèi)存等；Application用于管理LocalStorage、Session Storage和Cookies。

圖1-11 Chrome瀏覽器Console

1.4.5 安裝Node.js

可以不使用Apache服務(wù)器，直接使用Node.js來搭建JavaScript服務(wù)器。直接訪問官網(wǎng)地址https://nodejs.org/en/，或者在搜索引擎中搜索關(guān)鍵詞“node.js”，打開官方下載頁面，如圖1-12所示，下載最新版本，要記住下載的安裝文件保留的路徑。

圖1-12 Node.js官方網(wǎng)站

打開下載的文件所在文件夾，雙擊下載的安裝文件，根據(jù)提示執(zhí)行安裝操作，默認(rèn)安裝路徑為“C:\ProgramFiles\nodejs”，NPM（NodePackageManager），即Node.js模塊管理工具會(huì)隨同Node.js一起安裝。打開終端驗(yàn)證安裝是否成功，按Win+R組合鍵，彈出“運(yùn)行”對(duì)話框，在文件輸入框中輸入“cmd”，單擊【確定】按鈕，彈出命令行窗口，輸入命令“node -v”，安裝成功則顯示當(dāng)前Node.js版本信息。

1.4.6 安裝與配置http-server

打開命令行窗口，使用NPM安裝http-server的命令是“npm install http-server -g”，-g選項(xiàng)確保安裝成全局性應(yīng)用，可以在任意的目錄使用。安裝完畢后，可以直接進(jìn)入項(xiàng)目文件，按住Shift鍵在空白處單擊鼠標(biāo)右鍵，打開命令窗口，通過命令行啟動(dòng)HTTP服務(wù)器，啟動(dòng)命令參數(shù)見核心知識(shí)部分http-server介紹。

1.4.7 編寫HTML和CSS

在計(jì)算機(jī)驅(qū)動(dòng)器D盤中建立任務(wù)文件夾“wwwroot”，啟動(dòng)Visual Studio Code，選擇【文件】→【打開文件夾】菜單項(xiàng)，彈出“打開文件夾”對(duì)話框，選擇“wwwroot”作為項(xiàng)目文件夾。新建文件夾“table-hover”，在該文件夾中單擊 49916-00-38-2 按鈕新建文件，輸入文件名“table-hover.html”，按Enter鍵在代碼編輯器窗口左側(cè)打開該文件。輸入“HTML:5”，在Emmet代碼提示下按Enter鍵擴(kuò)展生成HTML5文檔代碼，修改title標(biāo)簽標(biāo)題為“表格行懸停提示效果”，在body開始標(biāo)簽后輸入“table>thead>tr>td{序號(hào)}+td{學(xué)號(hào)}+td{姓名}+td{手機(jī)電話}+td{QQ號(hào)碼}”，在Emmet縮寫提示下按Enter鍵擴(kuò)展代碼，生成表格標(biāo)題行thead，再在</thead>標(biāo)簽后插入空行，輸入HTML代碼縮寫“tbody>（tr>td{$}+td{20155531$$}+td{前端工程師$}+td{1356699$$$$}+td{449846574$}）*5”，其中$為Emmet自增變量，在Emmet縮寫提示下按Enter鍵擴(kuò)展代碼，生成5行表格內(nèi)容區(qū)tbody，給table標(biāo)簽添加id屬性，設(shè)置屬性值為“table-hover”，代碼如下：

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>表格行懸停提示效果</title> 
    <style> 
          #table-hover { 
                width: 80%; 
                margin: 10px auto; 
                border-collapse: collapse; 
          } 
 
          thead { 
                font-weight: bold; 
                background-color: #f5f5f5; 
          } 
 
          td { 
                border: 1px solid #333; 
                padding: 6px; 
                text-align: center; 
          } 
     </style> 
</head> 
 
<body> 
     <table id="table-hover"> 
           <thead> 
                 <tr> 
                     <td> 序號(hào)</td> 
                     <td> 學(xué)號(hào)</td> 
                     <td> 姓名</td> 
                     <td> 手機(jī)電話</td> 
                     <td>QQ號(hào)碼</td> 
                 </tr> 
           </thead> 
           <tbody> 
               <tr> 
                     <td>1</td> 
                     <td>2015553101</td> 
                     <td> 前端工程師1</td> 
                     <td>13566990001</td> 
                     <td>4498465741</td> 
               </tr> 
               <tr> 
                     <td>2</td> 
                     <td>2015553102</td> 
                     <td> 前端工程師2</td> 
                     <td>13566990002</td> 
                     <td>4498465742</td> 
               </tr> 
               <tr> 
                     <td>3</td> 
                     <td>2015553103</td> 
                     <td> 前端工程師3</td> 
                     <td>13566990003</td> 
                     <td>4498465743</td> 
               </tr> 
               <tr> 
                     <td>4</td> 
                     <td>2015553104</td> 
                     <td> 前端工程師4</td> 
                     <td>13566990004</td> 
                     <td>4498465744</td> 
              </tr> 
              <tr> 
                     <td>5</td> 
                     <td>2015553105</td> 
                     <td> 前端工程師5</td> 
                     <td>13566990005</td> 
                     <td>4498465745</td> 
              </tr> 
          </tbody> 
      </table> 
</body> 
 
</html>

1.4.8 編寫JavaScript

在</body>標(biāo)記前面插入script標(biāo)簽，代碼如下：

<script> 
var trs = document.getElementById("table-hover").getElementsByTagName("tr"); 
for (var row = 0, len = trs.length; row < len; row++) { 
      trs[row].addEventListener("mouseover", function () { 
            this.style.backgroundColor = "#f5f5f5"; 
            this.style.fontWeight = "bold" 
      }); 
      trs[row].addEventListener("mouseout", function () { 
            this.style.backgroundColor = ""; 
            this.style.fontWeight = "normal"; 
      }); 
} 
 
</script>

1.4.9 測(cè)試頁面

可以直接在本地測(cè)試頁面，也可以通過http-server來測(cè)試。具體方法為，打開命令行窗口，應(yīng)用DOS命令cd進(jìn)入d:\wwwroot目錄，輸入“http-sever-p80-o”啟動(dòng)HTTP服務(wù)器，并打開瀏覽器窗口，單擊table-hover.html文件測(cè)試頁面，頁面效果如圖1-13所示。

圖1-13 表格行懸停提示效果

官术网_书友最值得收藏!

JavaScript前端開發(fā)模塊化教程