JS的布尔运算返回的不一定是布尔值

作者: Frossky
时间: 2017-02-08
分类: 未分类
评论

布尔运算有三种, 与或非.
在C中, 布尔运算一定会返回布尔值.
在JS中却不同, 只有"非"运算一定会返回布尔值, "与或"都不一定返回布尔值.

a && b 与运算:

a为false/NaN/undefined/null/0/""时, 则返回a;
a不为以上值,如true/Object/"0" 则返回b;
注意, "0"被认为是true, ""被认为是false.

a || b 或运算:

和&&相反, a不为false/NaN/undefined/null/0/""时, 则返回a;其他情况返回b;

js中clone一个对象

作者: Frossky
时间: 2017-02-06
分类: 未分类
评论

貌似这个简单的操作会有无数种不同的方法.

使用Object.assign

var clone = Object.assign({}, obj);

这个方法貌似是新的js中支持的, 会有兼容性问题. 那么还有其他方法:

y = _.clone(x);

这个是用的underscore库.

y = JSON.parse(JSON.stringify(x))
var bill = $.extend(true, {}, bob);

这是用的jquery库.

使用Object.create,但这并非真正的clone,而是继承.

y = Object.create(x);

其他

其他方法中最重要的就是自己写一个function, 去iterate key并且赋值.

