【学习周报02】-2022/09/18

项目总结

桌游小工具

开始使用figma重新设计《散樱乱武》工具的外观

figma基本概念

• Frame：框架。可以理解为div标签，可以划分出一个页面，也可以在一个页面中划分出各个区块；
• Component：组件。将重复的内容抽离为Component，从而方便复用，类似于Vue中的组件。可以根据设定的Properties产生不同的变化，还可以设置同一组件的不同状态，从而配合Animation设置动画；
• Group：分组。将需要组合在一起的元素设置为一组，选定时会全选所有元素，所有的修改会应用于所有的成员。

figma中需要注意的参数

• Design>Constraints：约束。设置元素当页面变化时的对齐方式，适配多尺寸设备时需要考虑；
• Design>Style：常用的配色方案可以存储为Style，方便复用（只要是需要设置颜色的地方）；
• Prototyep>interactions：设置互动。当对元素进行相应动作（按下、滑动等）时，触发各种行为（跳转页面、改变状态等）；
• Prototype>interactions>Animation：设置动画。当发生变化时使用什么动画效果进行过渡，例如设计按钮时就需要通过该选项设置切换动画；

知识总结

通过设置script标签属性实现异步或延迟执行script

图解 script 标签中的 async 和 defer 属性

三种带有不同属性的script标签：

• <script src='xxx'></script>

  先获取script文件并执行完毕后再继续解析html生成页面；

• <script src='xxx' async></script>

  解析html的同时异步获取script文件，获取后再插入执行script文件（也可能此时html已解析完成）；

• <script src='xxx' defer></script>

  解析html的同时异步获取script文件，但是等html解析完毕后再执行script文件；

currency.js——一个货币计算与格式化的库

currency.js

安装与准备

npm install --save currency.js

先将整数、小数、字符串转货币对象：

// Numbers
currency(1); // => "1.00"
currency(123); // => "123.00"

// Decimals
currency(1.00); // => "1.00"
currency(1.23); // => "1.23"

// Strings
currency("1.23"); // => "1.23"
currency("$12.30"); // => "12.30"
currency("£1,234,567.89"); // => "1,234,567.89"

计算

后续再使用货币对象的内置方法则可以进行各种计算且不会出现精度问题：

2.51 + .01;                   // => 2.5199999999999996
currency(2.51).add(.01);      // => 2.52

2.52 - .01;                   // 2.5100000000000002
currency(2.52).subtract(.01); // 2.51

支持货币常见的负值表现形式，不过要注意使用的方法：

// Negative values
currency("-$5,000").add(1234.56);  // -3765.44
currency("($5,000)").add(1234.56); // -3765.44

默认输出字符串，但是也可以使用内置方法访问小数和整数（单纯去掉小数点）形式：

// Get the internal values
currency(123.45).add(.1).value; // => 123.55
currency(123.45).add(.1).intValue; // => 12355

格式化

使用format()方法可以进行格式化，默认是美元格式：

currency(1.23).format(); // => "$1.23"

可以定义分隔符号、小数点、精度、符号和数值的位置

currency(1234.56, { separator: ',' }).format(); // => "1,234.56"
currency(1234.56, { separator: ' ' }).format(); // => "1 234.56"

currency(1.23, { decimal: '.' }).format(); // => "$1.23"
currency(1.23, { decimal: ',' }).format(); // => "$1,23"

currency(1.234, { precision: 2 }); // => "1.23"
currency(1.234, { precision: 3 }); // => "1.234"

currency(-1.23, {
  negativePattern: `(!#)`
}).format(); // => "($1.23)"

其他

可以使用fromCents接收美分单位数值，并且自定义精度：

currency(123456, { fromCents: true });               // => "1234.56"
currency('123456', { fromCents: true });             // => "1234.56"
currency(123456, { fromCents: true, precision: 0 }); // => "123456"
currency(123456, { fromCents: true, precision: 3 }); // => "123.456"

使用increment选项设置格式化时最小计数单位（不会影响原数值）

var currencyRounding = value => currency(value, { increment: .05 });
currencyRounding(1.09); // => { intValue: 109, value: 1.09 }
currencyRounding(1.09).format(); // => "1.10"
currencyRounding(1.06); // => { intValue: 106, value: 1.06 }
currencyRounding(1.06).format(); // => "1.05"