blog-前端学习笔记

1、CSS

名称	标签	名称	标签
Media Queries	Media Queries	Testing media queries programmatically	Media Queries
Using Media Queries for Accessibility	Media Queries	Using media queries	Media Queries
@import	Media Queries	@media	Media Queries
transition、transform、animation	transition	web页面在iOS手机的浏览器中上下滑动卡顿的问题
容器内两部分，一部分固定宽度，另一部分自动占满剩余宽度的方法	flex	用“transform”和“animation”实现一个旋转的动画	animation transform rotate
用“transform”和“transition”实现一个旋转的动画	transform transition

2、JavaScript原生

名称	标签
let 和 var 的区别	ES6
Javascript实现异步编程的几种方式	ES6 todo
web中实现pdf下载、预览、打印	pdfmake
用scrollLeft实现水平滑动	scrollLeft
关于class中super的指向	class super
找到一个深拷贝的方法	深拷贝
H5页面调起手机相册和摄像头	h5调起手机相册和摄像头
“财务看板”项目中Promise的应用	promise
几种模块化规范（AMD、CMD、CommonJS、UMD、ES6的Module语法）的介绍	JS模块化
关于 prototype、__proto__、constructor及class的继承	原型链
RegExp.prototype.test()	RegExp
import命令、import()、require()的比较	import命令 import() require()
ES6模块与CommonJS模块的差异	ES6模块 CommonJS模块
touch事件的应用	touch event
关于字符的UTF-16编码	string UTF-16

3、UI Framework

3.1 Vue

3.1.1 Vue

名称	标签
在Vue的项目中创建自己的组件，上传到npm，并下载使用的步骤	Vue @Vue/cli 3

Essential

名称	标签	名称	标签	名称	标签
用vue-cli脚手架搭建vue项目	Vue	Introduction	Vue	Creating a Vue Instance	Vue
Vue Instance Lifecycle	Vue	Template Syntax	Vue	Computed Properties and Watchers	Vue
Class and Style Bindings	Vue	Conditional Rendering	Vue	List Rendering	Vue
Event Handling	Vue	Form Input Bindings	Vue	Components Basics	Vue

Components In-Depth

名称	标签	名称	标签	名称	标签
Component Registration	Vue	Props	Vue	Custom Events	Vue
Slots	Vue	Dynamic & Async Components	Vue	Handling Edge Cases	Vue

Transitions & Animation

名称	标签	名称	标签
Enter/Leave & List Transitions	Vue	State Transitions	Vue

Reusability & Composition

名称	标签	名称	标签	名称	标签
Mixins	Vue	Custom Directives	Vue	Render Functions & JSX	Vue

3.1.2 Vue的UI组件库

3.1.2.1 Element

名称	文件	脚本	内容
element源码分析	package.json scripts	build:file	node build/bin/iconInit.js 脚本具体做了些什么
element源码分析	package.json scripts	build:file	node build/bin/build-entry.js 脚本具体做了些什么
element源码分析	package.json scripts	build:file	node build/bin/i18n.js 脚本具体做了些什么
element源码分析	package.json scripts	build:file	node build/bin/version.js 脚本具体做了些什么
element源码分析	package.json scripts	build:theme	node build/bin/gen-cssfile 脚本具体做了些什么
element源码分析	package.json scripts	build:theme	gulp build --gulpfile packages/theme-chalk/gulpfile.js 脚本具体做了些什么
element源码分析	package.json scripts	build:theme	cp-cli packages/theme-chalk/lib lib/theme-chalk 脚本具体做了些什么
element源码分析	package.json scripts	build:utils	cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js 脚本具体做了些什么
element源码分析	package.json scripts	build:umd	node build/bin/build-locale.js 脚本具体做了些什么
element源码分析	package.json scripts	clean	rimraf lib 脚本具体做了些什么
element源码分析	package.json scripts	clean	rimraf packages/*/lib 脚本具体做了些什么
element源码分析	package.json scripts	clean	rimraf test/**/coverage 脚本具体做了些什么
element源码分析	package.json scripts	deploy:build	npm run build:file 脚本具体做了些什么
element源码分析	package.json scripts	deploy:build	cross-env NODE_ENV=production webpack --config build/webpack.demo.js 脚本具体做了些什么
element源码分析	package.json scripts	deploy:build	echo element.eleme.io>>examples/element-ui/CNAME 脚本具体做了些什么

3.1.2.2 Vux

名称	标签
vux源码分析	Vue UI组件库 vux

3.1.3 Vue CLI (@vue/cli)

