【亚洲必赢app】前端冷知识汇总

前端无人问津的一面–前端冷知识汇总

2015/09/08 · CSS,
HTML5,
JavaScript · 13
评论 ·
冷知识

正文小编: 伯乐在线 –
刘哇勇
。未经作者许可,禁止转发!
欢迎参加伯乐在线 专栏撰稿人。

前端已经被嘲弄坏了!像console.log()可以向控制台出口图片等炫酷的实物已经不是怎么样音讯了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,前几天见到Quora上一个帖子,弹指间又GET了许多前端技能,一些属于技术,一些则是奇妙的冷知识,一时间还消化不东山再起。现分类整理出来分享给咱们,也填补了有的日常的聚积和扩大了一部分内容。

前者已经被愚弄坏了!像console.log()可以向决定台出口图片等炫酷的玩意已经不是怎么着音信了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,明日看来Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技术,一些则是怪诞的冷知识,一时间还消化可是来。现分类整理出来分享给我们,也补充了有些平时的积累和伸张了有的情节。

前端已经被调戏坏了!像console.log()可以向控制台出口图片等炫酷的实物已经不是怎么音讯了,像用||操作符给变量赋默许值也是人尽皆知的旧闻了,后天看到Quora上一个帖子,弹指间又GET了很多前端技能,一些属于技术,一些则是千奇百怪的冷知识,一时间还消化不回复。现分类整理出来分享给大家,也填补了有些经常的累积和壮大了有的内容。

前者已经被嘲谑坏了!像console.log()可以向控制台出口图片等炫酷的钱物已经不是什么样信息了,像用||操作符给变量赋默许值也是人尽皆知的旧闻了,明天看看Quora上一个帖子,眨眼间间又GET了好多前端技能,一些属于技术,一些则是奇怪的冷知识,一时间还消化不复苏。现分类整理出来分享给大家,也填补了部分平常的积聚和增加了有些情节。

HTML篇

HTML篇

HTML篇

HTML篇

浏览器地址栏运行JavaScript代码

这些很五人应该依然了解的,在浏览器地址栏能够一向运行JavaScript代码,做法是以
javascript: 初叶后跟要实施的言辞。比如:

JavaScript

javascript:alert(‘hello from address bar :)’);

1
javascript:alert(‘hello from address bar :)’);

将上述代码贴到浏览器地址栏回车后alert正常实施,一个弹窗神现。

亟需小心的是只如若因此copy
paste代码到浏览器地址栏的话,IE及Chrome会自动去掉代码初叶的javascript:,所以要求手动添加起来才能科学履行,而Firefox中就算不会活动去掉,但它根本就不辅助在地方栏运行JS代码,sigh~

这一技巧在自身的另一篇博文《让Chrome
接管邮件连接,收发邮件更便于了》中有采用到,利用在浏览器地址栏中推行JavaScript代码将Gmail设置为系统的邮件接管程序。

浏览器地址栏运行JavaScript代码

浏览器地址栏运行JavaScript代码

浏览器地址栏运行JavaScript代码
那几个很几人应当仍然知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:初始后跟要推行的口舌。比如:

浏览器地址栏运行HTML代码

倘诺说上面那条小秘密接头的人还算多以来,这条秘笈知道的人就要少一些了,在非IE内核的浏览器地址栏可以一贯运行HTML代码!

例如在地方栏输入以下代码然后回车运行,会并发指定的页面内容。

data:text/html,<h1>Hello, world!</h1>

1
data:text/html,<h1>Hello, world!</h1>

亚洲必赢app 1

以此很多少人应有仍然领悟的,在浏览器地址栏可以直接运行JavaScript代码,做法是以
javascript: 起先后跟要推行的说话。比如:

这些很两人应当仍然知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以
javascript: 初叶后跟要推行的言辞。比如:

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

您造么,可以把浏览器当编辑器

或者浏览器地址栏上做文章,将以下代码贴到地址栏运行后浏览器变成了一个原本而简易的编辑器,与Windows自带的notepad一样,吼吼。

data:text/html, <html contenteditable>

1
data:text/html, <html contenteditable>

亚洲必赢app 2

毕竟多亏了HTML5中新加的 contenteditable 属性,当元素指定了该属性后,元素的情节成为可编制状态。

伸张,将以下代码放到console执行后,整个页面将变得可编制,随意践踏吧~

JavaScript

document.body.contentEditable=’true’;

1
document.body.contentEditable=’true’;

亚洲必赢app 3

javascript:alert(‘hello from address bar :)’);

javascript:alert(‘hello from address bar :)’);

将以上代码贴到浏览器地址栏回车后alert正常履行,一个弹窗神现。
内需专注的是只若是通过copy
paste代码到浏览器地址栏的话,IE及Chrome会自动去掉代码初叶的javascript:,所以需求手动添加起来才能正确执行,而Firefox中固然不会自行去掉,但它根本就不匡助在地点栏运行JS代码,sigh~

采取a标签自动解析URL

诸多时候我们有从一个URL中领到域名,查询关键字,变量参数值等的急需,而相对没悟出可以让浏览器方便地帮我们落成这一义务而不用我们写正则去抓取。方法就在JS代码里先创设一个
a 标签然后将急需分析的URL赋值给
a 的 href 属性,然后就赢得了百分之百咱们想要的了。

JavaScript

var a = document.createElement(‘a’); a.href =
”; console.log(a.host);

1
2
3
var a = document.createElement(‘a’);
a.href = ‘http://www.cnblogs.com/wayou/p/’;
console.log(a.host);

亚洲必赢app 4

接纳这一法则,稍微扩充一下,就得到了一个进一步强壮的解析URL各部分的通用方法了。下边代码来自James的博客。

JavaScript

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(‘/’) }; }

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
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(‘/’)
    };
}

