Acheck

Acheck 查看完整档案

广州编辑广东农工商职业技术学院  |  计算机 编辑  |  填写所在公司/组织 www.weliner.cn/ 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

Acheck 赞了文章 · 2月24日

教你实现微信8.0『炸裂』的🎉表情特效

写在开头

最近微信更新了8.0,其中之一最好玩的莫过于表情包的更新了,大家都在群里纷纷玩起了表情包大战。

作为一个前端程序员,这就勾起了我的好奇心,虽然我从来没有实现过这样的动画,但是我还是忍不住想要去实现,最终我花了2天时间去看一些库的源码到我自己实现一个类似的效果,在这里我总结一下,并且手把手地教大家怎么学习实现。而🎉有一个自己的名字,叫做五彩纸屑,英文名字叫 confetti

聊天室+五彩纸屑特效 在线地址: https://www.qiufengh.com/#/

聊天室Github地址: https://github.com/hua1995116/webchat

五彩纸屑Github地址: https://github.com/hua1995116/node-demo/tree/master/confetti

特效预览,时间原因我只实现了平行四边形的彩色小块,其他形状的原理也是类似。

还可以设置方向

前期研究

在写这个特效前,我几乎不会用canvas,虽然说现在也不太会用,很多 API 也不太清楚,因此这篇教程也是基于零基础 canvas 写的,大家不用担心这个教程难度太高而被劝退。我会通过零基础 canvas 的基础上来一步步实现的。不过学习这个特效之前需要一点点高中数学的知识,如果你还记得 sin 和 cos 函数,那么以下的内容对于你来说都会非常简单,不会也没关系~

我个人比较喜欢探索研究,对有意思的玩意儿就会去研究,因此我也是站在巨人的基础上,去 codepen 查了好多个类似的实现进行研究。

最终将目标定位在了 canvas-confetti ,为什么是这个库呢?因为他的效果对于我们来说非常可以了,而且它是一个开源库,并且拥有了 1.3K star(感觉改天可以分析分析大佬实现库的原理了~),维护频率也非常高。

核心实现

切片场景

首先拿到这个库的时候,我有点开心,因为这个库只有一个单文件。

但是,当我打开这个文件的时候,发现不对...1个文件500行代码,我通过剥离层层的一些自定义配置化的代码,最后抽离出单个纸屑的运动轨迹。我就开始不断地在观察它的运动轨迹...无限循环的观察...

可以看到它在做一个类似于抛物线的运动,然后我一一将源码中的变量进行标注,再结合源码。

fetti.x += Math.cos(fetti.angle2D) * fetti.velocity;
fetti.y += Math.sin(fetti.angle2D) * fetti.velocity + fetti.gravity; 

以上代码看不懂也没事,我只是证明一下源码中的写法,并且提供学习源码的一些思路,以下才是真正的开讲实现!

平行四边形的实现

