《Web應用開發(fā)實戰(zhàn)》課件-單元2 模塊化開發(fā)

2.1模塊化開發(fā)引入通過這兩幅圖片，你能聯(lián)想到什么樣的詞匯？目錄01模塊的定義02模塊化規(guī)范CommonJS模塊的定義什么是模塊？模塊通常是指編程語言所提供的代碼組織機制，利用此機制可將程序拆解為獨立且通用的代碼單元。模塊化是一種設計思想，利用模塊化可以把一個非常復雜的系統(tǒng)結構細化到具體的功能點，每個功能點看做一個模塊，然后通過某種規(guī)則把這些小的模塊組合到一起，構成模塊化系統(tǒng)。什么是模塊化？模塊化的定義靈活架構，焦點分離多人協(xié)作互不干擾方便模塊間組合、分解（代碼重用）命名空間獨立，維護成本低2重用代碼，生產(chǎn)效率高1可分單元測試方便單個模塊功能調(diào)試、升級模塊化規(guī)范CommonJS核心思想“文件即模塊”模塊關鍵字有：--模塊標識（module）--模塊導出（exports）--模塊引用（require）屬性私有在模塊中默認創(chuàng)建的屬性都是私有的，也就是說，在一個文件中定義的變量（還包括函數(shù)和類）對其他文件是不可見的。模塊導出模塊實現(xiàn)方案允許某個模塊對外導出（exports）部分接口并且由其他模塊導入（require）使用。exports.屬性或方法名=值;CommonJS是一套約定標準，旨在讓瀏覽器之外的JavaScript（比如服務器端或者桌面端）能夠通過模塊化的方式來開發(fā)和協(xié)作。Node.js的模塊系統(tǒng)，就是參照CommonJS規(guī)范實現(xiàn)的。模塊化規(guī)范CommonJS01創(chuàng)建模塊newstudent.js03加載模塊varstudent=require('./seudent.js');02module.exports.f1=f1導出成員04student.sayHi(name1)使用模塊模塊化開發(fā)流程模塊化的規(guī)范CommonJS定義一個模塊student.js并在主程序main.js中進行調(diào)用。functionsayHi(stu){console.log(stu+'正在學習Node.js!');}module.exports.sayHi=sayHi;示例exports是對外的接口導出一個函數(shù)sayHistudent.js1main.js2letstudent=require('./student.js');student.sayHi('李云');require加載模塊模塊名.函數(shù)名(參數(shù))模塊化的定義模塊化是指解決一個復雜問題時，自頂向下逐層把系統(tǒng)劃分成若干模塊的過程。Node.js中所有的功能都是以模塊形式存在的，一個文件就是一個模塊。模塊化開發(fā)規(guī)范CommonJSNode.js遵循CommonJS規(guī)范進行模塊化開發(fā)。模塊關鍵字有：--模塊標識（module）--模塊導出（exports）--模塊引用（require）小結2.2Node.js模塊基礎引入風格多變隨時進行自主改變形式固定不定期更新迭代DIY家具芯片引入Node.js中也存在著不同種類的模塊。目錄01模塊的分類02自定義模塊模塊的分類Node.js的模塊分類1.核心（原生）模塊

--由Node.js官方提供(如fs、http、net等)--擁有最高的加載優(yōu)先級2.第三方模塊

--由第三方個人或團隊開發(fā)出來--NPM服務器上的免費開源模塊(如mysql、express等)--必須先使用NPM等工具進行下載3.自定義（文件）模塊

--用戶自己編寫

--存儲為單獨的文件(或文件夾)核心模塊路徑處理varpath=require('path');創(chuàng)建服務器varhttp=require('http');文件操作varfs=require('fs');DNS查詢vardns=require('dns');核心模塊是不需要開發(fā)者創(chuàng)建的，可以直接通過require加載。url處理varurl=require('url');第三方模塊時間處理varmoment=require('moment');mysql數(shù)據(jù)庫操作varmysql=require('mysql');格式化日期vartimestamp=require('time-stamp');express框架varexpress=require('express');必須先使用NPM等工具進行下載，在代碼中通過require加載。session處理varsession=require('express-session');自定義模塊自定義模塊exports.導出數(shù)據(jù)01自定義模塊的兩大對象

exports和require在Node.js中所有的功能都是以模塊的形式存在的。模塊之間相互獨立。module.exports

