专栏首页信息安全小学生CraftyJS 学习三 -- Component

CraftyJS 学习三 -- Component

自定义组件

下面代码直接创建两个带颜色的矩形组件:

var sq1 = Crafty.e("2D, Canvas, Color")
    .attr({x:10, y:10, w:30, h:30})
    .color("red");var sq1 = Crafty.e("2D, Canvas, Color")
    .attr({x:150, y:100, w:30, h:30})
    .color("green");

现在我们改用组件的方法创建,首先定义一个组件Crafty.c.

Crafty.c("Square", {    // This function will be called when the component is added to an entity
    // So it sets up the things that both our entities had in common
    init: function() {        this.addComponent("2D, Canvas, Color");        this.w = 30;        this.h = 30;
    },    // Our two entities had different positions, 
    // so we define a method for setting the position
    place: function(x, y) {        this.x = x;        this.y = y;        // There's no magic to method chaining.
        // To allow it, we have to return the entity!
        return this;
    }
})

Crafty.c 有两个参数,第一个是组件名,第二个是组件的方法及属性,当组件被声明成实体,所有的属性及方法都会被复制到实体上,init 方法会被自动执行,remove方法在组件销毁时自动执行。

之后我们再从新创建两个矩形:

var sq1 = Crafty.e("Square")
    .place(10, 10)
    .color("red");var sq2 = Crafty.e("Square")
    .place(150, 100)
    .color("green");

init方法让代码更简洁,同时 创建 Square 时,Color组件也被自动加入。

为了让place()方法能够连续执行,一定要在方法最后加上返回值

  return this

事实真相

容器是如何加入到实体中:

  • 首先,组件有个代表组件存在的标志
  • 然后组件的所有属性及方法被复制,如果有重复的,将会覆盖掉
  • 如果是数组或者对象,则复制的是其应用
  • 最后,执行init 方法。

共享对象的陷阱

如下代码所示:

Crafty.c("MyComponent", {
    sharedObject: {a:1, b:2}
});var e1 = Crafty.e("MyComponent");var e2 = Crafty.e("MyComponent");
e1.sharedObject.a = 5;console.log(e2.sharedObject.a); // Logs 5!

如果不希望这个对象被共享,请在init方法内创建该属性:

Crafty.c("MyComponent", {
    init: function() {        this.myObject = {a:1, b:2};
    }
});var e1 = Crafty.e("MyComponent");var e2 = Crafty.e("MyComponent");
e1.myObject.a = 5;console.log(e2.myObject.a); // Logs the original value of 1

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

推荐阅读

  • kubernetes系列教程(十九)使用metric-server让HPA弹性伸缩愉快运行

    kubernetes监控指标大体可以分为两类:核心监控指标和自定义指标,核心监控指标是kubernetes内置稳定可靠监控指标,早期由heapster完成,现由metric-server实现;自定义指标用于实现核心指标的扩展,能够提供更丰富的指标支持,如应用状态指标,自定义指标需要通过Aggregator和k8s api集成,当前主流通过promethues实现。

    HappyLau谈云计算
    Kubernetes容器微服务微服务架构腾讯微服务平台 TFS
  • 三分钟入坑指北 🔜 Docsify + Serverless Framework 快速创建个人博客系统

    之前由于学摄影的关系,为了提高自己的审美,顺便锻炼下自己的英文能力,翻译了不少国外艺术类的 文章。最近一直想搭一个个人博客来存放这些内容,又懒得折腾建站,遂一直搁置。

    Aceyclee
    ServerlessHTML网站GitGitHub
  • NVM作为主存上对数据库管理系统的影响

    implications of non-volatile memory as primary storage for database management systems

    yzsDBA
    存储缓存数据库数据结构SQL
  • DevOps平台架构演进

    附最新架构图https://www.processon.com/view/5cbd897de4b0bab90962c435

    我思故我在
    DevOps 解决方案微服务架构架构设计
  • 【腾讯云AI小程序大赛】中山大学作品《小耳朵天使》

    ----------------------------------------------------------------------------------

    陈华山
    小程序 · 云开发小程序语音识别文字识别对话机器人
  • Kona JDK 在腾讯大数据领域内的实践与发展

    经常听人谈到 OpenJDK,那它到底是什么呢?相信大家都听说过 Java SE、ME、EE等规范, 通常意义上对 Open JDK 的定义指:Java SE规范的一个免费和开源参考实现。

    腾小云
    JDKJavaJVM大数据Oracle
  • 公告丨腾讯安全产品更名通知

    为了更好地为政企客户的安全保驾护航,腾讯安全即日起更新旗下身份安全、网络安全、终端安全、应用安全、数据安全、业务安全、安全管理、安全服务等八类安全产品的命名,致力于打造全栈安全产品“货架”,让客户选购安全产品/服务更加便捷,更快地找到合适的安全产品,从而对自身的安全建设“对症下药”。

    腾讯安全
    DDoS 防护应用安全 MS验证码(业务安全)应用安全(移动安全)漏洞扫描服务
  • Kubernetes系列学习文章 - 网络实现(八)

    | 导语 前面介绍了很多K8S的概念以及架构方面的东西,这里我们说说K8S的网络。云计算里面的网络向来是复杂的,因为里面牵扯到硬件网络跟虚拟网络的交互。尤其是虚拟网络,比较抽象,如果不搞清楚,一些问题排障将寸步难行。

    宝哥@devops运维
    KubernetesDocker容器
  • 远程办公经验为0,如何将日常工作平滑过度到线上?

    导语 | 受到疫情影响,很多企业开始考虑远程办公。近日,TVP群里的各位老师们对此话题展开了热烈讨论。TVP张善友老师作为一名创业者,也决定开启远程办公。本文是他做了调研、试用后所总结的方案,并列出了相关产品清单,希望对读者有所帮助。文末也对各位TVP老师的相关语录进行了整理。「TVP思享」专栏,凝结大咖思考,汇聚专家分享,收获全新思想,欢迎长期关注。(编辑:云加社区 尾尾)

    尾尾
    TAPD 敏捷项目管理腾讯乐享企业邮箱企业编程算法
  • FFmpeg图像处理深度应用

    感谢大家关注FFmpeg在OnVideo以及AI方面的一些工作,我是刘歧,是OnVideo联合创始人的同时也担任技术负责人,同时也是FFmpeg的官方顾问,FFmpeg GSoC 2019 Mentor,FFmpeg决策委员会的委员,以及腾讯云TVP。我主要的兴趣在嵌入式开发、图形图像及音视频流媒体处理、分布式系统设计等领域。FFmpeg官方有我的联系方式,大家有问题可以和我随时交流。关于FFmpeg深度学习场景下的应用,目前看来,颇具价值且实用。

    LiveVideoStack
    视频处理图像处理OpenGLAPIOpenCV

扫码关注云+社区

领取腾讯云代金券