BOM（浏览器对象模型）相关API和属性的一些实践 （一）

BOM（浏览器对象模型）指的是将浏览器当作一个对象来对待，它定义了与浏览器进行交互的方法和接口。BOM 的核心是 window 对象，该对象具有双重角色，既是 JavaScript 访问浏览器窗口的一个接口，又是一个全局对象，这意味着网页中定义的任何对象、变量和函数，都会作为全局对象的一个属性或者方法存在。

[www.runoob.com/jsref/obj-w…]

网站已经对于Window,Navigator,Screen,History,Location对象都相对全面的罗列，本文不逐一赘述

获取剪切板的内容

使用 document.execCommand('paste') 方法（兼容性较好，但不太推荐） ： 添加了粘贴事件，粘贴的时候才会触发回调

document.addEventListener('paste', function(event) {
  var clipboardData = event.clipboardData || window.clipboardData;
  var pastedText = clipboardData.getData('text');
  console.log('粘贴的内容: ', pastedText);
});

使用 navigator.clipboard.readText() 方法（现代浏览器支持较好） ： 调用的时候就会执行承诺

navigator.clipboard.readText()
 .then(text => {
    console.log('粘贴的内容: ', text);
  })
 .catch(err => {
    console.error('获取剪切板内容出错: ', err);
  });

需要注意的是，使用 navigator.clipboard 相关的方法通常需要在安全的上下文环境中（例如 HTTPS 协议的网页），并且可能需要用户的明确授权才能访问剪切板内容。

监听键盘输入指定键位，或者组合键位

keyCode查询：www.xuhuhu.com/beautify/ke… 监听单个键位

document.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    console.log('按下了回车键');
  }
});

监听组合键位（例如 Ctrl + Enter）

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'Enter') {
    console.log('按下了 Ctrl + Enter 组合键');
  }
});

监听特定键码

document.addEventListener('keydown', function(event) {
  if (event.keyCode === 13) {  // 13 是回车键的键码
    console.log('按下了回车键（通过键码判断）');
  }
});

关于路由模式

在前端开发单页面应用时，目前有两种方式可以实现路由，一种是使用hash模式，另外一种就是history模式。下面是两者的对比：

• URL形式：

  • Hash模式：http://example.com/#/home表示访问/home路径。
  • History模式：http://example.com/home表示访问/home路径。

• 页面加载：

  • Hash模式：哈希变化不会导致页面重新加载。
  • History模式：History模式使用HTML5的pushState和replaceState API来管理历史记录，并动态更新URL，而无需页面重新加载。但是需要服务器配置支持，否则刷新页面会导致404错误。

• 浏览器支持：

  • Hash模式：兼容性强，支持所有现代浏览器。
  • History模式：仅支持现代浏览器，IE9及以下不支持。

• 优点：

  • Hash模式：简单易用，无需服务器配置，所有浏览器都支持。刷新安全，由于哈希部分不会发送到服务器，因此刷新页面不会导致404错误。
  • History模式：URL美观，URL更加简洁、标准化，没有#，有助于提高用户体验。SEO友好，搜索引擎更容易索引这种URL结构。

• 缺点：

  • Hash模式：URL不美观，带有#的URL看起来不够简洁。SEO不友好，搜索引擎可能不完全索引哈希路由。当URL包含查询参数时，可能会出现多个问号的情况，例如：http://example.com/#/?id=1?name=John，这会导致URL可读性差，并且可能影响部分功能的正常使用。

  • History模式：需要服务器配置，需要服务器支持，配置URL重写规则。兼容性问题，不支持老旧浏览器，如IE9及以下。

如果要使用history模式，需要后台配置支持，确保无论用户访问什么路径，都能加载到根目录的html文件。配置方法取决于使用的服务器，以nginx为例，可以通过try_files来实现。配置如下：

try_files $uri $uri/ /index.html;

加了上面的路径之后，不管通过何种子路由来直接访问，都能顺利拿到html。