前端冷知识集结

HTML:

1.控制台执行下面代码,整个页面处于任意践踏状态

document.body.contentEditable = "true";

2.利用a标签解析url

很多时候,我们需要通过url获得相关信息,如关键字,参数变量值等,但是a标签本身提供相应的属性和方法,以下是来自James的博客

// This function creates a new anchor element and uses location
// properties (inherent) to get the desired URL data. Some String
// operations are used (to normalize results across browsers).
// (个人翻译:)通过创建a元素,使用内置的属性和方法来得到url上的数据,兼容ie6

 
function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':',''),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function(){
            var ret = {},
                seg = a.search.replace(/^?/,'').split('&'),
                len = seg.length, i = 0, s;
            for (;i<len;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        file: (a.pathname.match(//([^/?#]+)$/i) || [,''])[1],
        hash: a.hash.replace('#',''),
        path: a.pathname.replace(/^([^/])/,'/$1'),
        relative: (a.href.match(/tps?://[^/]+(.+)/) || [,''])[1],
        segments: a.pathname.replace(/^//,'').split('/')
    };
}
// Usage
var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');
 
myURL.file;     // = 'index.html'
myURL.hash;     // = 'top'
myURL.host;     // = 'abc.com'
myURL.query;    // = '?id=255&m=hello'
myURL.params;   // = Object = { id: 255, m: hello }
myURL.path;     // = '/dir/index.html'
myURL.segments; // = Array = ['dir', 'index.html']
myURL.port;     // = '8080'
myURL.protocol; // = 'http'
myURL.source;   // = 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'

3.利用script标签保存任意信息

<script type="text" id="template">
    <h1>This won't display</h1>
</script>
var text = document.getElementById('template').innerHTML

CSS:

1.纯属玩耍,在css里加上这个

*{
    cursor: none!important;
}

2.简单的文字模糊效果,有点像ps的滤镜

p {
    color: transparent;
    text-shadow: #111 0 0 5px;
}

3.多重边框

div {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
    height: 200px;
    margin: 50px auto;
    width: 400px
}

4.创建长宽比一定的容器

通过设置父级窗口的padding-bottom可以达到让容器保持一定的长度比的目的，这在响应式页面设计中比较有用，能够保持元素不变形。(positon:absolute;上下左右为0 => 表示宽高是父元素的100%)

<div style="width: 100%; position: relative; padding-bottom: 20%;">
    <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;">
        this content will have a constant aspect ratio that varies based on the width.
    </div>
</div>

5.做简单的运算

通过CSS中的calc方法可以进行一些简单的运算，从而达到动态指定元素样式的目的。

.container{
    background-position: calc(100% - 50px) calc(100% - 20px);
}

JS:

1.生成随机字符串

利用Math.random和toString生成随机字符串，来自前一阵子看到的一篇博文。这里的技巧是利用了toString方法可以接收一个基数作为参数的原理，这个基数从2到36封顶。如果不指定，默认基数是10进制

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

2.转化为整数

JavaScript中是没有整型概念的，但利用好位操作符可以轻松处理，同时获得效率上的提升。

|0和~~是很好的一个例子，使用这两者可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快。在处理像素及动画位移等效果的时候会很有用。性能比较见此。

顺便说句，!!将一个值方便快速转化为布尔值 !!window===true 。

var foo = (12.4 / 4.13) | 0;//结果为3
var bar = ~~(12.4 / 4.13);//结果为3

3.重写原生浏览器方法以实现新功能

下面的代码通过重写浏览器的alert让它可以记录弹窗

(function() {
    var oldAlert = window.alert,
        count = 0;
    window.alert = function(a) {
        count++;
        oldAlert(a + "\n You've called alert " + count + " times now. Stop, it's evil!");
    };
})();
alert("Hello World");

4.对于console,不止有log,dir,还有其他的玩法.但基本就是玩玩,不详写了.(打印图片了,console.tabel(),改写控制台的显示样式等等)

5.不声明第三个变量的值的变换

我们都知道交换两个变量值的常规做法，那就是声明一个中间变量来暂存。但鲜有人去挑战不声明中间变量的情况，下面的代码给出了这种实现。蛮有创意的。

var a=1,b=2;a=[b,b=a][0];
// 还有一种,跟位操作符有关系,回头补上

6.万物皆是对象

JavaScript中数字是不分浮点和整形的，所有数字其实均是浮点类型，只是把小数点省略了而以，比如你看到的1可以写成1.，这也就是为什么当你试图1.toString()时会报错，所以正确的写法应该是这样：1..toString()，或者如上面所述加上括号，这里括号的作用是纠正JS解析器，不要把1后面的点当成小数点。内部实现如上面所述，是将1.用包装对象转成对象再调用方法

1..toString()

参考http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html#comment_form_container

posted @ 2017-03-06 14:15 花.花阅读(132) 评论(0) 编辑收藏举报

刷新页面返回顶部

花花

前端冷知识集结

HTML:

CSS:

JS:

公告