Node.js 第1天

上午總結(jié)

• Node.js 是什么

  • JavaScript 運(yùn)行時(shí)

  • 既不是語言男应，也不是框架，它是一個(gè)平臺(tái)

• Node.js 中的 JavaScript

  • 沒有 BOM娱仔、DOM

  • EcmaScript 基本的 JavaScript 語言部分

  • 在 Node 中為 JavaScript 提供了一些服務(wù)器級(jí)別的 API

    • 文件操作的能力

    • http 服務(wù)的能力

總結(jié)

• Node 中的 JavaScript

  • EcmaScript

    • 變量

    • 方法

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

    • 內(nèi)置對(duì)象

    • Array

    • Object

    • Date

    • Math

  • 模塊系統(tǒng)

    • 在 Node 中沒有全局作用域的概念

    • 在 Node 中沐飘，只能通過 require 方法來加載執(zhí)行多個(gè) JavaScript 腳本文件

    • require 加載只能是執(zhí)行其中的代碼，文件與文件之間由于是模塊作用域牲迫，所以不會(huì)有污染的問題

      • 模塊完全是封閉的

      • 外部無法訪問內(nèi)部

      • 內(nèi)部也無法訪問外部

    • 模塊作用域固然帶來了一些好處耐朴，可以加載執(zhí)行多個(gè)文件，可以完全避免變量命名沖突污染的問題

    • 但是某些情況下盹憎，模塊與模塊是需要進(jìn)行通信的

    • 在每個(gè)模塊中筛峭，都提供了一個(gè)對(duì)象：exports

    • 該對(duì)象默認(rèn)是一個(gè)空對(duì)象

    • 你要做的就是把需要被外部訪問使用的成員手動(dòng)的掛載到 exports 接口對(duì)象中

    • 然后誰來 require 這個(gè)模塊，誰就可以得到模塊內(nèi)部的 exports 接口對(duì)象

    • 還有其它的一些規(guī)則陪每，具體后面講蜒滩，以及如何在項(xiàng)目中去使用這種編程方式，會(huì)通過后面的案例來處理

  • 核心模塊

    • 核心模塊是由 Node 提供的一個(gè)個(gè)的具名的模塊奶稠，它們都有自己特殊的名稱標(biāo)識(shí)，例如

      • fs 文件操作模塊

      • http 網(wǎng)絡(luò)服務(wù)構(gòu)建模塊

      • os 操作系統(tǒng)信息模塊

      • path 路徑處理模塊

      • 捡遍。锌订。。画株。

    • 所有核心模塊在使用的時(shí)候都必須手動(dòng)的先使用 require 方法來加載辆飘，然后才可以使用，例如：

      • var fs = require('fs')

• http

  • require

  • 端口號(hào)

    • ip 地址定位計(jì)算機(jī)

    • 端口號(hào)定位具體的應(yīng)用程序

  • Content-Type

    • 服務(wù)器最好把每次響應(yīng)的數(shù)據(jù)是什么內(nèi)容類型都告訴客戶端谓传，而且要正確的告訴

    • 不同的資源對(duì)應(yīng)的 Content-Type 是不一樣蜈项，具體參照：http://tool.oschina.net/commons

    • 對(duì)于文本類型的數(shù)據(jù)，最好都加上編碼续挟，目的是為了防止中文解析亂碼問題

  • 通過網(wǎng)絡(luò)發(fā)送文件

    • 發(fā)送的并不是文件紧卒，本質(zhì)上來講發(fā)送是文件的內(nèi)容

    • 當(dāng)瀏覽器收到服務(wù)器響應(yīng)內(nèi)容之后，就會(huì)根據(jù)你的 Content-Type 進(jìn)行對(duì)應(yīng)的解析處理

• 模塊系統(tǒng)

• Node 中的其它的核心模塊

• 做一個(gè)小管理系統(tǒng)：

  • CRUD

• Express Web 開發(fā)框架

  • npm install express

Node.js 第2天課堂筆記

知識(shí)點(diǎn)