实现这个特性前,我们需要知道 canvas 几个函数。更多查看(https://www.runoob.com/jsref/dom-obj-canvas.html)

beginPath

方法开始一条路径,或重置当前的路径。

moveTo

把路径移动到画布中的指定点,不创建线条。

lineTo

添加一个新点,然后在画布中创建从该点到最后指定点的线条。

closePath

创建从当前点回到起始点的路径。

fill

填充当前绘图(路径)。

fillStyle

设置或返回用于填充绘画的颜色、渐变或模式。

既然我们要实现五彩纸屑,那么我肯定得先实现一个纸屑,我们就来实现一个平行四边形的纸屑吧!

我们都知道在 css 中实现平行四边形就是一个div,默认就是一个盒子,而在 canvas 中并没有那么方便,那么怎么实现一个平行四边形呢?

四个点,我们只需要知道四个点,就能确定一个平行四边形。而canvas中的坐标系和我们普通的写网页略有不同,它是从左上角作为起始点,但是并不影响。

我可以来画一个宽为20的平行四边形,(0, 0), (0, 20), (20,20), (20,0)

...(省略了一些前置初始化代码)
var context = canvas.getContext('2d');
// 清除画布
context.clearRect(0, 0, canvas.width, canvas.height);
// 设置颜色并开始绘制
context.fillStyle = 'rgba(2, 255, 255, 1)';
context.beginPath();
// 设置几个点
var point1 = { x: 0, y: 0 }
var point2 = { x: 0, y: 20 }
var point3 = { x: 20, y: 20 }
var point4 = { x: 20, y: 0 }
// 画4个点
context.moveTo(Math.floor(point1.x), Math.floor(point1.y));
context.lineTo(Math.floor(point2.x), Math.floor(point2.y));
context.lineTo(Math.floor(point3.x), Math.floor(point3.y));
context.lineTo(Math.floor(point4.x), Math.floor(point4.y));
// 完成路线,并填充
context.closePath();
context.fill(); 

我们总结一下,我们其实只需要一个点就能确定这个平行四边形的初始位置(0, 0),如果再知道一个角度(90度)、以及平行四边形的变长(20)就能确定整个平行四边形的位置了!(仅仅只需要初中知识就能定位整个平行四边形)。

好了,你学会画这个已经离成功迈向了一大步!是不是挺简单的~

大佬们内心OS: 就这?

嗯,就这。

运动轨迹

通过不断地调试 canvas-confetti 每一帧的轨迹运动,发现它始终做的是一个x轴变减速运动(直到速度为0就不继续运动了),而y轴也是一个先变减速运动再是一个均速运动,以下是大致的轨迹图。

这就是他的运动轨迹,别以为看着挺难的,但是核心代码只有三句。

// fetti.angle2D为一个角度(这个角度确定了运动轨迹 3 / 2 * Math.PI - 2 * Math.PI之间的一个值,由于要让轨迹往左上角移动,就是都要往负方向运动,因此选了以上范围),
// fetti.velocity 为一个初始为50长度的值。
// fetti.gravity = 3
fetti.x += Math.cos(fetti.angle2D) * fetti.velocity; // fetti.x 第一个点的x坐标
fetti.y += Math.sin(fetti.angle2D) * fetti.velocity + fetti.gravity; // fetti.y 第一个点的y坐标
fetti.velocity *= 0.8; 

总结起来就是,第一个坐标点的 x 周始终在增加一个负值(Math.cos(3 / 2 Math.PI - 2 Math.PI) 始终为负值),这个值在不断减小。而第一个点的y轴也始终在加一个负值Math.cos(3 / 2 Math.PI - 2 Math.PI) 始终为负值),但是由于 fetti.gravity始终为正值,因此到了某个临界点,y的值会不断增加。

我模拟了以下的坐标,由于为了让大家能明白这个轨迹,以下坐标轴和canvas中相反,数据我也做了相应的处理,进行了反方向处理。

用一个边上为10的正方形,实现轨迹。

const fetti = {
  "x": 445,
  "y": 541,
  "angle2D": 3 / 2 * Math.PI + 1 / 6 * Math.PI,
  "color": {r: 20, g: 30, b: 50},
  "tick": 0,
  "totalTicks": 200,
  "decay": 0.9,
  "gravity": 3,
  "velocity": 50
}
var animationFrame = null;
const update = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = 'rgba(2, 255, 255, 1)';
  context.beginPath();
  fetti.x += Math.cos(fetti.angle2D) * fetti.velocity; // 第一个点
  fetti.y += Math.sin(fetti.angle2D) * fetti.velocity + fetti.gravity; // 第一个点

  var x1 = fetti.x;
  var y1 = fetti.y;

  var x2 = fetti.x;// 第二个点
  var y2 = fetti.y + 10; // 第二个点

  var x3 = x1 + 10;
  var y3 = y1 + 10;

  var x4 = fetti.x + 10;
  var y4 = fetti.y;

  fetti.velocity *= fetti.decay;

  context.moveTo(Math.floor(x1), Math.floor(y1));
  context.lineTo(Math.floor(x2), Math.floor(y2));
  context.lineTo(Math.floor(x3), Math.floor(y3));
  context.lineTo(Math.floor(x4), Math.floor(y4));

  context.closePath();
  context.fill();
  animationFrame = raf.frame(update);
} 

是不是除了颜色和形状,有那味了?

反转特效

那么如何实现让这个下落更加自然,会有一种飘落的感觉呢?

其实,他就是一直在做一个翻转特效.

