随笔分类 -  Javascript

简单配置，让ES6脚本在浏览器里飞
摘要：如果你只是想学习ES6语法，找个地方练习下写法。不想看环境如何搭配，就想简单的学习，那有两种简单的方式。 1、在Chrome浏览器里直接F12调出控制台 2、在浏览器里跑引用ES6的HTML页面 babel-standalone是一个在非Node环境的Babel独立编译，这个非Node环境包括浏览器 阅读全文
posted @ 2017-04-26 16:01 易小亨 阅读(605) 评论(0) 推荐(0)
即将翻译 Building The New Financial Times Web App
摘要：《金融时报》这份Web APP 经验的总结，写得非常详细，也提到Web APP制作中常遇到的问题。为么他们就没有点透Bug - -！Building The New Financial Times Web App (A Case Study)先记录下，未来几天就翻译这篇文章。 阅读全文
posted @ 2014-04-22 22:34 易小亨 阅读(368) 评论(1) 推荐(1)
前端性能利器——dynatrace ajax edition
摘要：因为最近的工作跟性能分析有关系，所以写个小总结。顺带推荐两个我常用的小工具：1、文件对比工具beyond compare，非常好用，对比、修改很简单。当然我只是用的试用版本。google一下官网下载2、绿色版本 FastStone Capture，做视频、截图、取距离、取色，非常非常的方便,配合PS,检查页面元素对齐，绝对一利器！如果你比较懒的话，可以来这下载百度网盘曾经写过这篇文章web性能测试工具推荐，现在就重点说说用dynatrace ajax edition 的体会~~ dynatrace ajax edition 是IE和firefox上的性能监测工具。1、安装我选择了一个版本，你可 阅读全文
posted @ 2014-03-30 23:25 易小亨 阅读(2449) 评论(1) 推荐(1)
前端遇到的跨域问题及解决方案二
摘要：解决不同域之间JS交互问题，有这么几种方法。FIM – Fragment Identitier Messaging不同的域之间，JavaScript只能做很有限的访问和操作，其实我们利用这些有限的访问权限就可以达到跨域通信的目的了。FIM (Fragment Identitier Messaging)就是在这个大前提下被发明的。父窗口可以对iframe进行URL读写，iframe也可以读写父窗口的URL，URL有一部分被称为frag，就是#号及其后面的字符，它一般用于浏览器锚点定位，Server端并不关心这部分，应该说HTTP请求过程中不会携带frag，所以这部分的修改不会产生HTTP请求，但 阅读全文
posted @ 2014-02-03 17:00 易小亨 阅读(416) 评论(0) 推荐(0)
前端遇到的跨域问题及解决方案一
摘要：《JavaScript 高级程序设计》一直断断续续的看这本书，有些地方看了三四遍，有些地方一遍也没有看过。这本书真心是非常不错的书，再随着google些资料，还是受益很多的。昨睡不着，翻了下看看跨域，今又认真搜了下，有跟先前不一样的体会了。工作中遇到的跨域，比如说iframe引用某某盛典的页面，你是没有办法设置高度的~~有嵌套iframe的方法获取高度，但是对方这个页面不是你一家用的，你不能有任何修改，它是不会内嵌什么iframe的。真心没办法解决~~ 有些东西，你是甲方的话，别家提供，基本是采用JSONP方式，约定个函数传递数据，或者是直接链别家的JS文件有全局对象。让我们从书开始吧~Aja 阅读全文
posted @ 2014-02-02 22:58 易小亨 阅读(2875) 评论(0) 推荐(1)
第五章、使用预绘制图片
摘要：你可以添加预先绘制的图像到画布上，如果gif,jpeg,png,svg或者视频的当前帧。默认情况，这样的图片会按照它原本的大小绘制，超过了canvas的部分会被裁剪。但是，你可以指定高度和宽度在其中显示图像，或者图像绘制区域来绘制。你可以用img元素，视频元素，或其他canvas元素做图像源。如果你的image是一个html元素，通过getElementById 把它变成一个javascript对象。你也可以在javascript中创建一个图像源如new Image.本章介绍如何使用通过标签指定的图像。如果你使用gif动画做为图像源，那么只有动画的第一帧被现实，透明度是支持的。当你使用png图 阅读全文
posted @ 2014-01-22 23:29 易小亨 阅读(398) 评论(0) 推荐(0)
第四、渐变和图案
摘要：当你描边或者填充的时候，你用当前的描边或者填充样式。而这可以被设定为一个颜色，一个团或者是渐变。渐变渐变指定起始颜色，结束颜色，以及颜色变换的区域。一个单一的渐变包含一个以上的颜色变化。二位画布上绘图上下文支持两种渐变类型：线性 linear和径向 radial。线性渐变线性渐变定义两点之间颜色沿着一条线变化。 var grad = ctx.createLinearGradient(x1, y1, x2, y2);之后调用CanvasGradient之中唯一的方法addColorStop()来向渐变色中增加至少两个 “颜色停止点”（color stop）。该方法接受两个参数：一个是位于0～1. 阅读全文
posted @ 2014-01-22 23:27 易小亨 阅读(536) 评论(0) 推荐(0)
第三 画曲线
摘要：贝塞尔或者二次方程曲线如果我们需绘制更加复杂的曲线路径，我们或许该用到贝塞尔或者二次方程曲线。bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)quadraticCurveTo(cp1x, cp1y, x, y)两种曲线有何区别？我们可以参看下面这张图，2种曲线都有一个起点和终点（blue point），但是贝塞尔曲线仅有一个“control point”（red point），二次曲线则有2个。两个方法中的x和y参数都为曲线的终点坐标，cp1x和cp1y为第一control point的坐标，cp2x和cp2y为2次曲线的第二控制点。如果你要问起始点呢?那 阅读全文
posted @ 2014-01-22 23:20 易小亨 阅读(545) 评论(0) 推荐(0)
第二、画线和路径
摘要：2d上下文对画矩形，线，曲线，弧线和圆有很多方法。1、 线，曲线和弧线能够在端点链接形成路径。路径可以闭合形成复杂的形状。2、 形状可以沿外边线描边或者是填充3、 你可以设置线和描边的厚度4、 描边和填充可以设置颜色、图案或者是渐变。设置描边和填充样式context.strokeStyle = "black";context.fillStyle = "rgba(128, 128, 128, 0.5)";线或描边的厚度默认是1，也可以通过context.lineWidth="2" 更改线宽。颜色也可以用CSS的方式如"whit 阅读全文
posted @ 2014-01-22 23:09 易小亨 阅读(499) 评论(0) 推荐(0)
第一、介绍Canvas
摘要：canvas能做什么?canvas是HTML5中的新元素，你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。如果你掌握了完整的命令，你可以用canvas创建丰富的web应用程序。如果你想很好的使用canvas，你首先应该很好的掌握javascript。canvas标签当然你也可以通过css来设定！如果你不设定宽高，默认宽高是300*150。对于低版本的浏览器，你把需要反馈的信息放到canvas标签之间。 你想看我，就升级浏览器吧！获取上下文，你所有的绘画操作都是在上下文，目前只支持2d。window.onad=function(){ .. 阅读全文
posted @ 2014-01-22 23:00 易小亨 阅读(695) 评论(0) 推荐(0)
JavaScript的单线程性质以及定时器的工作原理
摘要：前些日子还在网上争论过js动画用setTimeout还是setInterval，个人偏向于setTimeout，当动画中牵扯到ajax时用setInterval会有时间偏差，出现一些问题即使用clearInterval也失效。ok，从基础层面上，对于动画我们要先了解定时器和js的单线程。关于定时器我推荐How JavaScript Timers Work，这篇文章讲解的有深度，你会对定时器和单线程有个深入了解。我们来看下这个文章吧~~var id = setTimeout(fn, delay); - 在delay时间间隔之后，执行函数fn。该函数返回一个唯一的标志ID（Number类型），我们 阅读全文
posted @ 2014-01-22 22:02 易小亨 阅读(395) 评论(0) 推荐(0)