w1100n
This site is best viewed in Google Chrome
wiloon, 6/13/2015 8:22 | Tag:

TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销;增加一个完整的类结构,使之更新是传统的面向对象语言。 JavaScript 的 TypeScript 的区别 TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。

wiloon, 5/10/2015 15:27 | Tag:

http://www.cnblogs.com/tomxu/archive/2012/01/11/2311956.html 深入理解JavaScript系列(9):根本没有“JSON对象”这回事! 前言 写这篇文章的目的是经常看到开发人员说:把字符串转化为JSON对象,把JSON对象转化成字符串等类似的话题,所以把之前收藏的一篇老外的文章整理翻译了一下,供大家讨论,如有错误,请大家指出,多谢。 正文 本文的主题是基于ECMAScript262-3来写的,2011年的262-5新规范增加了JSON对象,和我们平时所说的JSON有关系,但是不是同一个东西,文章最后一节会讲到新增加的JSON对象。 英文原文:http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/ 我想给大家澄清一下一个非常普遍的误解,我认为很多JavaScript开发人员都错误地把JavaScript对象字面量(Object Literals)称为JSON对象(JSON Objects),因为他的语法和JSON规范里描述的一样,但是该规范里也明确地说了JSON只是一个数据交换语言,只有我们将之用在string上下文的时候它才叫JSON。 序列化与反序列化 2个程序(或服务器、语言等)需要交互通信的时候,他们倾向于使用string字符串因为string在很多语言里解析的方式都差不多。复杂的数据结构经常需要用到,并且通过各种各样的中括号{},小括号(),叫括号<>和空格来组成,这个字符串仅仅是按照要求规范好的字符。 为此,我们为了描述这些复杂的数据结构作为一个string字符串,制定了标准的规则和语法。JSON只是其中一种语法,它可以在string上下文里描述对象,数组,字符串,数字,布尔型和null,然后通过程序间传输,并且反序列化成所需要的格式。YAML和XML(甚至request params)也是流行的数据交换格式,但是,我们喜欢JSON,谁叫我们是JavaScript开发人员呢! 字面量 引用Mozilla Developer Center里的几句话,供大家参考: 他们是固定的值,不是变量,让你从“字面上”理解脚本。 (Literals) 字符串字面量是由双引号(”)或单引号(’)包围起来的零个或多个字符组成的。(Strings Literals) 对象字面量是由大括号({})括起来的零个或多个对象的属性名-值对。(Object Literals) 何时是JSON,何时不是JSON? JSON是设计成描述数据交换格式的,他也有自己的语法,这个语法是JavaScript的一个子集。 { “prop”: “val” } 这样的声明有可能是JavaScript对象字面量也有可能是JSON字符串,取决于什么上下文使用它,如果是用在string上下文(用单引号或双引号引住,或者从text文件读取)的话,那它就是JSON字符串,如果是用在对象字面量上下文中,那它就是对象字面量。 // 这是JSON字符串 var foo = ‘{ “prop”: “val” }’; … Continue reading

wiloon, 2/11/2015 1:41 | Tag:

http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html 一、回调函数 二、事件监听 三、发布/订阅 四、Promises对象

wiloon, 8/25/2014 1:30 | Tag:

http://blog.sina.com.cn/s/blog_6768f2290100ubw5.html 最近由于工作和个人兴趣的关系,有幸研究了一下javascript的unit test,市面上常见且比较易用的javascript的unit test的framework有三个:jsunit, qunit和yuitest,虽然出处不同,但是本质上,使用方法都大同小异。 jsunit:http://www.jsunit.net/ 最早开发自2001年,是第一个实用的javascript的unit test framework(那时候TDD还远未流行),其完全遵循junit的xunit pattern, 有setup, teardown, 有testsuit概念,还有若干种assert方法,不过因为其诞生早,对非同步的ajax测试支持不够,因而有市场占有率渐低的趋势。 qunit: http://docs.jquery.com/Qunit 个人极其欣赏的一个framework,隶属于大名鼎鼎的jquery,但是又无需依赖于jquery的库可单独运行, 方法轻量易学,且具有异步测试的功能。可惜在公司没有被官方支持,只能自己玩。 yui test: http://developer.yahoo.com/yui/yuitest/ 著名的yahoo web js toolkit library中的ut子项目,使用方法和qunit极其相似,也具有异步测试功能,在本人公司被官方支持,最大的缺点是使用时要调用其他诸多的yui模块用来显示结果,不够独立。 以下以qunit为例子,介绍这些unit test framework的使用方法: 1 ) 下载qunit的测试驱动程序js文件和对应显示结果用的css文件(分别为qunit.js 和qunit.css ) 2 ) 将这两个文件保存在某个目录,并在同一目录建立一个简单的html文件,包含该两个文件以及jquery.js 3 ) 将我们需要测试的js代码的文件也包含入该简单html中(该例中为mycode.js)。 4 … Continue reading

