最短的javascript:地址栏载入脚本代码


Posted in Javascript onOctober 13, 2011

不过脚本比较长的时候,需要复制密密麻麻一大段到地址栏里,显得很不美观,而且脚本修改起来也很不容易。因此一般先把脚本写在单独一个文件里,然后用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字节。


当然,最终的极限仍在探索中。。。


配合Google的短域名服务Google URL Shortener,我们可以缩短脚本的URL,例如:

javascript:with(document)0[body.appendChild(createElement('script')).src='http://goo.gl/QPp29']
Javascript 相关文章推荐
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
mailto的使用技巧分享
Dec 21 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
JavaScript 绘制饼图的示例
Feb 19 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 #Javascript
Javascript insertAfter() 实现函数代码
Oct 12 #Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 #Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 #Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 #Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 #Javascript
namespace.js Javascript的命名空间库
Oct 11 #Javascript
You might like
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
PHP下对字符串的递增运算代码
2010/08/21 PHP
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Python命令行click参数用法解析
2019/12/19 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
linux面试相关问题
2013/04/28 面试题
《可爱的动物》教学反思
2014/02/22 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
经营理念标语
2014/06/21 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
入党转正申请书范文
2019/05/20 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python