吴锴的博客

Life? Don't talk to me about life!


  • 首页

  • 归档

  • 标签

  • 个人项目

2019年总结

发表于 2020-01-24

很多年前在学校的时候,中二期的我和朋友讨论过如果穿越到古代想去哪个朝代。我说去三国吧,和刘关张结义,一统天下,岂不美哉。朋友指出,这三人都比你年纪大,你去了只能做小弟。额,这点倒没想到,于是穿越计划无疾而终。去年又翻了下《三国演义》,在第一章桃园三结义中看到了这句“及刘焉发榜招军时,玄德年已二十八岁矣”,哦,看来我再也不用担心穿越到三国时期的年龄问题了。刘备二十八岁时就已经开始匡扶汉室了,而我二十八岁时还在写代码 ╮(╯_╰)╭。

阅读全文 »

从插入图片功能的实现来介绍 Draft.js 富文本编辑器

发表于 2019-07-21

在前段时间的工作中,我遇到了一个在桌面端和移动端进行图文混排编辑的需求。虽然如果只需要编辑纯文本和图片,不一定要使用富文本编辑器来实现。但是为了以后方便扩展,比如文本会有样式要求,我还是用 Draft.js 实现了一个功能较基础的富文本编辑器。

我将代码开源在了这个项目 draft-editor 中,也可以在这里在线预览。本文中我将介绍一下一些关于 Draft.js 的基础知识,并由此扩展到如何在 Draft.js 编辑器中插入图片功能的实现。

阅读全文 »

2018年总结

发表于 2019-01-01

到了2018年快要结束的时候,才发现这一年什么也没做啊😂,上一篇博客还是3月份写的。感觉做这个总结就是在提醒自己荒废了一年,虽然不想这么做,但还是来写点什么吧。

阅读全文 »

Minimax 和 Alpha-beta 剪枝算法简介,及以此实现的井字棋游戏(Tic-tac-toe)

发表于 2018-03-04

前段时间用 React 写了个2048 游戏来练练手,准备用来回顾下 React 相关的各种技术,以及试验一下新技术。在写这个2048的过程中,我考虑是否可以在其中加入一个 AI 算法来自动进行游戏,于是我找到了这篇文章:2048-AI程序算法分析,文中介绍了 minimax 算法和 alpha-beta 剪枝算法。于是我决定先学习下这两种算法,并以此写了这个 tic-tac-toe 游戏:tic-tac-toe-js(代码见此处)。本文将说明如何用 JavaScript 来简单地实现算法,并将其运用到 tic-tac-toe 游戏中。

阅读全文 »

2017年总结

发表于 2018-01-01

活了二十多年,从来没有做过年终总结,但年岁渐长,总觉得有点时间的压力,应该记录点什么,就让2017年的总结作为第一次。

阅读全文 »

不到200行 JavaScript 代码如何实现富文本编辑器

发表于 2017-12-31

前段时间在寻找一些关于富文本编辑器的资料,然后发现了这个名为 Pell 的项目,它是一个所见即所得(WYSIWYG)的文本编辑器,虽然它的功能很简单,但是令人吃惊的是它只有 1kb 大小。而项目最核心的文件 pell.js 只有130行,即使加上其它部分,总的 js 数量也不到200行。这引起了我的兴趣,决定看看它的源码是如何做到这一点的。

阅读全文 »

用 JavaScript 画光:基础

发表于 2017-12-10

Any application that can be written in JavaScript, will eventually be written in JavaScript.
– Atwood’s Law

本文来源于我在看了 Milo Yip 在知乎专栏里的这篇文章:《用 C 语言画光(一):基础》之后的一个想法,能不能将原文中 C 语言版本程序改成 JavaScript 版本的。动手之后发现出乎意料的顺利,我只需要把 C 语言中变量的类型通通去掉就可以了😀,Amazing!

阅读全文 »

塔防游戏中的敌人如何沿路径前进 (JavaScript 实现)

发表于 2017-12-09

如果开发一个塔防游戏,很自然的会遇上这么两个名字很像的问题:

  • Path-finding: 如果知道起点和终点,如何在其间找到一条路径
  • Path-following: 已知从起点到终点的路径,物体如何才能沿着它行进

本文将要讨论的是第二个问题 path following,给定一条路径,看物体如何沿着它从起点运行至终点。为了方便描述,接下来的内容中,用单词 Boid 来表示行进的物体或塔防中的敌人。

接下来会用一种简单的方法来解决这一问题,最终完成的代码库可见 GitHub: boid-path-following,repo 的多个分支对应了文中的不同步骤。

阅读全文 »

React Router v4 之代码分割:从放弃到入门

发表于 2017-09-25

背景介绍

React Router v4 推出已有六个月了,网络上因版本升级带来的哀嚎仿佛就在半年前。我在使用这个版本的 React Router 时,也遇到了一些问题,比如这里所说的代码分割,所以写了这篇博客作为总结,希望能对他人有所帮助。

什么是代码分割(code splitting)

在用户浏览我们的网站时,一种方案是一次性地将所有的 JavaScript 代码都下载下来,可想而知,代码体积会很可观,同时这些代码中的一部分可能是用户此时并不需要的。另一种方案是按需加载,将 JavaScript 代码分成多个块(chunk),用户只需下载当前浏览所需的代码即可,用户进入到其它页面或需要渲染其它部分时,才加载更多的代码。这后一种方案中用到的就是所谓的代码分割(code splitting)了。

阅读全文 »

利用 socket.io 实现消息实时推送

发表于 2017-08-27

项目背景介绍

最近在写的项目中存在着社交模块,需要实现这样的一个功能:当发生了用户被点赞、评论、关注等操作时,需要由服务器向用户实时地推送一条消息。最终完成的项目地址为:socket-message-push,这里将介绍一下实现的思路及部分代码。

项目的流程中存在着这样的几个对象:

  • 用 Java 实现的后端服务器
  • 用 Node.js 实现的消息推送服务器
  • 用户进行操作的客户端

事件处理的流程如下:

  1. 用户进行点赞操作时,后端服务器会进行处理,并向 Node.js 消息推送服务器发送一条消息
  2. Node.js 消息推送服务器接收到后端发送的消息后,处理数据,并确定向哪个用户进行推送
  3. 用户的客户端接收到由 Node.js 服务器推送来的消息后,即可进行通知的显示。

上面的流程中,Java 后端服务器是如何实现的不在此篇文章的讨论范围内,本文将主要介绍如何使用 Node.js 来实现这个消息推送服务器。

阅读全文 »
12…4
noiron

noiron

33 日志
32 标签
RSS
GitHub E-Mail 知乎
© 2020 noiron
由 Hexo 强力驱动
主题 - NexT.Pisces