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或iPhone
const 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 或 b 或 c
[*]字符类范围: 匹配所有小写字母(有一个就为 true)
[*]字符类否定: [^abc] 匹配除了 a、b、c 以外的字符
[*]字符类组合: 匹配所有字母和数字
[*]字符类转义: \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"
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]