2024年最全大前端快速入门(1)，2024年最新2024前端大厂面试知识分享

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

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

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

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

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

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

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

2. 汉化

• 第一种：搜索Chinese下载插件

• 第二种：ctrl+shift+p—搜索Configure Dispaly Language—zh-cn

3. 在我们的项目路径中新建文件----vscode打开文件

4. 设置字体大小

左边栏Manage—settings—搜索fonts—Font size

5. 开启Emmet语法支持（自动补全）

设置中搜索Emmet—启用—重启

2、Nodejs安装及快速入门

安装

1. 安装Node.js https://nodejs.org/en/download/ 一路下一步

2. node -v 出现版本号 —>安装成功

快速入门

1. 创建node文件

2. vs打开文件—创建hello.js—console.log(“hello”)-----ctrl+s保存

3. ctrl+` 打开命令终端 ：node hello.js-----输出hello

Node-实现请求响应

文档官网（很多模块） https://nodejs.org/dist/latest-v14.x/docs/api/

1. 创建helloserver.js

2. 编写代码

const http = require(‘http’); //导入模块是require 就类似于import java.io

//1. 创建一个httpserver服务

http.createServer(function(request,response){

//浏览器怎么认识hello httpserver

//告诉浏览器将以text/html去解析hello httpserver的数据 text/plaint 文本方式解析

response.writeHead(200,{‘Conten-type’:‘text/html’});

//给浏览器输出内容,text/html就会去解析我们的h1

response.end(“

hello httpserver

”);

}).listen(8888);

//2.监听端口8888

//3.启动运行服务 node helloserver.js

//4.在浏览器中访问http://localhost:8888/

console.log(“启动成功！！！”);

Node-操作Mysql数据库

1. 安装mysql依赖,第三方模块(所以我们要手动获取，不能在文档官网中找到)

2. npmjs官网找第三方模块：https://www.npmjs.com/

/项目路径下

npm install mysql

3. 创建db.js

//导入MySQL依赖包，mysql属于第三方的模块就类似于 java.sql 一样的道理

var mysql = require(“mysql”)

//1.创建一个MySQL的Connection对象

//2.配置数据连接的信息

var connection = mysql.createConnection({

host:“127.0.0.1”,

user:“root”,

port:3306,

password:“1234”,

database:“testdb” //数据库名

});

//3.开辟连接

connection.connect();

//4.执行curl

connection.query(“select * from user”,function(error,results,fields){

//如果查询出错，直接抛出

if(error) throw error;

//查询成功

console.log("results = ",results);

});

//5.关闭连接

connection.end();

//最后一步：运行node db.js

3、Es6的新语法

let和const命令

1. 创建新项目Es6—创建01-let和const定义.html----shitf+1自动添加html

2. html—直接打开文件即可运行

3. 创建02- let-const和var的区别.html

• 解决变量穿透问题

模板字符串

以前：我们都是使用 " 或者 " " 来吧字符串套起来

现在：``【反引号】， 用${ } 取值

函数默认参数与箭头函数

• 默认参数

• 箭头函数

对象初始化简写

对象简写的案例

账号：

密码：

对象解构

传播操作符

• 把一个对象传播到另一个对象中 通过 …

数组map和reduce方法使用（了解）

map

reduce

Es6小结

• 将我们的Es6语法放到Nodejs中也是可以运行的

• es6 可以在nodejs，uniapp 微信小程序中得到广泛的支持，可以大胆的使用这些语法

• 创建js文件—node xx.js—运行

//传通定义变量和常量的方式 统一使用var

var name = “学相伴”;

var link = “https://www.kuangstudy.com”;

var PI = Math.PI;

console.log(name);

console.log(link);

console.log(PI);

//Es6定义方式

let name2 = “学相伴2”;

let link2 = “https://www.kuangstudy.com”;

//定义常量

const PI2 = Math.PI;

console.log(name2);

console.log(link2);

console.log(PI2);

4、Npm包管理器

• 安装我们的nodejs的时候npm就内置进去了 npm -v 查看

• 类似于我们的Maven

• 仓库地址 https://www.npmjs.com/

1. npm :node package manager, node包管理器 类似于java的maven

作用：

1.快速构建nodejs工程

• 在我们的项目路径下执行

• npm init

• npm init -y 自动帮我们跳过操作

• 得到一个package.json文件，内容如下：

{

“name”: “npmpro”, //工程名

“version”: “1.0.1”, //版本

“description”: “我是一个node工程”, //描述

“main”: “index.js”, //入口js文件

“scripts”: { //运行脚本

“test”: “echo “Error: no test specified” && exit 1”

},

“keywords”: [

“node”

],

“author”: “liu”, //开发者

“license”: “ISC” //授权协议

}

类似于 pom.xml 文件作用管理依赖

2.快速的安装依赖第三方模块，比如npm install mysql redis 等等

2-1：快速安装依赖第三方模块？

项目路径下执行

npm install xxxx 或者 npm i xxx模块名

npm install mysql

2-2：安装模块放在什么地方？

安装的模块会放到项目的node_modules文件夹中

2-3：安装模块如何使用呢？

const redis = require(“redis”);

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

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

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题