我是一个软件开发工程师

乐观 积极 生活如此精彩

总有快乐的事情降临

这是一个精彩的世界,不是吗?

技术精要

这里是我的一些你可能需要的技术摘要

动画与效果

一些常见的动画和效果

算法与逻辑

常用的算法和逻辑推导

性能与技巧

关于性能和技巧方面的总结

组件编程二

WEB一直在往自然言语化方向发展,而组件则是自然语言化很好的方式和体现。

自定义组件

与React或Angular相似,一切自定义标签都继承HTMLElement类:

class WaHaha extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `Hello Indeex`;
  }
}
customElements.define('wa-haha', WaHaha);

注意this指向。

组件生命周期

生命周期是组件的基本功能,当组件从加载到渲染完成,每一步都可以控制:

class WaHaha[......]

继续阅读

组件编程一

用的久了也就忘了。。。

自定义标签

<indeex-component></indeex-component>
class IndeexComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<h1>Hello Indeex</h1>`;
  }
}
customElements.define('indeex-component', IndeexComponent);

可以很好的自然语言化。

嵌套隔离标签

嵌套隔离标签的官方名称叫:[……]

继续阅读

编辑器基本思路

一、contentEditable

div的contentEditable属性可以让div进入编辑模式,禁止可以使用contentEditable=false。

二、Selection

浏览器中内置了获取用户操作的方法:

let selection = window.getSelection();

Selection 对象有anchorNodefocusNode属性,可以用来获得选中部分的开始和结束元素,不过一般会用Range代替。还有一个isCollapsed属性,为true时,代表选择区域开始和结束在相同的点,也就是没有选中内容时光标闪烁的模式。修改选择范围,主要就是对Ran[……]

继续阅读

数据结构

数据结构的讲解很少,而且零零散散的,把以前使用其他ECMAScript实现的整理再用Typescript重新记录下。

数组

一切从数组开始:

由于ECMAScript比较灵活,数组也一样,语法也简单:

let arr: number[] = [];
for(let i: number = 0; i < 1000000; i++) arr[i] = i ;
let startT: number = new Date().getTime();
let num: number = 500;
while(num > 0)
{
    arr.splice(0, 1);
    nu[......]

继续阅读

Vue 3.0使用

Vue 3.0 beta发布了。。

环境准备

可以使用beta的测试页面

测试页面

vue-next-webpack-preview

Minimal webpack setup for Vue 3 (beta)

This is for preview purposes only. There might be bugs and undocumented behavior differences from v2, which are expected.

Also note that if you are using VSCode, Vetur isn’t updated t[……]

继续阅读

2020年4月4日举行全国性哀悼活动-网站处理-中国加油

2020年4月4日举行全国性哀悼活动-网站处理-中国加油

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,国务院今天(4月3日)发布公告,决定2020年4月4日举行全国性哀悼活动。在此期间,全国和驻外使领馆下半旗志哀,全国停止公共娱乐活动。4月4日10时起,全国人民默哀3分钟,汽车、火车、舰船鸣笛,防空警报鸣响。

网站处理关键样式:

html
    filter:grayscale(100%);
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filte[......]

继续阅读

国内游戏引擎使用

开发游戏的引擎有很多,这里简单介绍下比较符合游戏开发流程适合中大型等极其复杂的项目(好像就这俩优点)的引擎 – Layabox。

由于IDE比较难用,官方推荐使用其他编辑器,比如FB/FD/VS/IDEA及子软件。

环境搭建

这里使用Laya IDE演示设计,使用FB开发。

下载地址:

Laya IDE 下载地址:https://ldc2.layabox.com/layadownload/?type=layaairide-LayaAir

Laya Air 下载地址:https://ldc2.layabox.com/layadownload/?type=layaair-LayaAi[……]

继续阅读

动效

动效

项目需要用到很多动效,但是很多开源动画效果没有很好的移植过来,这里做个记录,使用Typescript,其他ECMAScript实现都一样,游戏引擎Layabox、Egret、Cocos等也都一样。

动画类型

基本包含了常用的动画类型:

var arr: Array = [
    "Linear",
    "QuadEaseOut", "QuadEaseIn", "QuadEaseInOut", "QuadEaseOutIn",
    "ExpoEaseOut", "ExpoEaseIn", "ExpoEaseInOut", "ExpoEaseOutIn",
    "Cubic[......]

继续阅读

Tree

由于XML的操作和CSS样式的渲染很耗性能,未来会逐步被替代,这里写一个废弃XML结构的高效Tree控件示例,供未来使用。

样例仅供参考,禁止用于项目。

Tree

package tree {
    import display.Sprite;
    import events.MouseEvent;

    public class TreeNode extends Sprite {
        protected var bg:Sprite;
        protected var nodeContainer:Sprite;
        protected var isOp[......]

继续阅读

对象池

对象池介绍

看百度百科的对象池介绍吧: 对象池 没啥用。

俩核心:使用和缓存,即对于那些被频繁使用的对象,在使用完后,不立即将它们释放,而是将它们缓存起来,以供后续的应用程序重复使用,从而减少创建对象和释放对象的次数,进而改善应用程序的性能。

再具体一点说:凡是涉及到不断重复使用的对象,在初始化应用程序期间创建一定数量的对象并将其存储在一个池中,例如 new Array 或 new Vector(其他ECMAScript实现的Single Type数组)对象。对一个对象完成操作后,停用该对象以免它占用 CPU资源,然后删除所有相互引用。但是,不要将引用设置为null,否则会被GC掉。只[……]

继续阅读