node(3)，前端面试题高级

用户33914928060
88 阅读6分钟

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

开源分享：docs.qq.com/doc/DSmRnRG…

main.js

var fs = require("fs");

var data = fs.readFileSync('input.txt');

console.log(data.toString());
console.log("程序执行结束!");

非阻塞代码示例：

nostop_main.js

var fs = require("fs");

fs.readFile('input.txt', function (err, data) {
    if (err) return console.error(err);
    console.log(data.toString());
});

console.log("程序执行结束!");

阻塞形式按照代码顺序执行，执行不通过则堵塞。
非阻塞形式则在读取文件的过程中不会影响程序进程。
在这里插入图片描述
在这里插入图片描述

事件循环

node .js 基本上所有的事件机制都是用设计模式中观察者模式实现的。

// 引入 events 模块
var events = require('events');
// 创建 eventEmitter 对象
var eventEmitter = new events.EventEmitter();
 
// 创建事件处理程序
var connectHandler = function connected() {
   console.log('连接成功。');
  
   // 触发 data\_received 事件 
   eventEmitter.emit('data\_received');
}
 
// 绑定 connection 事件处理程序
eventEmitter.on('connection', connectHandler);
 
// 使用匿名函数绑定 data\_received 事件
eventEmitter.on('data\_received', function(){
   console.log('数据接收成功。');
});
 
// 触发 connection 事件 
eventEmitter.emit('connection');
 
console.log("程序执行完毕。");

在这里插入图片描述

EventEmitter

on 函数用于绑定事件函数，emit 属性用于触发一个事件。

events 模块只提供了一个对象 events.EventEmitter
其核心就是事件触发与事件监听器功能的封装

通过require 引入 events模块

var events = require('events');
var eventEmitter = new events.EventEmitter();

具体用法：

//event.js 文件
var EventEmitter = require('events').EventEmitter; 
var event = new EventEmitter(); 
event.on('some\_event', function() { 
    console.log('some\_event 事件触发'); 
}); 
setTimeout(function() { 
    event.emit('some\_event'); 
}, 1000);

在这里插入图片描述

//event.js 文件
var events = require('events'); 
var emitter = new events.EventEmitter(); 
emitter.on('someEvent', function(arg1, arg2) { 
    console.log('listener1', arg1, arg2); 
}); 
emitter.on('someEvent', function(arg1, arg2) { 
    console.log('listener2', arg1, arg2); 
}); 
emitter.emit('someEvent', 'arg1 参数', 'arg2 参数');

注册两个事件监听器，然后emit触发someEvent事件，
在这里插入图片描述
抛出异常举例：

var events = require('events'); 
var emitter = new events.EventEmitter(); 
emitter.emit('error');

在这里插入图片描述

Buffer缓冲区

官方文档里建议使用 buffer.from去建立buffer对象

const buf = Buffer.from('runoob');

// 输出 72756e6f6f62
console.log(buf.toString('hex'));

// 输出 cnVub29i
console.log(buf.toString('base64'));

在这里插入图片描述

Stream 流

stream 是一个抽象接口

从流中读取数据
var fs = require("fs");
var data = '';

// 创建可读流
var readerStream = fs.createReadStream('read.txt');

// 设置编码为 utf8。
readerStream.setEncoding('UTF8');

// 处理流事件 --> data, end, and error
// data 当有数据可读时触发
// end 没有更多的数据可读时触发
// error 在接收和写入过程中发生错误时触发
readerStream.on('data', function(chunk) {
   data += chunk;
});

readerStream.on('end',function(){
   console.log(data);
});

readerStream.on('error', function(err){
   console.log(err.stack);
});

console.log("程序执行完毕");

在这里插入图片描述

写入流
var fs = require("fs");
var data = 'this is a output';

// 创建一个可以写入的流，写入到文件 output.txt 中
var writerStream = fs.createWriteStream('output.txt');

// 使用 utf8 编码写入数据
writerStream.write(data,'UTF8');

// 标记文件末尾
writerStream.end();

// 处理流事件 --> finish、error
// 所有数据已被写入到底层系统时触发finish
writerStream.on('finish', function() {
    console.log("写入完成。");
});

writerStream.on('error', function(err){
   console.log(err.stack);
});

console.log("程序执行完毕");

在这里插入图片描述
在这里插入图片描述

管道流

可以理解为结合了之前的读取和写入

var fs = require("fs");

// 创建一个可读流
var readerStream = fs.createReadStream('pipe\_input.txt');

// 创建一个可写流
var writerStream = fs.createWriteStream('pipe\_output.txt');

// 管道读写操作
// 读取 input.txt 文件内容，并将内容写入到 output.txt 文件中
readerStream.pipe(writerStream);

console.log("程序执行完毕");

在这里插入图片描述
在这里插入图片描述

链式流

链式流一般用于管道操作。通过连接输出流到另外一个流并创建多个流操作链的机制。

var fs = require("fs");
var zlib = require('zlib');

// 压缩 input.txt 文件为 input.txt.gz
fs.createReadStream('gzdemo.txt')
  .pipe(zlib.createGzip())
  .pipe(fs.createWriteStream('gzdemo.txt.gz'));
  
console.log("文件压缩完成。");


var fs = require("fs");
var zlib = require('zlib');

// 解压 input.txt.gz 文件为 input.txt
fs.createReadStream('gzdemo.txt.gz')
  .pipe(zlib.createGunzip())
  .pipe(fs.createWriteStream('degzdemo.txt'));
  
console.log("文件解压完成。");

在这里插入图片描述
在这里插入图片描述

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

avatar
文章
阅读
粉丝