TypeScript

TypeScript TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,兼容JavaScript,可以载入JS代码然后运行。 它与JavaScript相比进步的地方包括: 加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销。 而JavaScript只是一个脚本语言,并非设计用于开发大型 Web 应用,JavaScript 没有提供类和模块的概念,而TypeScript扩展实现了这些特性。 它扩展了 JavaScript 的语法,因此现有的JavaScript代码可与其代码一起工作无需任何修改,它通过类型注解提供编译时的静态类型检查。TypeScript可处理已有的JavaScript代码,并只对其中的TypeScript代码进行编译。 TypeScript 最大的特点就是类型化,因此才叫做TypeScript。比起弱类型的JavaScript,类型化的TypeScript显得更加容易维护。 要在应用中使用 TypeScript 必须先编译,编译的结果是生成 js 文件,你可通过 TypeScript 编译器 tsc 命令来完成这个过程。如要编译test.ts(TypeScript文件的扩展名为.ts),可用如下命令: tsc test.ts 编译完成后就会在当前目录生成名为test.js的文件。 注: 不要将TypeScript看作是一门新的语言,它只是为了提升JavaScript代码质量的一个工具,最终TypeScript仍然要编译成JavaScript。 yarn global add typescript greeter.ts function greeter(person) { return “Hello, " + person; } let user = “Jane User”; document.body.textContent = greeter(user); ```bash tsc greeter.ts <!DOCTYPE html> <html> <head><title>title0</title></head> <body> <script src="greeter.js"></script> </body> </html> let num: number = 100.001; let str: string = num.toFixed(2); ...

2015-06-13 · 1 min · 91 words · -

javascript 序列化与反序列化

javascript 序列化与反序列化 http://blog.csdn.net/zhangquanok/article/details/13002771 var objP = {}; objP.id = 1; objP.name = 2; objP.sex = 32; JSON.stringify(objP)//序列化 JSON.parse(e); //JSON.parse(e)反序列化

2015-06-10 · 1 min · 19 words · -

Javascript异步编程

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

2015-02-11 · 1 min · 6 words · -

javascript unit test

javascript unit test 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 ) 将我们要测试的js代码的依赖库也加入该html中(如ExtJS或者其他库) 5 ) 在html中添加script的测试代码 (test suit和assert部分) 6 ) 在浏览器中载入该html文件,页面会自动显示运行结果。 值得一提的是,网上有qunit-CLI的项目,其用rhino解释器来代替浏览器做unit test js的运行环境,提高了测试的效率,有兴趣的朋友可以去google搜索看看。 代码如下: mycode.js function (a, b) { return a + b; } test.html <!- js to be tested -> ...

2014-08-25 · 1 min · 92 words · -

Hammer.js 移动设备触摸手势js库

Hammer.js 移动设备触摸手势js库 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/

2014-03-10 · 1 min · 7 words · -

Javascript 重定向 window.location.href / replace / reload()

Javascript 重定向 window.location.href / replace / reload() 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地址; 三、强制页面刷新 1.window.location.reload(): 强制刷新页面,从服务器重新请求! ============================================================================================ 四、window.location.reload();页面实现跳转和刷新 1 history.go(0) 2 location.reload() 3 location=location 4 location.assign(location) 5 document.execCommand(‘Refresh’) 6 window.navigate(location) 7 location.replace(location) 8 document.URL=location.href 这几个都可以刷新 window.location.reload();刷新 ...

2014-03-03 · 1 min · 100 words · -

js check platform

js check platform <script type="text/javascript"> <!- //平台、设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platform; alert(p); system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); //跳转语句 if(system.win||system.mac||system.xll){//转向后台登陆页面 window.location.href="login.jsp"; }else{ window.location.href="wapLojin.jsp"; } -> </script> var isMobile = { Android: function() { return navigator.userAgent.match(/Android/i) ? true : false; }, BlackBerry: function() { return navigator.userAgent.match(/BlackBerry/i) ? true : false; }, iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false; }, Windows: function() { return navigator.userAgent.match(/IEMobile/i) ? true : false; }, any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows()); } }; http://blog.csdn.net/yakson/article/details/9390863 ...

