- 博客(163)
- 收藏
- 关注
RSS订阅原创 用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
系列简介也许，三百年前的艾萨克·牛顿爵士(Sir Issac Newton, 1643-1727)并没幻想过，物理学广泛地应用在今天许多游戏、动画中。为什么在这些应用中要使用物理学？笔者认为，自我们出生以来，一直感受着物理世界的规律，意识到物体在这世界是如何"正常移动"，例如射球时球为抛物线(自旋的球可能会做成弧线球) 、石子系在一根线的末端会以固定频率摆动等等。要让游戏或动画中的物体有真实...
2017-09-16 22:28:29
858
原创 Calculate distance, bearing and more between
This page presents a variety of calculations for latitude/longitude points, with the formulæ and code fragments for implementing them.All these formulæ are for calculations on the basis of a sphe...
2017-03-13 15:36:23
1034
原创 30分钟掌握ES6/ES2015核心内容
ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015。虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6，但为了看懂别人的你也该懂点ES6的语法了...在我...
2017-01-09 11:21:54
204
原创 requirejs、require方法冲突
如果加载了多个requirejs脚本，每个requirejs会判断是否浏览器已经实现了require和define方法。如果浏览器已经自带require和define方法，或者之前已经有一个requirejs脚本执行，那么这个requirejs就会立刻停止执行。所以，即使页面上加载了多次requirejs脚本也不会有什么问题。配置Context我把context叫做一个命名空间，因为每...
2016-12-21 18:10:10
2101
原创 谈谈使用 promise 时候的一些反模式
本文翻译自 We have a problem with promises，为原文题目重新起了一个题目并且对原文有删改。各位 JavaScript 程序员，是时候承认了，我们在使用 promise 的时候，会写出许多有问题的 promise 代码。 当然并不是 promise 本身的问题，A+ spec 规范定义的 promise 非常棒。 在过去的几年中，笔者看到了很多程序员在调用...
2016-11-25 15:20:22
166
原创 HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
HTML5 Canvas中提供了实现图形平移，旋转，放缩的API。 平移(translate) 平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y)，原来的(0,0)坐标则变成(-x, -y) 图示如下： 任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移 点坐标translate(x, y)...
2016-11-23 12:11:37
1087
原创 移动端H5页面高清多屏适配方案
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：1）首先，选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480，现在更多的是iphone6的375×667)。2）...
2016-11-17 08:35:52
160
原创 使用Flexible实现手淘H5页面的终端适配rem自适应布局-移动端自适应必备
曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配？那么趁此Amfe阿里无线前端团队双11技术连载之际，用一个实战案例来告诉大家，手淘的H5页面是如何实现多终端适配的，希望这篇文章对大家在Mobile的世界中...
2016-11-03 23:52:57
289
原创 CSS3的calc()使用
calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。因为看其外表像个函数，既然是函数为何又出现在CSS中呢？这一点也让我百思不得其解，今天有一同事告诉我，说CSS3中有一个属性能实现自适应的布局，首先让我想到的是box-sizing，但跟我说还可以计算，这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍，但一直没有深入，也没有自己去测试过。今天花了...
2016-11-03 21:51:38
131
原创 CSS3的REM设置字体大小
在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EM优点多，还有人在说百分比方便，以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是，仍然有不同的利弊，使各种技术都不太理想，但又无法不去用。真是进也难，退也难呀。最近在学习em的相关知识的时候，无意之间让我拾得一宝，就...
2016-11-03 21:50:53
104
原创 JavaScript Promises 相当酷
And when I promise something, I never ever break that promise. Never.” ― Rapunzel许多的语言，为了将异步模式处理得更像平常的顺序，都包含一种有趣的方案库，它们被称之为promises，deferreds，或者futures。JavaScript的promises ，可以促进关注点分离，以代替紧密耦合...
2016-09-02 18:53:30
131
原创 【Leafletjs】5.L.Control 自定义一个Control
L.Control所有leaflet控制的基础类。继承自IControl接口。 你可以这样添加控件:control.addTo(map);// the same asmap.addControl(control);构造器构造器使用描述L.Control( <Control options> options? )new L.Control...
2016-08-20 17:48:24
407
原创 Leaflet API 翻译(下)
L.Point显示以像素为单位的点的x，y坐标。所以接受点对象的leaflet方法和选项都也接受他们简单数组的形式。Constructor（函数构造器）L.Point()：用给定点的x和y坐标来创建点对象。如果round设置为true，则将x和y的值转换为圆中。？Properties（属性）x：x坐标。y：y坐标。Methods（...
2016-08-19 12:52:48
531
原创 Leaflet API 翻译(上)
L.MapAPI各种类中的核心部分，用来在页面中创建地图并操纵地图。Constructor（构造器）通过div元素和带有地图选项的描述的文字对象来实例化一个地图对象，其中文字对象是可选的。Options（选项）Map State Options（地图状态选项）centre（中心）：初始化地图的地理中心。zoom（缩放）：初始化地图的缩放...
2016-08-19 12:51:53
255
原创 使用 Electron 构建桌面应用
作者：kmokidd链接：https://zhuanlan.zhihu.com/p/20225295来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。译者注：前一段时间有过关于NW.js 的翻译，有兴趣的朋友可以一起读来看看。另，译者尚未实践本教程，预计将在下周使用新Mac实践。若在此之前有朋友踩坑，请通知译者，译者将在实践后更改之。使用 JavaScrip...
2016-08-19 12:47:42
527
原创 Electron指南 - 快速入门
快速入门Electron提供了丰富的本地（操作系统）的API，使你能够使用纯JavaScript来创建桌面应用程序。与其它各种的Node.js运行时不同的是Electron专注于桌面应用程序而不是Web服务器。这并不意味着Electron是一个绑定图形用户界面（GUI）的JavaScript库。取而代之的是，Electron使用Web页面作为它的图形界面，所以你也可以将它看作是一个由Ja...
2016-08-19 12:32:59
185
原创 键盘按键事件的fireEvent
最近代码中有个功能需要用到手动触发键盘事件的功能，咱们的现有库对fireEvent的实现还比较单一，对键盘事件没有作支持，就自己封了一个。但键盘事件的fire在各浏览器下实现不一样，下面分别说明一下：1. IE下没什么问题，创建事件对象、对对象的keyCode属性赋值，然后再抛出来就行了：evtObj = document.createEventObject();...
2016-06-08 11:24:12
871
原创 web开发之字体应用
摘要： font-family，这是一个很容易被忽视的环节，却直接影响了网站的体验。 本文不谈技术细节，只说设计准则。 1.使用英文名 尽量不要使用下面的声明方式： font-family: "华文细黑", "微软雅黑";直接用中文名有可能会出现支持性问题，在编辑器之间切换还有可能乱码。中文字体其实也...font-family，这是一个很容易被忽视的环节，却直接影响了网站的体验。本...
2016-06-03 17:21:22
247
原创 使用 RequireJS 优化 Web 应用前端
使用 RequireJS 优化 Web 应用前端基于 AMD（Asynchronous Module Definition）的 JavaScript 设计已经在目前较为流行的前端框架中大行其道，jQuery、Dojo、MooTools、EmbedJS 等纷纷在其最新版本中加入了对 AMD 的支持。本文介绍的是另一款较为精简的 RequireJS 框架，既想使用 AMD 的...
2016-05-27 16:29:35
101
原创 使用Leaflet创建地图拓扑图
摘要 之前我们采用过Openlayers+Qunee的方案，实现地图拓扑图，鉴于Openlayers是一个古老项目，略显臃肿，对于现代的前端地图应用，显得笨重，在客户的介绍下，我们找到了leaflet – 基于HTML5的轻量地图客户端方案，结合Qunee使用，以及第三方插件，实现更加轻快的地图拓扑图应用leaflet qunee 地图 拓扑图目录[-]官方示例...
2016-05-27 15:49:31
977
1
原创 【Leafletjs】L.Map 中文API
目录(?)[-]LMap使用 example构造器OptionsMap State OptionsInteraction OptionsKeyboard Navigation OptionsPanning Inertia OptionsControl optionsAnimation optionsEvents地图状态修改获取地...
2016-05-27 15:35:11
387
原创 coordtransform 坐标转换
一个提供了百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换的工具模块另外还提供了python版本的代码https://github.com/wandergis/coordTransform_py支持node、浏览器（AMD方式和直接引用方式）GitHub地址：https://github.com/wandergis/coordtransfor...
2016-05-25 16:19:48
3452
原创 jetbrains系列IDE VMoptions 优化指南
jetbrains 系列IDE 是用java写的 佷吃内存 特别是你的项目目录很多很深的时候 例如 npm install --save很多包的时候 还会卡死优化 其实就是利用Java的各种运行命令 来对程序进行优化现在 让我们来看看 Java有哪些可以被我们使用的命令bash 下输入Ps:环境osx10.11.4 + java v1.8.0_92-b14java...
2016-05-23 16:39:12
1260
原创 gulp使用小结
这篇文章不会介绍 gulp 的起源、发展；不会去一个个讲解 gulp API；也不想出现大段大段的 gulpfile.js 代码；更木有帮你分析 gulp 实现原理，只有一些我自己对 gulp 的使用理解和总结。如何通过 gulp 让偶们的前端项目高大上的跑起来？gulp 能做什么，还能做什么？gulp套路能不能来几套？... 希望通过这篇文章你会找到答案写作风格的原因，劳资写的...
2016-05-22 19:02:33
169
原创 用gulp做一个略完整的前端打包工作
我们的官网要改版，会从以前的单一产品变成系列产品的官网，也就是现在的官网会是之后官网的一个子模块。趁着这个机会，正好重新梳理了一下结构。加上罪恶之主管的一些要求，具体的需求如下：分模块，每个模块都有独立的页面和静态文件，并将所有静态文件打在一个文件夹下，一些常用变量可以进行替换，并可进行简单的页面动态生成，生产环境打包与线上环境打包分开进行，静态文件进行压...
2016-05-22 18:59:42
558
原创 前端神器avalonJS入门
本章将介绍如何使用avalon来实现前端路由功能。我们需要用到两个avalon路由配套模块—— mmHistory.js 和 mmRouter.js 。其中mmHistory是用于历史管理，它会劫持页面上所有点击链接的行为，当这些链接是以 #/ 、 #!/ 开头，就尝试匹配路由规则，阻止页面刷新 （通过hash方式或HTML5的replaceState方式） 。mmRouter是给我们定义...
2016-05-19 19:32:17
308
原创 gulp教程之gulp-imagemin
简介：使用gulp-imagemin压缩图片文件（包括PNG、JPEG、GIF和SVG图片）1、安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件1.1、gulp基本使用还未掌握？请参看： gulp详细入门教程1.2、本示例目录结构如下：2、本地安装gulp-imagemin2.1、github：ht...
2016-05-07 14:44:43
332
原创 给Webstorm的HTML自动压缩插件
前端代码的压缩前端的js、css、html的压缩不仅会让网页加载更快一些，在移动互联网的今天省流量也成为了一大好处。google的Closure就是一个JS压缩工具（google暂时好像没有css压缩工具），还有雅虎的 YUI Compressor 它是JS/CSS压缩工具。它们都是用java写的工具，用起来就是一行命令，类似于：java -jar yui.jar --type cs...
2016-05-07 14:20:14
769
原创 gulp教程之gulp中文API
http://www.ydcss.com/ 简介：本文主要翻译gulp官方API，加上自己一点点拙解。gulp API docs1、gulp.src(globs[, options])1.1、说明：src方法是指定需要处理的源文件的路径，gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，gulp.src返回当前文件流至可用...
2016-05-07 13:44:33
125
原创 gulp详细入门教程
简介：gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文...
2016-05-07 13:00:05
122
原创 HTML5 Boilerplate - 让页面有个好的开始
一：HTML5 Boilerplate是什么？解决了什么问题？对于第一次听说这个人，肯定都有这个疑问把！在网上看了看，发现很多人都认为这个是和Bootstrap一样的东西，这真是大错特错了。实际上，HTML5 Boilerplate只是一个单纯的HTML模版。什么？HTML模版？干嘛用？这里不得不提所有前端开发都会遇到的问题，每次要重新弄一个页面的时候，你们都是怎么做的呢？那个d...
2016-04-20 19:08:50
126
原创 来，让我们谈一谈 Normalize.css
本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已...
2016-04-20 19:07:12
106
原创 Websocket出现的错误
前端使用sockjs，后台使用spring的websocket框架结果在一个网络较慢的地方，发现tomcat报错信息：Oct 28, 2015 10:10:43 AM org.apache.catalina.core.StandardWrapperValve invokeSEVERE: Servlet.service() for servlet [mvc-dispatcher...
2016-04-06 10:49:20
2614
原创 GPS坐标互转：WGS-84(GPS)、GCJ-02(Google地图)、BD-09(百度地图)
WGS-84：是国际标准，GPS坐标（Google Earth使用、或者GPS模块）GCJ-02：中国坐标偏移标准，Google Map、高德、腾讯使用BD-09：百度坐标偏移标准，Baidu Map使用//WGS-84 to GCJ-02GPS.gcj_encrypt();//GCJ-02 to WGS-84 粗略GPS.gcj_decrypt();//GCJ-02 to WGS-84 精确(...
2016-03-21 16:38:29
2068
原创 移动平台的meta标签-----神奇的功效
对于桌面平台web布局中大家对meta标签再熟悉不过了，它永远位于 head 元素内部，对做SEO的朋友一定对meta有种特殊的感情吧，今天我们就来说说移动平台的meta标签，在移动平台meta标签究竟有哪些神奇的功效呢？1、Meta 之 viewport说到移动平台meta标签，那就不得不说一下viewport了，那么什么是viewport呢？viewport即可视区域，对于桌面浏览器...
2016-02-18 10:51:26
73
原创 互联网产品经理都干什么
这几天我梳理了1年以来的工作内容，并将产品经理的工作职责整理出来。按照产品阶段划分，可分为5个方面： 一、市场及用户研究 1.1、市场分析： 发现并掌握目标市场和用户需求的变化趋势，对未来几年市场上需要什么样的产品和服务做出预测; 1.2、竞品分析： 收集竞争对手的资料、试用竞争对手的产品，从而了解竞争对手产品; 1.3、用户研究： 通过定性(用户访谈)...
2016-01-25 16:31:14
122
原创 掌握Tiles 框架---Tiles入门和Tiles 框架和体系结构
入门本教程所讲述的内容本教程讲述如何使用 Tiles 框架来创建可重用的表示组件。（在最初创建它时，Tiles 框架被命名为 Components。 后来改变了名称是因为“components（组件）”代表了太多不同的东西，不过原先的名称的精髓仍然得到了保留。） 然而，除了站点布局之外，使用 tile 还能做其他许多事情。例如，您可以划分表示层以更好地重用布局、HTML以及其他可视组件。...
2016-01-05 19:25:43
256
原创 如何一步步把网站Retina优化
随着高清屏幕、高分辨率屏幕越来越流行，例如MacBook Retina机型、iPad Air系列，这些新生机器有着很高的PPI，对网页的清晰度要求很高，所以越来越多的站长都不得不面临一个问题，那就是把自己的网站做到高分辨率适配 (Retina-Ready)。因为低清的网页在高分辨率屏幕上看起来很糟糕，对用户体验是一个很大的损害。相反，高分辨率适配的网站看起来则更加美观清晰，对用户体验有很大的提高...
2015-12-21 11:21:49
188
原创 GPS坐标互转：WGS-84(GPS)、GCJ-02(Google地图)、BD-09(百度地图)
WGS-84：是国际标准，GPS坐标（Google Earth使用、或者GPS模块）GCJ-02：中国坐标偏移标准，Google Map、高德、腾讯使用BD-09：百度坐标偏移标准，Baidu Map使用 //WGS-84 to GCJ-02GPS.gcj_encrypt(); //GCJ-02 to WGS-84 粗略GPS.gcj_decrypt(); ...
2015-10-26 17:34:56
240
原创 地理空间距离计算优化
1 地理空间距离计算面临的挑战打开美团app，不管是筛选团购还是筛选商家，默认的排序项都是“离我最近”或者“智能排序”（如下图所示）。不管是“离我最近”还是“智能排序”，都涉及到计算用户位置与各个团购单子或者商家的距离（注：在智能排序中距离作为一个重要的参数参与排序打分）。以筛选商家为例，北京地区有5~6w个POI（本文将商家称之为POI），当用户进入商家页，请求北京全城+所有品类+...
2015-09-01 11:20:36
140
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人