鲜为人知的前端知识

奋飛

发布于 2019-08-15 16:15:38

5230

发布于 2019-08-15 16:15:38

文章被收录于专栏：Super 前端

浏览器相关

下述采用的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中元素关联的事件

// 存在jQuery
getEventListeners($("selector"))
// 无jQuery
getEventListeners($$("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();

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016年02月18日，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery

javascript

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

jquery

javascript

编程算法

登录后参与评论

0 条评论

热度