反饋

• 老師像我一同學(xué) 但我知道 我同學(xué)沒這么牛逼诗祸。跑芳。轴总。

  • 學(xué)習(xí)、分享博个、交流

• 老師 講講sumblie需要安裝哪些插件把 以及怎么用Md結(jié)尾的文檔怀樟，對(duì)于我們來說好像就是一個(gè)閱讀器一樣使用………………

  • HTML 也是標(biāo)記語言

  • markdown 標(biāo)記語言

  • # 就是標(biāo)題

  • -、* 就是列表

  • **加粗內(nèi)容**

  • GFM

• 第一天上課 給我感覺挺好的 就是老師可能對(duì)早下課是不是有什么誤解 我們平時(shí)都是 五點(diǎn)半放學(xué)的 盆佣，還有就是有點(diǎn)啰嗦往堡，那個(gè)不能起a呀b呀我感覺聽了不下 五遍 我都要被你笑哭了

• 老師講的挺好的

• 后來講的速度有點(diǎn)上來了！

• 老師很耐心共耍！

• 老師講的課很好虑灰！

• 感覺老師講的有點(diǎn)快，語速快

• 沒有對(duì)比就沒有傷害 體驗(yàn)了一把 普通話標(biāo)準(zhǔn) 英語發(fā)音又標(biāo)準(zhǔn) 幸福感

• 感覺老師講課的風(fēng)格簡單利落征堪，思路清晰瘩缆。 nice

• 結(jié)尾不寫分號(hào)是老師寫的es6的代碼風(fēng)格，還是老師懶得寫佃蚜？

代碼風(fēng)格

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n44" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, &quot;Andale Mono&quot;, &quot;DejaVu Sans Mono&quot;, monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var foo = 'bar'
var foo ='bar'
var foo= 'bar'
var foo = "bar"

if (true) {
 console.log('hello') 
}

if (true) {
 console.log('hello') 
}

if (true ){
 console.log('hello') 
}</pre>

為了約定大家的代碼風(fēng)格庸娱，所以在社區(qū)中誕生了一些比較規(guī)范的代碼風(fēng)格規(guī)范：dnsajkndkjsabnjkdnjksandjknsajkdnjkasnjkdnjksandjknsajkdnjksajkdnas

• JavaScript Standard Style

• Airbnb JavaScript Style

復(fù)習(xí)

上午總結(jié)

• 代碼風(fēng)格

