《node.js + webpack实战》书籍 —— 学习笔记一

水深无声 2023-01-18 14:26 7阅读 0赞

### 第一章：基础知识 ###

基于chrome v8的引擎js运行环境  
简单的说 `Node.js` 就是运行在**服务端**的 `JavaScript`。

### 第三章：node编程基础 ###

什么是后端的node，什么是前端的node？  
三\\1  npm安装依赖的使用

npm i
    npm i -g 全局
    npm i --save-dev 开发依赖 小范围的安装在devDependencies
    npm i --save 生产依赖 Dependencies 大范围的
    npm run 执行package.json里script定义的命令

三\\2 node模块系统 （主要的历史进程是从commonJS到es6模块化，其它不是很重要的可以忽略不记）  
 A、commomJS模块化

math.js文件
    export.sum = ''; //抛出对象
    
    
    page.vue页面
    const sum = require('./math'); //读取并执行js模块
    sum()

B、es6模块化

math.js文件中
    export sum  = ''; // 抛出变量写法一(只有export)
    export default hh = ''; //抛出变量写法二(有export 和 default)
    
    
    page.vue页面中引用
    import {sum} from './math'; // 抛出变量写法一(只有export)引用
    import hh from "./math';     //抛出变量写法二(有export 和 default)引用

C、异步编程promise

本质：解决地狱回调问题
    作用：用同步的写法写异步编程
    状态：pending 、 resolved 、 reject
    方法： .then()   、 .catch()
    回调函数： resolve(value)  ||  value值可能是对象 or promise对象
             reject(reason)   ||  error对象
    
    
    
    
    延伸的用法一：promise.all()  
        作用：将多个promise实例包装成一个新的promise实例，可以让多个异步promise并发进行
        场景：例如页面需要在请求了多个接口并获取到全部的数据后，才渲染页面
              const h1 = new  Promise((resolve, reject)=> {
                    resolve(111)
              })
              const h2 = new  Promise((resolve, reject)=> {
                    resolve(222)
              })
              Promise.all([h1, h2]).then(data => {}).catch(err => console.log(err))

D、async await

本质：promise的语法糖
    作用：用同步的写法写异步编程
    优点：不会阻塞、写法更优雅
    
    延伸的示例一：
        针对什么写的priomise.all的写法，async的写法如下
        async hh() {
            try{
                let h1 = await this.$await();
                let h2 = await this.$await();
            }.catch(err=> console.log(err))
        }

三\\3 核心模块 （fs系统文件模块 、 events事件模块、stream抽象接口模块、http请求模块）

fs系统文件模块、stream抽象接口模块 使用得不是很频繁，我不懂  
event模块

发布者（事件触发）
    emitter.emit("click", 1234)
    
    订阅者
    const EventEmitter = require('')
    const emitter = new EventEmitter();
    emitter.on('click', function(val) {  console.log("我点击了",val)  })

http模块

发出请求
    const http = require('http')
    const req = http.request('url', (res)=> { console.log(res) })
    req.end();
    
    
    响应请求
    const http = require('http')
    const server = http.createServer((req,resp) =>{  resp.end(); })

### 四、前端发展 ###

四\\1 构建工具webpack

*  A 模块系统 commonJS -》向   ES6模块
 *  新语言   纯html纯js ->   js+css  ->  jquery \\angular    ->  react \\ vue  、 node   、 es6  、 sass\\less、 typeScript   
 *  新框架   由最初的mvc框架（通过操作dom改变数据）到mvvm框架（通过驱动data改变视图）

功能：
        1、代码转换 （es6 -> es5     less/sass -> css）
        2、文件优化  （压缩n个js、 压缩n个js+n个css 、 合并n个图片）
        3、公共代码提取  （减少http请求）
        4、实时刷新