2014-02-27 · 1 min · 112 words · -

怎样用Javascript定义一个类

怎样用Javascript定义一个类 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); var dog02 = new Dog(“狗类”, “黄狗”, 5); 有些朋友要拍砖了,这么简单的东西,都拿出来说,那我们不妨再来进阶一下。我上边的代码,实例化了两个对象,一个是dog01,dog01下边那个是dog02。因为dog01的Cateogry太口语化了,我要修改为dog01.Categry = ‘犬类’,这样听起来是不是舒服多了,这是一个很简单的事,我们仅仅需要为dog01的Cateogry重赋值就可以了。我们修改了dog01的Cateory, dog02的Category会跟着变吗?答案是肯定的,不会变,如果有变,肯定有鬼。那我们有没有方法让dog01,dog02这些对象的Cateogry属性共用起来呢?也就是说当我修改了Category属性,不管是dog01,还是dog02都跟一样的变,我们不妨来这样写写。 <img alt="复制代码" src="http://common.cnblogs.com/images/copycode.gif" /> function Dog(name,age) { this.Name = “”; this.Age = “”; } Dog.prototype.Category = “狗类”; var dog01 = new Dog(“土狗”,2); var dog02 = new Dog(“黄狗”,5); alert(dog01.Category); alert(dog02.Category); Dog.prototype.Category = “犬类”; alert(dog01.Category); alert(dog02.Category); ...

2014-02-25 · 1 min · 95 words · -

spring MVC 返回JSON数据(Spring3.0 MVC+Jackson+AJAX)

spring MVC 返回JSON数据 (Spring3.0 MVC+Jackson+AJAX) 本文本的框架为: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代码 <img alt="收藏代码" src="http://angelbill3.iteye.com/images/icon_star.png" /> <!- 返回JSON模版 -> <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" > <property name="messageConverters"> <bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" /> </list> </property> </bean> 我们在SPRING的配置中加入了一个新的适配器: AnnotationMethodHandlerAdapter,通过这个适配器,我们配置了一个属性,messageConverters,其中mappingJacksonHttpMessageConverter这个Bean,它就是用来处理json数据转换的。 注: 我的项目中没有乱码现象,这样配即可,若有乱码现象,可以在MappingJacksonHttpMessageConverter的BEAN中配置supportedMediaTypes属性,是用于解决返回的乱码问题。 3、Controller中的使用 Java代码 <img alt="收藏代码" src="http://angelbill3.iteye.com/images/icon_star.png" /> @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中。 ...

2014-02-21 · 1 min · 129 words · -

Javascript 加载顺序

Javascript 加载顺序 Javascript加载顺序 http://www.benben.cc/blog/?p=9 最近经常看到别人提及Javascript脚本的加载顺序,看完之后虽略有所悟,但古人云"纸上得来终觉浅,绝知此事要躬行。“这句话云的好,所以我决定亲自测试一下,看看浏览器究竟是怎么加载脚本的。 先看html部分的代码: <script>alert("我是html根节点之外的内部脚本");</script> 再看header.js中的代码: 1 alert("我是header中src外部引用的脚本"); 接着是outer.js中的代码: document.write('<script type="text/javascript">'); document.write(‘alert(“我是header中通过外部通过document.write生成的脚本”)’); //document.write(’’); document.write(’’); 最后是body.js中的代码 1 alert("我是body中src外部引用的脚本"); 代码的输出顺序如下: alert("我是html根节点之外的内部脚本"); alert(“我是头部header里的内部脚本”); alert(“我是header中src外部引用的脚本”); alert(“我是header中通过外部通过document.write生成的脚本”); alert(“我是页面body里的内部脚本”); alert(“我是body中src外部引用的脚本”); alert(“我是html根节点之外的内部脚本”); 最后只有点击按钮才会触发alert(‘我是body中的按钮,这是我自己绑定的事件’); 刚开始看完代码后你觉得加载顺序如何呢?其实很简单,浏览器加载的时候完全是按照自上而下顺序加载的,遇到外部引用就暂时跳出到外部js中执行,执行完毕后返回跳出的位置继续向下执行,而且经测试可以看到,按钮是在body.js执行完毕后才显示在页面中的,这也证实了浏览器是顺序加载的。 这里需要说明两点: 浏览器根节点之外是不允许有任何元素的,在这里我们只是为了判断加载顺序才写了不符合规矩的代码,这一点可以在chrome的调试中看到报错。 outer.js中通过document.write再次引用外部js的那一行我已经做了注释,虽然此方法有许多人证实可行,但是在我的环境下会报脚本错误,而且这样做会引起浏览器加载顺序的不兼容 (详情可见: Javascript加载顺序的BUG) ,因此在实际应用中若非迫不得已还是少用为妙。

