---------

四轮问题

代码风格

if、{}、''、运算符、;

bad:

Javascript

if(){
  let age=18;
  let str="fff";
}else{}
function xxx(){}

good

Javascript

if() {
	let age = 18
  let str = 'fff'
} else {
  
}
function xxx() {}

:、,

bad：

Javascript

let obj = {
  name:'plumbiu',
  fn:(a,b)=>{}
}

good：

Javascript

let obj = {
	name: 'plumbiu',
  fn: (a, b) => {}
}

使用 === 而不是 ==
tabsize = 2

bad：

Javascript

const obj = {
  	name: 'xj'
}

good：

Javascript

const obj = {
  name: 'xj'
}

...

简洁写法

使用 `` 模板字符串

Javascript

`${Nmb++} ${id.innerText} rwE 1`

使用 const、let，而不是 var

bad

Javascript

var a = 1
var PI = 3.14

good

Javascript

let a = 1
const PI = 3.14

一个文件不要超过 300 行代码

JavaScript

学习网站：

模板字符串

``和 ${} 运算符

Javascript

const str = 'Plumbiu'
console.log(`Hi ${str}`) // Hi Plumbiu

解构赋值

对象：

Javascript

const obj = {
  foo: 'bar',
  baz: 42,
  person: {
    uname: 'Plumbiu',
    age: 20
  }
}
const { foo, baz: bazs, person: { uname } } = obj
console.log(foo, bazs, uname) // "bar" 42 "Plumbiu"

数组：

Javascript

const arr = [1, 2, 3, 4, 5]
const [a, b, c] = arr
console.log(a, b, c) // 1 2 3

展开运算符

形式 ...

对象

Javascript

const person_profile = {
	uname: 'Plumbiu',
  age: 20
}
const person_appearance = {
  height: 180,
  weight: 68
}
const person = {
  ...person_profile,
  ...person_appearance
}
console.log(person) // { uname: 'Plumbiu', age: 20, height: 180, weight: 68 }

数组

对类数组同理，例如可以对字符串解构

Javascript

const arr = [1, 2, 3, 4, 5]
const [a, ...b] = arr
console.log(a, b) // 1 [2, 3, 4, 5]

运用到函数中

Javascript

function sum(...args) {
  let sum = 0
  args.forEach(item => sum += item)
  return sum
}
console.log(sum(1, 2, 3, 4, 5)) // 15

箭头函数没有 arguments ！！！

includes()

用来判断一个字符串/元素是否包含在另一个字符串/数组中，返回布尔值

indexOf 返回数字，相比之下，纯粹的判断一个字符串是否包含在另一个字符串中，使用 includes 更有语义化

Javascript

'Hello world'.includes('Hello') // true
'Hello world'.includes('Hi') // false

Javascript

[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false

Object

Object.entries(obj)、Object.keys(obj)、Object.values(obj)

Javascript

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
  e: 5,
}
for (let [key, value] of Object.entries(obj)) {
  console.log(key, value)
}
for(let key of Object.keys(obj)) {
  console.log(key)
}
for(let value of Object.values(obj)) {
  console.log(value)
}

flat()

Javascript

let arr = [[1, 2, 3], [4, 5, 6, [6.1, 6.2,]], [7, 8, 9]]
console.log(arr.flat(Infinity))

展示自己

一个程序员需要好好展现自己，才能获得面试官和其他人的赏识

必备：

一个 github 账号
一个 vercel 或者 netifly 账号
一台服务器
一个域名
科学上网

github profile

只需要在 github 上新建一个与 github 用户名一样的仓库即可，更改其中的 README.md

图片的来源：

记得把其中的 Plumbiu 换成自己的 github 用户名

markdown

PlainText