将以上代码贴到浏览器地址栏回车后alert正常执行,一个弹窗神现。

将上述代码贴到浏览器地址栏回车后alert正常执行,一个弹窗神现。

浏览器地址栏运行HTML代码

页面拥有ID的元素会制造全局变量

在一张HTML页面中,所有安装了ID属性的要素会在JavaScript的实施环境中开创对应的全局变量,那代表
document.getElementById 像人的阑尾一样显得多余了。但其实项目中最好规矩该怎么写就怎么写,毕竟常规代码出乱子的机会要小得多。

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

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

亚洲必赢app 5

亟需专注的是只如果由此copy
paste代码到浏览器地址栏的话,IE及Chrome会自动去掉代码发轫的javascript:,所以须要手动添加起来才能正确实施,而Firefox中固然不会自动去掉,但它根本就不协理在地点栏运行JS代码,sigh~
这一技能在本人的另一篇博文《让Chrome
接管邮件连接,收发邮件更方便了》中有使用到,利用在浏览器地址栏中举办JavaScript代码将Gmail设置为系统的邮件接管程序。

要求专注的是只要是由此copy
paste代码到浏览器地址栏的话,IE及Chrome会自动去掉代码先导的javascript:,所以要求手动添加起来才能科学执行,而Firefox中即使不会活动去掉,但它根本就不协助在地点栏运行JS代码,sigh~

假设说上面那条小秘密接头的人还算多的话,那条秘笈知道的人就要少一些了,在非IE内核的浏览器地址栏可以直接运行HTML代码!
诸如在地点栏输入以下代码然后回车运行,会出现指定的页面内容。
data:text/html,<h1>Hello, world!</h1>

加载CDN文件时,可以节约HTTP标识

近来很盛行的CDN即从专门的服务器加载一些通用的JS和CSS文件,出于安全着想部分CDN服务器使用HTTPS方式连接,而广大传统的HTTP,其实大家在行使时可以忽略掉那几个,将它从URL中节省。

<script src=”//domain.com/path/to/script.js”></script>

1
<script src="//domain.com/path/to/script.js"></script>

那一点在在此以前一篇译文博客《jQuery编程最佳实践》中也有提到。

浏览器地址栏运行HTML代码

这一技能在自我的另一篇博文《让Chrome
接管邮件连接,收发邮件更利于了》中有选用到,利用在浏览器地址栏中实施JavaScript代码将Gmail设置为系统的邮件接管程序。

亚洲必赢app 6

动用script标签保存任意新闻

将script标签设置为 type=’text’ 然后可以在里边保存任意新闻,之后方可在JavaScript代码中很有益地得到。

 

<script type=”text” id=”template”> <h1>This won’t
display</h1> </script>

1
2
3
<script type="text" id="template">
<h1>This won’t display</h1>
</script>

JavaScript

var text = document.getElementById(‘template’).innerHTML

1
var text = document.getElementById(‘template’).innerHTML

假若说上面那条小秘密接头的人还算多以来,那条秘笈知道的人就要少一些了,在非IE内核的浏览器地址栏可以一向运行HTML代码!

浏览器地址栏运行HTML代码

您造么,可以把浏览器当编辑器

CSS篇

比如在地方栏输入以下代码然后回车运行,碰面世指定的页面内容。

假使说上面那条小秘密接头的人还算多以来,那条秘笈知道的人就要少一些了,在非IE内核的浏览器地址栏可以平昔运行HTML代码!

如故浏览器地址栏上做作品,将以下代码贴到地址栏运行后浏览器变成了一个原本而简单的编辑器,与Windows自带的notepad一样,吼吼。

有关CSS的嘲笑

信任你看完以下代码后可以预料到会出现哪些听从。

CSS

*{ cursor: none!important; }

1
2
3
*{
    cursor: none!important;
}

亚洲必赢app 7

data:text/html,<h1>Hello, world!</h1>

诸如在地点栏输入以下代码然后回车运行,会产出指定的页面内容。

data:text/html, <html contenteditable>

概括的文字模糊效果

以下两行简单的CSS3代码可已毕将文字模糊化处理的目标,出来的成效有点像使用PS的滤镜,so
cool!

CSS

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

1
2
3
4
p {
    color: transparent;
    text-shadow: #111 0 0 5px;
}

亚洲必赢app 8

您造么,可以把浏览器当编辑器

data:text/html,

亚洲必赢app 9

笔直居中

有好很多次博主都有那样的必要,垂直居中显示某个DIV,大家掌握CSS中自然有品位居中的样式
text-align:center 。唯独那几个垂直居中无解。

当然你可以将容器设置为 display:table ,然后将子元素也就是要笔直居中显示的元素设置为
display:table-cell ,然后加上来完成,但此种达成数十次会因为
display:table 而破坏全部布局,那还不如直接用table标签了吧。

下边这一个样式利用了translate来都行已毕了垂直居中样式,需IE9+。

CSS

.center-vertical { position: relative; top: 50%; transform:
translateY(-50%); }

