font-knowledge-sumary | Fiona's Blog

部分前端知识总结

React：组件化，框架，虚拟DOM；
虚拟DOM：
- 原因：DOM生成和CRUD速度都很慢，标准和接口需要实现的太多；
- 原理：DOM缓存；
- 实现：
  1. DOM映射；
  2. Diff (replace,props,text,reOrder)
    - reorder:重新排序需要涉及编辑最小解，动态规划算法
  3. Patch
  4. Render
Flux:
View -> Action ->Dispatch -> Store
Sass:
- import
- include
- $变量
- 嵌套
compass
- watch
- sprite
modules ES6

IE8

CSS

ie8下样式的退化：

RGBA；
border-radius；
calc;
:checked伪类；
后代，子代元素显示不确定，需实验；
DOCTYPE必须在第一行，否则不认识，会以怪异模式去显示DOM，造成样式渲染错误。同时，在head标签里面需设置
1
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
IE=edge必须放在首位，否则会以IE7标准模式去渲染，IE8的支持的一些新的样式也不能够被展现。
不识别一些新的标签，section,header,nav,footer等。
@media query不支持；
filter设置opacity，必须改变dom结构，无法支持父元素半透明而子元素不透明；
10.inline-block 支持，但是显示的宽度max-width会受到影响；
不支持last-child,但是支持first-child
IE 8 下面radio控件有虚线框，即使width=0，虚线框还是会存在，需要加outline:none来控制；
IE8 下Bakground-size不支持，如果想要cover整个背景不可行，可以加滤镜：

IE9~11 border-radius和overflow冲突bug

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
                src='http://devcdn.ainemo.com/page/live_video/img/pcclient-bg.png',
                sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://devcdn.ainemo.com/page/live_video/img/pcclient-bg.png',sizingMethod='scale')";

textarea默认边框border需要设置；
placeholder不支持；

js
1. 不支持console.log;
2. 不支持Date.now()方法，需要改成new Date().getTime();
3. 阻止浏览器js错误弹出，可以监听window.onerror事件，在ie8中返回true，则将阻止错误弹出。
  1
  2
  3
  window.onerror = function (msg,url,line) {
  return true;
  }
4. js事件处理只在冒泡阶段处理，且只冒泡到document，不到window对象.

其他

判断渲染模式的代码

1 2	Document.CompatMode alert(document.documentMode);

js 事件顺序
- DOM2级事件顺序，捕获window->element,事件处理,事件冒泡element->window。
- 一般事件在冒泡的同时进行处理，如果参数设置为true,则会在捕获阶段处理；
- IE8没有捕获，只有冒泡，且只冒泡到document层。所以没有第三个参数，需要区别对待。
jQuery
- 动画
- HTML
- 遍历
- Ajax
js基础
- 基本数据类型：null,string,number,array,object,undefined，function,boolean
- DOM节点操作
  - getElementById
  - getElementByTagName
  - getElementByName
  - getAttribute
  - setAttribute
  - removeAttribute
  - innerHTML
  - innerText
  - childNodes
  - firstChild
  - lastChild
  - parentNode
  - previousSibling
  - nextSibling
  - wirte
  - createElement
  - createTextNode
  - cloneNode
  - appendChild
  - removeChild
  - insertBefore
  - replaceChild
  - style.fontSize
  - style.display
  - style.removeProperty(index)
  - window.getComputedStyle
  - node.currentStyle(IE)
  - document.getElementByTagName(‘link’)[0]
Ajax readyState
- 0 UNSENT
- 1 OPENED
- 2 HEADERS_RECEIVED
- 3 LOADING
- 4 DONE
同步异步，阻塞和非阻塞
- 同步异步是对于被调用者来说的，同步调用会立刻得到结果，异步是通过回调函数等有了结果之后被通知的。
- 阻塞不阻塞是对于调用者而言，阻塞是不执行其他事件，停留在此等待调用结果；非阻塞是调用后不管结果，执行其他命令。
  12.innerHTML,innerText,outerHTML,outText
- inner不带标签本身
- Text会转义
jQuery源码：
- 兼容性
- 链式调用
- 包装
- document事件委托
NodeJS
事件
- UI事件
  - load
  - unload
  - abort
  - error
  - select
  - resize
  - scroll
- 焦点事件
  - blur 不冒泡
  - focus 不冒泡
  - focusin 冒泡部分浏览器支持
  - focusout 冒泡部分浏览器支持
    - 鼠标与滚轮事件
  - click
  - dbclick
  - mousedown 任意键
  - mouseenter 不冒泡首次移动到元素内部触发
  - mouseleaver 不冒泡
  - mouseover
  - mouseup 释放鼠标触发
    - dbclick事件产生过程
  - mousedown
  - mouseup
  - click
  - mousedown
  - mouseup
  - click
  - dbclick
事件对象属性
- type
- preventDefault(),stopPropogation(),return false;
- target
- relatedTarget
- pageX pageY
- which 13（enter）
gulp webpack
NodeJS
- 一个用C++写的，V8执行的js运行平台
- 事件驱动，异步调用，适合网络编程
- 单进程、单线程，跨CPU模块调用
jQuery各种事件绑定区别
- click bind 直接绑定到元素上，必须先有元素才能绑定，效率低
- live