![Plumbiu's GitHub stats](https://github-readme-stats.vercel.app/api?username=Plumbiu)
![](https://github-readme-streak-stats.herokuapp.com/?user=Plumbiu)

第三张图片：wakatime

访问 Embeddables - WakaTime，配置好之后，点击最下方 Get Embeddable Code，即可生成对应的图片地址(选 HTML 对应的图片标签)

对应的配置：

Format：PNG
Chart Type: Languages
Date Range: All Time
....

vscode 需要安装 WakaTime 插件

博客

博客可以记录自己的笔记和学习过程，面试官看到你写的博客那么棒，肯定会给你加分的

关于如何搭建一个博客有很多教程，这里列举一个比较详细的教学视频

hexo 博客搭建

NodeJS

NodeJS 实质上是一门服务端 JavaScript 框架，底层是用 C/C++ 实现的，只不过我们可以使用 JavaScript 语言编写代码

模块化编程

传统的 JavaScript 编程方式是在 html 文件中使用 <script> 标签

html

PlainText

<script src="./index1.js"></script>
<script src="./index2.js"></script>
<script>
	console.log(a)
</script>

这样做有以下缺点

容易触发变量污染的情况，导致报错
各个 script 脚本引用有顺序
...

NodeJS 默认采用 CommonJS 规范

Javascript

// exports.js
let a = 1
module.exports = a

Javascript

// require.js
let a = require('./exports.js')
console.log(a) // 1

当然你会问，NodeJS 既然是服务端语言，那么我们的网页(客户端)怎么使用这种规范？别急，在最后介绍

包/依赖管理工具

包就是别人为你写好的代码，你拿来使用

例如，express 框架实质上也是包，原生的 nodejs 的服务端语言编写及其麻烦，需要我们手动判断请求的地址、手动设置 header、将对象转换为 JSON 格式，而 express 内部做了很多优化

Javascript

const http = require('http')
const server = http.createServer()

server.on('request', (req,res) => {
  let content = 'not found'
  if(req.url === '/') {
    content = '首页'
  } else if(req.url === '/about') {
    content = '关于'
  }
	res.setHeader('Content-Type','text/html;charset=utf-8') // 设置Content-Type 响应头，防止中文乱码
	res.end(content)
})

server.listen(80,()=>{
	console.log('http server running at http://127.0.0.1');
})

Javascript

const express = require('express')
const app = express()

app.get('/', (req, res) => {
  res.send('首页')
})
app.get('/about', (req, res) => {
  res.send('关于')
})

app.listen(80,()=>{
	console.log('http server running at http://127.0.0.1');
})

常见的包管理工具有 npm、yarn、pnpm

这里只介绍 npm、yarn，因为 pnpm 涉及 monorepo 现阶段比较困难理解

npm 和 yarn 的区别主要在于对依赖安装的位置管理以及缓存，yarn 对比 npm 来说，采用了缓存机制，理论上安装速度会更快，且采用扁平化处理依赖，也更节省磁盘空间

扁平化处理

npm：

PlainText

├── A
|	└── C 
│ └── B
|		└── C
├── B    				
│ └── C  
├── C

yarn

将所有包/依赖放入当前项目的 node_module 文件

PlainText

├── A
├── B    				 
├── C

如果遇到引用版本不一致的情况，那么 yarn 会做以下处理：

相同包不同版本不会出现在同一级目录

PlainText

├── A
| └── C@1
├── B    
│ └── C@2 
├── C@2

PlainText

├── A
| └── C@1
├── B
├── C@2

两者执行命令的主要区别：

npm	yarn
npm install	yarn
npm install react	yarn add react
npm uninstall react	yarn remove react
npm install element-plus --save-dev	yarn add react --dev
npm update	yarn upgrade

Vscode 插件

GitHub Copilot：智能代码提示，需要获取 Github 学生包优惠

TODO Hightlight：搭配 Todo Tree 使用，可以高亮 TODO 代码

Todo Tree：搭配 TODO Hightlight 使用，可以对含有 TODO 的文件做树形处理

WakaTime：将 WakaTime 集成到 IDE 的插件

Project Manager：更好地管理自己的项目文件

客户端模块化编程

构建工具

构建工具帮我们配置好了各个依赖，不需要我们手动配置

这里只介绍 vite 构建工具，还有 webpack、parcel、turborepo 等

构建工具	优点	缺点
`vite`	启动速度最快、支持各种框架模板	可配置性很强，但不如 `webpack`
`webpack`	可配置性非常强	需要手动配置各个依赖，启动速度缓慢
`parcel`	自动化安装依赖	可配置性非常差
`turborepo`	`monorepo` 管理，启动速度快(采用缓存技术)	学习成本大

如何使用

Bash

yarn create vite

客户端模块化编程使用 ES 规范，当然其中的 NodeJS 模块还是 CommonJS 规范

ES 规范

Javascript

// export.js
let a = 1
export const b = 2
export default a

Javascript

// import.js
import a, { b } from './export.js'
console.log(a, b) // 1, 2

Vue

Vue 是一个渐进性 JavaScript 框架，采用 MVVM 模型

另外还有 React、Angular、Svelte、JQuery、NextJS、Nuxt、SolidJS、Qwik 等框架

主要的几个为 React、Vue、NextJS、NuxtJS

Angular：框架虽然是最先提出的，功能也是最多的，但是编程模式偏向后端，国内很少公司在用
Sevlte：新生框架，语法类似 vue，但是更简洁，国外挺火的
JQuery：已经淘汰了，还是操作 DOM 那一套
NextJS：基于 React 的服务端渲染框架
Nuxt：基于 Vue 的服务端渲染框架
SolidJS：新生框架，主打性能，语法和 React 类似，但更简单
Qwik：新生的服务端渲染框架，速度巨快
....

vue 在国外的流行度远远低于 React、Angular 热度，甚至比 JQuery 还低，但是在国内很多人用。因为语法简单，React 的学习需要我们熟练掌握 ES6 语法，而 Vue 不需要

传统编程

html

PlainText

<span id="val"></span>
<button id="btn" onclick="increment()">++</button>
<script>
let count = 0
const val = document.getElementById('val')
function increment() {
  val.innerHTML = count++
}
</script>

vue

vue 采用数据驱动视图的方式，省去了我们获取 DOM 元素的操作

Vue

<template>
	<span>{{count}}</span>
	<button @click="increment">++</button>
</template>
<script setup>
import { ref } from 'vue'
const conut = ref(0)
function increment() {
  count.value += 1
}
</script>

@click 是 vue 提供的语法糖，表示点击触发事件，和 onclick 差不多。

ref 是 vue 提供的响应式数据语法

{{}} 是 vue 提供的模板语法，可以在里面写 script 标签定义的数据，如果变量不是响应式数据(即使用 ref 包裹)，那么数据的改变不影响视图

.vue 文件

.vue 文件是我们编写 vue 代码的文件，其基本的内容为：

Vue

<template></template>
<script lang="ts" setup></script>
<style scoped></style>

<template>：编写 HTML 代码的地方
<script>：编写 JavaScript 的地方
<style>：编写 css 的地方

注意到标签上的属性：

script 标签的 lang：表示我们使用什么语言编写，可以选择 ts：TypeScript，如果使用 JavaScript 编写，可以不添加这个属性
script 标签的 setup：vue3.2 版本发布的语法糖写法，添加该属性可以直接书写 JavaScript 代码
style 标签的 scoped：表示该样式只影响该文件，即使别的文件中的类名或者 id 名重复，添加 scoped 属性后也不会影响。原理是为每个标签添加 data-v-xxx，vue 内部将 css 代码处理为属性选择器
Vue
```
<template>
	<span class="val">123456</span>
</template>
<style scoped>
  .val {
    color: red;
  }
</style>
```
html
PlainText
```
<style>
  .val[data-v-xxx] {
    color: red;
  }
</style>
<span class="val" data-v-xxx>123456</span>
```

组件

每一个 .vue 文件都是一个组件，组件可以引用另一个组件

App.vue

应用程序的入口文件

Vue

<script setup>
import Son from './components.vue'
</script>
<template>
	<div>
    <h1>App组件</h1>
    <hr />
    <Son />
  </div>
</template>

components/Son.vue

Vue

<template>
	<div>
    <h2>Son组件</h2>
  </div>
</template>

父组件可以向子组件传递数值

App.vue

在子组件加上要传递的属性及属性值

Vue

<Son msg="this is a message" />

components/Son.vue

子组件使用 defineProps 接收父组件传递过来的数值

Vue

<script setup>
defineProps({
  msg: String
})
</script>
<template>
	<div>
    <h2>Son组件</h2>
    {{msg}}
  </div>
</template>

渲染

vue 提供了条件渲染和循环渲染

条件渲染：

v-if、v-else-if、v-else

Vue

<template>
	<div>
		<span v-if="score < 60">不及格</span>
    <span v-else-if="score < 80">及格</span>
    <span v-else-if="score < 90">良好</span>
    <span v-else>优秀</span>
  </div>
</template>
<script setup>
import { ref } from 'vue'
let score = ref(0)
</script>

循环渲染：

v-for

Vue

<template>
	<div>
    <div v-for="(item, index) in scores">
      <span>序号: {{index + 1}}</span>
    	<span>名字: {{item.name}}</span>
      <span>分数: {{item.score}}</span>
  	</div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
let scores = [
  { name: 'xm', score: 100 },
  { name: 'xg', score: 99 },
  { name: 'xh', score: 98 }
]
</script>

v-model

v-model 可以实现表单和数据的双向绑定

Vue

<template>
	<input type="text" v-model="iptVal" />
	<button @click="logIptVal">log</button>
</template>
<script setup>
import { ref } from 'vue'
const iptVal = ref('')
function logIptVal() {
  console.log(iptVal.value)
}
</script>

其他

watch 可以监听数据的变化
lifecycle：生命周期，页面渲染和销毁的过程可以有 setup -> beforeCreate -> created -> beforeMount -> mounted ->beforeUnmount -> unmounted

其中 mounted 之后存在 updated，表示页面更新触发的生命周期钩子
computed：计算属性
<Suspense>：异步组件
....