参考:
(How do I correctly clone a JavaScript object?)[http://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object]
(4 CREATIVE WAYS TO CLONE OBJECTS)[http://heyjavascript.com/4-creative-ways-to-clone-objects/]
(Deep copy Javascript objects)[https://webdevwonders.com/deep-copy-javascript-objects/]

写了一个小工具,以texturepakcer替代bmfont

作者: Frossky
时间: 2017-01-17
分类: 未分类
评论

bmfont目前似乎是制作fnt位图字体的唯一工具, 可是每次选择图片/填写id都是一个非常蛋疼的事情. 更蛋疼的是, 无法打开以前保存的文件继续添加新的字体.
而TexturePacker合并贴图工具显然好用得多, 只需要将图片拖入, 点击Publish Sprite Sheet即可, 非常好用. 并且工程文件可以保存以便下次在编辑. 说实话这么好用, 即使没有工程文件也丝毫不影响效率.
这儿以TexturePacker导出cocos-2dx贴图为例, 讲讲怎么用TexturePacker制作fnt字体.

将所有字体图片以字体对应的字符命名

如0-9的字体png图片,需要分别命名为 0.png, 1.png等等; 也支持中文字体. 如果字符为不能作为文件名的特殊字符, 如/*\等, 可以使用下划线加id的方式,如 _48.png表示字符"0", _31532.png表示字符"第".

用TexturePacker的基本模式导出cocos2dx的图集, 设置如下:

Framework: cocos2d-x
Texture Format: PNG-32
Pixel Format: RGBA8888
Algorithm: Basic
Trim Mode: None

导出的图集名称如example.plist, example.png

下载工具

git clone https://github.com/darceye/myjs.git
npm install

将下载的工具目录添加到path中去.

转化
在导出的example.plist目录中, 使用命令行执行:
plist2fnt example.plist

就会输出example.fnt. 与example.png一起导入到cocos creator中就可以使用.

js中转化char和int

作者: Frossky
时间: 2017-01-17
分类: 未分类
评论

js中转化char和int

var chr ='a';
console.log(chr.charCodeAt(0)); // output 97

 var i=97;
 console.log(String.fromCharCode(i)); //output 'a'

原文参考

SVN update失败要求clean up, clean up也失败怎么办?

作者: Frossky
时间: 2017-01-17
分类: 未分类
评论

不得不说, svn真是操蛋啊....

安装sqlite, 在项目的.svn目录下,使用命令行执行以下操作, 手动清空svn的执行数据库即可再次clean up.

sqlite .svn/wc.db “delete from work_queue”

sublime text自动选中html的首尾标签

作者: Frossky
时间: 2017-01-16
分类: 未分类
评论

sublime text自动选中html的首尾标签(似乎需要装emmet插件, 相信很多人都已经装过了)

[Super + Shift + K] on mac //In OSX environment, super key = Command key.
[Ctrl + Shift + '] on windows

VS code调试快捷键

作者: Frossky
时间: 2017-01-14
分类: 未分类
评论

转载自这儿
快捷键

Ctrl+P 通过文件名或者标签名导航
Ctrl+Tab 在前一个文件和当前文件间切换
F1 打开全局命令
Ctrl+Shift+O will let you navigate to a specific symbol in a file // 不会
Ctrl+G 根据行号跳转行
Ctrl+\ 快速分割当前窗口

Ctrl+[ 缩进行
Ctrl+] 扩张行
Ctrl+F4 关闭当前标签页

Ctrl+Shift+w 关闭 vs code
Ctrl+T 搜索symbol
Ctrl+Shift+P 打开命令行并带一个 > 符号
Ctrl+P 打开命令行
Ctrl+Shift+] 在两个闭合的符号之间切换
Ctrl+F2 选中页面当中所有的当前指定的游标所在的单词
Ctrl+Shift+L 本来是选中当前游标下的所有相同的单词，但是在windows上不好用
Alt+左键增加游标（其实这个游标Cursor是复制出来的）
Alt+windows+上/下在多个游标中上下移动来上下选定多个游标
ESC 取消所有游标
Ctrl+Space 打开智能感知功能
Ctrl+F12 查看单个函数的定义
Shift+F12 查看所有函数的定义
format code 格式化代码不能使用，这个还比较重要，但是windows中的不好用
Ctrl+Shift+M 打开错误提示框
Ctrl+Shift+O 打开Symbol提示框
F8 游标停在错误的代码上，按F8显示代码错误信息
Ctrl + 上/下游标定住视窗上下移动
Alt + 上/下游标拉住所在的行，随着视窗往下移动
Shift + Alt +上/下游标复制所在的行，随着视窗上下移动
Ctrl + Shift + D 打开调试选项栏
Ctrl + Shift + v 打开调试的view模式

命令提示框提示符表示：

代表展示和运行命令
！展示错误和警告

通过名字打开标签

git 就是运行git命令
task 运行task
...打开文件和标签名通过名字: 跳转行
@ 跳转symbol
@：跳转symbol通过category

使用CSS中用到的快捷键
m:20px 用一下tab就成了margin:20px;
bdw:用一下就成了border-width:
fz 用一下就成了font-size
bd 扩展一下就成了border
bd+ 扩展一下就成了border：1px solid #000
lg 扩展成background-img

调试快捷键
F5 Run / Pause / Run to Cursor
Shift+F5 : Stop
F10 : Stop Over
F11 : Step into
Shift + F11 : Step out
F9 : Toggle Breakpoint
重要的debug特性
1. Launching
2. Attaching
3. Stop on entry
4. Inspecting
5. Sourcemaps

js如何传递可变参数

作者: Frossky
时间: 2017-01-13
分类: 未分类
评论

通过apply和arguments.
例如console.log是可变长参数.

function a(){
 console.log.apply(this, arguments)
}

在sublime text中修改变量名

作者: Frossky
时间: 2017-01-13
分类: 未分类
评论

光标在变量名旁边按下alt+F3, 就会多光标选中所有的变量, 此时可以修改.

js中的global与window

作者: Frossky
时间: 2017-01-12
分类: 未分类
评论

在浏览器中, window是用来"兜底"的对象, 所有默认定义的对象都是window的子对象.

var a = {}
window.a //{}
parseInt === window.parseInt //true

而在node.js中没有window, 对等关系的是global

var a = {}
global.a //{}
parseInt === global.parseInt //true

那么在cocos creator中, 究竟是哪一个呢? 测试了一下, 是window. global是不存在的.
那么electron呢? electron中,两者都存在, 并且两者其实是同一个.

//electron中
window === global //true

js的typeof与instanceof

作者: Frossky
时间: 2017-01-12
分类: 未分类
评论

typeof得出的是数据类型, 如:

typeof(1) //'number'
typeof("abc") //'string'
typeof(true) //'boolean'
var a = {}
typeof(a) //'object'
var b = []
typeof(b) // 'object'

注意最后两句, 一个array的type是object,是不是有些奇怪? 因为, array其实不是基本类型. 那怎么知道array是array呢? 那就要用object的判断方式, instanceof

var b = []
b instanceof Array //true
b instanceof Object //true
1 instanceof Number //false
"abc" instanceof String //false

注意最后两句, 1和"abc"是基本类型, 如果是要Number和String类型的,需要用 new Number和new String来获取

var n = new Number(1)
n instanceof Number //true

然而对于函数function又有点不一样了

var f = function(){}
typeof(f) //function
f instanceof Function //true
f instanceof Object //true

您可以看到, f虽然是一个Object,然而用typeof却可以得到他的类型.
再看看RegExp, 和Array是类似的

typeof(/a/) //object
/a/ instanceof RegExp //true
/a/ instanceof Object //true

用mocha做node.js的单元测试

作者: Frossky
时间: 2017-01-09
分类: 未分类
评论

js单元测试有好多个方式, 按照诞生时间依次是Qunit, jasmine, mocha, ava. 其中, ava是15年的项目, 还很新. Qunit和ava的star人数还没有超过1万, jasmine和mocha平分秋色,基本差不多. 考虑到jasmine是比mocha老的项目,而且jasmine最早是针对浏览器端的,而mocha似乎开始时就是针对node.js的, 这儿就选择mocha了.

安装使用

全局安装mocha

npm install -g mocha

项目本地安装chai(assert库)

npm install chai

chai库提供多种assert方式, 后面将举例用expect

示例被测项目, 叫add.js

function add(a, b){
    return a + b
}

function minus(a,b){
    return a - b
}
module.exports = add

测试代码, 叫test.js

var expect = require("chai").expect
var add = require("add")
describe("add", function(){

    it("1+2=3", function(){
        expect(add(1,2)).to.be.equal(3)
    })

})

运行代码

mocha test.js

js经常需要对比object，一般用意是对比内容key和value是否一致，就不能用expect().to.be.equal()了，需要用

expect().to.deep.equal()

其他方面

测试private function,以及mock.

例如, 上面的minus()函数没有通过module.exports导出, 是个私有函数, 如何进行测试? 这儿需要用到rewire. 将rewire安装到项目中.

npm install rewire

测试minus的文件test2.js

var expect = require("chai").expect
var rewire = require('rewire')  // 使用rewire加载被测文件.
var add = rewire("add")
describe("add", function(){
    var minus = add.__get__("minus")  // 使用__get__获取私有函数
    it("1-2=-3", function(){
        expect(minus(1,2)).to.be.equal(-1)
    })

})

rewire还可以使用set来mock函数, 看这儿
关于更多chai的用法, 看这儿

最佳实践

装所有测试文件的目录命名为test,然后在目录上一级运行mocha可以测试所有test中的文件.
文件名为 xx.test.js或者xx_spec.js ,spec是inspect(核查)的简称.
使用npm test运行测试, 需要在package.json中加入:
```
"scripts": {
"test": "mocha"
}
```

如何让浏览器下载一张图片而不是打开它?

作者: Frossky
时间: 2017-01-07
分类: 未分类
评论

网上流传的许多并不能用的答案, 常见的是这样的:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<button onclick="down()">down</button>
<script type="text/javascript">
function down(){
    location = "/downloadpic/icon.png"
    var    pic   =   window.open(location,"a1")   
    pic.document.execCommand("SaveAs") 
}  
</script>
</body>
</html>

这儿的问题是, window.open只会打开新窗口, 并且在新窗口中打开文件. 如果文件是图片, 浏览器只会显示而不是下载.
并且, pic.document.execCommand("SaveAs") 这一句似乎并没有什么用.

下面是正确答案. 使用标签, 加download属性, 就这么简单.

<body>
<a href="icon.png" download>download icon</a>
</body>

还可以为download属性指定下载文件名称:

<body>
<a href="icon.png" download="new_icon.png">download icon</a>
</body>

js 时间回调函数

作者: Frossky
时间: 2017-01-05
分类: 未分类
评论

在chrome和node中有效

定时连续回调
iv = setInterval(callback, milsec)
clearInterval(iv)

javascript的lint工具那么多,还是eslint比较好用啊.

作者: Frossky
时间: 2016-12-30
分类: 未分类
评论

有jslint, javascriptlint(jsl), 还有eslint. 貌似eslint是最受欢迎的.
安装eslint

npm i -g eslint

运行:

eslint *.js

在js目录下放一个.eslintrc.json文件, 可以对需要lint的规则做设置.下面是我复制cocos creator的配置,并做了一点修改, 忽略了末尾分号检测.

{
  "extends": "eslint:recommended",
  "rules": {
    "comma-dangle": 0,
    "no-console": 0,
    "no-constant-condition": 0,
    "semi": 0,
    "no-unused-vars": 1
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "mocha": true
  },
  "plugins": [
  ],
  "globals": {
    "cc": false,
    "CC_EDITOR": false,
    "CC_DEV": false,
    "CC_JSB": false,
    "_ccsg": false
  }
}

JS的布尔运算返回的不一定是布尔值

js中clone一个对象

写了一个小工具,以texturepakcer替代bmfont

js中转化char和int

SVN update失败要求clean up, clean up也失败怎么办?

sublime text自动选中html的首尾标签

VS code调试快捷键

通过名字打开标签

js如何传递可变参数

在sublime text中修改变量名

js中的global与window

js的typeof与instanceof

用mocha做node.js的单元测试

安装使用

其他方面

最佳实践

如何让浏览器下载一张图片而不是打开它?

js 时间回调函数

javascript的lint工具那么多,还是eslint比较好用啊.

最新文章

最近回复

分类

归档

其它