月份:2018年9月

Gmail 中可使用的搜索运算符,Search operators you can use with Gmail

您可以使用被称为搜索运算符的字词或符号来过滤 Gmail 搜索结果,也可以结合使用运算符来进一步过滤搜索结果。 如何使用搜索运算符 转至 Gmail。 在搜索框中输入搜索运算符。 可使用的搜索运算符 提示:您使用搜索运算符执行搜索后,可以利用搜索结果为这些邮件设置过滤器。 搜索条件 搜索运算符和示例 指定发件人 from: 示例:from:amy 指定收件人 to: 示例:to:david 主题行中的字词 subject: 示例:subject:dinner… Read More

Chrome设置断点的各种姿势, js断点调试心得, Chrome DevTools 中调试 JavaScript 入门

在JavaScript代码中设置断点 刚工作时被leader安利了Chrome浏览器,那时一说到调试,就知道这一个操作 以为在行号上单击一下就是打断点,就是会调试了:) 当然这也是最最基本的打断点的方式了,当然了,相较于 调试全靠alert 已经高端很多了。 首先需要打开Devtools切换到Source页签,然后在左侧file navigation中找到我们要设置断点的文件并打开。 在打开的页面上单击对应的行号即可设置断点。 同时也可以通过在行号上右键点击Add breakpoint来设置断点。 当断点触发时,整个页面会处于暂停状态,并会切换到Source页签断点处方便调试,直到终止该断点调试后页面才会继续运行。 设置断点的行号上会显示一个蓝色的矩形来告诉你这里有一个断点。 P.S. 当一个表达式跨行时,添加的断点会默认下移到该表达式结束后的一行 在JavaScript代码中设置条件断点 当知道了如何在行号上单击来添加断点,已经能满足最最最基本的调试了。 但如果遇到一些特殊情况,断点添加起来不是那么的舒服的时候要肿么办呢? 比如说我写了一个循环,该循环会执行10次,可是我发现程序在第8次执行时的结果并不是我想要的。(不禁回想起刚工作时,有类似的问题,我当时的处理方式就是一手托腮,另一只手放在F8键上,狂按数十下后正襟危坐,开始调试) 显然,Chrome已经帮我们想到了这种场景,我们可以通过添加一些条件断点来避免一些无意义的断点。… Read More

jQuery事件系统详解

