鲜为人知的前端知识

来源：互联网发布：淘宝联盟使用红包编辑：程序博客网时间：2024/06/08 03:28

浏览器相关

下述采用的Chrome浏览器

浏览器地址栏运行JavaScript代码

javascript:alert('hello from address bar');

需要注意的是如果是通过copy paste代码到浏览器地址栏的话，IE及Chrome会自动去掉代码开头的javascript:，所以需要手动添加起来才能正确执行，而Firefox中虽然不会自动去掉，但它根本就不支持在地址栏运行JS代码

浏览器当编辑器

方式一：地址栏输入下述内容

data:text/html, <html contenteditable>

方式二：控制台输入下述内容

document.body.contentEditable=true

选取DOM元素

但当你在DOM中无法使用 jQuery 时，你依然可以在开发者控制台中做同样的事情。$$等价于jQuery选择器，返回一个数组。$$(selector)等价于jQuery中的$(selector)

查找DOM中元素关联的事件

// 存在jQuerygetEventListeners($("selector"))// 无jQuerygetEventListeners($$("selector"))

监听事件

在控制台进行相关事件监听

监听指定DOM元素的全部事件：monitorEvents($("selector"))
监听指定DOM元素的指定事件：monitorEvents($("selector"), "eventName")
监听指定DOM元素的部分事件：monitorEvents($("selector"), ["eventName1","eventName2",…])
取消监听指定DOM元素的事件：unmonitorEvents($("selector"))

检查DOM中的元素

inspect($("selector")) 会检查与选择器匹配的元素，并切换 Chrome 开发者工具到元素标签页。

列举元素的属性

dir($("selector"))

检索最近一个结果的值

你可以把控制台当做计算器，通过$_ 来获取上次结果。

2 + 2$_         //4$_ * $_ //16$_     //16

清楚控制台和内存

clear() 刚存在内存中的$_结果也被清空了！

页面相关

页面拥有ID的元素会创建全局变量

<div id="sample"></div><script type="text/javascript">    console.log(sample);</script>

控制台输出：<div id="sample"></div>

利用script标签保存任意信息

<script type="text" id="template">    <h1>This won't display</h1></script>var text1 = document.getElementById('template').innerHTML;var text2 = template.innerHTML; // 依赖上述特性

禁止别人以iframe方式加载你的页面

if (window.location != window.parent.location) window.parent.location = window.location;

JavaScript相关

利用toString生成随机字符串

function generateRandomAlphaNum(len) {    var rdmString = "";    for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));    return rdmString.substr(0, len);}

补充：获取指定范围内的随机数

function generateRandomNum(max, min) {    return Math.floor(Math.random() * (max - min + 1) + min);}

整数的操作

var int1 = (10 / 3) | 0;var int2 = ~~(10 / 3);var int3 = parseInt(10 / 3);

补充：保留指定小数位

var num = 1.23456;num.toFixed(3);     // 1.235

不声明第三个变量的值交换

方式一：赋值

var a = 1,    b = 2;a = [b, b = a][0];

方式二：异或

var a = 1,    b = 2;a = a ^ b;b = a ^ b;a = a ^ b;

方式三：加减

var a = 1,    b = 2;a = a + b;b = a - b;a = a - b;

方式四： ES6结构

[a, b] = [b, a]

字符串去除空格

String.prototype.trim = function(){    return this.replace(/^\s+|\s+$/g, "");};

数组操作

类数组转为数组

Array.prototype.slice.call(arguments);

获取数组中的最大、最小值

var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; var maxInNumbers = Math.max.apply(Math, numbers); var minInNumbers = Math.min.apply(Math, numbers);

删除数组元素

var ary = [1, 2, 3];delete ary[1];      // [1, undefined × 1, 3]ary.splice(1, 1);   // [1, 3]

删除对象的属性使用delete，删除数组的元素使用splice

使用XMLHttpRequests时注意设置超时

var xhr = new XMLHttpRequest (); xhr.onreadystatechange = function () {      if (this.readyState == 4) {          clearTimeout(timeout);          // do something with response data     }  }  var timeout = setTimeout( function () {      xhr.abort(); // call error callback  }, 60*1000 /* timeout after a minute */ ); xhr.open('GET', url, true);  xhr.send();

3 0