yaoningvital/blog

my blog

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`