话题
袁飞翔
怎么复现这个问题 [http://7tszky.com1.z0.glb.clouddn.com/FtVFnlJyJv3xcApUwBhvHqu9dy3G] 1、首先随意的滑两次,每次滑长一些,不用滑重(碎屏就不好了~~) 2、再点击一次,之后立刻停住~ o, no 你肯定在我说停住之后再点了一下,你觉得你并没有点到~ 反复试几次仔细发现,原来是要点两次! 为什么会这样 ZEPTO 发出YOU TAP ME的嚎叫可以用下面代码归纳 $(document) .on('touchstart', function() { // 打酱油 }) .on('touchmove', function() { deltaX += XXX; deltaY += XXX; }) .on('touchend', function() { if (deltaX < 30 >> deltaY < 30) { // you tap me ...显示全部
3 年前发表 1651次浏览 1条评论 0次收藏
梁伟盛 HTML&h5
据说本贵族圈每月不分享就邀请雪糕。。。所以分享下一个简单的Canvas插件 Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像,你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。 (反正就是好东西) 既然是HTML5的特性,那必须是只有支持HTML5的浏览器才能使用,兼容性如下图: [http://7tszky.com1.z0.glb.clouddn.com/Fv-2A9lFuKVQqWrj-HmNoL77JD-2] -------------------------------------------------------------------------------- 使用到的API 参考资料~W3School [http://www.w3school.com.cn/tags/html_ref_canvas.asp] BEGINPATH 定义:开始一条路径,或重置当前的路径。 context.beginPath(); ...显示全部
3 年前发表 2781次浏览 3条评论 0次收藏
vienwu 移动开发
使用cocos2d-js版开发跨平台手游非常简单,并且在手机端也拥有不错的性能。但因为推出时间并不够久,用户也不够多,项目里仍然存在不少bug,这里介绍一个常见的bug和个人解决方案。 大段中文文字无法自动换行并且在不同终端行为不一致的BUG修复 这个bug具体表现为,js版的cc.LabelBMFont类实现存在缺陷。 该类中,判断是否自动换行时,首先检测字符是否结束或者是否存在空格,满足条件后才会换行。 当字符串为英文时,此逻辑可以良好执行,但面对中文时就不能正常处理了。 理论上,在 cocos2d-html5/cocos2d/labels/cclabelbmfont.js 大约736行 if (!self._lineBreakWithoutSpaces) { 应该判断是否为中文,或者在后续的寻找空格逻辑中,增加寻找中文的判断。 其次,cocos2d-js在手机端执行时,会将js代码编译为jsb字节码,调用的cc.LabelBMFont类是c++实现的,并且该类实现的算法和web端的实现不同,导致字体大小、换行行为不一致,尤其在单独控制某个文本字符颜色时,定位某个文本的索引都会不同。 ...显示全部
3 年前发表 2016次浏览 0条评论 0次收藏
yangchunwen 调试
Object.observe 是一个提供数据监视的API,在chrome中已经可以使用。是 ECMAScript 7 的一个提案规范,官方建议的是“谨慎使用”级别,但是个人认为这个API非常有用,例如可以对现在流行的MVVM框架作一些简化和优化。虽然标准还没定,但是标准往往是滞后于实现的,只要是有用的东西,肯定会有越来越多的人去使用,越来越多的引擎会支持,最终促使标准的生成。 可以做什么 从observe字面意思就可以知道,这玩意儿就是用来做观察者模式之类的东东。 简单地说,就是观察一个对象的变化,在被观察者变化时作出一些回调。 实际应用中,可以优化数据模型(model)和网页试图(view)的双向绑定。 语法 语法很简单: Object.observe(obj, callback) objobj就是你要监听的数据模型(例如一个ajax接口对应的数据) callbackcallback就是数据模型变化后触发的回调(例如网页视图的变化) callback函数的参数形式 * name: 被修改的属性名称 * object: 修改后该对象的值 ...显示全部
3 年前发表 2107次浏览 0条评论 0次收藏
莫卓颖 性能
随着 互联网的蓬勃发展,并且伴随着产品功能的越来越复杂,对于技术人员来说最大的挑战就是如何在保证业务快速发展的同时,也可保证不断复杂的业务对用户体验的影响,其中对用户来说最重要的体验指标是如何快速、稳定的访问业务网站以及产品功能,既是网站的性能。本系列文章将会从前后端性能指标定义、性能工具使用、产品业务核心性能指标、前后端性能解决方案出发对这个性能优化体系进行完整的阐述。 建议阅读人群: 前端工程师、后端工程师、产品经理 ###核心性能定义介绍: 由于涉及前后端的性能指标、定义非常多,本文将重点介绍对前后端影响比较大的指标,让大家对性能优化的核心指标有个整体的认识与了解 ####后端性能定义 * DNS时间 :用户在浏览器输入网址名称(网址)后,浏览器通过查询DNS服务器所需要的时间 * 建立连接时间 :根据TCP协议要求,请求方(浏览器等)与接受方(服务器)经过一系列协商所需要的时间 * 服务器处理时间 :接收方(服务器)处理请求所需时间 * 数据传输时间 :从请求方(浏览器等)到接收方(服务器)以及从接收方(服务器)到请求方的时间 ####前端性能定义: ...显示全部
3 年前发表 1534次浏览 0条评论 0次收藏
vienwu 性能
-------------------------------------------------------------------------------- react是facebook推出一个用来构建用户界面的js库。官方介绍的三大特性如下: JUST THE UI 把react只当作一个ui组件就好,等同于传统mvc中的view。 VIRTUAL DOM react在编程模型和传统dom之间添加了一层,称之为虚拟dom。好处非常多,性能更好,可以在node环境下完成渲染(解决seo问题),可以更好的用于开发native apps。 DATA FLOW 反应式的单向数据绑定,比传统数据绑定更简单,简单的使用js事件触发改变组件状态也可以实现双向绑定的效果。 什么是ANGULARJS angularjs是google推出的一个前端js框架,面世已有几年时间,非常成熟,目前已经有非常多的第三方模块,基本上可以解决前端工程领域的各方面的问题。网上的资料也非常多,这里就不做过多介绍。 REACTJS和ANGULARJS ...显示全部
3 年前发表 4220次浏览 2条评论 0次收藏
袁飞翔 构建工具
先是环境:在windows上用VMware安装了ubuntu,用ubuntu运行终端。可以用VMware文件共享、网络文件共享、nginx、ftp实现两个操作系统的文件共享 linux主目录配置文件保存在github: https://github.com/feix760/yuan [https://github.com/feix760/yuan] 如果换一台电脑,我只需要git clone --recursive myGithubPath 就可以拿到以前的配置文件 vim的插件可以用 Bundle [https://github.com/gmarik/Vundle.vim] 来管理,只要在.vimrc用 Plugin 'XXX' 指明需要的插件,随后用 :PluginInstall 自动安装新插件 下面是我的 .vimrc [https://github.com/feix760/yuan/blob/master/.vimrc] 插件配置的部分,随后介绍各个插件的用途 set nocompatible filetype off ...显示全部
3 年前发表 2602次浏览 2条评论 0次收藏
袁飞翔 调试
* chrome.webRequest.XXX 用于网络流量的统计监控、修改请求和响应 * chrome.proxy.XXX 用于代理的管理 抓包的时候偶尔会遇到返回的json串在prevew窗口不能显示成对象的形式,如下:[http://7tszky.com1.z0.glb.clouddn.com/FhUppfp7BdyIvNdls0qg_ZbEyayH] 理想的:[http://7tszky.com1.z0.glb.clouddn.com/Fm6v9MKysbCYINkvPSwH-Q8UZ8I7] 这种情况是响应头content-type不正确造成的,可以使用chrome.webRequest.onHeadersReceived.addListener() 修改响应头 相应的可以用chrome.webRequest.onBeforeSendHeaders.addListener()修改请求头 ...显示全部
3 年前发表 1982次浏览 1条评论 0次收藏
yangchunwen 性能
HTTP协议是前端性能乃至安全中一个非常重要的话题,最近在看《web性能权威指南(High Performance Browser Networking)》,把其中关于HTTP部分的内容拿出来分享一下,加了一点自己的想法,当然没有《HTTP权威指南》讲得详细,但对于理解我们平常做的事情很有启发。预计会有两三篇文章,重点分别会涉及到HTTP 1.1、HTTPS、HTTP 2.0等内容,本篇主要涉及HTTP 1.1及其应用。 HTTP的历史 HTTP 0.9 HTTP的第一个版本被官方称为HTTP0.9,这是个只有一行的协议,例如: GET /about/ (超文本响应……) (连接关闭……) HTTP 0.9有几个要点: * 客户端/服务器、请求/响应协议 * ASCII 协议,运行于TCP/IP链接之上 * 设计用来传输 超文本 文档(HTML) * 服务器与客户端之间的连接在每次请求之后都会 关闭 这个版本的HTTP主要用来传输 文本 ,并且没有共用TCP连接。 HTTP 1.0 一个典型的HTTP 1.0请求过程如下: ...显示全部
3 年前发表 3020次浏览 3条评论 0次收藏
袁飞翔 调试
从 https://developer.chrome.com/devtools/docs/remote-debugging [https://developer.chrome.com/devtools/docs/remote-debugging] 我们可以知道在android 4.4+可以通过在apk中使用下面的代码开启webview的chrome远程调试 WebView.setWebContentsDebuggingEnabled(true); 但我们开发中接触的apk往往是第三方的,没谁会为我们开启webContentsDebuggingEnabled。而Xposed能强制做到这一点 XPOSED [HTTPS://GITHUB.COM/ROVO89/XPOSEDBRIDGE/WIKI/DEVELOPMENT-TUTORIAL] Xposed能够勾住(Hook) Android应用程序对象的方法,实现AOP,一个简单的例子: publicclass WebViewHook implements IXposedHookLoadPackage { ...显示全部
3 年前发表 3349次浏览 4条评论 1次收藏
vienwu 调试
这篇是前段时间总结给自己备忘的,要用到的工具实在太多,没法一一记住。作为一个测试的工具,会用就好了。 所以这里稍微做了一些修改,简单介绍一下常用的写法和命令,其次将之前的一些示例改成javascript版本,方便没有coffee基础的同学浏览。 介绍 mocha是一个拥有丰富功能的javascript测试框架,可以用于nodejs和浏览器。支持同步/异步测试用例,有多种报告形式。 官网介绍了很多的特性,个人感觉实用的就几点,一个是nodejs和浏览器都可以用,不用再记那么多奇怪的api和写法了。其次是编写同步/异步测试用例非常简单。 安装 $ npm install mocha -g 成功安装后就可以使用 mocha 命令了。 使用 运行 ./test/ 目录所有js $ mocha 指定js文件 $ mocha xxx.js 监听文件变化 $ mocha xxx.js -w 指定coffee编译 for coffescript 1.6 $ mocha --compilers coffee:coffee-script test.coffee for coffeescript 1.7+ ...显示全部
3 年前发表 2312次浏览 0条评论 0次收藏