前言

       执行环境（execution context）也有翻译为执行上下文，这是JS中非常基础但是也非常重要的一个概念，通过理解执行环境我们可以更加了解js的运作机制。这篇文章就来简单理解一下什么是执行环境，以及它究竟是怎么样运作的。

阅读全文 »

前言

       这几天在学习过程中遇到一些问题，在找相关资料的情况下了解到js单线程和事件循环机制的一些知识，通过看一些大牛的文章，感觉又学习到了很多，对js有了更深的理解，这里来记录一下我学习完之后的一些理解。

阅读全文 »

前言

       想要更加的了解js就需要对它的运作机制有更加深入的了解，这次来了解以下js的内存空间与垃圾回收机制，通过理解这两个概念对我们的开发十分有帮助。

阅读全文 »

前言

       在默认情况下 Chromium 内核的浏览器在通过解压缩文件夹的方式安装扩展后，在每次打开浏览器时都会提示“禁用开发人员模式扩展”，包括新版 edge、chrome 等等，这个弹窗还会使浏览器强行切换焦点，可能导致打字过程中突然失去焦点然后中断，体验极其糟糕，并且需要手动关闭该提示，针对这一问题网上也有许多的解决方案，这篇文章记录一下 edge 浏览器通过修改策略组来解决这一问题的一种较为实用的方案，chrome 浏览器同理。

获取网站图标 API

1. https://api.qqsuu.cn/api/favicon/get.php?url=https://www.baidu.com
2. http://favicon.cccyun.cc/https://www.baidu.com

经过测试第一个接口的速度更快一些，且是 https，安全性更佳，优先考虑使用第一个接口。

禁用鼠标右键

1
2
3

window.oncontextmenu = function () {
  return false;
};

限制右键菜单，防止通过右键菜单来打开控制台

限制通过键盘打开控制台

1
2
3
4

window.onkeydown = window.onkeyup = window.onkeypress = function () {
  window.event.returnValue = false;
  return false;
};

此方法会限制一切的键盘操作，所以可以实现无法通过一切键盘快捷方式打开控制台

打开控制台后进进行限制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

var ConsoleManager = {
  onOpen: function () {
    console.log("Console is opened");
  },
  onClose: function () {
    console.log("Console is closed");
  },
  init: function () {
    var self = this;
    var x = document.createElement("div");
    var isOpening = false,
      isOpened = false;
    Object.defineProperty(x, "id", {
      get: function () {
        if (!isOpening) {
          self.onOpen();
          isOpening = true;
        }
        isOpened = true;
      },
    });
    setInterval(function () {
      isOpened = false;
      console.info(x);
      console.clear();
      if (!isOpened && isOpening) {
        self.onClose();
        isOpening = false;
      }
    }, 200);
  },
};

ConsoleManager.onOpen = function () {
  //打开控制台，跳转到百度
  try {
    window.open("about:blank", (target = "_self"));
  } catch (err) {
    var a = document.createElement("button");
    a.onclick = function () {
      window.open("about:blank", (target = "_self"));
    };
    a.click();
  }
};
ConsoleManager.onClose = function () {
  console.log("Console is closed!!!!!");
};
ConsoleManager.init();

此方法会通过定时器来时刻监听控制台是否打开，一旦打开则跳转到其他页面

1
2
3
4
5
6
7
8

var h = window.innerHeight,
  w = window.innerWidth;
window.onresize = function () {
  if (h != window.innerHeight || w != window.innerWidth) {
    window.close();
    window.location = "about:blank";
  }
};

此方法会通过监听窗口尺寸大小的变化，当由于打开控制台所导致的窗口大小发生变化的时候就会跳转到其他页面

前言

       最近登录学校的学工平台的官网的时候发现学校的网站有一定的年份了，包括验证码的机制也是非常的简单，那么也就意味着其实在如今这样简单的验证码机制已经不再安全了，其实不仅仅是我们学校的验证码使用的是比较老的技术，我也发现了其实还有很多的比较小并且比较老的网站使用的都是以前的验证码技术，所以我打算实现一个自动输入验证码的功能，这样配合浏览器的记住密码的功能每次登录就会非常的方便了。

阅读全文 »

前言

       最近在学习uniapp，因为我觉得这是个不错的开发工具，哪怕不用来进行多端开发，只是用来进行微信小程序的开发这也是一个非常不错的开发框架，因为主要的书写规范都是和vue类似的。这次突然想开发一个手机APP，准备仿写一个我常用的一个App，觉得它的左右滑动的长列表做得挺不错的，所以花了点时间仿写了一下。

阅读全文 »

前言

       PC端的web开发是比较简单的，不用做任何的适配就可以直接开发，但是手机端就不一样了，因为市场上充满着各种品牌型号的手机，所以会存在着许多种不一样的分辨率，那么如何对这么多的分辨率进行适配就是一个问题了，这篇文章主要介绍目前常见的两种移动端适配方案 rem 适配以及 css 新单位 vw、vh。

阅读全文 »

前言

       承接之前的关于执行环境的理解，这次主要来来讲解一下JS中的作用域链和词法环境，为什么还要讲词法环境呢，因为我觉得如果单独讲作用域链不容易讲清楚，必须要先理解词法环境才能比较好理解作用域链。

阅读全文 »