Posts

1. visibilitychange事件 触发条件：浏览器标签页被隐藏或显示的时候会触发visibilitychange事件. 使用场景：当标签页显示或者隐藏时，触发一些业务逻辑 document.addEventListener("visibilitychange", function() { console.log( document.visibilityState ); }); 2. storage事件 触发条件：使用localStorage or sessionStorage存储或者修改某个本地存储时 使用场景：标签页间通信 // AB页面同源 // 在A 页面 window.addEventListener('storage', (e) => {console.log(e)}) // 在B 页面，向120打个电话 localStorage.setItem('makeCall','120') // 然后可以在A页面间有输出, 可以看出A页面 收到了B页面的通知 ...key: "makeCall", oldValue: "119", newValue: "120", ... 3. beforeunload事件 触发条件：当页面的资源将要卸载(及刷新或者关闭标签页前). 当页面依然可见，并且该事件可以被取消只时 使用场景：关闭或者刷新页面时弹窗确认，关闭页面时向后端发送报告等 window.addEventListener("beforeunload", function (e) { var confirmationMessage = "\o/"; e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+ return confirmationMessage; // Gecko, WebKit, Chrome <34 }); 4. navigator.sendBeacon 这个方法主要用于满足 统计和诊断代码 的需要，这些代码通常尝试在卸载（unload）文档之前向web服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而， 对于开发者来说保证在文档卸载期间发送数据一直是一个困难。因为用户代理通常会忽略在卸载事件处理器中产生的异步 XMLHttpRequest 。 ...

当你用浏览器访问某个网页时，你可曾想过，你看到的这个网页，实际上是属于你自己的。 打个比喻：访问某个网站就好像是网购了一筐鸡蛋，鸡蛋虽然是养鸡场生产的，但是这个蛋我怎么吃，你养鸡场管不着。 当然了，对于很多人来说，鸡蛋没有别的吃法，鸡蛋只能煮着吃。 你可以看如下的页面：当你在某搜索引擎上搜索前端开发时 大多数人看到的页面是这样的, 满屏的广告，满屏的推广，满屏的排名，满屏的中间地址跳转，满屏的流量劫持, 还有莆田系 但是有些人的页面却是这样的：清晰，自然，链接直达，清水出芙蓉，天然去雕饰 这就是油猴子脚本干的事情， 当然，它能干的事情，远不止如此。它是齐天大圣孙悟空，有七十二变。 1. 什么是油猴子脚本？ Greasemonkey，简称GM，中文俗称为“油猴”，是Firefox的一个附加组件。它让用户安装一些脚本使大部分HTML为主的网页于用户端直接改变得更方便易用。随着Greasemonkey脚本常驻于浏览器，每次随着目的网页打开而自动做修改，使得运行脚本的用户印象深刻地享受其固定便利性。 Greasemonkey可替网页加入些新功能（例如在亚马逊书店嵌入商品比价功能）、修正网页错误、组合来自不同网页的数据、或者数繁不及备载的其他功能。写的好的Greasemonkey脚本甚至可让其输出与被修改的页面集成得天衣无缝，像是原本网页里的一部分。 来自维基百科 2. 如何安装油猴子插件？ 在google商店搜索Tampermonkey, 安装量最高的就是它。 3. 如何写油猴子脚本？ 油猴子脚本有个新建脚本页面，在此页面可以创建脚本。具体教程可以参考。 中文 GreaseMonkey 用户脚本开发手册 GreaseMonkey（油猴子）脚本开发 深入浅出 Greasemonkey Greasemonkey Hacks/Getting Started 4. 如何使用他人的脚本？ greasyfork网站提供很多脚本，它仿佛是代码界的github, 可以在该网站搜到很多有意思的脚本。 5. 有哪些好用的脚本？ 有哪些超神的油猴脚本? 或者你可以在greasyfork网站查看一些下载量排行

