034. js 概念 & 术语 - cwy007/tips-and-skills GitHub Wiki

1. js 中的一些术语

  1. identifier 标识符
  2. radio 单选框
  3. checkbox 复选框
  4. reset 重置
  5. form 表单
  6. load 加载
  7. unload 卸载
  8. 手机浏览器
  9. 桌面浏览器
  10. 会话 session
  11. 完成了HTML文档的解析（整张页面的DOM生成）
  12. 行内样式 inline style
  13. priority 优先级
  14. 媒介 media
  15. 过渡效果（transition）
  16. elapse 流逝
  17. observer 观察器
  18. 变动 mutation
  19. 内容 html
  20. 行为代码 js
  21. 阻塞渲染
  22. 浏览器的核心是两部分：渲染引擎和JavaScript解释器（又称JavaScript引擎）。
  23. “布局流”（flow）
  24. “绘制”（paint）
  25. 重流（reflow）和重绘（repaint）
  26. 解释型语言 & 编译型语言
  27. “即时编译”（Just In Time compiler，缩写JIT）
  28. frame 框架窗口
  29. 设备的分辨率是1920x1080
// 显示设备的高度，单位为像素
screen.height // 1920

// 显示设备的宽度，单位为像素
screen.width // 1080

上面代码显示，某设备的分辨率是1920x1080。

  1. 页面上的打印按钮代码如下。
document.getElementById('printLink').onclick = function() {
  window.print();
}
  1. XMLHttpRequest对象
  2. Cookie 是服务器保存在浏览器的一小段文本信息，每个 Cookie 的大小一般不能超过4KB。浏览器每次向服务器发出请求，就会自动附上这段信息
  3. 共享
  4. 同源政策
  5. 窗口之间的通信
  6. 片段标识符（fragment identifier）指的是，URL的#号后面的部分
  7. 跨文档通信 API（Cross-document messaging）
  8. 源（origin）
  9. message事件的事件对象event
  10. 请求的查询字符串
  11. ajax 下面是XMLHttpRequest对象的典型用法。
var xhr = new XMLHttpRequest();

// 指定通信过程中状态改变时的回调函数
xhr.onreadystatechange = function(){
  // 通信成功时，状态值为4
  if (xhr.readyState === 4){
    if (xhr.status === 200){
      console.log(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  }
};

xhr.onerror = function (e) {
  console.error(xhr.statusText);
};

// open方式用于指定HTTP动词、请求的网址、是否异步
xhr.open('GET', '/endpoint', true);

// 发送HTTP请求
xhr.send(null);
  1. 接收到的数据体（即body部分）
  2. status
200, OK，访问正常
301, Moved Permanently，永久移动
302, Move temporarily，暂时移动
304, Not Modified，未修改
307, Temporary Redirect，暂时重定向
401, Unauthorized，未授权
403, Forbidden，禁止访问
404, Not Found，未发现指定网址
500, Internal Server Error，服务器发生错误
  1. 用户信息（比如Cookie和认证的HTTP头信息）
  2. http header 头信息 body 信息体
  3. 异步，同步

如果请求是异步的（默认为异步），该方法在发出请求后会立即返回。如果请求为同步，该方法只有等到收到服务器回应后，才会返回。

  1. 文件上传

疑问 onsubmit="AJAXSubmit(this); return false;"

// 为什么会有 return false;
<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
</form>
  1. 二进制对象（Blob）
  2. 表单控件
  3. 跨源通信
  4. CORS
  5. 简单请求（simple request）和非简单请求（not-so-simple request）
  6. “预检”请求（preflight）
  7. 请求方法是OPTIONS，表示这个请求是用来询问的
⚠️ **GitHub.com Fallback** ⚠️