将他们拆解就是在做绕着一个点的旋转运动,整个过程就是一边自我翻转一边按照运动轨迹进行移动。

实现这个特效,其实之前在实现正方形的时候提到过,实现一个正方形。满足以下三个点能实现一个平行四边形。

  • 知道一个点的位置
  • 知道一个角度
  • 知道一边边长

目前我能确定的有,一个点的位置很容易确定,就是我们的起始点,然后我们边长也知道,就差一个角度了,只要我们的角度不断变化,我们就能实现以上特效。

const update = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = 'rgba(2, 255, 255, 1)';
  context.beginPath();

  fetti.velocity *= fetti.decay;
  fetti.tiltAngle += 0.1 // 不断给这个四边形变化角度

  var length = 10;

  var x1 = fetti.x;
  var y1 = fetti.y;

  var x2 = fetti.x + (length * Math.sin(fetti.tiltAngle));// 第二个点
  var y2 = fetti.y + (length * Math.cos(fetti.tiltAngle)); // 第二个点

  var x3 = x2 + 10;
  var y3 = y2;

  var x4 = fetti.x + length;
  var y4 = fetti.y;


  context.moveTo(Math.floor(x1), Math.floor(y1));
  context.lineTo(Math.floor(x2), Math.floor(y2));
  context.lineTo(Math.floor(x3), Math.floor(y3));
  context.lineTo(Math.floor(x4), Math.floor(y4));

  context.closePath();
  context.fill();
  animationFrame = raf.frame(update);
} 

这样我们就实现了以上的特效。

组合运动

然后把我们以上写的组合在一起就是一个完整的特效啦。

const update = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = 'rgba(2, 255, 255, 1)';
  context.beginPath();
  fetti.x += Math.cos(fetti.angle2D) * fetti.velocity; // 第一个点
  fetti.y += Math.sin(fetti.angle2D) * fetti.velocity + fetti.gravity; // 第一个点

  fetti.velocity *= fetti.decay;
  fetti.tiltAngle += 0.1 // 不断给这个四边形变化角度

  var length = 10;

  var x1 = fetti.x;
  var y1 = fetti.y;

  var x2 = fetti.x + (length * Math.sin(fetti.tiltAngle));// 第二个点
  var y2 = fetti.y + (length * Math.cos(fetti.tiltAngle)); // 第二个点

  var x3 = x2 + 10;
  var y3 = y2;

  var x4 = fetti.x + length;
  var y4 = fetti.y;


  context.moveTo(Math.floor(x1), Math.floor(y1));
  context.lineTo(Math.floor(x2), Math.floor(y2));
  context.lineTo(Math.floor(x3), Math.floor(y3));
  context.lineTo(Math.floor(x4), Math.floor(y4));

  context.closePath();
  context.fill();
  animationFrame = raf.frame(update);
} 

最终形态

如果想要实现最后的状态,就差多个小块渐变消失以及随机颜色了!

设置多少帧消失,这里搞了两个变量totalTickstick,自定义来控制多少帧后小块消失。

至于多个小块,我们只需要搞一个 for 循环。

而随机颜色,搞了一个colors列表。

const colors = [
  '#26ccff',
  '#a25afd',
  '#ff5e7e',
  '#88ff5a',
  '#fcff42',
  '#ffa62d',
  '#ff36ff'
];
var arr = []
for (let i = 0; i < 20; i++) {
  arr.push({
    "x": 445,
    "y": 541,
    "velocity": (45 * 0.5) + (Math.random() * 20),
    "angle2D": 3 / 2 * Math.PI + Math.random() * 1 / 4 * Math.PI,
    "tiltAngle":  Math.random() * Math.PI,
    "color": hexToRgb(colors[Math.floor(Math.random() * 7)]),
    "shape": "square",
    "tick": 0,
    "totalTicks": 200,
    "decay": 0.9,
    "random": 0,
    "tiltSin": 0,
    "tiltCos": 0,
    "gravity": 3,
  })
} 

完整代码请看

https://github.com/hua1995116/node-demo/blob/master/confetti/完整demo.html

加点餐

实现多人对战形态的表情大战。在我们微信中表情的发送并不是单点的,而是多人形态,因此我们可以继续探索,利用 websocket 和多彩小块结合。