名称	标签	名称	标签	名称	标签
Vue CLI -- Overview	@vue/cli	Vue打包之后的dist文件，如何本地预览	@vue/cli		@vue/cli

3.1.4 Vuex

名称	标签	名称	标签
Vuex--state、getters、mutations、actions的定义和调用	Vuex		Vuex

3.2 React

3.2.1 React

名称	标签	名称	标签	名称	标签
搭建react项目脚手架命令	React	Refs 和 Forwarding Refs	React	Forwarding Refs	React
关于 ref 和 forward ref 的理解	React	Code Splitting	React	Context	React
Error Boundaries	React	Fragments	React	Higher-Order Components	React
Integrating with Other Libraries	React	JSX In Depth	React	Optimizing Performance	React
Portals	React	React Without JSX	React	Reconciliation	React
Refs and the DOM	React	Render Props	React	Static Type Checking	React
Strict Mode	React	Typechecking With PropTypes	React	Uncontrolled Components	React
The Component Lifecycle	React	Introducing Hooks	React	Using the State Hook	React
Using the Effect Hook	React	Rules of Hooks	React	关于 useEffect	React Hooks

3.2.2 React使用常见问题

名称	标签	名称	标签
关于react在ie中的兼容	react兼容性	react项目，部署在二级目录下，需要做的配置	react
React--在chrome redux devtools中提示：No store found	react-devtools-extension

3.2.3 React的UI组件库

名称	标签
在react中配置UI库'antd'和'antd-mobile'的按需加载	Ant Design Mobile

3.3 Angular

3.3.1 Angular

名称	标签	名称	标签	名称	标签
Tutorial	Angular	Tutorial-0-Bootstrapping	Angular		Angular

3.4 各UI框架的比较

名称	标签
Vue和React的异同点	vue react
Vue和AngularJS(Angular 1)的比较	vue Angular
Vue和Angular（Angular2）的比较	vue Angular2
Vue和Ember、Knockout、Polymer、Riot的比较	vue

4、一些强大的UI套件(HTML5 JavaScript Component Suite)

4.1 DevExtreme

名称	标签
怎样给 DevExtreme DataGrid 的导出按钮添加显示文字	DevExtreme DataGrid export button

5、 状态管理

5.1 Redux

Redux

名称	标签	名称	标签	名称	标签
Redux Basic Example	Redux	Motivation	Redux	Core Concepts	Redux
Three Principles	Redux	Basic Tutorial	Redux	Usage with React	Redux
Example: Todo List	Redux	Advanced Tutorial - Async Actions	Redux	Advanced Tutorial - Async Flow	Redux
Advanced Tutorial - Middleware	Redux		Redux		Redux

React Redux

名称	标签	名称	标签	名称	标签
Why Use React Redux?	React Redux	connect()	React Redux	Provider	React Redux

5.2 Vuex

名称	标签	名称	标签
	Vuex		Vuex

5.3 Flux

名称	标签	名称	标签
	Flux		Flux

6、 路由

6.1 React Router

名称	标签	名称	标签	名称	标签
Quick Start	React Router		React Router		React Router

7、UMI

名称	标签
yarn create @umijs/umi-app 报错：文件名、目录名或卷标语法不正确	yarn create @umijs/umi-app

8、前端应用平台

名称	标签
Critical Rendering Path - Overview	浏览器 browser rendering mechanism
Critical Rendering Path - Constructing the Object Model	浏览器 browser rendering mechanism
Critical Rendering Path - Render-tree Construction, Layout, and Paint	浏览器 browser rendering mechanism
Critical Rendering Path - Render Blocking CSS	浏览器 browser rendering mechanism
Critical Rendering Path - Adding Interactivity with JavaScript	浏览器 browser rendering mechanism
Critical Rendering Path - Measuring the Critical Rendering Path	浏览器 browser rendering mechanism
Critical Rendering Path - Analyzing Critical Rendering Path Performance	浏览器 browser rendering mechanism
Critical Rendering Path - Optimizing the Critical Rendering Path	浏览器 browser rendering mechanism
Critical Rendering Path - PageSpeed Rules and Recommendations	浏览器 browser rendering mechanism

名称	标签
对微信开发的总结	微信公众号开发
微信嵌入页面V1.2.2-debug总结	微信公众号开发
微信公众号支付和H5支付开发总结	微信公众号开发
对微信小程序开发的总结	微信小程序开发
几种微信支付方式的比较	微信支付
对支付宝小程序开发的总结	支付宝小程序开发
uni-app	uni-app 跨平台应用前端框架
H5跨平台能力调研	H5跨平台 微信小程序 支付宝小程序 百度小程序 iOS Android H5

