发起Ajax请求当页面onunload

0.1. 同步Ajax 这种需求主要用于当浏览器关闭,或者刷新时,向后端发起Ajax请求。 window.onunload = function(){ $.ajax({url:"http://localhost:8888/test.php?", async:false}); }; 使用async:false参数使请求同步(默认是异步的)。 同步请求锁定浏览器,直到完成。 如果请求是异步的,页面只是继续卸载。 它足够快,以至于该请求甚至没有时间触发。服务端很可能收不到请求。 0.2. navigator.sendBeacon 优点:简洁、异步、非阻塞 缺点:这是实验性的技术,并非所有浏览器都支持。其中IE和safari不支持该技术。 示例: window.addEventListener('unload', logData, false); function logData() { navigator.sendBeacon("/log", analyticsData); } 参考:http://stackoverflow.com/questions/1821625/ajax-request-with-jquery-on-page-unload 参考:https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon

2018-02-07 09:18:54 · 1 min · Eddie Wang

git合并上游仓库即同步fork后的仓库

1. 前提说明 仓库A: http://gitlab.tt.cc:30000/fe/omp.git 仓库B: 仓库Bfork自仓库A, 仓库A的地址是:http://gitlab.tt.cc:30000/wangdd/omp.git 某一时刻,仓库A更新了。仓库B需要同步上游分支的更新。 2. 本地操作 // 1 查看远程分支 ➜ omp git:(master) git remote -v origin http://gitlab.tt.cc:30000/wangdd/omp.git (fetch) origin http://gitlab.tt.cc:30000/wangdd/omp.git (push) // 2 添加一个远程同步的上游仓库 ➜ omp git:(master) git remote add upstream http://gitlab.tt.cc:30000/fe/omp.git ➜ omp git:(master) git remote -v origin http://gitlab.tt.cc:30000/wangdd/omp.git (fetch) origin http://gitlab.tt.cc:30000/wangdd/omp.git (push) upstream http://gitlab.tt.cc:30000/fe/omp.git (fetch) upstream http://gitlab.tt.cc:30000/fe/omp.git (push) // 3 拉去上游分支到本地,并且会被存储在一个新分支upstream/master ➜ omp git:(master) git fetch upstream remote: Counting objects: 4, done. remote: Compressing objects: 100% (4/4), done....

2018-01-31 17:16:44 · 1 min · Eddie Wang

如何写好接口文档?

1. HTTP携带信息的方式 url headers body: 包括请求体,响应体 2. 分离通用信息 一般来说,headers里的信息都是通用的,可以提前说明,作为默认参数 3. 路径中的参数表达式 URL中参数表达式使用{}的形式,参数包裹在大括号之中{paramName} 例如: /api/user/{userId} /api/user/{userType}?age={age}&gender={gender} 4. 数据模型定义 数据模型定义包括: 路径与查询字符串参数模型 请求体参数模型 响应体参数模型 数据模型的最小数据集: 名称 是否必须 说明 “最小数据集”(MDS)是指通过收集最少的数据,较好地掌握一个研究对象所具有的特点或一件事情、一份工作所处的状态,其核心是针对被观察的对象建立起一套精简实用的数据指标。最小数据集的概念起源于美国的医疗领域。最小数据集的产生源于信息交换的需要,就好比上下级质量技术监督部门之间、企业与质量技术监督部门之间、质量技术监督部门与社会公众之间都存在着信息交换的需求。 一些文档里可能会加入字段的类型,但是我认为这是没必要的。以为HTTP传输的数据往往都需要序列化,大部分数据类型都是字符串。一些特殊的类型,例如枚举类型的字符串,可以在说明里描述。 另外:数据模型非常建议使用表格来表现。 举个栗子🌰: 名称 是否必须 说明 userType 是 用户类型。commom表示普通用户,vip表示vip用户 age 否 用户年龄 gender 否 用户性别。1表示男,0表示女 5. 请求示例 // general POST http://www.testapi.com/api/user // request payload { "name": "qianxun", "age": 14, "like": ["music", "reading"], "userType": "vip" } // response { "id": "asdkfjalsdkf" } 6. 异常处理 异常处理最小数据集...

2018-01-29 22:01:55 · 1 min · Eddie Wang

win7 ie11 开发者工具打开后一片空白