这里我们需要注意几个点。(由于篇幅原因就不对 websocket 展开讲解了,提一下实现要点)。

  • 我们可以通过一个 tag 来区分是历史消息还是实时消息
  • 区分是自己发出的消息,还是受到别人的消息,来改变五彩纸屑方向。
  • 只有为单个 🎉的时候才会进行动画。
  • 先进行放大缩小的动画,延迟200ms再出来特效
if(this.msg === '🎉' && this.status) {
        this.confetti = true;
        const rect = this.$refs.msg.querySelector('.msg-text').getBoundingClientRect();
        if(rect.left && rect.top) {
          setTimeout(() => {
            confetti({
              particleCount: r(100, 150),
              angle: this.isSelf ? 120 : 60,
              spread: r(45, 80),
              origin: {
                x: rect.left / window.innerWidth,
                y: rect.top / window.innerHeight
              }
            });
          }, 200)
        }
} 

更多探索

用 canvas 绘制非常非常多方块的时候,会比较卡顿,这个时候我们可以利用 web worker 来进行计算,从而提高性能,这个就请读者们自行探索啦,也可以看 canvas-confetti的源码~

最后

回看笔者往期高赞文章,也许能收获更多喔!

结语

❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更好的文章

关注公众号秋风的笔记,一个专注于前端面试、工程化、开源的前端公众号

  • 关注后回复简历获取100+套的精美简历模板
  • 关注后回复好友拉你进技术交流群+面试交流群
  • 欢迎关注秋风的笔记
查看原文

赞 22 收藏 10 评论 0

Acheck 关注了用户 · 2月24日

前端小智 @minnanitkong

我不是什么大牛,我其实想做的就是一个传播者。内容可能过于基础,但对于刚入门的人来说或许是一个窗口,一个解惑之窗。我要先坚持分享20年,大家来一起见证吧。

关注 9744

Acheck 回答了问题 · 2月2日

vue中axios请求数据使用v-loading

反过来,先让listLoading:true,数据请求后this.listLoading = false

关注 3 回答 3

Acheck 回答了问题 · 2月1日

Uncaught TypeError: Cannot read property '' of undefined

image.png
不是row.xxx

关注 2 回答 2

Acheck 赞了文章 · 1月29日

实战|省市区三级联动数据爬取

前言

  最近收到客服反应,系统的省市区数据好像不准,并且缺了一些地区。经过询问同事得知,数据库内的数据是从老项目拷贝过来的,有些年头了。难怪会缺一些数据。正好最近在对接网商银行,发现网商提供了省市区的数据的接口。这就很舒服了哇,抄起键盘就是干,很快的就把同步程序写好了。

  然后在同步的过程中,发现网商提供的数据和数据库有些对不上。于是默默的打开淘宝京东添加收货地址,看看到底是谁错了。对比到后面发现都有些差异。这就很蛋疼了。看来这个时候谁都不能相信了,只能信国家了。于是我打开了中华人民共和国民政部网站来比对异常的数据。

  对比的过程中,石锤网商数据不准。值得的是表扬淘宝京东已经同步了最新的数据了。但是呢,我并没有找到它们的数据接口。为了修正系统的数据,只能自己爬取了。

锁定爬取目标

爬取地址如下:

https://preview.www.mca.gov.c...

  爬取原理很简单,就是解析HTML元素,然后获取到相应的属性值保存下来就好了。由于使用Java进行开发,所以选用Jsoup来完成这个工作。

<!-- HTML解析器 -->
<dependency>
  <groupId>org.jsoup</groupId>
  <artifactId>jsoup</artifactId>
  <version>1.13.1</version>
</dependency>

网页数据分析

  由于需要解析HTML才能取到数据,所以需要知道数据存储在什么元素上。我们可以打开chrom的控制台,然后选中对应的数据,即可查看存储数据的元素。

  通过分析,发现每一行数据都是存储在一个<tr>标签下。我们需要的 区域码区域名称存储在第一和第二个<td>内 。与此同时还要很多空白<td>标签,在编写代码是需要将其过滤掉。

定义基础代码

  先定义好我们的爬取目标,以及Area实体类。

public class AreaSpider{