1
2
3
4
5
.center-vertical {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

相比而言,水平居中要简单得多,像上面提到的text-align:center,平时接纳的技艺还有
margin:0 auto 。但对于margin大法也只在子元素宽度小于容器宽度时管用,当子元素宽度超越容器宽度时此法失效。

上行下效,利用left和transform同样可达成程度居中,不过意义不大,毕竟text-align和margin大约满意急需了。

CSS

.center-horizontal { position: relative; left: 50%; transform:
translateX(-50%); }

1
2
3
4
5
.center-horizontal {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

 

依旧浏览器地址栏上做文章,将以下代码贴到地址栏运行后浏览器变成了一个原始而简单的编辑器,与Windows自带的notepad一样,吼吼。

Hello,world!

亚洲必赢app 10

您造么,可以把浏览器当编辑器

仍然浏览器地址栏上做小说,将以下代码贴到地址栏运行后浏览器变成了一个本来而不难的编辑器,与Windows自带的notepad一样,吼吼。

data:text/html,

亚洲必赢app 11

总归多亏了HTML5中新加的 contenteditable
属性,当元素指定了该属性后,元素的情节成为可编制状态。

增加,将以下代码放到console执行后,整个页面将变得可编制,随意践踏吧~

document.body.contentEditable=’true’;

亚洲必赢app 12

动用a标签自动解析URL

不少时候我们有从一个URL中领取域名,查询关键字,变量参数值等的急需,而相对没悟出可以让浏览器方便地帮我们达成这一职分而不用大家写正则去抓取。方法就在JS代码里先创建一个
a 标签然后将急需分析的URL赋值给 a 的 href
属性,然后就赢得了百分之百我们想要的了。

vara=document.createElement(‘a’);

a.href=”;

console.log(a.host);

亚洲必赢app 13

行使这一法则,稍微扩大一下,就获得了一个更为健康的解析URL各部分的通用方法了。上边代码来自詹姆斯的博客。

functionparseURL(url){

vara=document.createElement(‘a’);

a.href=url;

return{

source:url,

protocol:a.protocol.replace(‘:’,”),

host:a.hostname,

port:a.port,

query:a.search,

params:(function(){

varret={},

seg=a.search.replace(/^\【亚洲必赢app】前端冷知识汇总。?/,”).split(‘&’),

len=seg.length,i=0,s;

for(;i

if(!seg[i]){continue;}

s=seg[i].split(‘=’);

ret[s[0]]=s[1];

}

returnret;

})(),

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(‘/’)

};

}

页面拥有ID的因素会创立全局变量

在一张HTML页面中,所有安装了ID属性的元素会在JavaScript的执行环境中开创对应的全局变量,那意味着
document.getElementById
像人的阑尾一样显得多余了。但实则项目中最好规矩该怎么写就怎么写,毕竟常规代码出乱子的机遇要小得多。

console.log(sample);

亚洲必赢app 14

加载CDN文件时,可以节省HTTP标识

现在很盛行的CDN即从专门的服务器加载一些通用的JS和CSS文件,出于安全考虑部分CDN服务器使用HTTPS格局连接,而广大传统的HTTP,其实大家在行使时方可忽略掉那些,将它从URL中节约。

那一点在头里一篇译文博客《jQuery编程最佳实践》中也有涉嫌。

运用script标签保存任意音信

将script标签设置为 type=’text’
然后方可在其中保存任意音讯,之后可以在JavaScript代码中很有益地获得。

总归多亏了HTML5中新加的contenteditable属性,当元素指定了该属性后,元素的始末成为可编制状态。
壮大,将以下代码放到console执行后,整个页面将变得可编制,随意践踏吧~

多重边框

运用再度指定box-shadow来已毕多少个边框的效用

在线演示

CSS

/*CSS Border with Box-Shadow Example*/ 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 }

1
2
3
4
5
6
7
/*CSS Border with Box-Shadow Example*/
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
}

亚洲必赢app 15

data:text/html, <html contenteditable>

Thiswon’tdisplay

vartext=document.getElementById(‘template’).innerHTML

CSS篇

有关CSS的戏弄

深信不疑你看完以下代码后可以预料到会出现哪些功用。

*{

cursor:none!important;

}

亚洲必赢app 16

简言之的文字模糊效果

以下两行容易的CSS3代码可达到将文字模糊化处理的指标,出来的功能有点像使用PS的滤镜,so
cool!

p{

color:transparent;

text-shadow:#111005px;

}

亚洲必赢app 17

垂直居中

有好多次博主都有诸如此类的要求,垂直居中显得某个DIV,大家驾驭CSS中自然有水平居中的样式
text-align:center 。唯独那么些垂直居中无解。

自然你可以将容器设置为 display:table
,然后将子元素也就是要笔直居中突显的因素设置为 display:table-cell
,然后加上来促成,但此种落成多次会因为 display:table
而损坏全体布局,那还不如间接用table标签了啊。

下边这么些样式利用了translate来都行落成了垂直居中样式,需IE9+。

.center-vertical{

position:relative;

top:50%;

transform:translateY(-50%);

}

比较而言,水平居中要简明得多,像上边提到的text-align:center,平日利用的技艺还有
margin:0 auto
。但对此margin大法也只在子元素宽度小于容器宽度时管用,当子元素宽度大于容器宽度时此法失效。

萧规曹随,利用left和transform同样可完结程度居中,可是意义不大,毕竟text-align和margin大概满意须求了。

.center-horizontal{

position:relative;

left:50%;

transform:translateX(-50%);

}

多重边框

选拔再一次指定box-shadow来已毕七个边框的效益

在线演示:

/*CSS Border with Box-Shadow Example*/

div{

box-shadow:0006pxrgba(0,0,0,0.2),00012pxrgba(0,0,0,0.2),00018pxrgba(0,0,0,0.2),00024pxrgba(0,0,0,0.2);

height:200px;

margin:50pxauto;

width:400px

}

亚洲必赢app 18

实时编辑CSS

透过安装style标签的 display:block
样式可以让页面的style标签呈现出来,并且增进 contentEditable
属性后得以让体制成为可编制状态,更改后的体制效果也是实时更新显示的。此技能在IE下无效。拥有此技能者,逆天也!

body{color:blue}

亚洲必赢app 19

成立长宽比固定的要素

通过安装父级窗口的 padding-bottom
可以高达让容器保持自然的长短比的目标,那在响应式页面设计中相比较有用,可以保持元素不变形。

