TAT.iAzrael 在浏览器端用JS创建和下载文件
In JavaScript on 2014年01月03日 by view: 62,959
41

前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑、在线代码编辑、iPresst等)。

但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开-》另存为。如下面这个链接:

<a href=”file.js”>file.js</a>

用户点击这个链接的时候,浏览器会打开并显示链接指向的文件内容,显然,这并没有实现我们的需求。

TAT.iAzrael JS计算字符串所占字节数
In JavaScript,Web开发 on 2013年12月31日 by view: 15,251
6

废话不说,直接正题吧。

最近项目有个需求要用js计算一串字符串写入到localStorage里所占的内存,众所周知的,js是使用Unicode编码的。而Unicode的实现有N种,其中用的最多的就是UTF-8和UTF-16。因此本文只对这两种编码进行讨论。

下面这个定义摘自维基百科(http://zh.wikipedia.org/zh-cn/UTF-8),做了部分删减。

UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,可以表示Unicode标准中的任何字符,且其编码中的第一个字节仍与ASCII相容,使用一至四个字节为每个字符编码

D3全称Data-Driven-Documents,这里说的不是暗黑 III,d3是一款可视化js库,其主要用途是用HTML或者SVG生动地展现数据。

相信网站开发者大都接入过ga来分析各种数据,例如pv图。ga的图都是基于SVG的,下面笔者就用d3来一步一步实现类似ga的pv线形图,并假设读者具有一定的SVG基础(没有?没关系,w3school帮你快速上手)。

step1:引入d3.js

github d3下载最新版d3,然后在html代码增加标签

step2:创建SVG容器

margin、width、height定义了svg节点的位置和尺寸,后面会用到。d3.select类似jquery的选择器,并且d3的语法也支持串联调用,append(‘svg’)将svg追加到body的尾部,同时为svg节点设置了宽度和高度值,attr也有get和set两种用法。

svg的g元素类似于div,在这里作为一组元素的容器,后面加入的元素都放在g里面,g可以设置统一的css,里面的子元素会继承可继承css属性。margin和position对g的定位不起作用,只能使用translate通过位移来定位。

step3:定位坐标轴

既然d3是数据驱动的,那必须要有数据啊,没有数据肿么能搞呢。好吧,首先模拟一份数据,就模拟本月的pv数据吧,即12月每天的pv数据,日期采用yy-mm-dd的格式,pv随机一个100以内的整数。

然后定义坐标轴的一些参数

横坐标是日期,这里使用d3.time自动帮我们在时间和字符串之间做转换。y轴使用普通的线性缩放坐标轴。其实这里的x和y也是一个function,后续会用到。
domain规定了坐标轴上值的范围,d3.extent从数组里选出最小值和最大值,d3.max选数组里面最大值。range规定了坐标轴端点的位置,svg的坐标原点是左上角,向右为正,向下为正,而y轴正方向为由下向上,所以(0, height)才是图表的坐标原点。
然后使用d3的axis定制坐标轴

orient有四个参数(left、right、top、bottom)定义了坐标轴的位置,这里很好理解。
ticks定义了坐标轴上除最小值和最大值以外最多有多少个刻度,因为一个月最多有31天,ticks(30)就足以展示每天的刻度了。

然后就可以把坐标轴加进svg容器了

坐标轴

 

step4:画线

有了坐标轴之后我们可以加上图表的主体部分了,pv图应该是一条折线图。怎么加折线呢,d3提供了丰富的图表元素,需要折线只需要append(‘path’)即可,了解svg的都知道,path的d属性是最重要的,决定了折线的“路径”,这里就不详细讲解path了。

我们只有一个数组的数据,怎么转化成需要的d呢,别担心,d3帮我们做了这部分工作。首先需要用d3.svg.line生成一个“线条函数”,然后将数据传给该函数即可生成我们想要的d,我们需要做的就是定制这个“线条函数”的两条坐标轴分别由数据的哪部分决定。

下面看代码

上面的代码很好理解,设置了x坐标轴由date属性决定,y坐标轴由pv属性决定,最后还调用了interpolate,该方法会改变线条相邻两点之间的链接方式以及是否闭合,接受的参数有linear,step-before,step-after,basis,basis-open,basis-closed,bundle,cardinal,cardinal-open,cardinal-closed,monotone,读者可以一一尝试,看看线条有什么不一样。

“线条函数”生成好了,可以应用到path上了

此时的图应该是这样了

 

折线图

 

step5:打点

到这里其实基本的图形已经实现了,只用了应该不到20行代码,不过这也太丑了点吧,而且完全木有交互啊。

别急,ga的pv图在每个数据点都会有一个小点来占位,其实本来我们的数据就是离散的,图上也应该是离散的一些点,不过为了图表好看,也为了方便查看数据的走势,折线图显然更形象一些。

下面就在折线上增加相应的点,点我们可以用circle,要增加元素用append即可

这里的代码可能复杂一点,因为circle不止一个,需要使用selectAll,而circle现在是还不存在的。selectAll(‘circle’)的作用可以理解成先预定若干个circle的位置,等有数据了再插入svg容器里。

enter就表明有数据来了,将每个circle放到单独的g里面,这里没有特殊的用意,就像html里面习惯用div来装其他元素一样。

为circle设置一些属性,cx、cy代表圆心x、y坐标,line.x()和line.y()会返回折线上相应点的x、y坐标,这样添加的circle就依附在折线上了。r表示圆半径,同时为circle添加了两个鼠标事件,这样鼠标在circle上移动和移出的时候增加了圆半径变化的一个动画。

效果图

20131230002543

step6:增加tips

现在看整体数据倒是可以了,不过看某天的具体数据还是太不方便了,如果在circle上直接标注出具体的数据又太挫了。

咋办?嘿嘿,参考ga呗。ga在鼠标经过某点的纵坐标所在的直线的时候就会在改点附近出现具体的数据tips,赞,既能清晰地看到整体的走势又能看到每天的具体数据。

先上效果图

20131230004305

 

图中用一个圆角矩形和两行文字组成了一个简单的tips

为啥要用矩形呢,为啥不直接在g上设置圆角效果呢?实践证明对g设置的width、height、border-radius均无效,无赖只能使用svg的rect元素了。

rx、ry是圆角两个方向的半径,原理同border-radius。展示文字用text元素即可,这里的x和y还是坐标,不过是相对于父元素g的坐标。

最后的关键是怎么让tips出现在该出现的位置和展示对的数据,即鼠标经过某个点的纵坐标所在的直线是tips出现在改点附近,且展示改点的数据。

这段长长的代码需要重点解释一下,首先是d3.mouse(this),这个方法会返回当前鼠标的坐标,是一个数组,分别是x和y坐标。

下面这一步最重要的一点来了,x.invert(cx)跟据传入的横坐标数值返回该横坐标的实际数据上的值,在本例中返回一个日期。

下面的i是根据返回的日期反向得到data数组中的元素位置。有了这个i一切都好办了,接下来的代码是为了判断鼠标在两个日期之间离哪个更近。

后面的代码都很简单了,拿到了tips应该出现的x、y坐标之后设置tips的transform即可,再控制tips的display属性就达到了最后的效果。

 

查看最后的代码请移步http://jsfiddle.net/jarvisjiang/wh877/

That‘s all.

前端的发展越来越快, 项目越来越大,越来越复杂,如何简单高效的组织开发流程就显得尤为重要。

所以alloyteam决定推出介绍现代化webapp的开发流程的一系列视频教程,今天就为大家呈上第一部【grunt入门】。

TAT.dorsywang 【PowerfulJS】1~使用JS操作HTML文档
In JavaScript on 2013年12月06日 by view: 7,201
3

做为一个刚吃过肉的人,看过大海,思考过人生,决定还是要静下心做点总结。

最近在做Web工具,做为一个在Web中运行的工具,想要做强大的事情,在不依赖于Server端的支持、不依赖插件下,还要完成这些事情,有时候想想,确实是一件很难的事情。取决于

浏览器是服务端的代码运行于客户端,出于安全性的考虑,做了很多限制。浏览器是一个相对封闭的环境,说白了,能力有限。

基本介绍

mocha 是一个javascript的测试框架,chai是一个断言库,两者搭配使用更佳,所以合称“抹茶”(其实mocha是咖啡)。“抹茶”特点是: 简单,Hour级学习成本,node和浏览器都可运行,有趣。

关于吹水,充字数的内容我放到了blog最后,因为“抹茶”上手非常的简单,看完blog再阅览一下官网就可以实际动手敲代码了,不足一个小时就可以基本掌握他们了。

上集入口

那些兄妹

console的兄妹

这些都可以做调试输出,区别是:

  1. 样式不同
  2. 我们可以通过调试器底部筛选出不同的输出项

控制台美女

console.log,作为一个前端开发者,可能每天都会用它来分析调试,但这个简单函数背后不简单那一面,你未必知道……

一年前,我发过一篇关于跨文档通信方案的文章《iframe跨域通信的通用解决方案》,提供了一种基于创建iframe与轮询window.name的方案。

一年后,很高兴地带来彻底改造的新版本。实际上新方案已经用了很久了,一直没有时间抽象出来,最近终于挤时间分享出来了!~

MessengerJS

最近在学习HTML5CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer

本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图片轮播器。不仅效果很酷,而且是女神级的。什么?你问是不是妹子写的?这个我不知道,我说的是这个Demo中的图片都是女神呀,性感火辣,丰满妩媚……咳咳,回正题。