引子： 很多时候，当我要字符串截取时，我会想到substr和substring的方法，但是具体要怎么传参数时，我总是记不住。哪个应该传个字符串长度，哪个又应该传个开始和结尾的下标，如果我不去查查这两个函数，我始终不敢去使用它们。所以我总是觉得，这个两个方法名起的真是蹩脚。然而事实是这样的吗？ 看来是时候扒一扒这两个方法的历史了。 1. 基因追本溯源 在编程语言的历史长河中，曾经出现过很多编程语言。然而大浪淘沙，铅华洗尽之后，很多早已折戟沉沙，有些却依旧光彩夺目。那么stubstr与substring的DNA究竟来自何处？ 1950与1960年代 1954 - FORTRAN 1958 - LISP 1959 - COBOL 1964 - BASIC 1970 - Pascal 1967-1978：确立了基础范式 1972 - C语言 1975 - Scheme 1978 - SQL (起先只是一种查询语言，扩充之后也具备了程序结构) 1980年代：增强、模块、性能 1983 - C++ (就像有类别的C) 1988 - Tcl 1990年代：互联网时代 1991 - Python 1991 - Visual Basic 1993 - Ruby 1995 - Java 1995 - Delphi (Object Pascal) 1995 - JavaScript 1995 - PHP 2009 - Go 2014 - Swift (编程语言) 1.1. 在C++中首次出现substr() ...

1. 情景再现 以前用nodejs写后端程序时，遇到Promise这个概念，这个东西好呀！不用谢一层一层回调，直接用类似于jQuery的连缀方式。后来遇到bluebird这个库，它就是Promise库中很有名的。我希望可以把Promise用在前端的ajax请求上，但是我不想又引入bluebird。后来发现，jquery本身就具有类似于Promise的东西。于是我就jquery的Promise写一些异步请求。 2. 不堪回首 看看一看我以前写异步请求的方式 // 函数定义 function sendRequest(req,successCallback,errorCallback){ $.ajax({ ... ... success:function(res){ successCallback(res); }, error:function(res){ errorCallback(res); } }); } // 函数调用,这个函数的匿名函数写的时候很容易出错，而且有时候难以理解 sendRequest(req,function(res){ //请求成功 ... },function(res){ //请求失败 ... }); 3. 面朝大海 下面是我希望的异步调用方式 sendRequest(req) .done(function(res){ //请求成功 ... }) .fail(function(req){ //请求失败 ... }); 4. 废话少说，放‘码’过来 talk is cheap, show me the code // 最底层的发送异步请求，做成Promise的形式 App.addMethod('_sendRequest',function(path,method,payload){ var dfd = $.Deferred(); $.ajax({ url:path, type:method || "get", headers:{ sessionId:session.id || '' }, data:JSON.stringify(payload), dataType:"json", contentType : 'application/json; charset=UTF-8', success:function(data){ dfd.resolve(data); }, error:function(data){ dfd.reject(data); } }); return dfd.promise(); }); //根据callId查询录音文件，不仅仅是异步请求可以做成Promise形式，任何函数都可以做成Promise形式 App.addMethod('_getRecordingsByCallId',function(callId){ var dfd = $.Deferred(), path = '/api/tenantcalls/'+callId+'/recordings'; App._sendRequest(path) .done(function(res){dfd.resolve(res);}) .fail(function(res){dfd.reject(res);}); return dfd.promise(); }); // 获取录音 App.addMethod('getCallDetailRecordings',function(callId){ App._getRecordingsByCallId(callId) .done(function(res){ // 获取结果后渲染数据 App.renderRecording(res); }) .fail(function(res){ App.error(res); }); }); 5. 注意事项 jQuery的Promise主要是用了jQquery的$.Derferred()方法，一些老版本的jquery并不支持此方法。 jQuery版本必须大于等于1.5，推荐使用1.11.3 6. 参考文献 jquery官方api文档 jquery维基百科文档 7. 最后 以上文章仅供参考，不包完全正确。欢迎评论，3q。 ...