• 無分號(hào)

  • (

  • [

  • `

  • 最好前面補(bǔ)分號(hào)，避免一些問題

  • 《編寫可維護(hù)的 JavaScript》

  • 不僅是功能谐算，還要寫的漂亮

• 服務(wù)端渲染

  • 說白了就是在服務(wù)端使用模板引擎

  • 模板引擎最早誕生于服務(wù)端熟尉，后來才發(fā)展到了前端

• 服務(wù)端渲染和客戶端渲染的區(qū)別

  • 客戶端渲染不利于 SEO 搜索引擎優(yōu)化

  • 服務(wù)端渲染是可以被爬蟲抓取到的，客戶端異步渲染是很難被爬蟲抓取到的

  • 所以你會(huì)發(fā)現(xiàn)真正的網(wǎng)站既不是純異步也不是純服務(wù)端渲染出來的

  • 而是兩者結(jié)合來做的

  • 例如京東的商品列表就采用的是服務(wù)端渲染洲脂，目的了為了 SEO 搜索引擎優(yōu)化

  • 而它的商品評(píng)論列表為了用戶體驗(yàn)斤儿，而且也不需要 SEO 優(yōu)化，所以采用是客戶端渲染

下午總結(jié)

Node.js 第3天課堂筆記

知識(shí)點(diǎn)

• 增刪改查

• 登陸

• 注冊

• 頭像

  • 服務(wù)端圖片
  • 水印
  • 圖片水印

• 找回密碼

• 密碼修改

• 模塊系統(tǒng)

  • 核心模塊
  • 第三方模塊
  • 自己寫的模塊
  • 加載規(guī)則以及加載機(jī)制
  • 循環(huán)加載

• npm

• package.json

• Express

  • 第三方 Web 開發(fā)框架
  • 高度封裝了 http 模塊
  • 更加專注于業(yè)務(wù)恐锦，而非底層細(xì)節(jié)
  • 知其所以然

• 增刪改查

  • 使用文件來保存數(shù)據(jù)（鍛煉異步編碼）

• MongoDB

  • （所有方法都封裝好了）

反饋

• 希望老師再推薦一些前端學(xué)習(xí)的書籍往果，謝謝！
  • 《JavaScript 高級(jí)編程》第3班
  • 學(xué)習(xí)一铅，解決問題
  • 書本可以更好的系統(tǒng)的整理學(xué)過的內(nèi)容陕贮，了解一些細(xì)節(jié)
  • 《JavaScript 語言精粹》
• seo的資料，嘿嘿
  • 網(wǎng)站運(yùn)營 SEO
  • SEO 運(yùn)營專員
  • 百度潘飘、Google肮之、搜狗、
• 最后老師那個(gè)怎么做案例的步驟真的是很有用 覺得今天的反饋 大概又是夸老師的比較多 老師聲音很有特點(diǎn)
• 老師講的很仔細(xì),雖然語速有點(diǎn)快但是會(huì)重復(fù)很多遍,即使第一遍沒聽會(huì)第二遍第三遍也懂了.很好.
• 使用markdown一次只能打開一個(gè)文件,不知道怎么建文件夾卜录，是需要安插件嗎?
• 老師戈擒，軟件版本的升級(jí)是以什么作為理論支持的，為什么跳躍間隙可以這么大艰毒？還有筐高，看上了老師的電子圖書館，瞬間好愛學(xué)習(xí)呀，真的！
  • 軟件開發(fā)版本里面涉及到軟件工程學(xué)：
  • x.x.x
    • 0.0.1
    • 0.0.2
    • 1.1.5
    • 1.9.2
    • 2（新增功能比較多，甚至可能去除了某些功能）.5(加入了新功能).0（修復(fù)bug安皱，提升性能）
    • 大版本
    • 一般是這些客戶端軟件踪宠、技術(shù)框架開發(fā)者比較理解的多
    • 做網(wǎng)站很少涉及到版本的概念，網(wǎng)站的目的就是快
• art-template里面用的語法是jQuery嗎， each什么的 我暈了 each,forEach, 遍歷的全混了
  • art-template 和 jQuery 一毛錢關(guān)系都沒有
  • each 是 art-template 的模板語法，專屬的
  • {{each 數(shù)組}}
  • <li>{{ $value }}</li>
  • {{/each}} 這是 art-template 模板引擎支持的語法，只能在模板字符串中使用
  • $.each(數(shù)組, function)
  • $('div').each(function) 一般用于遍歷 jQuery 選擇器選擇到的偽數(shù)組實(shí)例對(duì)象
  • forEach 是 EcmaScript 5 中的一個(gè)數(shù)組遍歷函數(shù)涵卵，是 JavaScript 原生支持的遍歷方法 可以遍歷任何可以被遍歷的成員
  • jQuery 的 each 方法和 forEach 幾乎一致
  • 由于 forEach 是 EcmaScript 5 中的，所以低版本瀏覽器不支持
• 每一次的復(fù)習(xí)賊重要 老師很不錯(cuò) 我喜歡
• 在以后的工作中 用到node.js的地方多嗎荒叼？ 在留言本的案例中 點(diǎn)擊發(fā)表留言跳轉(zhuǎn)頁面的路徑是url路徑 和之前寫的頁面跳轉(zhuǎn)寫的文件路徑還是有點(diǎn)分不清轿偎。
  • 技多不壓身
  • Node 對(duì)于前端來講是進(jìn)階高級(jí)前端開發(fā)工程師必備的技能
  • 屌絲最容易逆襲的職業(yè)
  • 見得東西多了你就不怕了
  • 為所欲為
• 老師講的挺清晰的 可是第一節(jié)太困了 路徑有點(diǎn)沒轉(zhuǎn)變過來
• 如果從a中調(diào)用b中的數(shù)據(jù)，又從b中調(diào)用a中的數(shù)據(jù)被廓，執(zhí)行a代碼坏晦，為什么把b中的執(zhí)行完后才會(huì)執(zhí)行a，而不是在b調(diào)用a的時(shí)候a中的代碼繼續(xù)執(zhí)行
  • a 加載了 b
    • 執(zhí)行 b 中的代碼
    • 同時(shí)得到 b 中導(dǎo)出的接口對(duì)象：exports
    • 執(zhí)行 b 的過程中發(fā)現(xiàn) b 也在 require a
    • b 就會(huì)反過來執(zhí)行 a
    • a 中又加載 b
    • b 又反過來加載 a
    • 這就是循環(huán)加載
    • 如果你一旦出現(xiàn)了這種情況嫁乘，說明你的思路有問題昆婿。
    • jQuery.js （可能不可能出現(xiàn) jQuery 依賴了 main）
    • main.js 依賴了 jQuery
    • 這個(gè)問題是矛盾。
  • b 中也加載了 a
  • 網(wǎng)頁中所有的路徑其實(shí)都是 url 路徑蜓斧，不是文件路徑
• 問題就是不知道問題是什么,寫案例的時(shí)候似懂非懂
• 感覺思維有點(diǎn)跟不上,

復(fù)習(xí)

• 網(wǎng)站開發(fā)模型

  • 黑盒子仓蛆、啞巴
  • 寫代碼讓它變得更智能
  • 按照你設(shè)計(jì)好的套路供用戶使用

• 在 Node 中使用 art-template 模板引擎

  • 安裝
  • 加載
  • template.render()

• 客戶端渲染和服務(wù)端渲染的區(qū)別

  • 最少兩次請求，發(fā)起 ajax 在客戶端使用模板引擎渲染
  • 客戶端拿到的就是服務(wù)端已經(jīng)渲染好的

• 處理留言本案例首頁數(shù)據(jù)列表渲染展示

• 處理留言本案例發(fā)表留言功能

  • 路徑
  • 設(shè)計(jì)好的請求路徑
  • $GET 直接或查詢字符串?dāng)?shù)據(jù)
  • Node 中需要咱們自己動(dòng)手來解析
    • url.parse()
  • /pinglun?name=jack&message=hello
  • split('?')
  • name=jack&message=hello
  • split('&')
  • name=jack message=hello
  • forEach()
  • name=jack.split('=')
  • 0 key
  • 1 value

• 掌握如何解析請求路徑中的查詢字符串

  • url.parse()

• 如何在 Node 中實(shí)現(xiàn)服務(wù)器重定向

  • header('location')
    • 301 永久重定向 瀏覽器會(huì)記住
      • a.com b.com
      • a 瀏覽器不會(huì)請求 a 了
      • 直接去跳到 b 了
    • 302 臨時(shí)重定向 瀏覽器不記憶
      • a.com b.com
      • a.com 還會(huì)請求 a
      • a 告訴瀏覽器你往 b

• Node 中的 Console（REPL）使用

上午總結(jié)

• jQuery 的 each 和 原生的 JavaScript 方法 forEach
  • EcmaScript 5 提供的
    • 不兼容 IE 8
  • jQuery 的 each 由 jQuery 這個(gè)第三方庫提供
    • jQuery 2 以下的版本是兼容 IE 8 的
    • 它的 each 方法主要用來遍歷 jQuery 實(shí)例對(duì)象（偽數(shù)組）
    • 同時(shí)它也可以作為低版本瀏覽器中 forEach 替代品
    • jQuery 的實(shí)例對(duì)象不能使用 forEach 方法挎春，如果想要使用必須轉(zhuǎn)為數(shù)組才可以使用
    • [].slice.call(jQuery實(shí)例對(duì)象)
• 模塊中導(dǎo)出多個(gè)成員和導(dǎo)出單個(gè)成員
• 301 和 302 狀態(tài)碼區(qū)別
  • 301 永久重定向看疙，瀏覽器會(huì)記住
  • 302 臨時(shí)重定向
• exports 和 module.exports 的區(qū)別
  • 每個(gè)模塊中都有一個(gè) module 對(duì)象
  • module 對(duì)象中有一個(gè) exports 對(duì)象
  • 我們可以把需要導(dǎo)出的成員都掛載到 module.exports 接口對(duì)象中
  • 也就是：moudle.exports.xxx = xxx 的方式
  • 但是每次都 moudle.exports.xxx = xxx 很麻煩，點(diǎn)兒的太多了
  • 所以 Node 為了你方便直奋，同時(shí)在每一個(gè)模塊中都提供了一個(gè)成員叫：exports
  • exports === module.exports 結(jié)果為 trues
  • 所以對(duì)于：moudle.exports.xxx = xxx 的方式 完全可以：expots.xxx = xxx
  • 當(dāng)一個(gè)模塊需要導(dǎo)出單個(gè)成員的時(shí)候能庆，這個(gè)時(shí)候必須使用：module.exports = xxx 的方式
  • 不要使用 exports = xxx 不管用
  • 因?yàn)槊總€(gè)模塊最終向外 return 的是 module.exports
  • 而 exports 只是 module.exports 的一個(gè)引用
  • 所以即便你為 exports = xx 重新賦值，也不會(huì)影響 module.exports
  • 但是有一種賦值方式比較特殊：exports = module.exports 這個(gè)用來重新建立引用關(guān)系的
  • 之所以讓大家明白這個(gè)道理脚线，是希望可以更靈活的去用它
• Node 是一個(gè)比肩 Java相味、PHP 的一個(gè)平臺(tái)
  • JavaScript 既能寫前端也能寫服務(wù)端

moudle.exports = {
  a: 123
}

// 重新建立 exports 和 module.exports 之間的引用關(guān)系
exports = module.exports

exports.foo = 'bar'

Array.prototype.mySlice = function () {
  var start = 0
  var end = this.length
  if (arguments.length === 1) {
    start = arguments[0]
  } else if (arguments.length === 2) {
    start = arguments[0]
    end = arguments[1]
  }
  var tmp = []
  for (var i = start; i < end; i++) {
    // fakeArr[0]
    // fakeArr[1]
    // fakeArr[2]
    tmp.push(this[i])
  }
  return tmp
}

var fakeArr = {
  0: 'abc',
  1: 'efg',
  2: 'haha',
  length: 3
}

// 所以你就得到了真正的數(shù)組。 
[].mySlice.call(fakeArr)

下午總結(jié)

• jQuery 的 each 和 原生的 JavaScript 方法 forEach

• 301 和 302 的區(qū)別

• 模塊中導(dǎo)出單個(gè)成員和導(dǎo)出多個(gè)成員的方式

• module.exports 和 exports 的區(qū)別

• require 方法加載規(guī)則

  • 優(yōu)先從緩存加載
  • 核心模塊
  • 路徑形式的模塊
  • 第三方模塊
    • node_modules

• package.json 包描述文件

  • dependencies 選項(xiàng)的作用

• npm 常用命令

• Express 基本使用

• 使用 Express 把之前的留言本案例自己動(dòng)手改造一下

Node.js 第4天課堂筆記

知識(shí)點(diǎn)

• Express
• 基于文件做一套 CRUD

反饋

• 需要記憶的內(nèi)容比較多殉挽，還是得多敲多練
• 竟以為老師是理工男！Ｍ厍伞斯碌！老師每天來一波驚喜吧，魅力值up up up肛度！
• 老師很可愛傻唾，很喜歡，學(xué)習(xí)有動(dòng)力，哈哈哈哈哈哈哈哈
  • 嚶嚶嚶
• php什么的相關(guān)知識(shí)冠骄，老師可能大概也許說過伪煤，但是我清楚的知道，我是真的不知道凛辣，對(duì)我來說就是新知識(shí)抱既。恩 所以，你沒有重復(fù)
• 給老師點(diǎn)贊
• QAQ
  • @_@

復(fù)習(xí)

• jQuery 的 each 和 原生的 JavaScript 方法 forEach
• 301 和 302 的區(qū)別
• 模塊中導(dǎo)出單個(gè)成員和導(dǎo)出多個(gè)成員的方式
  • module.exports = xxx
  • 通過多次：exports.xxx = xxx
  • 導(dǎo)出多個(gè)也可以：moudle.exports = {多個(gè)成員}
• module.exports 和 exports 的區(qū)別
  • exports 只是 module.exports 的一個(gè)引用而已扁誓，目的只是為了簡化寫法
  • 每個(gè)模塊最終 return 的是 module.exports
• require 方法加載規(guī)則
  • 優(yōu)先從緩存加載
  • 核心模塊
  • 路徑形式的模塊
    • ./xxx
    • ../xxxx
    • /xxxx / 在這里表示的是磁盤根路徑
    • c:/xxx
  • 第三方模塊
    • 第三方模塊的標(biāo)識(shí)就是第三方模塊的名稱（不可能有第三方模塊和核心模塊的名字一致）
    • npm
      • 開發(fā)人員可以把寫好的框架防泵、庫發(fā)布到 npm 上
      • 使用者在使用的時(shí)候就可以很方便的通過 npm 來下載
    • 使用方式：var 名字 = require('npm install 的那個(gè)包名')
    • node_modules
    • node_modules/express
    • node_modules/express/package.json
    • node_modules/express/package.json main
    • 如果 package.json 或者 package.json main 不成立，則查找備選項(xiàng)：index.js
    • 如果以上條件都不成立蝗敢，則繼續(xù)進(jìn)入上一級(jí)目錄中的 node_modules 按照上面的規(guī)則繼續(xù)查找
    • 如果直到當(dāng)前文件模塊所屬磁盤根目錄都找不到捷泞，最后報(bào)錯(cuò)：can not find module xxx
• package.json 包描述文件
  • 就是產(chǎn)品的說明書
  • dependencies 屬性，用來保存項(xiàng)目的第三方包依賴項(xiàng)信息
  • 所以建議每個(gè)項(xiàng)目都要有且只有一個(gè) package.json (存放在項(xiàng)目的根目錄)
  • 我們可以通過 npm init [--yes] 來生成 package.json 文件
  • 同樣的寿谴，為了保存依賴項(xiàng)信息锁右，我們每次安裝第三方包的時(shí)候都要加上：--save 選項(xiàng)。
• npm 常用命令
  • install
  • uninstall
• Express 基本使用
• 使用 Express 把之前的留言本案例自己動(dòng)手改造一下

模塊標(biāo)識(shí)中的 / 和文件操作路徑中的 /

上午總結(jié)

演講

說服
PPT
腦圖
markdown
結(jié)構(gòu)思維

• 找痛點(diǎn) why 為什么

• 解決方案 what 是什么

• 怎么去使用 how 怎么用

• where 在哪兒用

• when 什么時(shí)候用

• 文件路徑中的 / 和模塊標(biāo)識(shí)中的 /

• nodemon

• Express

  • art-template 模板引擎的配置
  • body-parser 解析表單 POST 請求體

• 技術(shù)只是一種解決問題的手段讶泰、工具而已

  • 第三方的東西咏瑟，不要糾結(jié)
  • 先以解決問題為主

• 詳解了 express 靜態(tài)服務(wù) API

  • app.use('/public/', express.static('./public'))

• crud

下午總結(jié)

目標(biāo)

• 文件路徑中的 / 和模塊標(biāo)識(shí)中的 /
• Express 中配置使用 art-template 模板引擎
• Express 中配置使用 body-parser
• Express 中配置處理靜態(tài)資源
• CRUD 案例中單獨(dú)提取路由模塊