thiscontentwillhaveaconstantaspectratiothatvariesbasedonthewidth.

亚洲必赢app 20

CSS中也可以做简单运算

通过CSS中的calc方法可以开展部分简约的演算,从而达到动态指定元素样式的目的。

.container{

background-position:calc(100%-50px)calc(100%-20px);

}

JavaScript篇

变化随机字符串

运用 Math.random 和 toString
生成自由字符串,来自前一阵子看到的一篇博文。那里的技能是选拔了 toString
方法可以接收一个基数作为参数的法则,那一个基数从2到36封顶。若是不点名,默许基数是10进制。略屌!

functiongenerateRandomAlphaNum(len){

varrdmString=””;

for(;rdmString.length

returnrdmString.substr(0,len);

}

亚洲必赢app 21

平头的操作

JavaScript中是尚未整型概念的,但选择好位操作符可以轻松处理,同时获取效用上的升级换代。

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

varfoo=(12.4/4.13)|0;//结果为3

varbar=~~(12.4/4.13);//结果为3

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

重写原生浏览器方法以贯彻新职能

下载的代码通过重写浏览器的 alert 让它可以记下弹窗的次数。

(function(){

varoldAlert=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”);

有关console的恶作剧

关于重写原生方法,那里有个恶作剧我们可以拿去寻兴高采烈。Chrome的 console.log
是永葆对文字添加样式的,甚至log图片都可以。于是可以重写掉默许的log方法,把将要log的文字应用到CSS的歪曲效果,那样当有人计算调用console.log()的时候,出来的是歪曲不清的文字。好冷,我表示从没笑。

是从那篇G+帖子的评价里看到的。使用之后的效应是再次调用log会输出字迹模糊不清的文字。

var_log=console.log;

console.log=function(){

_log.call(console,’%c’+[].slice.call(arguments).join(‘
‘),’color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);’);

};

亚洲必赢app 22

不注脚第多少个变量的值交流

我们都领悟调换五个变量值的正常化做法,这就是宣称一个当中变量来暂存。但鲜有人去挑战不表明中间变量的情况,上面的代码给出了那种完结。蛮有新意
的。

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

万物皆对象

在JavaScript的世界,万物皆对象。除了 null 和 undefined
,其他基本项目数字,字符串和布尔值都有对应该包装对象。对象的一个特点是您能够在它身上一向调用方法。对于数字为主项目,当试图在其身上调用
toString
方法会败北,但用括号括起来后再调用就不会破产了,内部贯彻是用相应的卷入对象将宗旨类型转为对象。所以
(1).toString() 相当于 new Number(1).toString()
。由此,你实在可以把宗旨项目数字,字符串,布尔等当对象使用的,只是小心语法要适量。

同时大家注意到,JavaScript中数字是不分浮点和整形的,所有数字其实均是浮点类型,只是把小数点简单了而以,比如你看来的1足以写成1.,这也就是怎么当您打算1.toString()时会报错,所以正确的写法应该是这么:1..toString(),或者如上边所述加上括号,那里括号的功用是校勘JS解析器,不要把1末尾的点当成小数点。内部贯彻如上边所述,是将1.用包装对象转成对象再调用方法。

If语句的变形

当您必要写一个if语句的时候,不妨尝试另一种更轻便的形式,用JavaScript中的逻辑操作符来顶替。

varday=(newDate).getDay()===0;

//传统if语句

if(day){

alert(‘Today is Sunday!’);

};

//运用逻辑与代表if

day&&alert(‘Today is Sunday!’);

诸如上边的代码,首先获得昨天的日期,假使是周末,则弹窗,否则怎么样也不做。大家清楚逻辑操作存在隔阂的状态,对于逻辑与表达式,唯有两岸都真才结果才为真,若是前方的day变量被判定为假了,那么对于任何与表明式来说结果就是假,所以就不会一连去执行后边的
alert
了,借使前方day为真,则还要继续执行前面的代码来确定整个表达式的真伪。利用那一点达到了if的效劳。

对于传统的if语句,倘使履行体代码当先了1
条语句,则必要加花括号,而采纳逗号表明式,能够实施任意条代码而不用加花括号。

if(conditoin)alert(1),alert(2),console.log(3);

上边if语句中,倘诺基准建立则履行多少个操作,但大家不须要用花括号将那三句代码括起来。当然,那是不引进的,那里是冷知识课堂:)

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

上面的代码已经不言自明了,没什么好多说的。

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

console.table

Chrome专属,IE绕道的 console
方法。可以将JavaScript关联数组以表格格局出口到浏览器 console
,效果很惊赞,界面很美妙。

//采购情况

vardata=[{‘品名’:’杜雷斯’,’数量’:4},{‘品名’:’冈本’,’数量’:3}];

console.table(data);

亚洲必赢app 23

REFERENCE

What are the most interesting HTML/JS/DOM/CSS hacks that most web
developers don’t know about?

45 Useful JavaScript Tips, Tricks and Best Practices

10 Small Things You May Not Know About Javascript

document.body.contentEditable='true';

实时编辑CSS

经过设置style标签的 display:block 样式可以让页面的style标签彰显出来,并且增加contentEditable 属性后得以让体制成为可编制状态,更改后的体裁效果也是实时更新展现的。此技术在IE下无效。拥有此技能者,逆天也!

<!DOCTYPE html> <html> <body> <style
style=”display:block” contentEditable> body { color: blue }
</style> </body> </html>

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
    <body>
        <style style="display:block" contentEditable>
         body { color: blue }
        </style>
    </body>
</html>

亚洲必赢app 24

究竟多亏了HTML5中新加的 contenteditable
属性,当元素指定了该属性后,元素的内容成为可编制状态。

亚洲必赢app 25

创办长宽比固定的因素

