Front-End notes

Front end

前端设计原则

• 一致性

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

• 反馈

控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

• 效率

简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；

帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

• 可控

用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等

ElementUI 设计原则

PM、RD、FE、UE、UI、QA…等常见名词解释

1. PM
   Product manager 产品经理
2. RD
   Research and Development 研发（后端）
3. FE
   Front-end 前端
4. UE（UX）
   User Experience 用户体验
5. UI
   User Interface 用户界面
6. QA
   Quality Assurance 测试（质量保证）
7. OP
   Operations 运维
8. DBA
   Database Administrator 数据库管理员
9. PRD
   Product Requirements Documents 产品需求文档

HTML

Global attributes

data-*

The data-* global attributes form a class of attributes called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation by scripts.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
设置了data-*属性之后可在element元素的dataset属性中获取该值，注意：HTML标签对大小写不敏感，所有data-后面的单词不要使用驼峰命名使用了在dataset的属性中该值的名字仍未全部小写，如图：

开发中应使用下划线“_”作为属性名的连字符，如图：

dir

The dir global attribute is an enumerated attribute that indicates the directionality of the element’s text.

1. ltr, which means left to right and is to be used for languages that are written from the left to the right (like English);
2. rtl, which means right to left and is to be used for languages that are written from the right to the left (like Arabic);
3. auto, which lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir
改变文字水平的排列方向，如图：

HTML5新增的api

requestAnimationFrame

客户端存储

localStorage

sessionStorage

历史记录 BOM中的History对象

worker 同源限制，异步执行js

fileReader 解析文件

websocoket

JavaScript

JavaScript不擅长解析字符串，但它擅长处理嵌套的对象/阵列结构，这种格式有一个名字：JSON

&、&&、|和|| 的区别

1. & 无论左边是true还是false，右边都运算
2. &&（短路与）左边为false，右边不运算
3. | 无论左边是true还是false，右边都运算
4. || （短路或）左边为true，右边不运算

'+'号运算符作为一元运算符时，Expression将进行ToNumber()操作

js进制转换

   //1 低进制转高进制 Number.parseInt(string,radix) 不能高转低
	Number.parseInt('010',8)//8
	Number.parseInt('20',2)//NaN
   //2 十进制数字转换为任意进制 Number.toString()
	(10).toString(2)//"1010"转2进制
	(10).toString(16)//"a" 转16进制
	(1000).toString(36)//"rs" 转36进制

repeating-linear-gradient()可以绘制渐变色的背景

mdn web docs

~~和!!运算

1. ~~ 将后面的表达式强制转为int
2. !! 将后面的表达式强制转为逻辑值

全局 isNaN() 函数将测试值转换为数字，然后对其进行测试。Number.isNaN() 不会将值转换为数字，并且不会为任何非数字类型的值返回 true。

??和||的区别

?? 只有当左边为null或者undefined时，返回右边表达式值
|| 当左边为假值时（0,‘’,false,null,undefined），返回右边表达式值

向上取整、向下取整、四舍五入

向上取整

Math.ceil(8.34); // 9

向下取整

Math.floor(8.34); // 8

四舍五入

Math.round(8.34); // 8
Math.round(8.89); // 9

仅保留整数（去掉小数）

parseInt(8.34); // 8

取绝对值

Math.abs(-1); // 1

最大值最小值

Math.min(1,2); // 1
Math.max(1,2); // 2

随机数（0到1）

Math.random();

随机数（min，max）

Math.random()*(max-min+1)+min 包含小数

Nodejs

forever可以使node进程在终端关闭后继续运行

Running Node.js scripts continuously using forever

Vuejs

自定义指令update和componentUpdated的区别

共同点：组件更新都会调用，update在componentUpdated之前
不同点：

• update组件更新前的状态
• componentUpdated组件更新后的状态

自定义指令bind和inserted的区别

共同点：dom插入都会调用，bind在inserted之前
不同点：

• bind时父节点为null
• inserted时父节点存在
• bind是在dom树绘制前调用，inserted在dom树绘制后调用