书籍笔记
JavaScript高级程序设计(第3版)JS简介
JS简史
JS实现
ECMAScript
DOM
通过 DOM 创建的这个表示文档的树形图,开发人员获得了控制页面内容和结构的主动权。借助DOM 提供的 API,开发人员可以轻松自如地删除、添加、替换或修改任何节点。
请读者注意,DOM 并不只是针对 JavaScript 的,很多别的语言也都实现了 DOM。
不过,在 Web 浏览器中,基于 ECMAScript 实现的 DOM 的确已经成为 JavaScript 这门语言的一个重要组成部分。
BOM
开发人员使用 BOM 可以控制浏览器显示的页面以外的部分。
小结
JavaScript 是一种专为与网页交互而设计的脚本语言,由下列三个不同的部分组成:
ECMAScript,由 ECMA-262 定义,提供核心语言功能;
文档对象模型(DOM),提供访问和操作网页内容的方法和接口;
浏览器对象模型(BOM),提供与浏览器交互的方法和接口。
第25章 新兴的API25.6 Web Worker25.6.1 使用workerindex.html
1234567 ...
前端常见场景解决方案
工程化开发基本流程vite安装与使用安装vite
vite依赖的node版本 >= 12.0.0
打开终端,查看npm版本:npm -v
npm版本在6.x及以下使用如下命令
aribnb-ssr表示项目名称
template表示预设模板(技术栈)
1npm init vite@latest airbnb-ssr --template vue-ts
npm版本在7及7+使用如下命令
1npm init vite@latest airbnb-ssr -- --template vue-ts
切换到文件夹下,安装依赖
12cd airbnb-ssrnpm i -D
vite构建基本配置由于是在linux环境下,运行启动命令前,改下package.json的配置
1"dev": "vite --host 0.0.0.0 --port 8081", // 指定ip和开放的端口号
vite和webapck的不同:
没有vendor文件,利用的是浏览器原生的esModule
配置@别名vite.config.ts
123456789 ...
开发工具
webstorm绿色版下载:网盘上
配置:
破解插件
插件市场搜索IDE Eval Reset,description:zhile.io
设置Ctrl + 鼠标滚轮改变字体大小
Ctrl+Alt+s
Editor->General,选择Change font size (Zoom) with Ctrl+Mouse Wheel;
关掉使用webstorm连续按两次Shift键弹出的全局搜索:
设置缩进为两个空格
其他doc转docx12345678910一、doc转docx文件linux库安装1、环境要求:服务器需要能连外网2、在root用户下,运行如下两行命令安装doc转换库(遇到需要交互确认的地方,输入 y 后回车确认):yum install libreoffice-headlessyum install libreoffice-writer如何确认是否安装成功:上传一个需要转换的doc文件,运行如下命令:soffice --headless --convert-to docx:"MS Word 2007 XML" docx &l ...
进度
记录
待做列表
首次开始日期
前置知识
备注
webpack4初级
less最佳实践
vue2基础教程巩固
2022年5月10日
自定义UI组件
elementUI源码分析
elementUI源码分析
vue2基础教程巩固
《WebKit技术内幕》
devtools使用技巧
每日回顾及耗时
什么样的内容需要每日手写回顾
设计代码能力的知识点
可能是别人前置知识的东西
什么样的内容不需要
软件的安装
项目创建
手写常见布局模式手写webpack配置
2022年5月13日(第二次)
开发环境配置(基础配置):20min
生产环境配置(基础配置):17min
2022年5月14日(第三次)
开发环境配置(基础配置+优化配置):8min
生产环境配置(基础配置):12min
2022年5月16日(第四次)
开发环境配置(基础配置+优化配置):6min
生产环境配置(基础配置+package.json中配置):16min
2022年5月20日(第五次)
开发环境配置(基础配置+ ...
Koa2 build API service
Getting started with koa2https://www.bilibili.com/video/BV18h411H7GE?spm_id_from=333.999.0.0
Node+koa2 build API serviceTutorial source:https://www.bilibili.com/video/BV13A411w79h?spm_id_from=333.999.0.0
Initialization
npm init -y
git init,create a new .gitignore file,and add node_modules
After submitting the version, view the records through git log
Create a new readme.md document
Project initialization
npm i koa
Create newsrc/main.js file in rootdirectory
1234567891011const Koa = require( ...
Koa2搭建API服务
Koa2入门https://www.bilibili.com/video/BV18h411H7GE?spm_id_from=333.999.0.0
Node+Koa2搭建API服务教程来源:https://www.bilibili.com/video/BV13A411w79h?spm_id_from=333.999.0.0
初始化
npm init -y
git init,并新建.gitignore,添加node_modules
提交版本后,并通过git log查看记录
新建README.md文档
项目初始化
npm i koa
根目录新建src/main.js
1234567891011const Koa = require('koa') // 导入Koa,由于导出的是类,一般大写const app = new Koa() // 实例化app.use((ctx, next) => { // 中间件 ctx.body = 'hello world' // 测试代码})app.listen(3000, () ...
Neovim 配置实战:从0到1打造自己的IDE
[TOC]
源链接:Neovim 配置实战:从0到1打造自己的IDE - 陈新_nshen - 掘金小册 (juejin.cn)
对应的github:
花了我26.91大洋
1.多年 VSCode 老粉,为什么最终转向 Neovim?本人常年在 Windows 系统上做程序开发,虽然已经习惯使用 “VIM” 的快捷键指法好多年了,但一直使用的都是被称为宇宙第一开发工具 VSCode 下的 VSCodeVim 插件,中间曾尝试配置过几次原生的 VIM,包括各种 GUI 的版本,最终都放弃了。
主要原因一个是 VSCode 实在是太强大了,应用商店有各种插件,涵盖 Web 开发的方方面面,装上基本不用配置就非常非常好用( 虽然在早期的 VSCode 上的有好几个 VIM 相关的插件都各有各的 bug,但后期当 VSCodeVim 被微软收编后,其他插件都停止了更新。VSCodeVim 在有了微软的投入后,也变得足够好用了)。最主要的是,我们还可以混用 VIM 的快捷键和 VSCode 的原生功能,比如 Ctrl + Shift + p 打开的无敌窗口调用 VSCode 的任意功能。
而 ...
Vue3基本使用
本文承接《Vue2基本使用》
8.Vue38.1.Vue3快速上手8.1.1.Vue3简介
2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)
耗时2年多,2600+次提交、30+个RFC、600+次PR、99位贡献者
github上的tags地址:https://github.com/vuejs/core/tree/v3.2.36
8.1.2.Vue3带来了什么8.1.2.1.性能的提升
打包大小减少41%
初次渲染快55%,更新渲染快133%
内存减少54%
…
8.1.2.2.源码的升级
使用Proxy代替defineProperty实现响应式
重写虚拟dom的实现和tree-shaking
…
8.1.2.3.拥抱TypeScript
Vue3可以更好的支持tree-shaking
8.1.2.4.新特性
Composition API(组合式API)
setup配置
ref和reactive
watch和watchEffect
provide和inject
…
新的内置组件
Fragment
Teleport
Suspense ...
Vue2基本使用
教程链接:https://www.bilibili.com/video/BV1Zy4y1K7SH
课程简介vue2 + vue3
vue基础
vue-cli
vue-router
vuex
element-ui
vue3
1.vue核心1.1.vue简介1.1.1.vue官网使用指南
教程:https://cn.vuejs.org/v2/guide/
入门教程
api:https://cn.vuejs.org/v2/api/
api是在实际开发中,遇到问题去查阅时,逐渐熟悉的
vue风格指南:https://cn.vuejs.org/v2/style-guide/
1.1.2.介绍与描述基本概念:一套用于构建用户界面的渐进式Javascript框架
我的理解:
把数据给vue,vue给你界面
何谓渐进式:根据项目的复杂程度,引入不同的库(逐渐递进)
简单应用:只需一个轻量小巧的核心库
复杂应用:可以引入各式各样的vue插件
发展历史:
作者:Evan You
2013年,受到Angular框架的启发,尤雨溪开发出了一款轻量框架——Seed。同年12年,Se ...
TypeScript基础
[TOC]
环境配置和搭建什么是TypeScriptTypeScript是JavaScript的超集,遵循最新的ES5/ES6规范。TypeScript扩展了JavaScript语法
为什么要有TS
TS更像后端语言,如JAVA,可以开发大型企业应用
TS提供的类型系统,可以帮助我们在写代码时提供丰富的语法提示
在编写代码时,会对代码进行类型检查从而避免很多线上错误
TypeScript不会取代js,两者是相互共存的
尤雨溪:我认为将类型添加到js本身是一个漫长的过程。让委员会设计一个类型系统是(根据TC39的经历来判断)不切实际的
我也是这么认为的
环境配置全局编译TS文件全局安装typescript对ts进行编译
12npm i typescript -gtsc --init # 生成tsconfig.json
12tsc # 可以将ts文件编译成js文件tsc --watch # 监控ts文件变化生成js文件
本地安装
12npm i typescript -Dnpx tsc --init
创建tsconfig.json,以下是默认生成的配置
12345678910 ...