=導出數(shù)據(jù)02如果需要在模塊B中使用模塊A的功能，模塊A就需要將數(shù)據(jù)導出，模板B需加載模塊A。自定義模塊使用module.exports=暴露數(shù)據(jù)的方式實現(xiàn)商品價格計算。計算：數(shù)量*單價語法格式：module.exports={

函數(shù)、變量}創(chuàng)建自定義模塊-price.js01functionsumPrice(amount,price){returnamount*price;}module.exports={

sumPrice}示例自定義模塊使用module.exports=暴露數(shù)據(jù)的方式實現(xiàn)商品價格計算調(diào)用接口并傳入?yún)?shù)exports返回的是模塊函數(shù)module.exports返回的是模塊對象本身創(chuàng)建main.js調(diào)用模塊price.js，對指定商品數(shù)量和單價計算總價02letprice=require('./price.js');letresult=price.sumPrice(4,500);

console.log(result);示例Node.js模塊的分類--核心模塊--第三方模塊--自定義模塊自定義模塊模塊B中使用模塊A的功能模塊A導出數(shù)據(jù)模板B加載模塊A小結2.3包與NPM引入書包肉包包裹Node.js中所說的包又是指什么呢？引入Node.js中的包

文件夾/文件那NPM是什么呢？目錄01包02NPM包的定義Node.js中的包包是包含js文件和其他附加信息的整體，某種意義上來說，包是模塊的集合。模塊是按照CommonJS規(guī)范寫的js文件，Node.js中的包也有自己的規(guī)范。包的結構遵循CommonJS包規(guī)范的包目錄應該包含對應的文件：包目錄結構包描述文件包描述文件package.json:用于記錄非代碼相關的信息，記錄npm對包管理的信息，是包的重要組成部分。NPMNode.js組織了自身的核心模塊，這部分不需要我們管理。在是使用第三方文件模塊時，模塊之間彼此獨立，并不能直接的互相引用。通過NPM實現(xiàn)對包的管理，解決包之間的依賴關系，從而形成模塊之間的“紐帶”。NPM(Node.jsPackageManager)包管理器NPM01常見NPM指令讓用戶從NPM服務器下載第三方包到本地使用。

全局安裝

局部安裝

NPM的使用示例全局安裝express和express-generator包，創(chuàng)建命令行工具。任意地方打開CMD窗口，輸入以下命令01npminstallexpressexpress-generator–g包安裝完成后，可以通過命令查看包的位置02npmroot–g使用全部安裝包提供的命令行工具03express-vNPM的使用在項目中下載并安裝模塊mysql01npminstallmysql示例局部安裝mysql包，在當前目錄下保存，并輸出依賴包查找路徑。1.加載安裝好的包mysql2.module.paths返回了依賴包查找的路徑集合。編寫文件index.js

02varmysql=require('mysql');//加載依賴包console.log(module.paths);NPMrequire()在加載包時，首先會判斷其是否為核心模塊，若是核心模塊（Node.js安裝時自動保護），則自動加載；若不是核心模塊，那么就查找當前目錄下的node_modules文件夾是否已下載該模塊。若當前目錄下沒有該模塊，則到其父目錄中的node_modules查找下載的包，一直遞歸到項目包所在的根目錄下。若能找到，程序不會報錯；若找不到，則程序會報錯并提示包未安裝。包加載規(guī)則：包和NPM某種意義上來說，包是模塊的集合。模塊是按照CommonJS規(guī)范寫的js文件。通過NPM實現(xiàn)對包的管理，解決包之間的依賴關系。NPM命令的使用第三方包的安裝方式有2種：--全局安裝-g：創(chuàng)建命令行工具。--局部安裝：在當前目錄下保存。小結2.4自定義包引入引入那如何實現(xiàn)自定義包呢？目錄01自定義項目包自定義包自定義包的步驟：1.NPM生成package.json文件1.手動編寫package.json文件2.使用npminit