    // 爬取目标
    private static final String TARGET = "http://preview.www.mca.gov.cn/article/sj/xzqh/2020/2020/202101041104.html";

    @Data
    @AllArgsConstructor
    private static class Area {

        // 区域码
        private String code;

        // 区域名称
        private String name;

        // 父级
        private String parent;

    }
}

爬虫代码编写

public static void main(String[] args) throws IOException{
  // 请求网页
  Jsoup.connect(TARGET).timeout(10000).get()
    // 筛选出 tr 标签
    .select("tr")
    // 筛选出 tr 下的 td 标签
    .forEach(tr -> tr.select("td")
    // 过滤 值为空的 td 标签
    .stream().filter(td -> StringUtils.isNotBlank(td.text()))
    // 输出结果
    .forEach(td -> System.out.println(td.text())));
}

解析结果

代码优化

  通过上面的代码,我们已经爬取到了页面上的数据。但是并没有达到我们的预期,所以进一步处理将其转换为Area实体。

public static void main(String[] args) throws IOException{
  // 请求网页
  List<Area> areaList = Jsoup.connect(TARGET).timeout(10000).get()
    // 筛选出 tr 标签
    .select("tr")
    // 筛选出 tr 下的 td 标签
    .stream().map(tr -> tr.select("td")
    // 过滤 值为空的 td 标签,并转换为 td 列表
    .stream().filter(td -> StringUtils.isNotBlank(td.text())).collect(Collectors.toList()))
    // 前面提到,区域码和区域名称分别存储在 第一和第二个td,所以过滤掉不符合规范的数据行。
    .filter(e -> e.size() == 2)
    // 转换为 area 对象
    .map(e -> new Area(e.get(0).text(), e.get(1).text(), "0")).collect(Collectors.toList());
  
    // 遍历数据
  areaList.forEach(area -> System.out.println(JSONUtil.toJsonStr(area)));
}

解析结果

  至此,离我们想要的数据还差了父级区域码 ,我们可以通过区域码计算出来。以河北省为例:河北省:130000石家庄市:130100长安区:130102可以发现规律:0000 结尾是省份,00是市。所以就有了如下代码:

private static String calcParent(String areaCode){
    // 省 - 针对第一行特殊处理
    if(areaCode.contains("0000") || areaCode.equals("行政区划代码")){
        return "0";
    // 市
    }else if (areaCode.contains("00")) {
        return String.valueOf(Integer.parseInt(areaCode) / 10000 * 10000);
    // 区
    }else {
        return String.valueOf(Integer.parseInt(areaCode) / 100 * 100);
    }
}

最终代码

public class AreaSpider{

    // 爬取目标
    private static final String TARGET = "http://preview.www.mca.gov.cn/article/sj/xzqh/2020/2020/202101041104.html";

    @Data
    @AllArgsConstructor
    private static class Area{

        // 区域码
        private String code;

        // 区域名称
        private String name;

        // 父级
        private String parent;

    }

    public static void main(String[] args) throws IOException{
        // 请求网页
        List<Area> areaList = Jsoup.connect(TARGET).timeout(10000).get()
                // 筛选出 tr 标签
                .select("tr")
                // 筛选出 tr 下的 td 标签
                .stream().map(tr -> tr.select("td")
                // 过滤 值为空的 td 标签,并转换为 td 列表
                .stream().filter(td -> StringUtils.isNotBlank(td.text())).collect(Collectors.toList()))
                // 前面提到,区域码和区域名称分别存储在 第一和第二个td,所以过滤掉不符合规范的数据行。
                .filter(e -> e.size() == 2)
                // 转换为 area 对象
                .map(e -> new Area(e.get(0).text(), e.get(1).text(), calcParent(e.get(0).text()))).collect(Collectors.toList());

        // 去除 第一行 "行政区划代码|单位名称"
        areaList.remove(0);

        areaList.forEach(area -> System.out.println(JSONUtil.toJsonStr(area)));
    }

    private static String calcParent(String areaCode){
        // 省 - 针对第一行特殊处理
        if(areaCode.contains("0000") || areaCode.equals("行政区划代码")){
            return "0";
        // 市
        }else if (areaCode.contains("00")) {
            return String.valueOf(Integer.parseInt(areaCode) / 10000 * 10000);
        // 区
        }else {
            return String.valueOf(Integer.parseInt(areaCode) / 100 * 100);
        }
    }
}

