Javascript

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

2020年02月4日 (0) Java, JavaScript 设计开发

在对一个有一定规模的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.

错误信息
继续阅读…

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

2019年02月19日 (0) Java, JavaScript 设计开发

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

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

继续阅读…

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

2019年01月6日 (0) Java, JavaScript 设计开发

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);
    },
继续阅读…

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

2018年10月27日 (0) Java, JavaScript 设计开发

之前写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行为

2018年08月22日 (0) Java, JavaScript 设计开发

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

Remove default double click behavior in Cesium – http://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)

2018年03月18日 (1) Java, JavaScript 移动平台 设计开发

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改为用户点击后才播放，本以为这样就可以了，但是后来又遇到了标题的问题，具体触发代码如下：
继续阅读…

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

2018年02月1日 (0) Java, JavaScript 移动平台 设计开发

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项目文件夹结构应该如下：
继续阅读…

关于Javascript闭包closure的应用

2014年01月31日 (0) Java, JavaScript 设计开发

最近在研究百度地图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，也自然就取不到所期望的数据了！
继续阅读…