Frossky 发布的文章

原文链接

%YAML 1.1   # Reference card
---
Collection indicators:
    '? ' : Key indicator.
    ': ' : Value indicator.
    '- ' : Nested series entry indicator.
    ', ' : Separate in-line branch entries.
    '[]' : Surround in-line series branch.
    '{}' : Surround in-line keyed branch.
Scalar indicators:
    '''' : Surround in-line unescaped scalar ('' escaped ').
    '"'  : Surround in-line escaped scalar (see escape codes below).
    '|'  : Block scalar indicator.
    '>'  : Folded scalar indicator.
    '-'  : Strip chomp modifier ('|-' or '>-').
    '+'  : Keep chomp modifier ('|+' or '>+').
    1-9  : Explicit indentation modifier ('|1' or '>2').
           # Modifiers can be combined ('|2-', '>+1').
Alias indicators:
    '&'  : Anchor property.
    '*'  : Alias indicator.
Tag property: # Usually unspecified.
    none    : Unspecified tag (automatically resolved by application).
    '!'     : Non-specific tag (by default, "!!map"/"!!seq"/"!!str").
    '!foo'  : Primary (by convention, means a local "!foo" tag).
    '!!foo' : Secondary (by convention, means "tag:yaml.org,2002:foo").
    '!h!foo': Requires "%TAG !h! <prefix>" (and then means "<prefix>foo").
    '!<foo>': Verbatim tag (always means "foo").
Document indicators:
    '%'  : Directive indicator.
    '---': Document header.
    '...': Document terminator.
Misc indicators:
    ' #' : Throwaway comment indicator.
    '`@' : Both reserved for future use.
Special keys:
    '='  : Default "value" mapping key.
    '<<' : Merge keys from another mapping.
Core types: # Default automatic tags.
    '!!map' : { Hash table, dictionary, mapping }
    '!!seq' : { List, array, tuple, vector, sequence }
    '!!str' : Unicode string
More types:
    '!!set' : { cherries, plums, apples }
    '!!omap': [ one: 1, two: 2 ]
Language Independent Scalar types:
    { ~, null }              : Null (no value).
    [ 1234, 0x4D2, 02333 ]   : [ Decimal int, Hexadecimal int, Octal int ]
    [ 1_230.15, 12.3015e+02 ]: [ Fixed float, Exponential float ]
    [ .inf, -.Inf, .NAN ]    : [ Infinity (float), Negative, Not a number ]
    { Y, true, Yes, ON  }    : Boolean true
    { n, FALSE, No, off }    : Boolean false
    ? !!binary >
        R0lG...BADS=
    : >-
        Base 64 binary value.
Escape codes:
 Numeric   : { "\x12": 8-bit, "\u1234": 16-bit, "\U00102030": 32-bit }
 Protective: { "\\": '\', "\"": '"', "\ ": ' ', "\<TAB>": TAB }
 C         : { "\0": NUL, "\a": BEL, "\b": BS, "\f": FF, "\n": LF, "\r": CR,
               "\t": TAB, "\v": VTAB }
 Additional: { "\e": ESC, "\_": NBSP, "\N": NEL, "\L": LS, "\P": PS }
...

软件程序为了描述数据不遗余力有多重方式, 早期windows上有.ini文件, linux上有.conf文件. 后来.xml几乎成为了标配, 以及从.xml衍生的apple格式.plist.
xml衍生自html, 刚刚出来的时候大家都很兴奋, 确实在一段时间内几乎成为了一统江湖的格式. 然而xml与html不同的是, 在html中标签名称都比较简单短小, xml描述数据后key根据不同软件要求变得复杂, 前后一个括号将key写两遍变得很臃肿, key+value一共得占用三行,篇幅大阅读性也不够好.
后来json出来了, 大家就又松了口气, 舒服多了, key+value一行就够了, 写起来也舒服.
而现在yaml是要比json写更少内容的了. 甚至连大括号中括号都不用, 逗号也不用, 引号也不用, 所占用的行也没有了.

# 注释
name: John Smith
age: 37
spouse:
    name: Jane Smith
    age: 25
children:
    -   name: Jimmy Smith
        age: 15
    -   name: Jenny Smith
        age 12

从内容上看起来让人想到了python和markdown. 使用缩进, 描述语言更容易阅读. 上面这段包含了key value关系, 层次关系, 列表(数组)关系.
对比json:

  • 用缩进替代大括号表示层次关系, 这是python的手段;
  • 用回车替代逗号表示不同元素, 这也是python的手段
  • 继承了json使用冒号分隔key和value的方式
  • 用减号替代方括号表示列表, 这是markdown的方式
  • 注释使用井号#, 这是python的方式
  • 字符串断行使用反斜杠\, 这与js是相同的.
  • 最有趣的是, 如果你想在一行里面写多个元素, 你还可以使用js的[],{}语法
---
- [name        , hr, avg  ]
- [Mark McGwire, 65, 0.278]
- [Sammy Sosa  , 63, 0.288]
---
Mark McGwire: {hr: 65, avg: 0.278}
Sammy Sosa: {
    hr: 63,
    avg: 0.288
  }
  • 还有个比json强大的地方, 可以使用&定义常量并在后面使用星号*引用, 如
name: &JS Jhon Smith 
nameagain: *JS
  • 有一个现在不太明白怎么用的, 就是使用三减号---分隔不同文档,使用三点...终结文档. 这样可以在一个文档里描述多个文档, 干嘛用? spec里说用在通信频道上?不清楚列
  • 非常神奇的是, 可以使用一个复杂的对象作为key,而不是仅限于string, 这时候key需要以问号?开头
? - Detroit Tigers
  - Chicago cubs
:
  - 2001-07-23

? [ New York Yankees,
    Atlanta Braves ]
: [ 2001-07-02, 2001-08-12,
    2001-08-14 ]
  • 对于value的类型,常见的类型是自动判断的
number: 123
float: 123.13
string: something is something
string2: "123"
bool: true
canonical: 2001-12-15T02:59:43.1Z
iso8601: 2001-12-14t21:59:43.10-05:00
spaced: 2001-12-14 21:59:43.10 -5
date: 2002-12-14

  • 其他复杂的类型, 有些需要!!说明, 其他需要编程语言自己搞定. 通常是在key后面加叹号描述类型
---
not-date: !!str 2002-04-28

picture: !!binary |
 R0lGODlhDAAMAIQAAP//9/X
 17unp5WZmZgAAAOfn515eXv
 Pz7Y6OjuDg4J+fn5OTk6enp
 56enmleECcgggoBADs=

application specific tag: !something |
 The semantics of the tag
 above may be different for
 different documents.

# Sets are represented as a
# Mapping where each key is
# associated with a null value
--- !!set
? Mark McGwire
? Sammy Sosa
? Ken Griff

%TAG ! tag:clarkevans.com,2002:
--- !shape
  # Use the ! handle for presenting
  # tag:clarkevans.com,2002:circle
- !circle
  center: &ORIGIN {x: 73, y: 129}
  radius: 7
- !line
  start: *ORIGIN
  finish: { x: 89, y: 102 }
- !label
  start: *ORIGIN
  color: 0xFFEEBB
  text: Pretty vector drawing.

# Ordered maps are represented as
# A sequence of mappings, with
# each mapping having one key
--- !!omap
- Mark McGwire: 65
- Sammy Sosa: 63
- Ken Griffy: 58

需要预先安装如下工具: python2.x, npm, visual studio.
npm需要安装工具node-pre-gyp和node-gyp

npm install -g npm-pre-gyp
npm install -g npm-gyp

在项目中

npm install serialport

哦, 每次装到最后都不显示任何信息了....
如果这时候require('serialport'),会出现这个错误:

C:\r\electron\macgetter\node_modules\bindings\bindings.js:91
  throw err
  ^

Error: Could not locate the bindings file. Tried:
 → C:\r\electron\macgetter\node_modules\serialport\build\serialport.node
 → C:\r\electron\macgetter\node_modules\serialport\build\Debug\serialport.node
 → C:\r\electron\macgetter\node_modules\serialport\build\Release\serialport.node
 → C:\r\electron\macgetter\node_modules\serialport\out\Debug\serialport.node
 → C:\r\electron\macgetter\node_modules\serialport\Debug\serialport.node
 → C:\r\electron\macgetter\node_modules\serialport\out\Release\serialport.node
 → C:\r\electron\macgetter\node_modules\serialport\Release\serialport.node
 → C:\r\electron\macgetter\node_modules\serialport\build\default\serialport.node
 → C:\r\electron\macgetter\node_modules\serialport\compiled\5.2.0\win32\x64\serialport.node
    at bindings (C:\r\electron\macgetter\node_modules\bindings\bindings.js:88:9)
    at Object.<anonymous> (C:\r\electron\macgetter\node_modules\serialport\lib\bindings.js:3:35)
    at Module._compile (module.js:399:26)
    at Object.Module._extensions..js (module.js:406:10)
    at Module.load (module.js:345:32)
    at Function.Module._load (module.js:302:12)
    at Module.require (module.js:355:17)
    at require (internal/module.js:13:17)
    at Object.<anonymous> (C:\r\electron\macgetter\node_modules\serialport\lib\serialport.js:12:25)
    at Module._compile (module.js:399:26)

根据网上的解决方案:进入项目目录

C:\r\electron\macgetter>cd node_modules\serialport
C:\r\electron\macgetter\node_modules\serialport>node-gyp rebuild
输出一堆信息......最后
gyp info ok

然后就可以了.

通过如下命令建立WebSocket连接.

ws = new WebSocket('ws://' + WS_SERVER)

常常需要判断ws.readyState是否处于OPEN状态, 然后决定是否要进行操作.
然而, 对OPEN等几个常量的调用, 在Android与Web上有不同.
例如, 在Web上, 调用 ws.OPEN, 则值为1, 在Android上则为undefined.
所以在这儿一定要使用WebSocket.OPEN, 无论Web还是Android都是1.

假如xxx为app名

  1. 确定已经用debug模式完成编译, 生成了xxx_debug.apk文件.
  2. 确定已经可以使用vscode调试模拟器.
  3. USB连接手机, 在手机上安装xxx_debug.apk
  4. 使用adb运行此APP. 命令为:
    adb shell am start -n "org.cocos2d.xxx/org.cocos2dx.javascript.AppActivity"
    你此时应看到APP已经在手机上运行.
  5. adb转发端口
    adb forward tcp:5086 tcp:5086
  6. vscode开启调试模式, 查看console是否连接成功.
ar: attachRequest: address: localhost port: 5086 
ar: attachRequest: retry socket.connect 
ar: attachRequest: connected 

  1. 开始打断点调试.

  2. 使用adb logcat 和findstr过滤输出信息

adb logcat | findstr "cocos"

注意, 魅族手机的开发者选项中, 默认只输出部分log,需要在开发者选项中打开全部log 的输出.

以windows为例:
1. USB连接手机, 确认打开USB调试模式.
2. 找到USB KEY ID.
打开: 设备管理器->Android Phone->Android Composite ADB Interface->详细信息->属性->硬件Id
看到值为如下:

USB\VID_7A98&PID_0C02&REV_????&MI_01
USB\VID_7A98&PID_0C02&MI_01

7A98即为ID
3. 进入 "C:\Users\YourUsername.android" 目录. 确定是这个目录的方式是, 其中有adbkey.pub和adbkey文件.
4. 在此目录中新建文件adb_usb.ini文件, 内容为:

0x7A98

也就是写入id, 保存.
5. 再次查看adb devices,应该已经可以看到了

布尔运算有三种, 与或非.
在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;

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

  1. 使用Object.assign

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

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

  1. y = _.clone(x);

这个是用的underscore库.

  1. y = JSON.parse(JSON.stringify(x))

  2. var bill = $.extend(true, {}, bob);

这是用的jquery库.

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

y = Object.create(x);

  1. 其他

其他方法中最重要的就是自己写一个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/]

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

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

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

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

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

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

  1. 下载工具
git clone https://github.com/darceye/myjs.git
npm install

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

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

    plist2fnt example.plist

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

转载自这儿
快捷键

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