通过安装父级窗口的 padding-bottom 可以完毕让容器保持自然的尺寸比的目标,这在响应式页面设计中比较有用,可以保险元素不变形。

<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>

1
2
3
4
5
<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>

亚洲必赢app 26

恢宏,将以下代码放到console执行后,整个页面将变得可编制,随意践踏吧~

利用a标签自动解析URL
屡见不鲜时候我们有从一个URL中领到域名,查询关键字,变量参数值等的急需,而相对没悟出可以让浏览器方便地帮大家做到这一义务而不用我们写正则去抓取。方法就在JS代码里先创制一个a标签然后将急需分析的URL赋值给a的href属性,然后就取得了全方位大家想要的了。

CSS中也可以做简单运算

通过CSS中的calc方法可以开展局地不难易行的演算,从而达成动态指定元素样式的目的。

CSS

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

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

 

document.body.contentEditable=’true’;

var a = document.createElement('a'); a.href = 'http://www.cnblogs.com/wayou/p/'; console.log(a.host);

JavaScript篇

使用a标签自动解析URL

亚洲必赢app 27

变动随机字符串

采取 Math.random 和 toString 生成自由字符串,来自前一阵子看到的一篇博文。那里的技术是行使了
toString 方法可以吸收一个基数作为参数的原理,那一个基数从2到36封顶。要是不指定,默许基数是10进制。略屌!

JavaScript

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

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

亚洲必赢app 28

成百上千时候大家有从一个URL中领取域名,查询关键字,变量参数值等的内需,而相对没悟出可以让浏览器方便地帮我们达成这一义务而不用大家写正则去抓取。方法就在JS代码里先创设一个
a 标签然后将要求分析的URL赋值给 a 的 href
属性,然后就拿走了全部大家想要的了。

运用这一规律,稍微伸张一下,就获取了一个更为健全的解析URL各部分的通用方法了。上面代码来自James的博客。

平头的操作

JavaScript中是从未有过整型概念的,但使用好位操作符能够轻松处理,同时得到成效上的升级换代。

|0 和 ~~ 是很好的一个事例,使用那二者可以将浮点转成整型且作用方面要比同类的
parseInt , Math.round 
要快。在拍卖像素及动画位移等功效的时候会很有用。品质相比较见此。

JavaScript

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

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

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

var a = document.createElement(‘a’);
a.href = ”;
console.log(a.host);

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('/') };}

重写原生浏览器方法以落成新功能

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

JavaScript

(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”);

1
2
3
4
5
6
7
8
9
(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");

 

运用这一法则,稍微伸张一下,就获得了一个更是健康的解析URL各部分的通用方法了。下边代码来自詹姆斯的博客。

页面拥有ID的因素会创立全局变量

至于console的恶作剧

关于重写原生方法,那里有个恶作剧我们可以拿去寻安心乐意。Chrome的 console.log 是永葆对文字添加样式的,甚至log图片都可以。于是可以重写掉默许的log方法,把将要log的文字应用到CSS的歪曲效果,那样当有人总括调用console.log()的时候,出来的是歪曲不清的文字。好冷,我代表从没笑。

是从这篇G+帖子的评价里看看的。使用之后的效应是再度调用log会输出字迹模糊不清的文字。

JavaScript

var _log = console.log; console.log = function() { _log.call(console,
‘%c’ + [].slice.call(arguments).join(‘ ‘),
‘color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);’); };

1
2
3
4
var _log = console.log;
console.log = function() {
  _log.call(console, ‘%c’ + [].slice.call(arguments).join(‘ ‘), ‘color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);’);
};

亚洲必赢app 29

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(‘/’)
};
}

在一张HTML页面中,所有安装了ID属性的要素会在JavaScript的履行环境中成立对应的全局变量,那代表document.getElementById像人的阑尾一样显得多余了。但实质上项目中最好规矩该怎么写就怎么写,毕竟常规代码出乱子的机遇要小得多。
<div id=”sample”></div><script type=”text/javascript”>
console.log(sample);</script>

不声明第多个变量的值沟通

我们都知道沟通四个变量值的正常化做法,那就是宣称一个中等变量来暂存。但鲜有人去挑衅不表明中间变量的事态,下边的代码给出了那种落成。蛮有创意
的。

JavaScript

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

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

亚洲必赢app 30

页面拥有ID的因素会创制全局变量

亚洲必赢app 31

万物皆对象

在JavaScript的社会风气,万物皆对象。除了 null 和 undefined ,其他中心项目数字,字符串和布尔值都有对应该包装对象。对象的一个风味是你可以在它身上一向调用方法。对于数字为主类型,当试图在其身上调用
toString 方法会战败,但用括号括起来后再调用就不会失败了,内部贯彻是用相应的包裹对象将挑幽州类型转为对象。所以
(1).toString() 相当于 new Number(1).toString() 。由此,你确实能够把主旨项目数字,字符串,布尔等当对象使用的,只是专注语法要适合。

并且大家注意到,JavaScript中数字是不分浮点和整形的,所有数字其实均是浮点类型,只是把小数点简单了而以,比如您看看的1方可写成1.,那也就是干什么当你打算1.toString()时会报错,所以正确的写法应该是如此:1..toString(),或者如上面所述加上括号,那里括号的效应是纠正JS解析器,不要把1后边的点当成小数点。内部贯彻如上边所述,是将1.用包装对象转成对象再调用方法。

在一张HTML页面中,所有安装了ID属性的元素会在JavaScript的实践环境中开创对应的全局变量,那意味
document.getElementById
像人的阑尾一样显得多余了。但事实上项目中最好规矩该怎么写就怎么写,毕竟常规代码出乱子的空子要小得多。

加载CDN文件时,可以节约HTTP标识

If语句的变形

