【原创】大话前端-从小书签应用说起

前段时间和一群小伙伴讨论了一个名为《大话前端-从小书签应用说起》的话题。内容是前端开发中极小,乃至已经被一部分前端开发工程师遗忘掉的一部分——书签应用(Bookmarklet)。但是,我们需要明白,台湾虽小但终是中国的一部分,书签虽小,也是前端开发的一部分。技术不分大小,合理使用就能创造价值,用好了就能有所创新。

浏览器书签管理器

还是在2012年前后,那时刚步入社会的我对前端充满了好奇,正逢前端开发风生水起。国外各种好的前端开发技术开始进入到我的视野,因“瀑布流”布局被国内前端开发工程师纷纷效仿的Pinterest网站,也在其列。后来国内的同类网站“花瓣”、“蘑菇街”等,纷纭而至。而Pinterest的工程师开发的图片采集书签应用,第一次带我感受了浏览器书签应用的神奇。

枚举若干书签应用

书签小工具,是一种小型的JS程序(Applet),以网址(URL)的形式被存为浏览器中的书签,也可以是网页上的一个链接。小书签的英文名,Bookmarklet是由Bookmark和Applet组合而来。无论小书签以什么形式存在,它们都是用来对浏览器或是网页添加一些特定功能。点击小书签时,会执行这些操作,包括执行搜索,导出数据等等。小书签一般是由Javascript程序编写完成,这也是为什么说小书签应用是前端开发的一片领地的理由之一。

小书签应用的起源很早,可以追溯到2001年,几乎可以说它伴随着浏览器一起成长,所以技术本身也非常成熟。再加上它可以配合浏览器完成一些特有的功能,在浏览器插件(扩展)出现之前,小书签应用便可以称得上浏览器插件。而随着Chrome浏览器以其卓越的表现迅速占据市场之后,Chrome“应用商店”提供了各种各样的浏览器扩展开始逐渐取代书签应用,前文提到的Pinterest网站也将书签应用升级为了浏览器扩展。而如今的书签应用也并非全无立足之地,它仍然能在一定程度上取代浏览器扩展。

书签应用于浏览器的优劣对比

分析书签应用与浏览器扩展的优劣势大致可以总结为以下几点。

首先,书签应用可能比浏览器扩展受到更多的安全限制。这一点主要受制于书签应用的实现原理,大部分时候是在页面中注入JS脚本来实现。而由于JS程序自身的不安全因素,可能被一些不法开发者利用,给用户带来一些安全隐患。

其次,浏览器扩展比书签应用拥有更多的权限。这一点主要由二者的宿主环境决定。虽然二者均作用于浏览的网页,但浏览器扩展依附于浏览器本身,可以直接调用浏览器提供的一些接口,甚至申请访问用户本地文件的权限。而书签应用毕竟只是一个类URL链接,甚至连一个网页都算不上,当然它的功能就仅限于网页级别的操作。

各主流浏览器LOGO集合

第三,书签应用拥有更好的兼容性。很好理解,IE、Firefox、Chrome等各大主流浏览器的内核不尽相同,而浏览器扩展实现及安装都跟浏览器本身息息相关,自然各个浏览器都不一样,甚至同一个功能在不同的浏览器上都需要重新实现一遍。但书签应用不一样,由于每个浏览器对JS程序的支持大同小异,而且每个浏览器都有收藏夹功能,所以在程序本身兼容的前提下同一个功能可以同时支持多种浏览器。

第四,从安装使用上来讲,书签应用更加灵活一些。对于浏览器扩展一般情况下我们需要前往“应用中心”下载安装,或者通过离线下载扩展程序进行安装,相比于可以依附于一个网页中的A链接(超链接)进行传播,直接将链接拖拽到浏览器收藏夹完成安装的书签应用来说,显然书签应用的推广与安装更为方便灵活。

最后,从开发成本而言,书签应用的开发成本显然更低。通常书签应用只需要Javascript编程能力,借助基础的HTML和CSS知识就可以完成。但浏览器扩展开发不仅需要这些,还需要掌握插件开发规范,插件接口实现,权限申请、管理以及打包发布等等。

书签应用的知识集合

综上所述,我们在实际应用中也需要酌情而定。此外,书签应用还有一个需要注意的地方。由于书签应用的实现可以理解为在浏览器地址栏访问了一个纯JS代码的链接地址,所以其长度也受制于浏览器请求长度的限制。而综合各个浏览器的支持情况,IE浏览器的长度支持最小,仅支持2083个字符,IE6更是小到只支持508个字符。所以,我们要想通过在地址栏书写完一个应用的全部代码,显然太过理想。所幸的是,对于这个问题,我们有很好的处理方法:只需在地址栏书写在页面中引入外部JS文件的代码即可,而真正的应用功能实现交由外部引入的JS来文件实现。

“麻雀虽小,五脏俱全”,关于浏览器书签的方方面面,我就说这么多了。剩下的就是大家自己去实践了,自己去开发一个您专属的浏览器书签应用。更简明的总结请访问:大话前端-从小书签应用说起