最短的javascript代码: 地点栏载入剧本
|
信托各人都在地点栏里用javascript:的情势执行过剧本。这种要领简质朴用，测试较量短的剧本时常常用到。而且可以添加到保藏夹里，随时点击挪用。 不外剧本较量长的时辰，必要复制密密麻麻一大段到地点栏里，显得很不雅观，并且剧本修改起来也很不轻易。因此一样平常先把剧本写在单唯一个文件里，然后用javascript: 的情势动态载入剧本到页面中。不少网页插件都是用这个要领载入。 平常，我们用最简朴的代码实现动态载入： javascript:var o=document.createElement('script');o.src='...';document.body.appendChild(o);void(0) 虽然，这对付载入插件来说足够OK了。可是不久前看到一个稍有修改的要领，让我开始琢磨这段代码毕竟可以压缩到多短！ 他的代码大抵沟通，只是更严谨： javascript:(function(o){o.src='...';document.body.appendChild(o)})(document.createElement('script'));void(0) 固然代码比先前的还长，可是将变量置于闭包中，停止隐藏的斗嘴。而且将 document.createElement作为闭包的参数，奇妙的节减了一个var单词。 闲来无事，于是思量起这代码可否精简再精简。趁便温习下js内里的各类特征。 虽然，起首默认了几个地点栏载入剧本要遵循的法则： 1. 不引入全局变量 2. 兼容主流赏识器 3. 载入进程不影响页面 > 不影响全局变量，我们必要行使闭包来潜匿我们的私有变量； > 兼容主流赏识器，就必需行使尺度的要领，兼容性判定只会增进代码长度； > 假如简朴的行使innerHTML添加元素，就有也许导致存在的元素革新； 于是我们开始慢慢说明。 显然，最先想到的就是匿名闭包的挪用。 凡是我们都是用： (function(){})() 的情势挪用一个匿名闭包。留意赤色的优先级括号是必不行缺的，不然就是一个错误的语法。 但也可以行使另一种情势：+function(){}() 前面的+号可以换成-!~等等一元操纵符。不外这仅仅是1字节之差。 另一个显然的，就是可以把void(0)的参数替代成闭包挪用的表达式。void固然只是个要害字，但有相同函数的成果，对付任何参数都返回undefined。假如没有void，在地点栏执行了javascript:后，页面就酿成了剧本表达式返回值，各人应该都见过。 于是颠末显而易见的调查，略微镌汰了3个字符。 javascript:void(+function(o){o.src='...';document.body.appendChild(o)}(document.createElement('script'))) 不外上面都是浅条理的调查。此刻我们来细心的说明。 我们为什么要行使闭包，就是为了防备我们的变量和页面里的斗嘴。那么可以不行使变量吗？想要不呈现变量，独一步伐就是行使链式的连等操纵：操作上个操纵的返回值作为下个操纵的参数。这段代码共有3个操纵：建设剧本元素/剧本元素src赋值/添加剧本元素。细心参考下W3C的手册，DOM.appendChild不只可以添加元素，而且返回值也是此元素。而src赋值和元素添加的次序可以交流。因此我们可以用链式操纵，从而彻底辞别闭包和变量： javascript:void(document.body.appendChild(document.createElement('script')).src='...') 这一步，我们精简了19个字符！ 我们继承调查。上面的代码里呈现了2个document。我们假如用一个短变量取代的话又可以镌汰字数。但行使了变量的话又会呈现斗嘴的题目，于是又要用到闭包。。。细心的回想下，js里有个我们平常不保举行使的对象：with。没错，行使他就可以办理这个题目。我是只需with(document){...}即可。由于只有一行代码，以是那对大括号也可以去掉。于是又镌汰了4个字符： javascript:with(document)void(body.appendChild(createElement('script')).src='...') 值得留意的是，void不再套在最外层了，由于with和if, for他们一样，不再是表达式，而是语句了。 此时，代码里的每句都是各司其责，连一再的单词都找不到了。我们还可否再精简？假如硬要找，那也只得从void这家伙身上找了。假如去掉它，那地点栏执行后，页面就酿成了剧本元素的src字符了。显然删不得。但我们可以实行换个，好比alert。在对话框事后，页面仍保存着。 先前说了，void的成果仅仅是返回一个undefined，而alert没有返回值。这里就不得不说javascript与其他说话的差异之处了。在其他的说话里，险些都有函数/进程这么两观念，进程就是没有返回值的函数。不外js可差异，在js里任何函数都有一个返回值，纵然“ 没有返回值 ”也是一种返回值，他就是undefined。以是alert和void有着沟通的返回值：undefined。只腹地点栏执行后功效是它，页面就不会转跳，而其他诸如false,0,null,NaN等等都不可。 于是我们只需让表达式返回的是undefined就可以了，但必需比void()这几个字符短。要发生一个undefined，除了它字面常量外，其它就是挪用没有返回值的函数，可能会见一个工具不存在的属性。我们要尽也许简短。假如页面里行使了jQuery的话，我们用$.X就可以获得一个undefined。但没用jq的话，就不能担保是否存在变量$了。既然找不到足够简短的全局变量，我们可以用json缔造个匿名的，好比[]或{}，然后会见他的不存在属性，好比[].X。于是，我们可以辞别void了： javascript:with(document)body.appendChild(createElement('script')).src='...';[].X 这样就镌汰了1个字节。我们还可以归并下代码，用表达式替代X： javascript:with(document)[][body.appendChild(createElement('script')).src='...'] 这样又镌汰了1个字节。 究竟上，js里的任何一个变量都是担任于Object的，纵然数字也不破例。以是，我们完全可以用一个数字替代[]，这样更进一步镌汰1个字符： javascript:with(document)0[body.appendChild(createElement('script')).src='...'] 到此，代码里除了src字符外，收缩到76字节。 虽然，最终的极限仍在试探中。。。 共同新浪微博的短域名处事，我们可以收缩剧本的URL，譬喻： javascript:with(document)0[body.appendChild(createElement('script')).src='http://t.cn/ShMoyb'] （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
