Javascript

解决jest的”too many open files, watch”问题(Mac OSX)

在对一个有一定规模的react前端项目执行jest单元测试时,遇到了如下问题:

node scripts/test.js –env=jsdom
2020-02-04 11:05 node9117 FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2020-02-04 11:05 node9117 FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2020-02-04 11:05 node9117 FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
events.js:174
throw er; // Unhandled ‘error’ event
^
Error: EMFILE: too many open files, watch
at FSEvent.FSWatcher._handle.onchange (internal/fs/watchers.js:123:28)
Emitted ‘error’ event at:
at FSEvent.FSWatcher._handle.onchange (internal/fs/watchers.js:129:12)
npm ERR! Test failed. See above for more details.

错误信息
Continue reading…

CocosCreator TypeScript项目引用第三方库的方法和问题记录

TypeScript对于习惯强类型语言(比如Unity C#)而又要写JavaScript项目(比如CocosCreator Egret)的程序员来说,确实提供了很大方便,而且对于一些由于弱类型语言导致的只能运行时检查的低级错误,使用TS都能很好的避免。

这次要记录的是使用TypeScript作为主开发语言的CocosCreator项目中引用第三方库的方法和问题,实测的是MessagePackprotobufjs和Photon这几个库。

Continue reading…

CocosCreator 2.0的cc.eventManager弃用换新API记录

Cocos Creator升级2.0以后发现原来写的一些代码开始报弃用警告了,今天有空学习下新API并更新下原来的代码,之前写的实现监听touch起动停事件的代码是这样写的:

    // use this for initialization
    onLoad: function () {
        let self = this;

        cc.eventManager.addListener({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,

            onTouchBegan: function (touch, event) {
                // x = touch.getLocation().x
                // y = touch.getLocation().y

                return true;
            },
            onTouchMoved: function (touch, event) {
                // x = touch.getLocation().x
                // y = touch.getLocation().y

                return true;
            },
            onTouchEnded: function (touch, event) {
                const x = touch.getLocation().x;
                const y = touch.getLocation().y;
                const cp = self.dragonPlayer.getPosition();
                NetworkManager.instance.getNetPhoton().sendMyPost(cp.x, cp.y, x, y);
                const dist = cc.v2(x, y).sub(cp).mag();
                self.dragonPlayer.stopAllActions();
                self.dragonPlayer.runAction(cc.moveTo(dist / 80, x, y));
                return true;
            }
        }, self.node);
    },
Continue reading…

关于Javascript中类成员函数中内嵌函数的this闭包问题

之前写CocosLua和CocosJS时经常会遇到类成员函数中调用内嵌函数时的this传递问题,最近发现Javascript中可以通过使用箭头函数简化这个this的闭包问题,先给出测试代码:

class clsTest {
  constructor(var1) {
    this._var1 = var1;
  }

  foo() {
    console.log("1111", this._var1);

    (() => {
      console.log("2222", this._var1);
    })();

    (function() {
      console.log("3333", this);
    })();

    let self = this;
    (function() {
      console.log("4444", self._var1);
    })();
  }
}

let objTest = new clsTest(10);
objTest.foo();

JSFiddle:https://jsfiddle.net/u0yconbg/2/

为了简化示例代码,内嵌函数都写成了自调用的形式,可见333时的内嵌函数调用this是undefined,所以4444时在调用函数前声明了self用于闭包进内嵌函数访问this,(Lua中一般是local this = self),而2222的内嵌函数是通过箭头方式声明的,可见log中成功输出了clsTest类对象的_var1成员变量值,也就是说this被自动传递了,为此特意查了下文档:

An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

来自:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

屏蔽Cesium的默认双击追踪选中entity行为

Cesium中,默认会对场景中添加的entity进行双击追踪效果(类似Unity中的选中物体后按F),参考

Remove default double click behavior in Cesiumhttp://webiks.com/remove-default-double-click-behavior-in-cesium/

这篇文章中介绍的方法后,发现所谓的”less intrusive way”并不好用,双击选中后的摄像机移动逻辑还是触发了,于是最终采用了第一种解决方法:

viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

实测在1.48版中可以达到效果,另外伴随这个默认双击追踪实体行为的,还有个默认的选中指示框,这个可以通过在new Cesium.Viewer的时候指定selectionIndicator: false来关闭,如下:

var viewer = new Cesium.Viewer('cesiumContainer', {
        'timeline': false,
        'animation': false,
        'homeButton': false,
        'geocoder': false,
        'fullscreenButton': false,
        'searchButton': false,
        'scene3DOnly': false,
        'terrainShadows': Cesium.ShadowMode.DISABLED,
        'navigationHelpButton': false,
        'selectionIndicator': false,
        'sceneModePicker': false,
        'infoBox': false,
        'baseLayerPicker': false,
        'shadows': false,
});

DOMException: play() can only be initiated by a user gesture(Cocos2d-JS HTML5)

Cocos2d-x目前一直在力推Cocos Creator,流程上Creator和Unity已经很像了(再来个编辑器状态可视化运行就完美了),其实Cocos还有一个纯JS版:http://www.cocos2d-x.org/filecenter/jsbuilder,而且还是可以自助选择所需组件的,最精简版是可以只有几百k的单js文件,使用此版本引擎的应用开发流程和Creator前的Cocos一样,代码为主!所以个人认为更适合做一些简单的小游戏或移植原有C++ Lua Obj-C项目。
由于对H5游戏开发接触的不多,大部分认知还停留在早期的canvas 2d状态,简单试了下这个纯JS版本,发现目前webgl的绘图效率已经可以在移动端和PC端(最新chrome)均达到很不错的效果了。不过这次要记录的问题和图形方面没关系,而是和声音有关,具体一点说是通过cc.audioEngine.playMusic播放游戏背景音乐产生的问题,错误现象直接写在标题中了。
其实在遇到标题中的错误之前还有一个问题,也算是关联问题,即H5游戏在移动端上不能以js代码形式主动触发音乐的播放,必须在用户操作后才可以播放,这个百度一下就可以查到,一开始在PC端还是按照原来做游戏的逻辑,loading完后splash,然后main menu直接播放bgm,PC浏览器下一切正常,但到了移动端却发现bgm根本没有播放,于是直接根据百度到的资料将初始bgm改为用户点击后才播放,本以为这样就可以了,但是后来又遇到了标题的问题,具体触发代码如下:
Continue reading…

Egret白鹭使用Photon第三方库后manifest.json不更新的问题

Egret版本:5.1.4,Photon JS/TS SDK版本:Photon-Javascript-Sdk_v4-0-0-6
按照白鹭第三方模块的引用方法(网上查到的方法版本很多2.x 3.x 4.x的都有,且各不相同,好不容易找到了5.x的最新方法):
在非白鹭项目位置创建lib项目,命令行执行:

egret create_lib Photon

生成的lib项目夹子内至少应该有:package.json tsconfig.json这两个文件,按照官方最新文档的配置:http://developer.egret.com/cn/2d/projectConfig/libraryProject
最终lib项目文件夹结构应该如下:
Continue reading…

关于Javascript闭包closure的应用

最近在研究百度地图API的应用,试验了iOS SDK后又开始试验Web端的JS版应用,做到在地图上通过Ajax异步调用方式从后端取得数据后,添加标注并给标注添加对应的点击时间alert出此位置的信息时遇到了一个Javascript问题,最开始的code是这样写的:

		$.ajax({
			type : "get",
			url : urlStr,
			async : true,
			dataType : "json",
			error : function() {
				alert('No valid location record!');
			},
			success : function(json) {
				for(var i=0;i<json.length;i++)
				{
					var point = new BMap.Point(json[i].longtitude, json[i].latitude); 
					var marker = new BMap.Marker(point);        // 创建标注  
                                        // 添加点击事件侦听
					mark.addEventListener("click", function()
			                {
				            alert('记录时间: '+json[i].logTime+' 定位时间: '+json[i].gpsTime);
				            return;
			                });
					map.addOverlay(marker);                     // 将标注添加到地图中 
				}
		        var point = new BMap.Point(json[0].longtitude, json[0].latitude);  
        		map.centerAndZoom(point, 15);
			}
			});

这样运行时,点击任意一个标注后就会收到浏览器的js脚本错误,提示json[i].logTime还有后面同样的gpsTime部分有问题,检查了一下,发现Ajax请求成功后的函数内循环遍历数据时的i是局部变量,而每一个mark的click侦听函数内的i都为对同一个变量的引用,也就是说循环遍历后每次点击触发执行这段响应代码时的i都是同一个数,而不是认为的对应每一个mark时的i,也自然就取不到所期望的数据了!
Continue reading…