阿振sc

icon indicating a website link todever.com icon indicating an email [email protected]

icon location ChengDu China icon location Web Developer, Working In React、Vue、TypeScript、Nodejs、Golang and Rust!

Results 101 issues of 阿振sc

一文入门Dart

**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - [一文入门Dart](#%E4%B8%80%E6%96%87%E5%85%A5%E9%97%A8dart) - [从 Hello World 开始](#%E4%BB%8E-hello-world-%E5%BC%80%E5%A7%8B) - [数据类型](#%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B) - [函数](#%E5%87%BD%E6%95%B0) - [操作符和流程控制语句](#%E6%93%8D%E4%BD%9C%E7%AC%A6%E5%92%8C%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6%E8%AF%AD%E5%8F%A5) - [类和对象](#%E7%B1%BB%E5%92%8C%E5%AF%B9%E8%B1%A1) - [定义](#%E5%AE%9A%E4%B9%89) - [构造函数](#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0) - [Getters & Setters](#getters--setters) -...

为React应用添加Less支持

**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - [Eject](#eject) - [安装less](#%E5%AE%89%E8%A3%85less) - [配置webpack.config.js](#%E9%85%8D%E7%BD%AEwebpackconfigjs) - [第二种配置方式](#%E7%AC%AC%E4%BA%8C%E7%A7%8D%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F) `create-react-app` 在 `webpack` 上封装了一层 `react-scripts`，一方面是可以使得不习惯 `eslint`，`babel` 和 `webpack` 的新手只需关注于组件的编写，另一方面是可以不断的更新和改进默认选项，而不会影响到业务代码。 可见，`react-scripts` 的作用就是通过将一些底层配置封装起来，从而向上屏蔽了众多细节，使得业务开发者只需关注业务代码的开发。 > create-react-app 脚手架中已经添加了 `sass-loader` 的支持，所以只需要安装...

优雅的使用CSS MODULE

> 在上一篇文章：[让React支持Less](https://www.todever.com/2017/12/01/%e4%b8%bareact%e5%ba%94%e7%94%a8%e6%b7%bb%e5%8a%a0less%e6%94%af%e6%8c%81/ "让React支持Less")中，我介绍了如何在使用了`create-react-app`后，暴露`webpack`配置的方法，这次我们来看看如何让我们更优雅的使用`CSS Module` 其实`crate-react-app`创建的`React`工程，默认支持`Css Module`，我们可以将`css`命名为`xxx.module.css`，然后在组件中引入，即可使用，就像下面这段代码一样 ```javascript import React, { Component } from 'react'; import styles from './Button.module.css'; // 将 css modules 文件导入为 styles import './another-stylesheet.css'; // 导入常规 CSS 文件...

剖析JavaScript运行机制

**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - [先了解进程和线程](#%E5%85%88%E4%BA%86%E8%A7%A3%E8%BF%9B%E7%A8%8B%E5%92%8C%E7%BA%BF%E7%A8%8B) - [进程](#%E8%BF%9B%E7%A8%8B) - [线程](#%E7%BA%BF%E7%A8%8B) - [进程和线程](#%E8%BF%9B%E7%A8%8B%E5%92%8C%E7%BA%BF%E7%A8%8B) - [多进程和多线程](#%E5%A4%9A%E8%BF%9B%E7%A8%8B%E5%92%8C%E5%A4%9A%E7%BA%BF%E7%A8%8B) - [JavaScript是单线程的](#javascript%E6%98%AF%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84) - [浏览器中的进程和线程](#%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E7%9A%84%E8%BF%9B%E7%A8%8B%E5%92%8C%E7%BA%BF%E7%A8%8B) - [浏览器是多进程的](#%E6%B5%8F%E8%A7%88%E5%99%A8%E6%98%AF%E5%A4%9A%E8%BF%9B%E7%A8%8B%E7%9A%84) - [浏览器中进程的分类](#%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E8%BF%9B%E7%A8%8B%E7%9A%84%E5%88%86%E7%B1%BB) - [浏览器需要多进程](#%E6%B5%8F%E8%A7%88%E5%99%A8%E9%9C%80%E8%A6%81%E5%A4%9A%E8%BF%9B%E7%A8%8B) - [单独阐述渲染进程Renderer(重点)](#%E5%8D%95%E7%8B%AC%E9%98%90%E8%BF%B0%E6%B8%B2%E6%9F%93%E8%BF%9B%E7%A8%8Brenderer%E9%87%8D%E7%82%B9) - [GUI渲染线程](#gui%E6%B8%B2%E6%9F%93%E7%BA%BF%E7%A8%8B)...

在JavaScript中常用的数组操作

**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - [改变原始数据的操作方法](#%E6%94%B9%E5%8F%98%E5%8E%9F%E5%A7%8B%E6%95%B0%E6%8D%AE%E7%9A%84%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95) - [不会修改原始数组的操作方法](#%E4%B8%8D%E4%BC%9A%E4%BF%AE%E6%94%B9%E5%8E%9F%E5%A7%8B%E6%95%B0%E7%BB%84%E7%9A%84%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95) - [使用](#%E4%BD%BF%E7%94%A8) > 数组操作在前端工程师的日常工作中随处可见，下面来总结一些常见的数组操作 ## 改变原始数据的操作方法 - `push` 向数组末尾添加元素，并返回新的长度 - `pop` 删除数组最后一个元素并返回删除的元素 - `unshift` 向数组开头添加元素，并返回数组新的长度 - `shift` 将第一个元素删除并返回删除的元素，空则为`undefined` - `reverse`...

在JavaScript中应用设计模式

**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - [在JavaScript中应用设计模式](#%E5%9C%A8javascript%E4%B8%AD%E5%BA%94%E7%94%A8%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F) - [JavaScript中的面向对象编程](#javascript%E4%B8%AD%E7%9A%84%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%BC%96%E7%A8%8B) - [概念](#%E6%A6%82%E5%BF%B5) - [封装、继承和多态](#%E5%B0%81%E8%A3%85%E7%BB%A7%E6%89%BF%E5%92%8C%E5%A4%9A%E6%80%81) - [UML类图](#uml%E7%B1%BB%E5%9B%BE) - [SOLID设计原则](#solid%E8%AE%BE%E8%AE%A1%E5%8E%9F%E5%88%99) - [设计准则](#%E8%AE%BE%E8%AE%A1%E5%87%86%E5%88%99) - [SOLID](#solid) - [JavaScript中常用的设计模式](#javascript%E4%B8%AD%E5%B8%B8%E7%94%A8%E7%9A%84%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F) - [工厂模式](#%E5%B7%A5%E5%8E%82%E6%A8%A1%E5%BC%8F) - [单例模式](#%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F) - [适配器模式](#%E9%80%82%E9%85%8D%E5%99%A8%E6%A8%A1%E5%BC%8F)...

在React+TypeScript项目中使用Eslint和Prettier

**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - [用ESLint来规范Typescript代码](#%E7%94%A8eslint%E6%9D%A5%E8%A7%84%E8%8C%83typescript%E4%BB%A3%E7%A0%81) - [用ESLint来规范React代码](#%E7%94%A8eslint%E6%9D%A5%E8%A7%84%E8%8C%83react%E4%BB%A3%E7%A0%81) - [结合Prettier和ESLint来规范代码](#%E7%BB%93%E5%90%88prettier%E5%92%8Ceslint%E6%9D%A5%E8%A7%84%E8%8C%83%E4%BB%A3%E7%A0%81) - [在VSCode中集成ESLint配置](#%E5%9C%A8vscode%E4%B8%AD%E9%9B%86%E6%88%90eslint%E9%85%8D%E7%BD%AE) - [husky和lint-staged构建代码工作流](#husky%E5%92%8Clint-staged%E6%9E%84%E5%BB%BA%E4%BB%A3%E7%A0%81%E5%B7%A5%E4%BD%9C%E6%B5%81) - [gitlab的CI/CD来规范代码](#gitlab%E7%9A%84cicd%E6%9D%A5%E8%A7%84%E8%8C%83%E4%BB%A3%E7%A0%81) > 对于`Typescript`项目的编码规范而言，主要有两种选择`ESLint`和`TSLint`。`ESLint`不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由于性能问题，`TypeScript` 官方决定全面采用`ESLint`，甚至把仓库作为测试平台，而 `ESLint` 的 `TypeScript` 解析器也成为独立项目，专注解决双方兼容性问题。 - 用`ESLint`来规范`Typescript`代码 - 用`ESLint`来规范`React`代码 -...

精读ECMAScript6.0

**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - [精读ECMAScript 6.0](#%E7%B2%BE%E8%AF%BBecmascript-60) - [简介](#%E7%AE%80%E4%BB%8B) - [let和const](#let%E5%92%8Cconst) - [let 命令](#let-%E5%91%BD%E4%BB%A4) - [块级作用域](#%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F) - [const 命令](#const-%E5%91%BD%E4%BB%A4) - [顶层对象的属性](#%E9%A1%B6%E5%B1%82%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7) - [globalThis 对象](#globalthis-%E5%AF%B9%E8%B1%A1) - [解构赋值](#%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC) - [数组的解构赋值](#%E6%95%B0%E7%BB%84%E7%9A%84%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC)...

精读React官方教程

**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - [精读React官方教程](#%E7%B2%BE%E8%AF%BBreact%E5%AE%98%E6%96%B9%E6%95%99%E7%A8%8B) - [React基础](#react%E5%9F%BA%E7%A1%80) - [向应用中添加`React`](#%E5%90%91%E5%BA%94%E7%94%A8%E4%B8%AD%E6%B7%BB%E5%8A%A0react) - [创建新的`React`应用](#%E5%88%9B%E5%BB%BA%E6%96%B0%E7%9A%84react%E5%BA%94%E7%94%A8) - [JSX](#jsx) - [在JSX中嵌入表达式](#%E5%9C%A8jsx%E4%B8%AD%E5%B5%8C%E5%85%A5%E8%A1%A8%E8%BE%BE%E5%BC%8F) - [JSX本身也是一个表达式](#jsx%E6%9C%AC%E8%BA%AB%E4%B9%9F%E6%98%AF%E4%B8%80%E4%B8%AA%E8%A1%A8%E8%BE%BE%E5%BC%8F) - [特定属性](#%E7%89%B9%E5%AE%9A%E5%B1%9E%E6%80%A7) - [包含子元素](#%E5%8C%85%E5%90%AB%E5%AD%90%E5%85%83%E7%B4%A0) - [防止注入攻击](#%E9%98%B2%E6%AD%A2%E6%B3%A8%E5%85%A5%E6%94%BB%E5%87%BB) - [表示为对象](#%E8%A1%A8%E7%A4%BA%E4%B8%BA%E5%AF%B9%E8%B1%A1) - [元素渲染](#%E5%85%83%E7%B4%A0%E6%B8%B2%E6%9F%93)...

补充几个中高级前端的面试题

**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - [JS数据类型](#js%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B) - [简述如何正确判断变量是否为 `Array` 类型，说出你知道的所有方法。](#%E7%AE%80%E8%BF%B0%E5%A6%82%E4%BD%95%E6%AD%A3%E7%A1%AE%E5%88%A4%E6%96%AD%E5%8F%98%E9%87%8F%E6%98%AF%E5%90%A6%E4%B8%BA-array-%E7%B1%BB%E5%9E%8B%E8%AF%B4%E5%87%BA%E4%BD%A0%E7%9F%A5%E9%81%93%E7%9A%84%E6%89%80%E6%9C%89%E6%96%B9%E6%B3%95) - [解释什么是闭包及其作用，并说出下列代码的输出什么？如何使用闭包得到正确的结果。](#%E8%A7%A3%E9%87%8A%E4%BB%80%E4%B9%88%E6%98%AF%E9%97%AD%E5%8C%85%E5%8F%8A%E5%85%B6%E4%BD%9C%E7%94%A8%E5%B9%B6%E8%AF%B4%E5%87%BA%E4%B8%8B%E5%88%97%E4%BB%A3%E7%A0%81%E7%9A%84%E8%BE%93%E5%87%BA%E4%BB%80%E4%B9%88%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E9%97%AD%E5%8C%85%E5%BE%97%E5%88%B0%E6%AD%A3%E7%A1%AE%E7%9A%84%E7%BB%93%E6%9E%9C) - [什么是立即执行函数IIFE，它有什么作用？](#%E4%BB%80%E4%B9%88%E6%98%AF%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0iife%E5%AE%83%E6%9C%89%E4%BB%80%E4%B9%88%E4%BD%9C%E7%94%A8) - [如何数组去重？写出所有可能的实现代码](#%E5%A6%82%E4%BD%95%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D%E5%86%99%E5%87%BA%E6%89%80%E6%9C%89%E5%8F%AF%E8%83%BD%E7%9A%84%E5%AE%9E%E7%8E%B0%E4%BB%A3%E7%A0%81) - [阐述浅拷贝与深拷贝的区别，并手写代码实现深拷贝。](#%E9%98%90%E8%BF%B0%E6%B5%85%E6%8B%B7%E8%B4%9D%E4%B8%8E%E6%B7%B1%E6%8B%B7%E8%B4%9D%E7%9A%84%E5%8C%BA%E5%88%AB%E5%B9%B6%E6%89%8B%E5%86%99%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0%E6%B7%B1%E6%8B%B7%E8%B4%9D) - [使用正则实现一个 `trim()` 函数](#%E4%BD%BF%E7%94%A8%E6%AD%A3%E5%88%99%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-trim-%E5%87%BD%E6%95%B0) - [请解释原型与原型链](#%E8%AF%B7%E8%A7%A3%E9%87%8A%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE) - [请说明ES5中 `Object.defineProperty` 和ES6中...