JavaScript 条记 --- part 5 --- Web API (part 3)

(webAPI part3) BOM 操纵

JS 实行机制

• javascript 是单线程的, 也就是说, 只能同时实行一个任务。
  
• 为相识决这个题目, 使用多核 CPU 的计算本领, HTML5 提出 Web Worker API, 允许 JavaScript 脚本创建多个线程, 并将任务分配给这些线程。
  
• 于是, JS 出现了同步和异步的概念。同步任务是指在实行过程中, 必须等待前一个任务实行完毕, 才能继承实行; 异步任务是指在实行过程中, 不必等待前一个任务, 而是可以同时实行多个任务。
  
• 同步任务: 都在主线程上实行, 形成一个实行栈。
  
• 异步任务: 都在主线程之外, 形成一个变乱队列。
  
• 变乱循环: 主线程不断从变乱队列中取出变乱, 实行变乱。(优先级: 同步任务 > 异步任务)
  

window 对象

• 定义: window 对象是 JavaScript 中最顶层的对象, 它代表了浏览器窗口, 也是所有全局变量和函数的宿主。
  
• BOM 对象: 浏览器对象模型(Browser Object Model)
  

定时器 - 延时函数

• settimeout()方法: 设定一个定时器, 在指定的时间隔断后实行一次函数。
  
  2. setTimeout(function(){}，delay);
  4. - 参数: function() - 要执行的函数名或函数体。
  5. - 参数: delay - 延迟时间，单位为毫秒。
  7. // 清除延时函数
  8. clearTimeout(timeoutID);
  10. - 参数: timeoutID - 要清除的延时函数的ID。

  复制代码

location 对象

• 定义: location 对象代表当前页面的 URL 信息。
  

1. // 获取当前页面的URL
2. var url = location.href;
4. // 获取当前页面的域名
5. var domain = location.hostname;
7. // 获取当前页面的协议
8. var protocol = location.protocol;
10. // 获取URL中的查询字符串
11. location.search;
13. // 获取URL中的hash值
14. location.hash;
16. // 重定向到新的页面
17. location.href = "http://www.example.com";
19. // (强制)刷新当前页面
20. location.reload(true);

复制代码

navigator 对象

• 定义: navigator 对象代表浏览器的信息。
  
• 通过 userAgent 属性可以获取浏览器的范例和版本信息。
  

1. // 获取浏览器类型
2. var browser = navigator.appName;
4. // 获取浏览器版本
5. var version = navigator.appVersion;
7. // 获取操作系统类型
8. var os = navigator.platform;
10. // 获取用户代理信息
11. var userAgent = navigator.userAgent;
13. // 判断是否为移动设备
15. // 检测 userAgent（浏览器信息）
16. !(function () {
17.   const userAgent = navigator.userAgent;
18.   // 验证是否为Android或iPhone
19.   const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/);
20.   const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/);
21.   // 如果是Android或iPhone，则跳转至移动站点
22.   if (android || iphone) {
23.     location.href = "http://m.itcast.cn";
24.   }
25. })();

复制代码

history 对象

• 定义: history 对象代表浏览器的历史记录。
  
• 属性和方法
  

1. back(); // 后退
2. forward(); // 前进
3. go(num); // 前进或后退到指定页面
5. back.addEventListener("click", function () {
6.   history.back();
7.   // 或者
8.   // history.go(-1);
9. });
11. forward.addEventListener("click", function () {
12.   history.forward();
13.   // 或者
14.   // history.go(1);
15. });

复制代码

本地存储(localStorage)

• 定义: 本地存储是指在浏览器端存储数据, 使得数据在浏览器关闭后依然存在。
  
• 常用方法
  

1. // 存储数据
2. localStorage.setItem("key", "value"); //本地存储只能存储字符串
4. // 获取数据
5. var value = localStorage.getItem("key");
7. // 删除数据
8. localStorage.removeItem("key");

复制代码

• sessionStorag: 与 localStorage 雷同, 但数据在浏览器关闭后就丢失。
  
• cookie: 存储在用户本地的小型文本文件, 用于存储少量数据, 并在每次哀求时发送给服务器。
  
• IndexedDB: 是一个高性能的本地数据库, 它使得客户端存储大量结构化数据变得十分简朴。
  

存储复杂数据范例

• JSON.stringify()方法: 将对象转换为 JSON 字符串。
  
• JSON.parse()方法: 将 JSON 字符串转换为对象。
  

1. // 存储对象
2. let obj = { name: "John", age: 30, city: "New York" };
3. let jsonStr = JSON.stringify(obj);
4. localStorage.setItem("user", jsonStr);
6. // 获取对象
7. let jsonStr = localStorage.getItem("user");
8. let obj = JSON.parse(jsonStr);

复制代码

正则表达式

• 定义: 正则表达式(regular expression)是一种文本模式, 它能帮助你方便的查抄、匹配、更换文本。
  
• 语法:
  

1. let str = "this is a test string, pattern, flags";
3. // 定义规则
4. const pattern = /pattern/;
6. // 匹配规则
7. pattern.test(str); // true
8. pattern.exec(str); // ["pattern", index: 10, input: "this is a test string, pattern, flags"]

复制代码

元字符

• 定义: 元字符(metacharacter)是指用来匹配、搜刮、更换文本的特殊字符。
  
• 常用元字符
  

1. [a - zA - Z]; // 匹配所有小写字母和大写字母

复制代码

• 分类
  
  
  
  • 字符类: [abc] 匹配 a 或 b 或 c
    
  • 字符类范围: [a-z] 匹配所有小写字母(有一个就为 true)
    
  • 字符类否定: [^abc] 匹配除了 a、b、c 以外的字符
    
  • 字符类组合: [a-zA-Z0-9] 匹配所有字母和数字
    
  • 字符类转义: \d 匹配数字, \D 匹配非数字
    
  • 字符类预定义: \w 匹配字母、数字、下划线, \W 匹配非字母、数字、下划线
    
  • 字符类转义: \s 匹配空白字符(包括空格、制表符、换行符), \S 匹配非空白字符
    
  • 字符类边界: \b 匹配单词边界
    
  • 字符类回溯: \B 匹配非单词边界
    
  • 字符类数目词: {n} 匹配 n 次, {n,} 匹配 n 或更多次, {n,m} 匹配 n 到 m 次
    
  • 字符类贪婪与懒惰: * 匹配 0 或多个字符, + 匹配 1 或多个字符,? 匹配 0 或 1 个字符
    
  • 字符类锚点(边界符): ^ 匹配字符串开始(匹配以正则开头的字符), $ 匹配字符串竣事(匹配以正则结尾的字符)
    
  • 字符类子表达式: ( ) 匹配子表达式的内容
    
  • 字符类反向引用: \1 引用第 1 个子表达式的内容
    
  • 字符类. : 匹配除换行符以外的任意字符
    
  
  

1. /^哈+$/.test("哈哈哈哈哈哈"); // true
2. /^哈+$/.test("哈哈"); // true
3. /^哈+$/.test("二哈"); // false

复制代码

修饰符

• 定义: 修饰符(modifier)是指在正则表达式中用于控制匹配方式的符号。
  
• 常用修饰符
  

1. // 全局匹配
2. /pattern/g;
4. // 忽略大小写
5. /pattern/i;

复制代码

更换

1. let str = "this is a test string, pattern, Pattern, flags";
3. let newStr = str.replace(/pattern/gi, "replacement"); // "this is a test string, replacement, replacement, flags"

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。