盘点新疆美食
前言
新疆美食盘点
可以在线耍一下：https://brilliant-js.com/
GitHub地址：https://github.com/brilliant-js/brilliant
一、项目背景这又是一次夸语雀编辑器的日常，上一次夸是在这里：一个工具两个方法，搞定程序员时间管理，之所以如此钟爱语雀，因为它把typora搬到了线上，这种实时渲染Markdown真的太实用而且太高级了，从很早用语雀开始就一直有个这样的想法：如果哪一天我的项目需要线上编辑器，一定要搞个语雀这样的。
这一天终于来了，接到新的业务需求，需要引入一款React在线编辑器，记得上一次在公司项目中使用编辑器组件还是两年前，那是一款同样优秀的富文本编辑器，可惜不支持实时Markdown，那时的我没有选择，现在的我就要Markdown实时渲染的。
所谓的Markdown实时渲染就是类似这样的（示例来自语雀）：
但正如那句名人名言：
美好的东西都不是轻易能得到的。
搜索了众多开源编辑器组件之后，发现讨论度最高也最常见的依然是纯富文本编辑器，其次就是左右两栏预览的纯Markdown编辑器，虽然这两种模式 ...
📣【教程】webpack搭建TS版React开发环境
前言本文初衷：平时的项目大多用create-react-app开发，从开发到打包都只是在敲命令而见不到webpack.config.js配置文件，简直是面向黑箱编程，遇到问题之后即使解决了也不知道怎么回事，这种感觉非常不好。
学习 webpack 的重要性不言而喻，即使市面上已经有如此众多的成熟脚手架，比如普通项目可以用 CRA，SPA 管理系统可以用 antdpro，打包组件库可以用 tsdx 等等，但如果不懂这些打包工具的原理甚至基础用法，总有一天你会遇到奇葩问题而不知道如何解决。
本文将以问题导向的形式，在实际搭建过程中逐个剖析webpack重要配置，深浅适宜，整体内容较基础，适合初入坑 webpack 的小伙伴们参考。
本示例 webpack 版本为5.x，webpack-cli版本为4.x
话不多说，马上开始吧~
正文1.项目初始化1234mkdir webapck-ts-reactcd webapck-ts-reactyarn init yarn add webpack webpack-cli -D
空项目中初始化为以下结构：
🤔 问题1：webpack是什么？
...
📺echarts开发理念总结
echarts设计理念
ECharts 还提供了自定义系列，只需要传入一个_renderItem_函数，就可以从数据映射到任何你想要的图形
支持直接传入包括二维表，key-value 等多种格式的数据源， encode 完成从数据到图形的映射，多个组件能够共享一份数据
TypedArray 支持大数据量的展示
增量渲染，websocket实现流式加载
移动端优化：移动端手指缩放 -> PC端鼠标滚轮
多渲染方案：Canvas -> 应对大数据量和特效、SVG（4.0+）-> 兼容移动端、VML->兼容IE
交互：我们提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选
开始使用1、原生项目中使用12345<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script><body> <div id="main" style="width:600px;height:400px"></div& ...
🍣基于draft.js封装一款酷炫的Markdown实时渲染编辑器
前言
最终成果
可以在线耍一下：https://brilliant-js.com/
GitHub地址：https://github.com/brilliant-js/brilliant
一、项目背景这又是一次夸语雀编辑器的日常，上一次夸是在这里：一个工具两个方法，搞定程序员时间管理，之所以如此钟爱语雀，因为它把typora搬到了线上，这种实时渲染Markdown真的太实用而且太高级了，从很早用语雀开始就一直有个这样的想法：如果哪一天我的项目需要线上编辑器，一定要搞个语雀这样的。
这一天终于来了，接到新的业务需求，需要引入一款React在线编辑器，记得上一次在公司项目中使用编辑器组件还是两年前，那是一款同样优秀的富文本编辑器，可惜不支持实时Markdown，那时的我没有选择，现在的我就要Markdown实时渲染的。
所谓的Markdown实时渲染就是类似这样的（示例来自语雀）：
但正如那句名人名言：
美好的东西都不是轻易能得到的。
搜索了众多开源编辑器组件之后，发现讨论度最高也最常见的依然是纯富文本编辑器，其次就是左右两栏预览的纯Markdown编辑器，虽然这两种模式仍有 ...
🤓React常见面试题总结
一、常见 React 面试题
二、问题&解答
1.React 的优势到底在哪里？
🤔 你是如何理解 React 框架的？
如只会 React 基本是无法回答的，必须对其他框架多少有一些理解（Vue，Angular，Svelte 等），但是避免陷入捧一踩一的模式。
框架的出现是为了应对前端开发任务量的增长，公认第一款框架出现于 2009 年，是由 Google 团队开发的 Angular 框架，借鉴了 Java 语言的部分特性，具备自底向上框架的全部构成要素（比如路由，状态管理，响应式开发等），学习成本较高，上手难度大。
后来发展到 React，极大简化了框架的开发模式，React 倡导一切皆组件！
Angular 和 React 的本质区别从各自官方定义中就可以看出端倪：React 框架本书负责组件，开发者负责数据，程序员负责 MV 的处理，而React 负责 VM 的构建。
由于 React 只是一个用于构建用户界面的库，所以它的使用场景更加广泛，比如可以开发 PC 端页面引入react-dom即可，开发 App 引入react-dom-native即可
1234567 ...
🐹写给前端的MySQL数据库入门（二）
前言书接上回写给前端的MySQL数据库入门（一），基于关系型数据库的优势，日常开发中，常见的是多个表建立关系进行关联操作（更删改查），本文介绍MYSQL多表连接查询。
子查询先记住一句话：子查询就是将多个查询动作合并为一个。
主要有四种子查询方案：标量子查询，列子查询，行子查询和表子查询。
这些概念对于我们不熟悉数据库概念的前端来说也太晦涩难懂了吧，所以不妨用我们能理解的方式给他们分别取个别名。
这里我们定义从数据库中查出来的一行数据为一条记录，这条记录上的一个数据为一个字段，那么以下面这种方式就很好理解了：
数据库
前端
标量子查询
单条记录单个字段子查询
列子查询
多条记录单个字段子查询
行子查询
单条记录多个字段子查询
表子查询
多条记录多个字段子查询
数据准备先新建两张表进行查询，这次我们以学生选课为例建立一个多对多表案例，顺便复习一下上一篇建表和建立多对多关系的知识。
建立学生表123456CREATE TABLE `student` ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(4) NO ...
🐱🐉TypeScript基础概览
说明本文结构全部采用无序列表，是对 TS 基础知识的概览，发现这种结构阅读起来更顺畅，比那种分层次的减少了一层大脑加工。
正文
为什么使用 TypeScript
前提：JavaScript 是一门动态类型语言，许多低级错误（类型错误）无法在开发阶段发现，为了减少 bug 出现几率，需要给 JavaScript 加入类型定义方便在编写代码阶段发现错误。
TypeScript 是什么？
TypeScript 是 JavaScript 的超集，可以理解为加入了类型定义的 JavaScript 语言一个分支。
安装：
12yarn global add typescript// 安装完毕后内置了tsc命令(typescript compiler)
手动编译
123456// hello.tsconst fun = (name: string) => { console.log(name)}// 编译成js文件tsc hello.ts
一步到位自动编译并执行
12yarn global add ts-nodets-node class.ts
...
🎫【图解算法】买卖股票的最佳时机
题目名称：买卖股票的最佳时机
题目地址: https://leetcode-cn.com/problems/best-time-to-buy-and-sell-stock
给定一个数组，它的第 i 个元素是一支给定股票第 i 天的价格。
如果你最多只允许完成一笔交易（即买入和卖出一支股票一次），设计一个算法来计算你所能获取的最大利润。
注意：你不能在买入股票前卖出股票。
示例 1:
输入: [7,1,5,3,6,4]输出: 5解释: 在第 2 天（股票价格 = 1）的时候买入， 在第 5 天（股票价格 = 6）的时候卖出，最大利润 = 6-1 = 5 。 注意利润不能是 7-1 = 6, 因为卖出价格需要大于买入价格；同时，你不能在买入前卖出股票。示例 2:
输入: [7,6,4,3,1]输出: 0解释: 在这种情况下, 没有交易完成, 所以最大利润为 0。
解法1. 暴力解
可以采用暴力解法，从第一天开始买，记录之后所有天卖出的结果中最大值；依次记录第二天，第三天……第n天买到最后一天卖出的最大值123456789101112131415161718192021/** * ...
🤳【图解算法】最大子序和
题目名称：最大子序和
题目地址：https://leetcode-cn.com/problems/maximum-subarray
给定一个整数数组 nums ，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。
示例:
12输入: [-2,1,-3,4,-1,2,1,-5,4]输出: 6
解释: 连续子数组 [4,-1,2,1] 的和最大，为 6。
进阶：如果你已经实现复杂度为 O(n) 的解法，尝试使用更为精妙的分治法求解。
解法一、暴力解垫底
外层循环左边界，内层循环右边界所有值，计算最大和,O(n2)复杂度
1234567891011121314151617/*** @param {number[]} nums* @return {number}*/var maxSubArray = function (nums) { if (nums.length <= 1) return nums[0] ? nums[0] : 0 let max = -Infinity for (let i = 0; ...
🎨面试官：不用js实现按钮点击颜色切换【focus伪类的妙用】
题目面试官：页面上有三个按钮，红黄绿，点击任何一个按钮，该按钮颜色由之前变为白色，再点击其他按钮，颜色恢复为原来颜色，注意不能使用js
解答这道题刚拿到手是一脸得意，心想这还不简单，于是：
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859<head> ... <style> * { margin: 0; padding: 0; } button { width: 100px; height: 40px; border-radius: 10px; background-color: chartreuse; /* border: none; */ } button:nth-of-type(2){ background-color: brown ...
