独立开发者系列（18）——js的window对象

独立开发者，必然要面对JS代码，基本可以认为在脚本语言里面，JS门槛最低，正因为如此，JS也是最受欢迎的开发语言之一。JS的代码运行规律，按照代码模块执行，也就是<script></script> 每次读取到一个模块的时候，加载到分析后，运行一次，所以在同一个标签里面，函数可以放在执行的后面，但是如果在另外一个模块里面，函数一定要出现优先执行顺序，除非通过其他属性改变这种顺序。

  由于JS大部分时候都是操作对象，比如操作window对象，我们开发的时候，如果功能比较多，最好也有对象的方式开发，使用的时候，直接demo.test 这种方式使用，会让程序看上去简化不少。
  这里主要总结JSwindows的对象和使用场景，方便快速反应和实现特定效果。Window对象，其实就是浏览器窗口，很多操作都是对窗口的操作。
场景一: 我需要将整个页面完全加载完成，然后才能操作，防止里面有些代码未加载，代码就直接开始执行，其实就是Jquery的预加载方法，JS和其他代码运行逻辑不通，他是先读到某个代码块，就开始执行代码块的，这样，如果JS写在head里面，会导致无法操作后面的对象，所以需要window.onload=function(){} 加载后执行代码。从其他程序转过来开发的时候，经常会因为代码放置的顺序，导致程序出现意想不到的BUG。

场景二:我需要进行一个判断当前浏览器是否符合我指定的要求，否则就跳出去。非常经常的应用，有些页面不能再微信里面打开，因为微信会严重限制我们本身的JS能力。window.navigator: 提供了关于浏览器的信息，如 navigator.userAgent 可以获取浏览器的版本信息。，读取浏览器的版本信息，用户微信里面打开，就可以获取该参数，然后直接拦截掉。

示例判断是不是微信浏览器:

      function isWeiXin() {

        var ua = window.navigator.userAgent.toLowerCase();

            //通过正则表达式匹配ua中是否含有MicroMessenger字符串

            if (ua.match(/MicroMessenger/i) == 'micromessenger') {

                return true;

            } else {

                return false;

            }

        }

如果判断是在微信浏览器里面，就开始做微信浏览器内部的操作。 手机端浏览器的判断:

function detectBrowser() {

  const userAgent = navigator.userAgent;

  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {

    return 'Mobile';

  } else {

    return 'Desktop';

  }

}

const browserType = detectBrowser();

console.log(`当前浏览器类型: ${browserType}`);

获取当前的地理定位，由于geo的API接入，浏览器具备了获取地理定位能力。HTML5提供了Geolocation API，允许网页在用户授权的情况下访问设备的地理位置信息。Geolocation API可以结合GPS、Wi-Fi。

navigator.geolocation.getCurrentPosition(showPosition, showError); 获取当前位置的实现

function showPosition(position) {

  const latitude = position.coords.latitude;

  const longitude = position.coords.longitude;

  console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);

  // 在这里可以根据经纬度做进一步处理，如在地图上显示位置等

}

//失败

function showError(error) {

  switch(error.code) {

    case error.PERMISSION_DENIED:

      alert("User denied the request for Geolocation.");

      break;

    case error.POSITION_UNAVAILABLE:

      alert("Location information is unavailable.");

      break;

    case error.TIMEOUT:

      alert("The request to get user location timed out.");

      break;

    default:

      alert("An unknown error occurred.");

      break;

  }

}

场景四:我们获取访问的链接是否合法，或者是否被串改，类似很多邮件的认证链接。url?auth=XXXXXXXXXXXXXXXXX，如果链接被中途修改，或者写错，只写了url，没有获取到auth参数，直接跳到我们指定的页面。var queryString = window.location.search; //读取链接里面?后面的参数。window.location.href = tiaozhuanURL; 跳转到的URL，也用于当一些非法页面访问或者错误页面，访问三秒之后跳转到主页等场景。window.location.origin（属性返回当前 URL 的源（协议 + 域名 + 端口）。它是由协议、主机名和端口号组成的字符串，不包括路径或查询字符串）

一个XSS的经典实现，执行某个window.location.href ，跳转到指定的URL（遥控的URL，该URL携带了跳过来的网址并写入了cookie信息）这样就能实现进入被攻击者后台目的。

场景五:window的socket对象，实现socket编程。Socket实现长链接。聊天室/交易所/游戏，经常使用到的技术

​ Web Socket（套接字）的目标是通过一个长时连接实现与服务器全双工、双向的通信。在 JavaScript 中创建 Web Socket 时，一个 HTTP 请求会发送到服务器以初始化连接。服务器响应后，连接使用 HTTP 的 Upgrade 头部从 HTTP 协议切换到 Web Socket 协议。这意味着 Web Socket 不能通过标准 HTTP 服务器实现，而必须使用支持该协议的专有服务器。因为 Web Socket 使用了自定义协议，所以 URL方案（scheme）稍有变化：不能再使用 http://或 https://， 而要使用 ws://和 wss://。前者是不安全的连接，后者是安全连接。在指定 Web Socket URL 时，必须包含 URL 方案，因为将来有可能再支持其他方案。使用自定义协议而非 HTTP 协议的好处是，客户端与服务器之间可以发送非常少的数据，不会对 HTTP 造成任何负担。使用更小的数据包让 Web Socket 非常适合带宽和延迟问题比较明显的移动应用。 使用自定义协议的缺点是，定义协议的时间比定义 JavaScript API 要长。Web Socket 得到了所有主流浏览器支持。Web Socket 是与服务器的全双工、双向通信渠道。与其他方案不同，Web Socket 不使用 HTTP，而使用了自定义协议，目的是更快地发送小数据块。这需要专用的服务器，但速度优势明显。
 实现代码:

const socket = new WebSocket('wss://example.com/socket');
//打开
socket.onopen = function(event) {
  console.log('连接打开:', event);
};
//发送
socket.send('你好，服务器！');
//接收消息
socket.onmessage = function(event) {
  console.log('收到消息:', event.data);
};
//关闭
socket.onerror = function(error) {
  console.error('连接错误:', error);

 

其他场景: window.setInterval() 定时运行某个函数   倒计时不断，基本倒计时会用到该函数

当前当前窗口的前一页和后一页，就是我们平时最常用的，后退或者前进history.go()

弹框报错提示，alert 直接弹框，默认我们使用的alert就是window对象的弹框，我们最常用的打印console.log() 也是属于window对象。