js小窍门集合

发表于 | 分类于

1、监听用户打开控制台：

1
2
3
4
5
6
7
8
9
    var devtools = function() {};
    alert(devtools.opened)
    devtools.toString = function() {
        this.opened = true;
        //拦截用户打开控制台的行为
        alert(devtools.opened)
    }
    console.log('%c', devtools);//每次打开控制台才会执行
    //每次执行时，都会默认调用devtools的toString方法，通过重写该方法，进行拦截

2、不打开控制台改变页面内容的方法：

在浏览器地址栏输入以下代码，即可进入编辑状态，如果粘贴，切记chorme浏览器会默认去掉’javascript：’

1
    javascript:document.body.contentEditable='true';document.designMode='on'; void 0

在浏览器地址栏输入以下代码，即可结束编辑状态

1
    javascript:document.body.contentEditable='false';document.designMode='on'; void 0

3、link标签和@import的区别：

1）从属关系区别：link标签属于XHTML标签，而@import是css提供的语法规则，ling除了加载css，还可以定义RSS，定义real连接属性等，@import只能加载css。

2）加载顺序区别：页面加载时，link会同时被加载，而@import饮用的css会等页面加载完后再加载。

3）兼容性的区别：@import只有IE5以上才能被识别，而link是XHTML，不存在兼容问题。

4）DOM可控性区别：通过js操作DOM，可以插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import方式插入样式。

也就是说，比如开发一个页面，可以通过创建link标签并追加到html文档中，动态添加样式表，但是不能通过@import动态添加样式。

5）权重区别：link引入的样式权重大于@import引入的样式。

link和@import的区别

高性能网站设计：不要使用@import

其实并不是如字面意思的那样link的权重比较大，而是在link标签引入的CSS文件中，只用@import时需注意，如果存在相同样式，@import引入的这个样式将被该CSS文件本身的样式覆盖掉。

另：在标准的CSS中，@import必须在所有其他类型的规则之前。但是Less.js不在乎你把@import语句放在什么位置。

less特性

1
2
3
4
5
6
7
div {
    color: yellow;/*生效*/
}

@import 'base';
@import 'common';
@import 'cover';