解决方法安装Windows7补丁:KB3008923; 下载地址: http://www.microsoft.com/en-us/download/details.aspx?id=45134 (32位) http://www.microsoft.com/zh-CN/download/details.aspx?id=45154 (64位)

2018-01-29 21:43:12 · 1 min · Eddie Wang

CSTA 呼叫模型简介

1. 内容概要 CSTA协议与标准概述 CSTA OpenScape 语音架构概述 2. CSTA协议标准 2.1. 什么是CSTA ? CSTA:电脑支持通讯程序(Computer Supported TelecommunicationsApplications) 基本的呼叫模型在1992建立,后来随着行业发展,呼叫模型也被加强和扩展,例如新的协议等等 CSTA是一个应用层接口,用来监控呼叫,设备和网络 CSTA创建了一个通讯程序的抽象层: CSTA并不依赖任何底层的信令协议 E.g.H.323,SIP,Analog,T1,ISDN,etc. CSTA并不要求用户必须使用某些设备 E.g.intelligentendpoints,low-function/stimulusdevices,SIPSignalingmodels-3PCC vs. Peer/Peer 适用不同的操作模式 第三方呼叫控制 一方呼叫控制 CSTA的设计目标是为了提高各种CSTA实现之间的移植性 规范化呼叫模型和行为 完成服务、事件定义 规范化标准 3. CSTA 标准的进化史 阶段1 (发布于 June ’92) 40 特性, 66 页 (服务定义) 专注于呼叫控制 阶段2 (发布于 Dec. ’94) 77 特性, 145 页 (服务定义) I/O & 语音单元服务, 更多呼叫控制服务 阶段3 - CSTA Phase II Features & versit CTI Technology 发布于 Dec. ‘98 136 特性, 650 页 (服务定义) 作为ISO 标准发布于 July 2000 发布 CSTA XML (ECMA-323) June 2004 发布 “Using CSTA with Voice Browsers” (TR/85) Dec....

2018-01-29 21:35:24 · 1 min · Eddie Wang

组织在召唤:如何免费获取一个js.org的二级域名

之前我是使用wangduanduan.github.io作为我的博客地址,后来觉得麻烦,有把博客关了。最近有想去折腾折腾。 先看效果:wdd.js.org 如果你不了解js.org可以看看我的这篇文章:一个值得所有前端开发者关注的网站js.org 1. 前提 已经有了github pages的一个博客,并且博客中有内容,没有内容会审核不通过的。我第一次申请域名,就是因为内容太少而审核不通过。 2. 想好自己要什么域名? 比如你想要一个:wdd.js.org的域名,你先在浏览器里访问这个地址,看看有没有人用过,如果已经有人用过,那么你就只能想点其他的域名了。 3. fork js.org的项目,添加自己的域名 1 fork https://github.com/js-org/dns.js.org 2 修改你fork后的仓库中的cnames_active.js文件,加上自己的一条域名,最好要按照字母顺序 如下图所示,我在第1100行加入。注意,不要在该行后加任何注释。 "wdd": "wangduanduan.github.io", 3 commit 4. 加入CNAME文件 我是用hexo和next主题作为博客的模板。其中我在gh-pages分支写博客,然后部署到master分支。 我在我的gh-pages分支的source目录下加入CNAME文件, 内容只有一行 wdd.js.org 将博客再次部署好,如果CNAME生效的话,你已经无法从原来的地址访问:wangduanduan.github.io, 这个博客了。 5. 向js.org项目发起pull-request 找到你fork后的项目,点击 new pull request, 向原来的项目发起请求。 然后你可以在js-org/dns.js.org项目的pull requests看到你的请求,当这个请求被合并时,你就拥有了js.org的二级域名。

2018-01-29 18:08:03 · 1 min · Eddie Wang

不常用却很有妙用的事件及方法

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

2018-01-29 14:15:25 · 1 min · Eddie Wang

油猴子脚本 - 我的地盘我做主

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

2018-01-29 13:58:37 · 1 min · Eddie Wang

追本溯源:substr与substring历史漫话

引子: 很多时候,当我要字符串截取时,我会想到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....

2018-01-29 13:46:31 · 1 min · Eddie Wang

熟练使用使用jQuery Promise (Deferred)

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

2018-01-29 13:43:23 · 1 min · Eddie Wang