我们习惯理所当然的使用jQuery提供的高级事件API,jQuery帮我们处理了事件注册机制在各个浏览器间的兼容性,帮我们实现了高级的事件委托机制,大大的提高了我们的工作效率;然而我从来都不是一个知其然不知其所以然的工程师,你是否一样?如果你同样对其实现细节感兴趣,请仔细阅读本文。本文不涉及jQuery提供的自定义事件。 我将本文组织为如下结构: 1.使用原生API有什么问题 2.大牛是如何解决的 3.jQuery的实现 1. 使用原生API有什么问题 (1) 最原始的方法是直接对dom元素的onclick、onmouseover等属性赋值一个函数: Element.onclick = function(){ //event handler logic }; 然而这种方式一次只能添加一个事件处理函数,不具有通用性。 (2) 对于符合最新W3C标准的浏览器(IE>8,chrome,firefox,android)可以使用element.addEventListener,将事件类型作为一个参数传递。 element.addEventListener(‘click’,function(){… Read More

jQuery: 事件触发器trigger, 事件模型, 默认行为执行顺序, Native click won’t be triggered by jQuery

一般来讲,直接 trigger 一个 a 标签的 click 事件是不被浏览器允许的,正常情况下都是由用户的 click 事件来触发一个「点击动作」,在这个「动作」中,我们可以调用触发其他的 click 事件,就好像用户点在了其他的标签上。按照长期使用 jQuery 的思路,一般就会直接使用下面的方式来触发: $('a').click(); 或者是: $('a').trigger('click'); 很遗憾的是,这样是不行的,jQuery 并不会为 a 标签提供 … Read More

原生替代jQuery, You Don’t Need jQuery

前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10 以上浏览器。 Query Selector… Read More

单点登录原理与简单实现, 单点登录的三种实现方式

单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任。单点登录在大型网站里使用得非常频繁,例如像阿里巴巴这样的网站,在网站的背后是成百上千的子系统,用户一次操作或交易可能涉及到几十个子系统的协作,如果每个子系统都需要用户认证,不仅用户会疯掉,各子系统也会为这种重复认证授权的逻辑搞疯掉。实现单点登录说到底就是要解决如何产生和存储那个信任,再就是其他系统如何验证这个信任的有效性,因此要点也就以下两个: 存储信任 验证信任 如果一个系统做到了开头所讲的效果,也就算单点登录,单点登录有不同的实现方式,本文就罗列我开发中所遇见过的实现方式。 以Cookie作为凭证媒介 最简单的单点登录实现方式,是使用cookie作为媒介,存放用户凭证。 用户登录父应用之后,应用返回一个加密的cookie,当用户访问子应用的时候,携带上这个cookie,授权应用解密cookie并进行校验,校验通过则登录当前用户。 不难发现以上方式把信任存储在客户端的Cookie中,这种方式很容易令人质疑: Cookie不安全 不能跨域实现免登 对于第一个问题,通过加密Cookie可以保证安全性,当然这是在源代码不泄露的前提下。如果Cookie的加密算法泄露,攻击者通过伪造Cookie则可以伪造特定用户身份,这是很危险的。 对于第二个问题,更是硬伤。 通过JSONP实现 对于跨域问题,可以使用JSONP实现。 用户在父应用中登录后,跟Session匹配的Cookie会存到客户端中,当用户需要登录子应用的时候,授权应用访问父应用提供的JSONP接口,并在请求中带上父应用域名下的Cookie,父应用接收到请求,验证用户的登录状态,返回加密的信息,子应用通过解析返回来的加密信息来验证用户,如果通过验证则登录用户。 这种方式虽然能解决跨域问题,但是安全性其实跟把信任存储到Cookie是差不多的。如果一旦加密算法泄露了,攻击者可以在本地建立一个实现了登录接口的假冒父应用,通过绑定Host来把子应用发起的请求指向本地的假冒父应用,并作出回应。 因为攻击者完全可以按照加密算法来伪造响应请求,子应用接收到这个响应之后一样可以通过验证,并且登录特定用户。 通过页面重定向的方式… Read More

十年程序员用眼告诉你 2018 PHP 不一样

PHP从诞生到现在已经有20多年历史,从Web时代兴起到移动互联网退潮,互联网领域各种编程语言和技术层出不穷, Node.js 、GO和Python不断地在挑战PHP的地位。这些技术的推动者非常热衷于唱衰PHP,PHP语言的未来在哪里?PHP程序员当如何应对未来的变革? 作为老牌的Web后端编程语言,PHP在全球市场占有率非常高,仅次于Java,从各个招聘网站的数据上来看PHP开发的职位非常多,薪资水平也非常不错。实际在中小企业、互联网创业公司PHP的市场地位是高于Java的。Java在超大型企业、传统软件行业、金融领域优势更大。目前来看 Node.js、 GO 、 Python 、 Ruby 等语言还难以企及PHP和Java。 PHP语言之所以能有今天的地位,得益于PHP语言设计者一直遵从实用主义,将技术的复杂性隐藏在底层。PHP语言入门简单,容易掌握,程序健壮性好,不容易出现像Java 、 C++ 等其他语言那样复杂的问题,如内存泄漏和 Crash,跟踪调试相对轻松很多。 PHP官方提供的标准库非常强大,各种功能函数都能在官方的标准库中找到,包括MySQL、Memcache、Redis、GD图形库、CURL、XML、JSON等等,免除了开发者到处找库的烦恼。PHP 的文档非常棒,每个函数都有详细的说明和使用示例。第三方类库和工具、代码、项目也很丰富。开发者可以快速、高效地使用PHP编写开发各类软件。 到目前为止市面上仍然没有出现比PHP更简单易用的编程语言。所以PHP的前景还是很广阔的,与其纠结于编程语言的选择,不如好好地深入学习使用PHP 。… Read More

BAT出品的这10个工具,每个都很良心的不得了

  腾讯出品 1:腾讯设计导航 http://idesign.qq.com 腾讯设计导航是腾讯出品的一个良心工具,是腾讯内部设计师使用的设计网站。 它上面精选了很多精品网站,素材网站,包括:图库导航,设计工具导航,字体资源导航等等工具。 2:腾讯智图 https://zhitu.isux.us/ 腾讯智图是腾讯ISUX前端团队出品的一个专门用于图片压缩和图片格式转换的平台,其功能包括针对png,jpeg,gif等各类格式图片的压缩。 3:腾讯AI体验中心 腾讯AI体验中心是腾讯出品的一个黑科技小程序。 它支持很多黑科技功能,它支持身份证OCR,名片OCR,人脸识别,图片特效,图片识别;它支持语音合成,语音识别。 这款小程序拥有几十种黑科技功能,每一种功能都是十分好用。 4:QQ影音 QQ影音是腾讯出品的一款个人认为很良心视频播放器,支持电脑版本,手机版本。 它的电脑版本支持很多实用功能,包括视频截取,视频截取GIF,视频压缩,视频合并,视频转码,视频传输,视频共享,可以说功能十分齐全。 它的手机版本支持和电脑版本传输视频。 百度出品 5:百度脑图 http://naotu.baidu.com/… Read More

jQuery 插件: 识别浏览器, 判断浏览器类型和版本, browser detection

项目地址:https://github.com/gabceb/jquery-browser-plugin CDN下载:https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js 用法: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script> 判断 IE ,返回 true 或者 false,支持所有IE浏览器,包括IE 11 $.browser.msie; 判断 WebKit 浏览器 (Safari, Chrome… Read More