if
、{}
、''
、运算符、;
bad:
if(){
let age=18;
let str="fff";
}else{}
function xxx(){}
good
if() {
let age = 18
let str = 'fff'
} else {
}
function xxx() {}
:
、,
bad:
let obj = {
name:'plumbiu',
fn:(a,b)=>{}
}
good:
let obj = {
name: 'plumbiu',
fn: (a, b) => {}
}
===
而不是 ==
tabsize = 2
bad:
const obj = {
name: 'xj'
}
good:
const obj = {
name: 'xj'
}
...
`${Nmb++} ${id.innerText} rwE 1`
const
、let
,而不是 var
bad
var a = 1
var PI = 3.14
good
let a = 1
const PI = 3.14
学习网站:
``
和 ${}
运算符
const str = 'Plumbiu'
console.log(`Hi ${str}`) // Hi Plumbiu
对象:
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"
数组:
const arr = [1, 2, 3, 4, 5]
const [a, b, c] = arr
console.log(a, b, c) // 1 2 3
形式 ...
对象
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 }
数组
对类数组同理,例如可以对字符串解构
const arr = [1, 2, 3, 4, 5]
const [a, ...b] = arr
console.log(a, b) // 1 [2, 3, 4, 5]
运用到函数中
function sum(...args) {
let sum = 0
args.forEach(item => sum += item)
return sum
}
console.log(sum(1, 2, 3, 4, 5)) // 15
箭头函数没有
arguments
!!!
用来判断一个字符串/元素是否包含在另一个字符串/数组中,返回布尔值
indexOf
返回数字,相比之下,纯粹的判断一个字符串是否包含在另一个字符串中,使用 includes
更有语义化
'Hello world'.includes('Hello') // true
'Hello world'.includes('Hi') // false
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
Object.entries(obj)
、Object.keys(obj)
、Object.values(obj)
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)
}
let arr = [[1, 2, 3], [4, 5, 6, [6.1, 6.2,]], [7, 8, 9]]
console.log(arr.flat(Infinity))
一个程序员需要好好展现自己,才能获得面试官和其他人的赏识
必备:
只需要在 github
上新建一个与 github
用户名一样的仓库即可,更改其中的 README.md
图片的来源:
记得把其中的 Plumbiu
换成自己的 github
用户名
![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
插件
博客可以记录自己的笔记和学习过程,面试官看到你写的博客那么棒,肯定会给你加分的
关于如何搭建一个博客有很多教程,这里列举一个比较详细的教学视频
NodeJS
实质上是一门服务端 JavaScript
框架,底层是用 C/C++
实现的,只不过我们可以使用 JavaScript
语言编写代码
传统的 JavaScript
编程方式是在 html
文件中使用 <script>
标签
<script src="./index1.js"></script>
<script src="./index2.js"></script>
<script>
console.log(a)
</script>
这样做有以下缺点
script
脚本引用有顺序NodeJS
默认采用 CommonJS
规范
// exports.js
let a = 1
module.exports = a
// require.js
let a = require('./exports.js')
console.log(a) // 1
当然你会问,NodeJS
既然是服务端语言,那么我们的网页(客户端)怎么使用这种规范?别急,在最后介绍
包就是别人为你写好的代码,你拿来使用
例如,express
框架实质上也是包,原生的 nodejs
的服务端语言编写及其麻烦,需要我们手动判断请求的地址、手动设置 header
、将对象转换为 JSON
格式,而 express
内部做了很多优化
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');
})
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:
├── A
| └── C
│ └── B
| └── C
├── B
│ └── C
├── C
yarn
将所有包/依赖放入当前项目的 node_module
文件
├── A
├── B
├── C
如果遇到引用版本不一致的情况,那么 yarn 会做以下处理:
相同包不同版本不会出现在同一级目录
├── A
| └── C@1
├── B
│ └── C@2
├── C@2
├── 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 |
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 管理,启动速度快(采用缓存技术) | 学习成本大 |
yarn create vite
客户端模块化编程使用 ES
规范,当然其中的 NodeJS
模块还是 CommonJS
规范
ES
规范
// export.js
let a = 1
export const b = 2
export default a
// import.js
import a, { b } from './export.js'
console.log(a, b) // 1, 2
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
不需要
传统编程
<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 元素的操作
<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 代码的文件,其基本的内容为:
<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
代码处理为属性选择器
<template>
<span class="val">123456</span>
</template>
<style scoped>
.val {
color: red;
}
</style>
<style>
.val[data-v-xxx] {
color: red;
}
</style>
<span class="val" data-v-xxx>123456</span>
每一个 .vue
文件都是一个组件,组件可以引用另一个组件
App.vue
应用程序的入口文件
<script setup>
import Son from './components.vue'
</script>
<template>
<div>
<h1>App组件</h1>
<hr />
<Son />
</div>
</template>
components/Son.vue
<template>
<div>
<h2>Son组件</h2>
</div>
</template>
父组件可以向子组件传递数值
App.vue
在子组件加上要传递的属性及属性值
<Son msg="this is a message" />
components/Son.vue
子组件使用 defineProps
接收父组件传递过来的数值
<script setup>
defineProps({
msg: String
})
</script>
<template>
<div>
<h2>Son组件</h2>
{{msg}}
</div>
</template>
vue
提供了条件渲染和循环渲染
条件渲染:
v-if
、v-else-if
、v-else
<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
<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
可以实现表单和数据的双向绑定
<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>
:异步组件
....