2014-02-21 · 1 min · 35 words · -

D3

D3 D3 是最流行的可视化库之一,它被很多其他的表格插件所使用。它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HMTL表格,或是利用它的流体过度和交互,用相似的数据创建惊人的SVG条形图。D3-js D3.JS 基于javascript的图表展示库 先什么都不说。一起来看看d3.js神奇效果。 打开https://github.com/mbostock/d3/wiki/Gallery 这里有很多d3.js的Demo。 这个东西图表确实很不错吧? 简单介绍之前 先说明一点东西。 d3.js 只适合现代浏览器, (意思是说它对IE8已经IE8以下版本支持不好) 。但对IE9,chrome,FireFox,Opera 和基于webkit的苹果浏览器Safari都能支持。 图标是基于矢量图形的,采用svg进行画图。所以在了解d3.js之前你需要知道svg有关知识。看看这个就够了http://www.w3school.com.cn/svg/index.asp 如果你用d3.js,我就当你是一个有点点经验的程序猿了,不是菜鸟,所以。。。。懂一点Jquery那是必须的。。。 本系列博客将根据官方文档的介绍顺序来写。 重要的一点,本人也是一边学一边写,出现点错误是不可避免。若有发现,请指出。在博客后面留言就可以了。谢谢! 争取每周末更新两篇。(希望了解更多可点击此处) 好吧。有了以上说明,先下载一个d3.js (连js库都没有能说个j8) 下载地址http://d3js.org/d3.v3.zip 下载好了?? 国际惯例 Hello World <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello World</title> <script type="text/javascript" src="d3.v3.js"></script> </head> <body> </body> <script type="text/javascript"> function helloworld(){ d3.select("h1").html("Hello D3.js !"); /* 看到这个是不是觉得和Jquery很相似? d3的选择器使用Jquery差不多,当然没有Jquery那么强大了, 这就是为什么我在开篇会提到jquery,如果对Jquery有一定的了解那么 关于d3的选择器你也就会用了。 */ }; helloworld(); /*啰嗦一下,有点Jquery经验的请无视。 helloworld这个方法之所以在body标签后调用而不是在head标签中 是因为浏览器解析html文档 是按顺序解析,如果写在head标签中,那么当浏览器解析到d3.select("h1")时, d3会发现在解析过的html中找不到h1 DOM节点 也就无法正确选择到了。 至于怎么写在head标签中又可以在整个Html都加载后再执行请自行Google. */ </script> </html>

2014-02-20 · 1 min · 78 words · -

javascript Location

javascript Location 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”)就可以实现这个功能。

2012-10-31 · 1 min · 54 words · -

javascript 逻辑运算符

javascript 逻辑运算符 运算符优先级 优先级 运算符 结合性 1 ( )[ ] . 从左到右 2 ! ~ ++ – 从右到左 3 * / % 从左到右 4 + - 从左到右 5 << >> »> 从左到右 6 < <= &gt; >= instanceof 从左到右 7 == != 从左到右 8 & 从左到右 9 ^ 从左到右 10 | 从左到右 11 && 从左到右 12 | 从左到右 13 ? : 从左到右 14 = += -= *= /= %= &= |= ^= ~= <<= >>= »>= 从右到左 15 , 从右到左

2011-11-05 · 1 min · 80 words · -

trim

trim 去除多余空格 trim:去除两边空格 lTrim:去除左空格 rTrim: 去除右空格 用法: var str = " hello “; str = str.trim();

2011-11-05 · 1 min · 16 words · -