Javascript面向对象
面向对象
类与实例
类的声明
生成实例
类与继承
如何实现继承
继承的几种方式
一. 类与实例JavaScript的所有数据都可以看成对象（一切皆为对象）。那是不是我们已经在使用面向对象编程了呢？
当然不是。如果我们只使用Number、Array、string以及基本的{...}定义的对象，还无法发挥出面向对象编程的威力。
JavaScript 的ES6标准还没出来之前是不区分类和实例的概念，而是通过原型（prototype）(模拟类的)来实现面向对象编程。
1.类的声明1234567891011// ES5的声明function Animal(){ this.name = "root";}// ES6中的Class关键字的声明class Animal2{ constructor(){ this.name = "root"; }}
2.生成实例通过new 关键字来实例化上面的声明
1console.log(new Animal ...
基于实时数据库：在线对战五子棋小游戏
1 项目概述游戏开发，尤其是微信小游戏开发，是最近几年比较热门的话题。
本次「云开发」公开课，将通过实战「在线对战五子棋」，一步步带领大家，在不借助后端的情况下，利用「小程序 ✖ 云开发」，独立完成一款微信小游戏的开发与上线。
2 任务目标根据项目初始框架，阅读教程的同时，逐步完成棋盘绘制、音乐播放、玩家对战、输赢判定等功能，最终实现一个可以快乐玩耍的在线对战五子棋。
在这个过程中，会了解到 Serverless 的一些概念，并且实际应用它们，比如：云数据库、云存储、云函数、增值能力。除了这些基本功能，还准备了更多的硬核概念与落地实践，比如：实时数据库、聚合搜索、权限控制。
完成开发后，上传并且设置为体验版，欢迎邀请更多人来体验。
3 准备工作从 TencentCloudBase/tcb-game-gomoku 中下载代码到本地：
12git clone https://github.com/TencentCloudBase/tcb-game-gomoku.gitcd tcb-game-gomoku/
切换课程专用的 minigame-study 分支：
1git checkout ...
Loader特效·进阶篇
特效一览🌊 波浪特效：
🕙 撞钟特效：
⏳ 沙漏特效：
🏃 追逐特效：
🌊 波浪特效效果图
原理和代码这里的动画效果是分成 2 个过程：上 => 下 => 回到上。其实这两个过程是相反的。可以使用动画属性alternate，在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
1234567891011121314151617181920212223242526272829303132div { width: 3.5em; display: flex; align-items: center; justify-content: space-between;}div span { width: 1em; height: 1em; border-radius: 50%; background: red; transform: translateY(0); animation: wave 1.2s ease-in-out alternate infinite;}div spa ...
Loader特效·基础篇
特效一览声音波纹：
弹性缩放：
旋转加载：
渐变点:
翻转纸片：
声音波纹特效效果图
原理和代码需要几个块，就准备几个空 dom 元素。当然，数量越多，动画越细腻，但同时维护成本也高。
123456<div> <span></span> <span></span> <span></span> <span></span></div>
先编写一些基础样式代码：
123456789101112div { display: flex; align-items: center; justify-content: space-between; width: 2em;}span { width: 0.3em; height: 1em; background: red;}
单独观察一个空 dom 元素，其实就是一个缩放动画：
12345678910@keyframes grow { 0%, 10 ...
按钮特效
特效一览滑箱：
果冻：
脉冲：
闪光：
气泡：
滑箱特效效果图
原理因为 button 元素可以使用 before/after 伪元素，所以借助伪元素，可以实现动态图中的遮盖层。
为了避免回流重绘，滑箱的运动方向是垂直方向，所以使用scaleY属性。对于动画的方向，需要借助transform-origin改变动画原点。
代码实现html：
1<button>root-lucas.github.io</button>
css：
1234567891011121314151617181920212223242526272829303132button { outline: none; border: none; z-index: 1; position: relative; color: white; background: #40a9ff; padding: 0.5em 1em;}button::before { content: ""; z-index: -1; position: ...
输入框特效
特效一览划线动态：
动态边框：
划线动态效果图
原理和代码:before 和 :after伪元素指定了一个元素文档树内容之前和之后的内容。由于input标签不是可插入内容的容器。所以这里下划线无法通过伪元素来实现。需要借助其他 dom 节点。
1234<div> <input type="text" /> <span></span></div>
包裹在外的父元素div应该设置成inline-block，否则宽度会满屏。
1234div { position: relative; display: inline-block;}
input 标签需要禁用默认样式：
12345input { outline: none; border: none; background: #fafafa;}
span标签实现「左进右出」的动态，需要改变transform-origin方向。为了避免回流重绘，通过scaleX来实现宽度变化的视觉效果。
12345678 ...
字体特效
特效一览划线动态：
背景高亮：
色块进出：
划线动态效果图
原理首先，利用::after和::before就可以画出上下两条线，所以只需要一个 dom 元素即可。
其次，对于鼠标移入的动画，要给上面两个伪元素设置:hover选择器。
最后是处理动画方向。我们以上面的线条为例，在鼠标移入的时候，是从右到左变化的。这里是通过设置transform-origin属性来修改动画方向。下面的线条同理，方向相反即可。
注意：代码是通过scaleX来实现缩放，相比于设置width，会启用 GPU，避免重绘。
代码html 代码：
123<body> <span>google.com</span></body>
css 代码：
123456789101112131415161718192021222324252627282930313233343536373839404142span { color: #595959; position: relative; z-index: 1;}span::before,span: ...
前端简单使用MySQL
数据库的五个概念
数据库服务器
数据库
数据表
数据字段
数据行
那么这里下面既是对上面几个概念进行基本的日常操作。
数据库引擎使用这里仅仅只介绍常用的两种引擎,而InnoDB是从MySQL 5.6.版本以后InnoDB就是作为默认启动使用的存储引擎。
123456789101112131415(1) InnoDB a,支持ACID，简单地说就是支持事务完整性、一致性； b,支持行锁，以及类似ORACLE的一致性读，多用户并发； c,独有的聚集索引主键设计方式，可大幅提升并发读写性能； d,支持外键； e,支持崩溃数据自修复； InnoDB设计目标是处理大容量数据库系统，它的CPU利用率是其它基于磁盘的关系数据库引擎所不能比的。 它是一个可靠地事务处理引擎，不支持全文本搜索(2) MyISAM a,不支持 每次查询具有原子性 b,只支持表所 c,强调的是性能，其执行数 度比InnoDB类型更快，但是不提供事务支持 d,如 ...
JavaScript版 · 剑指offer
介绍由于内容太多，所以划分成了 10 个专题，分别是：位运算、哈希表、堆、字符串、数组、查找、栈和队列、树、递归与循环、链表。
网上已经有很多 js 版本，这版也没什么特别的地方，但是题目收录完整、专题划分明确、代码和文章风格统一，是花了蛮多心血和业余时间在里面，所以自荐一下。
希望这对于你之后的学习和面试稍有帮助，文章源码开放，食用请来伯乐博客。
如果您觉得还有点意思，欢迎鼓励一个 Star：https://github.com/root-lucas/Blog
特别鸣谢《剑指 Offer》，除了“手动实现 atoi”采用的是 Leetcode 版，其余题目均来自此书。
字符串
01-替换空格
02-字符串的全排列
03-翻转单词顺序
04-实现 atoi
查找
01-旋转数组最小的数字
02-数字在排序数组中出现的次数
链表
01-从尾到头打印链表
02-快速删除链表节点
03-链表倒数第 k 节点
04-反转链表
05-合并两个有序链表
06-复杂链表的复制
07-两个链表中的第一个公共节点
数组
01-二维数组中的查找 ...
替换空格
1. 题目描述请实现一个函数，把字符串中的每个空格替换成”%20”。
例如输入“We are happy.”，则输出“We%20are%20happy.”。
2. 解题思路一种是正则表达式：直接使用正则表达式全局替换，这种方法取巧一些。
另一种是先计算出来替换后的字符串长度，然后逐个填写字符。这种方法的时间复杂度是$O(N)$。
3. 代码1234567891011121314151617181920212223242526272829303132333435363738394041424344454647/** * 用正则表达式替换 * @param {String} str */function repalceEmpty1(str) { const re = / /g return str.replace(re, '%20')}/** * 将空格替换为 %20 * @param {String} arr */function repalceEmpty2(str) { str ...