数据修正

  由于我们需要的是省市区三级数据联动,但是了直辖市只有两级,所以我们人工的给它加上一级。以北京市为例:变成了 北京 -> 北京市- >东城区,对于其他的直辖市也是同样的处理逻辑。

  修正好的数据奉上,有需要的小伙伴可以自取哦。

对于直辖市也可以做两级的,这个主要看产品的需求吧

总结

  总体来讲,这个爬虫比较简单,只有简单的几行代码。毕竟网站也没啥反扒的机制,所以很轻松的就拿到了数据。

结尾

  嘿嘿话说,你都爬过哪些网站呢?

  如果觉得对你有帮助,可以多多评论,多多点赞哦,也可以到我的主页看看,说不定有你喜欢的文章,也可以随手点个关注哦,谢谢。

  我是不一样的科技宅,每天进步一点点,体验不一样的生活。我们下期见!

查看原文

赞 11 收藏 6 评论 1

Acheck 回答了问题 · 1月28日

解决vuecli如何把打包后的dist文件复制到其他文件夹?

image.png
我在webpack官方文档看到了这个copywebpack插件,webpack-copy-plugin不能复制从构建过程中生成的文件

关注 3 回答 2

Acheck 回答了问题 · 1月28日

解决antd form表单触发校验

image.png
可以通过设置变量,判断变量设置它的validateStatus以及help

关注 2 回答 1

Acheck 回答了问题 · 1月28日

vue后端获取json正确,console出来的数据也是正确的,页面渲染不正确

this作用域

关注 4 回答 4

Acheck 收藏了文章 · 1月27日

前端进阶不可错过的 10 个 Github 仓库

2021 年已经来了,相信有一些小伙伴已经开始立 2021 年的 flag 了。在 2020 年有一些小伙伴,私下问阿宝哥有没有前端的学习资料。为了统一回答这个问题,阿宝哥精心挑选了 Github 上 10 个不错的开源项目。

当然这 10 个项目不仅限于前端领域,希望这些项目对小伙伴的进阶能有所帮助。下面我们先来介绍第一个项目 —— build-your-own-x

build-your-own-x

🤓 Build your own (insert technology here)

https://github.com/danistefan...

WatchStarForkDate
3.5K92.3K8.1K2021-01-04

该仓库涉及了 27 个领域的内容,每个领域会使用特定的语言来实现某个功能。下图是与前端领域相关的内容:

关注「全栈修仙之路」阅读阿宝哥原创的 4 本免费电子书(累计下载2.2万+)及 50 几篇 “重学TS” 教程。

JavaScript Algorithms

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

https://github.com/trekhleb/j...

WatchStarForkDate
3.6K91.6K15.4K2021-01-04

该仓库包含了多种 基于 JavaScript 的算法与数据结构。每种算法和数据结构都有自己的 README,包含相关说明和链接,以便进一步阅读 (还有相关的视频) 。

30 Seconds of Code

Short JavaScript code snippets for all your development needs

https://github.com/30-seconds...

WatchStarForkDate
2K66.9K7.4K2021-01-04

该仓库包含了众多能满足你开发需求,简约的 JavaScript 代码片段。比如以下的 listenOnce 函数,可以保证事件处理器只执行一次。

const listenOnce = (el, evt, fn) => {
  let fired = false;
  el.addEventListener(evt, (e) => {
    if (!fired) fn(e);
    fired = true;
  });
};

listenOnce(
  document.getElementById('my-btn'),
  'click',
  () => console.log('Hello!')
);  // 'Hello!' will only be logged on the first click

Node Best Practices

✅ The Node.js best practices list

https://github.com/goldbergyo...

WatchStarForkDate
1.7K58.5K5.6K2021-01-04

该仓库介绍了 Node.js 应用的最佳实践,包含以下的内容:

RealWorld example apps

"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more 🏅

https://github.com/gothinkste...

WatchStarForkDate
1.6K52.5K4.5K2021-01-04