当你需求写一个if语句的时候,不妨尝试另一种更轻便的法门,用JavaScript中的逻辑操作符来顶替。

JavaScript

var day=(new Date).getDay()===0; //传统if语句 if (day) { alert(‘Today is
Sunday!’); }; //运用逻辑与代表if day&&alert(‘Today is Sunday!’);

1
2
3
4
5
6
7
var day=(new Date).getDay()===0;
//传统if语句
if (day) {
alert(‘Today is Sunday!’);
};
//运用逻辑与代替if
day&&alert(‘Today is Sunday!’);

比如说上边的代码,首先得到今日的日子,即使是周末,则弹窗,否则怎么也不做。大家清楚逻辑操作存在鸿沟的气象,对于逻辑与表达式,唯有两者都真才结果才为真,要是面前的day变量被判定为假了,那么对于整个与表达式来说结果就是假,所以就不会持续去实践前面的
alert 了,假设前方day为真,则还要继续执行前边的代码来确定整个表明式的真伪。利用这一点达到了if的功效。

对于价值观的if语句,如若履行体代码当先了1
条语句,则需要加花括号,而使用逗号表达式,可以推行任意条代码而不用加花括号。

JavaScript

if(conditoin) alert(1),alert(2),console.log(3);

1
if(conditoin) alert(1),alert(2),console.log(3);

地点if语句中,倘诺基准建立则执行五个操作,但我们不需求用花括号将那三句代码括起来。当然,这是不推荐的,那里是冷知识课堂:)

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

现行很流行的CDN即从专门的服务器加载一些通用的JS和CSS文件,出于安全着想部分CDN服务器使用HTTPS方式连接,而许多传统的HTTP,其实大家在动用时方可忽略掉那么些,将它从URL中节省。(web前端学习沟通群:328058344
禁止闲谈,非喜勿进!)

取缔别人以iframe加载你的页面

上面的代码已经不言自明了,没什么好多说的。

JavaScript

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

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

加载CDN文件时,可以节约HTTP标识

<script src="//domain.com/path/to/script.js"></script>

console.table

Chrome专属,IE绕道的 console 方法。可以将JavaScript关联数组以表格方式出口到浏览器
console ,效果很惊赞,界面很美丽。

JavaScript

//采购情形 var data = [{‘品名’: ‘杜雷斯’, ‘数量’: 4}, {‘品名’: ‘冈本’,
‘数量’: 3}]; console.table(data);

1
2
3
//采购情况
var data = [{‘品名’: ‘杜雷斯’, ‘数量’: 4}, {‘品名’: ‘冈本’, ‘数量’: 3}];
console.table(data);

亚洲必赢app 32

后天很流行的CDN即从专门的服务器加载一些通用的JS和CSS文件,出于安全着想部分CDN服务器使用HTTPS方式连接,而广大传统的HTTP,其实我们在使用时得以忽略掉这一个,将它从URL中节约。

采取script标签保存任意信息

REFERENCE

  • What are the most interesting HTML/JS/DOM/CSS hacks that most web
    developers don’t know
    about?
  • 45 Useful JavaScript Tips, Tricks and Best
    Practices
  • 10 Small Things You May Not Know About
    Javascript

    6 赞 43 收藏 13
    评论

<script src=”//domain.com/path/to/script.js”></script>

将script标签设置为type=’text’然后方可在里面保存任意音信,之后可以在JavaScript代码中很有利地取得。

至于小编:刘哇勇

亚洲必赢app 33

放浪不急爱自由
个人主页 ·
我的作品 ·
17 ·
  

亚洲必赢app 34

这点在前边一篇译文博客《jQuery编程最佳实践》中也有涉及。

<script type="text" id="template"> <h1>This won't display</h1></script>

var text = document.getElementById('template').innerHTML

运用script标签保存任意音信

CSS篇

将script标签设置为 type=’text’
然后得以在中间保存任意新闻,之后方可在JavaScript代码中很有益于地收获。

有关CSS的恶作剧
相信您看完以下代码后可以预料到会出现哪些效益。
*{ cursor: none!important;}

<script type=”text” id=”template”>
<h1>This won’t display</h1>
</script>

亚洲必赢app 35

var text = document.getElementById(‘template’).innerHTML

概括的文字模糊效果

CSS篇

以下两行简单的CSS3代码可直达将文字模糊化处理的目的,出来的效益有点像使用PS的滤镜,so
cool!
p { color: transparent; text-shadow: #111 0 0 5px;}

关于CSS的嗤笑

亚洲必赢app 36

信任你看完以下代码后可以预料到会出现什么效果。

垂直居中

*{
cursor: none!important;
}

有好多次博主都有诸如此类的需要,垂直居中体现某个DIV,大家知道CSS中天然有水平居中的样式text-align:center。唯独这一个垂直居中无解。
自然你能够将容器设置为display:table,然后将子元素也就是要笔直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来促成,但此种完结很多次会因为display:table而损坏全体布局,那还不如直接用table标签了啊。
下边那几个样式利用了translate来都行完成了僵直居中样式,需IE9+。

简单易行的文字模糊效果

.center-vertical { position: relative; top: 50%; transform: translateY(-50%);}

以下两行简单的CSS3代码可达到将文字模糊化处理的目标,出来的意义有点像使用PS的滤镜,so
cool!

比较而言,水平居中要简单得多,像下面提到的text-align:center,常常选择的技艺还有margin:0
auto。但对于margin大法也只在子元素宽度小于容器宽度时管用,当子元素宽度超越容器宽度时此法失效。
生搬硬套,利用left和transform同样可落成程度居中,可是意义不大,毕竟text-align和margin大约满足需要了。

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

.center-horizontal { position: relative; left: 50%; transform: translateX(-50%); }

垂直居中

多重边框

有好很多次博主都有如此的必要,垂直居中显得某个DIV,我们明白CSS中原始有水平居中的样式
text-align:center 。唯独这几个垂直居中无解。

接纳再度指定box-shadow来完成三个边框的效劳
在线演示

自然你能够将容器设置为 display:table
,然后将子元素也就是要笔直居中浮现的元素设置为 display:table-cell
,然后加上来兑现,但此种完成多次会因为 display:table
而破坏全部布局,那还不如直接用table标签了吧。

/*CSS Border with Box-Shadow Example*/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}