指令通過提問式交互讓用戶逐個填入選項3.或使用npminit–y采用默認的配置，跳過上面的步驟實現(xiàn)自定義包，關鍵為項目下的package.json文件。2.局部安裝所需的依賴包使用npminstall命令，針對目錄信息自動安裝所需模塊3.編寫主模塊，啟動項目主模塊的聲明，以package.json中的main聲明為準自定義包生成package.json文件01npminit-y創(chuàng)建一個Node.js的項目包，輸出當前系統(tǒng)時間。下載并安裝依賴模塊02npminstalltime-stamp編寫主程序index.js代碼03示例自定義模塊創(chuàng)建一個項目包描述文件。"main":"index.js"main屬性表示項目主程序package.json{"name":"task2","version":"1.0.0","description":"","main":"index.js","devDependencies":{},"scripts":{"test":"echo\"Error:notestspecified\"&&exit1"},"dependencies":{

"time-stamp":"^2.2.0"http://在安裝前不會被列出},"keywords":[],"author":"","license":"ISC"}“dependencies”屬性表示該包下載的依賴模塊示例代碼NPM的使用示例局部安裝time-stamp包，并輸出時間。在項目中下載并安裝依賴模塊time-stamp01npminstalltime-stamp1.引入安裝好的包2.返回系統(tǒng)當前時間，并設定輸出格式lettimestamp=require("time-stamp");//返回系統(tǒng)當前時間lettime=timestamp('YYYY年MM月DD日HH:mm:ss');console.log("這是站點主程序。");console.log("當前時間：",time);編寫文件index.js，輸出時間02自定義包的步驟1.生成包描述文件package.json；2.根據(jù)功能需要，本地安裝依賴包；3.編寫主程序代碼，在控制臺輸出信息。小結2.5CNPM和YARN安裝和使用引入國外服務器目錄01CNPM安裝與使用02YARN安裝與使用包管理機制包管理機制的種類：NPMNode.js自帶包管理機制優(yōu)點：可快速使用，內(nèi)容全面缺點：服務器在國外，下載包的速度較慢CNPM優(yōu)點：用法與NPM一致，且速度較快，由淘寶團隊搭建npm的鏡像缺點：同步頻率10分鐘一次，存在微小的誤差(可忽略)YARN優(yōu)點：YARN與NPM相同使用本地緩存，但是YARN無需互聯(lián)網(wǎng)連接即可安裝本地緩存，提供離線模式CNPM安裝與使用第一步：安裝CNPM，指令如下01npminstall-gcnpm--registry=使用方式安裝與使用CNPM的步驟。第二步：命令查看版本號02cnpm-v第三步：使用cnpm命令安裝模塊：03cnpminstall<package>YARN安裝與使用第一步：安裝YARN，指令如下01npm/cnpminstallyarn–g使用方式安裝與使用YARN的步驟。第二步：命令查看版本號02yarn-v第三步：使用yarn命令安裝模塊：03yarnadd<package>包管理器的比較NPM、CNPM、YARN對比功能NPMCNPMYARN初始化某個項目npminitcnpminityarninit默認安裝依賴操作npminstall/linkcnpminstall/linkyarninstall/link安裝某個依賴并保存到package.jsonnpminstalltaco-scnpminstalltaco-syarnaddtaco移除某個依賴項目npmuninstalltaco-scnpmuninstalltaco-syarnremovetaco安裝某個開發(fā)時依賴項目npminstalltaco-save-devcnpminstalltaco-save-devyarnaddtaco-dev更新某個依賴項目npmupdatetaco-scnpmupdatetaco-syarnupgradetaco安裝某個全局依賴項目npminstalltaco-gcnpminstalltaco-gyarnglobaladdtaco發(fā)布/登錄/登出，一系列NPMRegistry

操作npmpublish/login/logout

cnpmpublish/login/logoutyarnpublish/login/logout運行某個命令npmrun/testcnpmrun/testyarnrun/testCNPM的安裝和指令使用npminstall-gcnpm--registry=cnpm-vcnpminstall<package>YARN的安裝和指令使用npm/cnpminstallyarn–gyarn-vyarnadd<package>小結2.6格式化商品日期引入如何模塊化實現(xiàn)商品發(fā)布日期的格式化顯示呢？目錄01實驗需求02實驗步驟03項目實現(xiàn)實驗需求用模塊化編程思路實現(xiàn)商品日期的顯示。2021-12-12->2021年12月12日實驗步驟運行項目04生成項目包01自定義模塊02編寫主程序03npm

init-y使用默認參數(shù)值，生成package.json文件01npminstallmoment02下載并安裝moment模塊項目實現(xiàn)1.生成項目包2.自定義模塊項目實現(xiàn)letmoment=require('moment');moment.locale("zh-cn");//格式化成中文functionformatDate(d){

//格式化日期

lettime=moment(d,'YYYY-MM-DD').format('YYYY年MM月DD日')