wiloon, 5/20/2014 2:32 | Tag:

The Bootstrap Filestyle is a plugin for jquery-based component library could Twitter Bootstrap, used to style the file fields of the forms. This plugin has an interesting way to present a form for sending files so attractive, while being simple and efficient.

wiloon, 3/10/2014 10:13 | Tag:

正则的思想都是一样的,但是具体的写法会有所不同,在这里提到的/g,/i,/m在其他的地方也许就不能用了。 一,js正则标志/g,/i,/m说明 1,/g 表示该表达式将用来在输入字符串中查找所有可能的匹配,返回的结果可以是多个。如果不加/g最多只会匹配一个 2,/i 表示匹配的时候不区分大小写 3,/m 表示多行匹配,什么是多行匹配呢?就是匹配换行符两端的潜在匹配。影响正则中的^$符号 二,实例说明 1,/g的用法 查看复制打印? <script type=”text/javascript”> str = “tankZHang (231144)”+ “tank ying (155445)”; res = str.match(/tank/); //没有加/g alert(res); //显示一个tank res = str.match(/tank/g); //加了/g alert(res); //显示为tank,tank <strong></script></strong> 2,/i的用法 查看复制打印? <script type=”text/javascript”> str = “tankZHang … Continue reading

wiloon, 3/10/2014 5:54 | Tag:

hammer.js是一个多点触摸手势库,能够为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件,免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试。这是一个专为触摸手势而生的js库 http://www.cnblogs.com/cydmk/archive/2013/05/12/3073570.html https://github.com/EightMedia http://eightmedia.github.io/hammer.js/

wiloon, 3/3/2014 2:41 | Tag:

location.href,可以点击浏览器的后退按钮返回本页。 location.assign(URL) assign() 方法可加载一个新的文档。效果与location.href相当。 location.reload(force) 如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。 如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。 location.replace(newURL) 不能点击浏览区的后退按钮返回本页。 将地址替换成新url,该方法通过指定URL替换当前缓存在历史里(客户端)的项目, 因此当使用replace方法之后,你不能通过“前进”和“后 退”来访问已经被替换的URL,这个特点对于做一些过渡页面非常有用! replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前记录。     http://jun1986.iteye.com/blog/1176909 一、最外层top跳转页面,适合用于iframe框架集 top.window.location.href(“${pageContext.request.contextPath}/Login_goBack”); ============================================================================================ 二、window.location.href和window.location.replace的区别 1.window.location.href=“url”:改变url地址; 2. 三、强制页面刷新 1.window.location.reload():强制刷新页面,从服务器重新请求! … Continue reading

wiloon, 2/27/2014 1:31 | Tag:

  http://blog.csdn.net/yakson/article/details/9390863 http://stackoverflow.com/questions/12606245/detect-if-browser-is-running-on-an-android-or-ios-device

wiloon, 2/26/2014 6:23 | Tag:

http://blog.csdn.net/androidmylove/article/details/8881573 查了好多资料,发现还是不全,干脆自己整理吧,至少保证在我的做法正确的,以免误导读者,也是给自己做个记录吧! // Ajax 文件下载 jQuery.download = function(url, data, method){ // 获得url和data if( url && data ){ // data 是 string 或者 array/object data = typeof data == ‘string’ ? data : jQuery.param(data); // 把参数组装成 form的 input var inputs = … Continue reading

wiloon, 2/25/2014 5:40 | Tag:

http://www.cnblogs.com/xcj26/archive/2013/04/08/3006023.html 其实Javascript中没有类这个定义,但是有类这个概念。很多人都写过这样的代码,对,没错,就是如下代码,清晰的不能再清晰了,就是一个关键字 function,然后定义一个方法名,方法名后紧跟一对括号。如果你在项目中写过这样的代码,那么祝贺你,你可以不费任何吹毛之力,就能一口气读完这篇博文了. function Print() { …… } 当我们在写c#代码,焦头烂额,无从下手的时候,至少我们还是可以厚着脸皮在老板的面前,敲出华丽的 class ***{},是的,没错,就这几个字符。殊不知这这几个字符体现出来的境界。说浅些,我会敲键盘写代码,说深些,我有可能理解了面向对象的编程,至少我会定义一个类。是这样的,c#中定义一个类是用class。 有一天,老板变态了,让我用Javascript来定义一个类,我无从下手呀,我平时都是用(“.”),(“#”)的人物呀,思考良久,我还模糊的记的document.getElementById(“”)这个东西,但是好像与Javascript的类扯不上关系呀。怎么办?问了google问百度啊,最后在一个角落,找到了定义Javascript类的E文。仔细一阅,难道这是一个坑吗?明明用function定义了一个方法,活生生的把它说成一个类,反复几次Google百度后,有点怀疑了,难道Javascript中定义一个类,真的是用function?其实没错,在Javascript中,定义一个类是用fucntion() ***{}。不管是在学校的菜鸟,还是国外的顶级程序员,在这件事上是平等的,想定义一个Javascript的类,就必须得先敲下function ***(){}。 在定义Javascript类上,表现形势上大家虽然是平等的,都是用function ***(){}。但实质上,确是蕴含着大量的学问。也许有些朋友到目前为止,是不是感觉我说的太简单了,那我们就在这个function上玩点花样。 function Dog(category, name, age) { this.Category = category; this.Name = name; this.Age = age; } 一个Javascript类就这样定义完成了,现在就可以自豪的说,我会面向对象的手法编定Javascript代码了。 类定义好了,那我们怎么样来用这个类呢?其实用法和C#的用法很像。 var dog01 = new Dog(“狗类”, “土狗”, 2); … Continue reading

wiloon, 2/21/2014 8:28 | Tag:, ,

本文本的框架为:SpringMVC 3.2.3 \ jackson 1.9.2 传统的返回JSON格式的AJAX,用的方法一般是:在后台先把数据(Object)封装成JSON数据,再用HttpServletResponse返回。 本示例中,SpringMVC可直接支持JSON格式数据的返回。具体如下。 1、JAR包:SPRINGMVC包需的包,另外还需JACKSON的两个包。 jackson-core-asl-1.9.2.jar jackson-mapper-asl-1.9.2.jar 2、spring-servlet.xml中加入: Java代码   <!– 返回JSON模版 –> <bean class=”org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter” >     <property name=”messageConverters”>     <list>          <bean class=”org.springframework.http.converter.json.MappingJacksonHttpMessageConverter” />     </list>     </property> </bean> 我们在SPRING的配置中加入了一个新的适配器:AnnotationMethodHandlerAdapter,通过这个适配器,我们配置了一个属性,messageConverters,其中mappingJacksonHttpMessageConverter这个Bean,它就是用来处理json数据转换的。 注:我的项目中没有乱码现象,这样配即可,若有乱码现象,可以在MappingJacksonHttpMessageConverter的BEAN中配置supportedMediaTypes属性,是用于解决返回的乱码问题。 3、Controller中的使用 Java代码   @Controller public class SelectController {     @Resource     private TypeService typeService;     @RequestMapping(“/type”)     @ResponseBody     public Object type(){         List<Type> typelist = this.typeService.getTypeByParentid(Const.TYPE_DAILY);         return typelist;     } } 在SpringMVC中可以在Controller的某个方法上加@ResponseBody注解,表示该方法的返回结果直接写入HTTP response body中。 —————————————— 遇到的问题: … Continue reading

wiloon, 2/21/2014 6:27 | Tag:

http://www.benben.cc/blog/?p=9 最近经常看到别人提及Javascript脚本的加载顺序,看完之后虽略有所悟,但古人云“纸上得来终觉浅,绝知此事要躬行。”这句话云的好,所以我决定亲自测试一下,看看浏览器究竟是怎么加载脚本的。 先看html部分的代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script>alert(“我是html根节点之外的内部脚本”);</script> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>JavaScript</title> <style type=”text/css”>body {margin:0;padding:0;}</style> <script>alert(“我是头部header里的内部脚本”);</script> <script src=”header.js”></script> <script src=”outer.js”></script> </head> <body> <script>alert(“我是页面body里的内部脚本”);</script> … Continue reading

D3
wiloon, 2/20/2014 6:05 | Tag:

D3 是最流行的可视化库之一,它被很多其他的表格插件所使用。它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HMTL表格,或是利用它的流体过度和交互,用相似的数据创建惊人的SVG条形图。D3-js

wiloon, 11/11/2013 4:49 | Tag:

先看个简单的例子,呵呵   <ul class=”box” name=”a”> <li name=”b” class=”li_moito”><p><a href=”#” class=”moto”>Hello Moto*</a></p></li> <li><p><a href=”#” class=”kitty”>Hello Kitty*</a></p></li> <li><p><a href=”#” class=”world”>Hello World*</a></p></li> </ul>   如果要获取class=”moto”的父级元素LI,或许我们最先想到的一种方法就是用   $(“.moto”).parent().parent()。不错,这样写可以达到效果,却也显得有些烦琐了。其   实想要获取父级标签还有另外两种方法的,即parents()与closest()。   parents()方法: parents(),我想这个大家再熟悉不过了,它是取得所有符合条件的祖先元素(不包括本   身),这是一个集合,呵呵。后面可以通过一个可选元素来逐个筛选。 这里,我们可以: $(“.moto”).parents(“li[name=’b’]”); 或者 $(“.moto”).parents(“.li_moito”);   closest()方法: closest(),这个方法呢就是向上检查元素并逐级匹配。首先,会从自身来匹配,匹配成   功就返回本身;不成功则向上寻找,直到找到匹配的选择器为止。最后,如果神马也没   找到,那就只好返回一个jquery的空对象喽…… 可以这样写: $(“.moto”).closest(“li[name=’b’]”); 或者 $(“.moto”).closest(“.li_moito”);   乍看一眼,两者的用法还挺相似的,呵呵!下面我们比较一下他们的区别: 区分parents()与closest() 1、前者从父级开始匹配元素;而后者是从自身开始。 2、前者向上查找所有的父级元素,直至根元素,然后把这些查找的结果放到一个临时 的集合中,再通过额定的条件来进行筛选;后者是从自身元素开始向上查找,直到找到   … Continue reading

wiloon, 3/21/2013 16:42 | Tag:

主要的事件 jQuery UI Autocomplete有一些事件,可用于在一些阶段进行额外的控制: create(event, ui):Autocomplete创建时,可以在此事件中,对外观进行一些控制 search(event, ui): 在开始请求之前,可以在此事件中返回false来取消请求 open(event, ui):Autocomplete的结果列表弹出时 focus(event, ui):Autocomplete的结果列表任意一项获得焦点时,ui.item为获得焦点的项 select(event, ui):Autocomplete的结果列表任意一项选中时,ui.item为选中的项 close(event, ui):Autocomplete的结果列表关闭时 change(event, ui):当值改变时,ui.item为选中的项 http://www.cnblogs.com/lwme/archive/2012/02/12/jquery-ui-autocomplete.html

wiloon, 10/31/2012 15:51 | Tag:

location.href 返回整个当前url,若对其赋值: location.href=”http://www.highya.com” 则跳转其url location.host 返回域名和端口号,如:www.highya.com:80 lcation.hostname 返回域名 location.port 返回端口 location.pathname 返回域名后第一个斜框后的字符串 location.hash 跳到本页的某个锚 location.search 取url?后的部分 location对象: location提供了关于当前打开窗口或者特定框架的url信息。一个多框架的窗口对象在location属性显示的是父窗口的URL,每个框架也有一个与之相伴的location对象。 hash属性:hash标注是一个url很好的习惯用法,它指定浏览器到一个位于文档中的anchor位置,相当于一个书签儿。 host属性:描述渔歌url的主机名和端口,只有端口号是url的一个明确部分时,值中才包括端口号。 hostname属性:一个典型的url的主机名是网络上服务器的名字,该网络存储有你的浏览器上可以查看的文档。对大多数Web站点来说,服务器名不仅包括域名,也包括www前缀,如果端口号是在url中特有的话,主机名并不包括,而是包括在host属性中。 href属性:该属性提供一个指定窗口对象的整个url的字符串。 pathname属性:url的路径名部分由与服务器root(根)卷相关的目录结构组成。根不是目录的一部分,如果url的路径是通向根目录中的一个文件,那么location.pathname属性就是(/)。 port属性:端口号很少用到。当指向一个没有赋给域名的的站点的url中,可以用location.port属性获取该值,如果从一个url获取值并想用那个组建创建一个url,一定要包括服务器IP地址和段口号,IP地址和段口号之间用(:)分界。 protocol属性:包括协议名,且后面紧跟着(:)分节目。 assign方法:assign(“url”)通过这个方法可以实现把一个新的url赋给location对象。当然你也可以采用直接赋值的方法来实现,或者location.href来导航到一个新的网页。采用assign的方法会使代码易维护。 reload方法:这个方法可以把浏览器可能保存在内存中的元素(在一段记录中)的文档设置全部忽略掉,重新打开该文档,和浏览器上的刷新可不一样。它的效果好像是你选择了file菜单open file一样。当然如果你不想这样,不想这么做,有一个和这个方法比较类似的方法,就是history.go()方法。 replace方法:当用户从当前网页,跳转到别的网页,有时候是不是想让不能用后退按钮(Back)看到前一个网页,告诉你一个方法,就是采用location.replace(“url”)就可以实现这个功能。

next page
辽ICP备14012896