对于大多数的 “Todo” 示例来说,它们只是简单介绍了框架的功能,并没有完整介绍使用该框架和相关技术栈,构建真正应用程序所需要的知识和视角。

RealWorld 解决了这个问题,它允许你选择任意前端框架(React,Vue 或 Angular 等)和任意后端框架(Node,Go,Spring 等)来驱动一个真实的、设计精美的全栈应用程序 “Conduit“ 。下图是目前已支持的前端框架(内容较多,只截取部分内容):

clean-code-javascript

🛁 Clean Code concepts adapted for JavaScript

https://github.com/ryanmcderm...

WatchStarForkDate
1.5K43.9K5.3K2021-01-04

该仓库介绍了如何写出整洁的 JavaScript 代码,比如作者建议使用可检索的名称:

不好的

// 86400000 的用途是什么?
setTimeout(blastOff, 86400000);

好的

// 使用通俗易懂的常量来描述该值
const MILLISECONDS_IN_A_DAY = 60 * 60 * 24 * 1000; //86400000;

setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

该仓库包含了 11 个方面的内容,具体的目录如下图所示:

javascript-questions

A long list of (advanced) JavaScript questions, and their explanations ✨

https://github.com/lydiahalli...

WatchStarForkDate
85027K3.6K2021-01-04

该仓库包含了从基础到进阶的 JavaScript 知识,利用该仓库你可以测试你对 JavaScript 知识的掌握程度,也可以帮助你准备面试。

awesome-design-patterns

A curated list of software and architecture related design patterns.

https://github.com/DovAmir/aw...

WatchStarForkDate
47711.6K9312021-01-04

该仓库包含了软件与架构相关的设计模式的精选列表。在软件工程中,设计模式(Design Pattern)是对软件设计中普遍存在(反复出现)的各种问题,所提出的解决方案。这个术语是由埃里希·伽玛(Erich Gamma)等人在1990年代从建筑设计领域引入到计算机科学的。

developer-roadmap

Roadmap to becoming a web developer in 2021

https://github.com/kamranahme...

WatchStarForkDate
7.4K142K21.3K2021-01-04

该仓库包含一组图表,这些图表展示了成为一个 Web 开发者的学习路线图。该仓库含有前端、后端和 DevOps 的学习路线图,这里我们只介绍前端的学习路线图(原图是长图,这里只截取部分区域):

Free Programming Books

📚 Freely available programming books

https://github.com/EbookFound...

WatchStarForkDate
9.2K170K39.8K2021-01-04

该仓库包含了多种语言的免费学习资源列表,下图是中文免费资源列表(内容较多,只截取部分内容):

好的,到这里所有的开源项目都已经介绍完了,如果小伙伴有其他的不错的开源项目,欢迎给阿宝哥留言哟。

关注「全栈修仙之路」阅读阿宝哥原创的 4 本免费电子书(累计下载 2.2万+)及 9 篇源码分析系列教程。
查看原文

Acheck 赞了文章 · 1月27日

前端进阶不可错过的 10 个 Github 仓库

2021 年已经来了,相信有一些小伙伴已经开始立 2021 年的 flag 了。在 2020 年有一些小伙伴,私下问阿宝哥有没有前端的学习资料。为了统一回答这个问题,阿宝哥精心挑选了 Github 上 10 个不错的开源项目。

当然这 10 个项目不仅限于前端领域,希望这些项目对小伙伴的进阶能有所帮助。下面我们先来介绍第一个项目 —— build-your-own-x

build-your-own-x

🤓 Build your own (insert technology here)

https://github.com/danistefan...

WatchStarForkDate
3.5K92.3K8.1K2021-01-04

该仓库涉及了 27 个领域的内容,每个领域会使用特定的语言来实现某个功能。下图是与前端领域相关的内容:

关注「全栈修仙之路」阅读阿宝哥原创的 4 本免费电子书(累计下载2.2万+)及 50 几篇 “重学TS” 教程。

JavaScript Algorithms

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

https://github.com/trekhleb/j...

WatchStarForkDate
3.6K91.6K15.4K2021-01-04

该仓库包含了多种 基于 JavaScript 的算法与数据结构。每种算法和数据结构都有自己的 README,包含相关说明和链接,以便进一步阅读 (还有相关的视频) 。

