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()方法: 设定一个定时器, 在指定的时间间隔后执行一次函数。

  
  setTimeout(function(){}，delay);- 参数: function() - 要执行的函数名或函数体。
  - 参数: delay - 延迟时间，单位为毫秒。// 清除延时函数
  clearTimeout(timeoutID);- 参数: timeoutID - 要清除的延时函数的ID。

location 对象

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

// 获取当前页面的URL
var url = location.href;// 获取当前页面的域名
var domain = location.hostname;// 获取当前页面的协议
var protocol = location.protocol;// 获取URL中的查询字符串
location.search;// 获取URL中的hash值
location.hash;// 重定向到新的页面
location.href = "http://www.example.com";// (强制)刷新当前页面
location.reload(true);

navigator 对象

• 定义: navigator 对象代表浏览器的信息。

• 通过 userAgent 属性可以获取浏览器的类型和版本信息。

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

history 对象

• 定义: history 对象代表浏览器的历史记录。

• 属性和方法

back(); // 后退
forward(); // 前进
go(num); // 前进或后退到指定页面back.addEventListener("click", function () {history.back();// 或者// history.go(-1);
});forward.addEventListener("click", function () {history.forward();// 或者// history.go(1);
});

本地存储(localStorage)

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

• 常用方法

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

• sessionStorag: 与 localStorage 类似, 但数据在浏览器关闭后就丢失。

• cookie: 存储在用户本地的小型文本文件, 用于存储少量数据, 并在每次请求时发送给服务器。

• IndexedDB: 是一个高性能的本地数据库, 它使得客户端存储大量结构化数据变得十分简单。

存储复杂数据类型

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

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

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

正则表达式

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

• 语法:

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

元字符

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

• 常用元字符

[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 个子表达式的内容
  • 字符类. : 匹配除换行符以外的任意字符

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

修饰符

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

• 常用修饰符

// 全局匹配
/pattern/g;// 忽略大小写
/pattern/i;

替换

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