9、Node.js

名称	标签
node.js安装及环境配置	Node
npx搭建react项目时，命令行报错：npm ERR! code EINTEGRITY	npm

10、管理工具

npm

名称	标签
安装淘宝镜像之后使用cnpm还是提示“cnpm”不是内部或外部命令	npm
windows上安装nvm	nvm
npm-semver	npm todo
npm init	npm init
用npm查看包的版本	npm view npm ls
编译时总提示没安装node-sass	node-sass
npm install 时报错：if not defined npm_config_node_gyp ...	npm install node_gyp
使用npm更新npm和node的版本	npm upgrade node upgrade use npm

git

名称	标签
用git来进行项目部署的操作步骤	git
git command	git
gerrit中，push时提示'! [remote rejected] HEAD -> refs/for/master (no new changes)'的解决办法	git gerrit
git add . 时提示'warning: LF will be replaced by CRLF in XXXX. The file will have its original line endings in your working directory'	git
Connect to your Git repos with SSH	SSH
用https方式 git clone 项目代码时用户名和密码的问题	git clone
解决git 以 https 方式每次都要输入用户名密码的问题	git config
git submodule add时提示“projectfolder already exists in the index”	git submodule add
git submodule	git submodule
Git 工具 - 子模块	git submodule
关于在 Git 中删除子模块需要做哪些操作 及 删除中遇到的错误的处理	git submodule
主项目与子项目关联的总结	git submodule
git 放弃本地修改，强制拉取更新	git
Git放弃本地的修改，直接用远端的内容覆盖本地的命令	git
git 查看某个文件的某一特定行或某些特定行 的修改记录（提交历史记录）	git log

11、构建工具

名称	标签
Gulp Quick Start	gulp
webpack浅谈	webpack
构建工具为gulp的项目中，gulp serve时提示 Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (64)	gulp-sass node-sass
webpack打包之后的文件怎样在本地跑起来	webpack http-server
怎样让代码在部署之后能看到源码，能在chrome开发工具中调试源码？	webpack devtool source map

12、JavaScript compiler

12.1 Babel

名称	标签
babel-plugin-add-module-exports	babel
babel-plugin-transform-es2015-modules-umd	babel

12.2 TypeScript

名称	标签
对TypeScript的理解	ts
error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.	ts
使用react、webpack、typescript，手动搭建一个项目	ts
如何在React中添加TypeScript ？	ts
如何在一个已经存在的 React/Babel/Webpack 项目中添加TypeScript ？	ts
用TypeScript新建一个React项目的示例（React / TypeScript / Redux）	ts
Interfaces	ts
Classes	ts class
TypeScript中 typeof 的含义	ts typeof
Functions	ts function
Generics Function 泛型函数	ts Generics 泛型函数
Generic Classes 泛型类	ts Generics 泛型类
Generic Constraints 泛型约束	ts Generics 泛型约束
Enums	ts enums
Type Aliases	ts type
keyof T	ts keyof T

13、代码格式规范

名称	标签
五种JavaScript编码规范	JS代码格式规范
Airbnb JavaScript Style Guide	JS代码格式规范 Airbnb
Airbnb CSS-in-JavaScript Style Guide	CSS代码格式规范 Airbnb
Airbnb CSS / Sass Style Guide	CSS代码格式规范 Airbnb
Airbnb React/JSX Style Guide	React代码格式规范 Airbnb

14、通信协议

14.1 WebSocket

名称	标签
WebSocket学习资源	WebSocket

15、阿里云服务器

名称	标签
Linux实例搭建FTP站点	ftp站点
阿里云centos服务器安装nginx	nginx
配置nginx.conf	nginx nginx.conf
在一个服务器上，同一个IP，相同端口上，nginx怎样配置以支持多个应用？	nginx

16、Linux

名称	标签
常用的Linux命令	Linux

17、Microservices

名称	标签
Microservices	Microservices

18、工具类插件

名称	标签
导出excel的 JS 插件	export to excel

19、IDE

名称	标签
vscode中怎样让按ctrl点某个引用之后能打开新的页签，而不是覆盖掉前一个打开的文件	VSCode

20、Others

名称	标签
Advanced Front-end Interview Questions	interview
React examination questions - Q1	interview
React examination questions - Q2	interview
React examination questions - Q3	interview
React examination questions - Q4	interview
关于科学上网的设置和坑	scientific internet access
一些常用的 chrome 插件	chrome extensions