30 Seconds of Code

Short JavaScript code snippets for all your development needs

https://github.com/30-seconds...

WatchStarForkDate
2K66.9K7.4K2021-01-04

该仓库包含了众多能满足你开发需求,简约的 JavaScript 代码片段。比如以下的 listenOnce 函数,可以保证事件处理器只执行一次。

const listenOnce = (el, evt, fn) => {
  let fired = false;
  el.addEventListener(evt, (e) => {
    if (!fired) fn(e);
    fired = true;
  });
};

listenOnce(
  document.getElementById('my-btn'),
  'click',
  () => console.log('Hello!')
);  // 'Hello!' will only be logged on the first click

Node Best Practices

✅ The Node.js best practices list

https://github.com/goldbergyo...

WatchStarForkDate
1.7K58.5K5.6K2021-01-04

该仓库介绍了 Node.js 应用的最佳实践,包含以下的内容:

RealWorld example apps

"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more 🏅

https://github.com/gothinkste...

WatchStarForkDate
1.6K52.5K4.5K2021-01-04

对于大多数的 “Todo” 示例来说,它们只是简单介绍了框架的功能,并没有完整介绍使用该框架和相关技术栈,构建真正应用程序所需要的知识和视角。

RealWorld 解决了这个问题,它允许你选择任意前端框架(React,Vue 或 Angular 等)和任意后端框架(Node,Go,Spring 等)来驱动一个真实的、设计精美的全栈应用程序 “Conduit“ 。下图是目前已支持的前端框架(内容较多,只截取部分内容):

clean-code-javascript

🛁 Clean Code concepts adapted for JavaScript

https://github.com/ryanmcderm...

WatchStarForkDate
1.5K43.9K5.3K2021-01-04

该仓库介绍了如何写出整洁的 JavaScript 代码,比如作者建议使用可检索的名称:

不好的

// 86400000 的用途是什么?
setTimeout(blastOff, 86400000);

好的

// 使用通俗易懂的常量来描述该值
const MILLISECONDS_IN_A_DAY = 60 * 60 * 24 * 1000; //86400000;

setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

该仓库包含了 11 个方面的内容,具体的目录如下图所示:

javascript-questions

A long list of (advanced) JavaScript questions, and their explanations ✨

https://github.com/lydiahalli...

WatchStarForkDate
85027K3.6K2021-01-04

该仓库包含了从基础到进阶的 JavaScript 知识,利用该仓库你可以测试你对 JavaScript 知识的掌握程度,也可以帮助你准备面试。

awesome-design-patterns

A curated list of software and architecture related design patterns.

https://github.com/DovAmir/aw...

WatchStarForkDate
47711.6K9312021-01-04

该仓库包含了软件与架构相关的设计模式的精选列表。在软件工程中,设计模式(Design Pattern)是对软件设计中普遍存在(反复出现)的各种问题,所提出的解决方案。这个术语是由埃里希·伽玛(Erich Gamma)等人在1990年代从建筑设计领域引入到计算机科学的。

developer-roadmap

Roadmap to becoming a web developer in 2021

https://github.com/kamranahme...

WatchStarForkDate
7.4K142K21.3K2021-01-04

该仓库包含一组图表,这些图表展示了成为一个 Web 开发者的学习路线图。该仓库含有前端、后端和 DevOps 的学习路线图,这里我们只介绍前端的学习路线图(原图是长图,这里只截取部分区域):

Free Programming Books

📚 Freely available programming books

https://github.com/EbookFound...

WatchStarForkDate
9.2K170K39.8K2021-01-04

该仓库包含了多种语言的免费学习资源列表,下图是中文免费资源列表(内容较多,只截取部分内容):

好的,到这里所有的开源项目都已经介绍完了,如果小伙伴有其他的不错的开源项目,欢迎给阿宝哥留言哟。

关注「全栈修仙之路」阅读阿宝哥原创的 4 本免费电子书(累计下载 2.2万+)及 9 篇源码分析系列教程。
查看原文

赞 36 收藏 23 评论 0

认证与成就

  • 获得 6 次点赞
  • 获得 3 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 3 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2020-06-02
个人主页被 761 人浏览