当前位置：首页 > news >正文

北京门户网站制作百度招聘

news 2025/7/30 6:55:16

北京门户网站制作,百度招聘,wordpress导出markdown,营销型网站建设上海(webAPI part3) BOM 操作 JS 执行机制 javascript 是单线程的, 也就是说, 只能同时执行一个任务。为了解决这个问题, 利用多核 CPU 的计算能力, HTML5 提出 Web Worker API, 允许 JavaScript 脚本创建多个线程, 并将任务分配给这些线程。于是, JS 出现了同步和异步的概念。…

(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"