上边这几个样式利用了translate来都行完结了垂直居中样式,需IE9+。

亚洲必赢app 37

.center-vertical {
position: relative;
top: 50%;
transform: translateY(-50%);
}

实时编辑CSS

亚洲必赢app,相比而言,水平居中要简单得多,像上边提到的text-align:center,经常应用的技能还有
margin:0 auto
。但对于margin大法也只在子元素宽度小于容器宽度时管用,当子元素宽度超过容器宽度时此法失效。

经过设置style标签的display:block样式可以让页面的style标签突显出来,并且增长contentEditable属性后方可让体制成为可编制状态,更改后的体裁效果也是实时更新突显的。此技能在IE下无效。拥有此技能者,逆天也!

依样画葫芦,利用left和transform同样可落成程度居中,不过意义不大,毕竟text-align和margin大概满足需要了。

<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>

.center-horizontal {
position: relative;
left: 50%;
transform: translateX(-50%);
}

亚洲必赢app 38

多重边框

创办长宽比固定的元素

行使再一次指定box-shadow来达到七个边框的功力

因而设置父级窗口的padding-bottom可以达到让容器保持一定的尺寸比的目的,那在响应式页面设计中相比较有用,可以维持元素不变形。

在线演示:

<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>

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
}

亚洲必赢app 39

实时编辑CSS

CSS中也可以做简单运算

透过安装style标签的 display:block
样式可以让页面的style标签呈现出来,并且拉长 contentEditable
属性后得以让体制成为可编制状态,更改后的体制效果也是实时更新显示的。此技能在IE下无效。拥有此技能者,逆天也!

由此CSS中的calc方法可以拓展一些简便的运算,从而达到动态指定元素样式的目标。
.container{ background-position: calc(100% - 50px) calc(100% - 20px);}

<!DOCTYPE html>
<html>
<body>
    <style style=”display:block” contentEditable>
      body { color: blue }
    </style>
</body>
</html>

JavaScript篇

创设长宽比固定的元素

变化随机字符串
利用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);}

经过设置父级窗口的 padding-bottom
可以达标让容器保持自然的长短比的目标,那在响应式页面设计中比较有用,可以维持元素不变形。

亚洲必赢app 40

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

平头的操作
JavaScript中是从未有过整型概念的,但利用好位操作符可以轻松处理,同时获得功用上的升迁。
|0和~~是很好的一个例证,使用那二者可以将浮点转成整型且功用方面要比同类的parseInt,Math.round
要快。在拍卖像素及动画位移等功用的时候会很有用。质量比较见此。

CSS中也得以做不难运算

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

经过CSS中的calc方法可以展开局地简短的演算,从而完结动态指定元素样式的目标。

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

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

重写原生浏览器方法以贯彻新职能
下载的代码通过重写浏览器的alert让它可以记下弹窗的次数。

JavaScript篇

(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");

扭转随机字符串

至于console的讥笑

选取 Math.random 和 toString
生成自由字符串,来自前一阵子看到的一篇博文。那里的技术是选用了 toString
方法能够收到一个基数作为参数的规律,这些基数从2到36封顶。假使不指定,默许基数是10进制。略屌!

有关重写原生方法,那里有个恶作剧大家可以拿去寻手舞足蹈。Chrome的console.log是援助对文字添加样式的,甚至log图片都得以。于是可以重写掉默许的log方法,把将要log的文字应用到CSS的混淆效果,这样当有人总结调用console.log()的时候,出来的是指鹿为马不清的文字。好冷,我表示并未笑。
是从这篇G+帖子的评论里寓目的。使用之后的功效是再一次调用log会输出字迹模糊不清的文字。(web前端学习调换群:328058344
禁止闲谈,非喜勿进!)

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

var _log = console.log;console.log = function() { _log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');};

平头的操作

亚洲必赢app 41

JavaScript中是没有整型概念的,但使用好位操作符可以轻松处理,同时获得成效上的升迁。

不表明第多少个变量的值交流
咱俩都明白交流多个变量值的正常化做法,那就是声称一个中间变量来暂存。但鲜有人去挑衅不声明中间变量的景色,上边的代码给出了那种落成。蛮有创意
的。
var a=1,b=2;a=[b,b=a][0];

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

亚洲必赢app 42

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

万物皆对象

顺便说句, !! 将一个值方便高效转化为布尔值 !!window===true  。

在JavaScript的社会风气,万物皆对象。除了null和undefined,其余中心类型数字,字符串和布尔值都有对应当包装对象。对象的一个表征是你可以在它身上一贯调用方法。对于数字为主项目,当试图在其随身调用toString方法会败北,但用括号括起来后再调用就不会破产了,内部贯彻是用相应的包装对象将着力项目转为对象。所以(1).toString()约等于new
Number(1).toString()。因而,你确实可以把大旨项目数字,字符串,布尔等当对象使用的,只是小心语法要适中。

重写原生浏览器方法以促成新效用

与此同时我们注意到,JavaScript中数字是不分浮点和整形的,所有数字其实均是浮点类型,只是把小数点简单了而以,比如您见到的1可以写成1.,那也就是为啥当您准备1.toString()时会报错,所以正确的写法应该是如此:1..toString(),或者如上面所述加上括号,那里括号的职能是核对JS解析器,不要把1后头的点当成小数点。内部贯彻如上边所述,是将1.用包装对象转成对象再调用方法。

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

If语句的变形

(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”);

当你须求写一个if语句的时候,不妨尝试另一种更简便易行的不二法门,用JavaScript中的逻辑操作符来替代。
var day=(new Date).getDay()===0;//传统if语句if (day) { alert('Today is Sunday!');};//运用逻辑与代替ifday&&alert('Today is Sunday!');

关于console的作弄

例如上边的代码,首先获得明天的日子,如果是周五,则弹窗,否则怎么也不做。我们掌握逻辑操作存在鸿沟的事态,对于逻辑与表达式,唯有两者都真才结果才为真,假设前方的day变量被判定为假了,那么对于所有与表达式来说结果就是假,所以就不会一而再去实施后边的alert了,假使面前day为真,则还要继续执行前面的代码来规定整个表达式的真伪。利用这一点完结了if的功用。

至于重写原生方法,那里有个恶作剧我们可以拿去寻心满意足。Chrome的 console.log
是永葆对文字添加样式的,甚至log图片都能够。于是能够重写掉默许的log方法,把即将log的文字应用到CSS的歪曲效果,那样当有人统计调用console.log()的时候,出来的是颠倒是非不清的文字。好冷,我表示并未笑。

对于价值观的if语句,借使进行体代码当先了1
条语句,则必要加花括号,而接纳逗号表明式,可以执行任意条代码而不用加花括号。
if(conditoin) alert(1),alert(2),console.log(3);

是从那篇G+帖子的评论里看到的。使用之后的机能是重新调用log会输出字迹模糊不清的文字。

地方if语句中,若是基准建立则举行三个操作,但我们不需要用花括号将那三句代码括起来。当然,那是不推荐的,那里是冷知识课堂:)

var _log = console.log;
console.log = function() {
_log.call(console, ‘%c’ + [].slice.call(arguments).join(‘ ‘),
‘color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);’);
};

