jsrun

今天给大家分享一个开源项目——AMS，一个由唯品会开源的，基于类json配置的管理后台前端解决方案。 背景 我们先来回顾一下，管理后台的搭建方式。 最原始的方式，前后端还未分离，前后端代码融合一起，往往是后端把整个管理后台负责了 发展到前后端分离和JQ兴起，前端可以完全手写实现，也可以使用类似bootstrap这些框架进行快速搭建 在发展到React/Vue这些MVVM框架的兴起，也产生了很多对应的配套，比如Element-ui、Ant Design 由于管理后台对UI要求不高以及功能通用，UI框架的使用给前端带来极大的方便，前端可以不需要再关心UI组件的实现，只需要把UI框架提供的组件像搭积木一样搭建，然后再去写数据交互逻辑，就可以比较快的实现一个管理后台。 这样看好像很完美，特别是用着高质量的UI框架，坑少～ 但是！积木搭久了，你会发现还是要写不少代码： UI组件代码。比如你写一个列表，拿Element-ui举例，你可能需要用到 el-table 、 el-table-column ，然后再来个分页 el-pagination 。可能90%的场景都是这样的，但是你每次都要写，即使复制，可能也要微调 搭完UI，然后要写数据逻辑交互，比如请求个列表接口，梳理接口字段，把数据塞到表格，然后处理分页时的数据交互逻辑。同理，每个项目每个列表都要这样。 上面举例的只是一个列表场景

碰撞反弹算法是小游戏开发中非常常用的一种算法，像是打砖块、弹一弹等经典小游戏的核心算法都是碰撞的判断与响应，那就让我们通过一个简单的例子来看一看在canvas上是怎么实现碰撞判断与反弹的效果的 <iframe width="100%" height="300" src="//jsrun.net/pGgKp/embedded/all/light/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> 首先我们得有一个球 让我们尝试着将小球单独封装成一个类 // 封装一个小球类 class Ball { constructor(x, y, radius) { this.x = x this.y = y this.radius = radius this.angle = Math.random() * 180 this.speed = 5 } draw(ctx) { ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI) ctx.fillStyle = 'blue' ctx.fill() } } 这里的封装很简单，小球类仅暴露出了一个方法，用于将其绘制于指定的canvas画布上，此外拥有自身的坐标、半径、运动角度和速度属性（现在的小球类肯定是存在问题的，至于什么问题，你猜