禁绝旁人以iframe加载你的页面
上边的代码已经不言自明了,没什么好多说的。
if (window.location != window.parent.location) window.parent.location = window.location;

不注脚第二个变量的值互换

console.table
Chrome专属,IE绕道的console方法。可以将JavaScript关联数组以表格方式出口到浏览器console,效果很惊赞,界面很顺眼。
//采购情况var data = [{‘品名’: ‘杜雷斯’, ‘数量’: 4}, {‘品名’: ‘冈本’,
‘数量’: 3}];console.table(data);

大家都知道交流多少个变量值的常规做法,那就是声称一个中间变量来暂存。但鲜有人去挑战不评释中间变量的动静,下边的代码给出了那种完成。蛮有创意
的。

亚洲必赢app 43

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

REFERENCE

万物皆对象

  • What are the most interesting HTML/JS/DOM/CSS hacks that most web
    developers don’t know
    about?
  • 45 Useful JavaScript Tips, Tricks and Best
    Practices
  • 10 Small Things You May Not Know About
    Javascript

在JavaScript的社会风气,万物皆对象。除了 null 和 undefined
,其余主旨类型数字,字符串和布尔值都有对相应包装对象。对象的一个特征是你可以在它身上一贯调用方法。对于数字为主类型,当试图在其随身调用
toString
方法会战败,但用括号括起来后再调用就不会失败了,内部贯彻是用相应的卷入对象将着力项目转为对象。所以
(1).toString() 相当于 new Number(1).toString()
。因此,你真的可以把基本类型数字,字符串,布尔等当目标使用的,只是专注语法要得体。

Feel free to repost but keep the link to this page please!

并且大家注意到,JavaScript中数字是不分浮点和整形的,所有数字其实均是浮点类型,只是把小数点简单了而以,比如您见到的1可以写成1.,那也就是怎么当您准备1.toString()时会报错,所以正确的写法应该是如此:1..toString(),或者如上边所述加上括号,那里括号的功能是改进JS解析器,不要把1后头的点当成小数点。内部贯彻如上面所述,是将1.用包装对象转成对象再调用方法。

If语句的变形

当你必要写一个if语句的时候,不妨尝试另一种更便利的措施,用JavaScript中的逻辑操作符来替代。

var day=(new Date).getDay()===0;
//传统if语句
if (day) {
alert(‘Today is Sunday!’);
};
//运用逻辑与代表if
day&&alert(‘Today is Sunday!’);

譬如说上边的代码,首先取得前日的日期,假若是周末,则弹窗,否则怎么样也不做。大家精通逻辑操作存在鸿沟的气象,对于逻辑与表明式,唯有双方都真才结果才为真,假设前方的day变量被判定为假了,那么对于任何与表明式来说结果就是假,所以就不会继续去执行前边的
alert
了,固然面前day为真,则还要继续执行前边的代码来规定整个表明式的真假。利用那一点落成了if的效应。

对此价值观的if语句,要是实施体代码当先了1
条语句,则需求加花括号,而利用逗号表明式,可以执行任意条代码而不用加花括号。

if(conditoin) alert(1),alert(2),console.log(3);

下边if语句中,假设条件建立则实施八个操作,但我们不要求用花括号将那三句代码括起来。当然,那是不引进的,那里是冷知识课堂:)

取缔别人以iframe加载你的页面

下边的代码已经不言自明了,没什么好多说的。

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

console.table

Chrome专属,IE绕道的 console
方法。可以将JavaScript关联数组以表格情势出口到浏览器 console
,效果很惊赞,界面很出色。

//采购意况
var data = [{‘品名’: ‘杜雷斯’, ‘数量’: 4}, {‘品名’: ‘冈本’, ‘数量’:
3}];
console.table(data);

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图