为什么我们需要TypeScript

ps:阅读文章前,先引用一段百度百科关于TypeScript的介绍,具体可以搜索TypeScript以及相关的CoffeeScript

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

从1.0的发布开始,我已经对TypeScript项目关注了超过一年。它的理念吸引着我,但是正是因为具有了和大多数语言一样的习惯和特性,我还不能确定它最终是否可以发展起来。无论如何,最近的消息称TypeScript可能会被用于创建 AngularJS2.0,给我了相信TypeScript可以成为主流编程语言的可能以及值得去学习的信心。

我认为是时候开始一个小的项目(下面会贴出来)并且开始体验TypeScript的特性了。

当开始创建上面我说过的项目并且开始写这篇文章的时候,我浏览过大量的"介绍TypeScript"的文章。这里我不想写成和他们类似文章,这些文章有相应的定位,而且在事实上,我使用它们来开始我的TypeScript 旅程。无论如何,我想使用一个不同的视角——我想回到看这篇文章读者的位置,回答某些问题的答案和当我开始关注TypeScript项目的时候在我脑中的一些问题:

  1. 为什么你应该在下一个web或者移动项目中使用TypeScript ?
  2. 什么让TypeScript看起来如此美好——如何使你的工作更加简单并且使项目质量提高?
  3. 回到TypeScript本身,它是如何给javascript加上语法糖以及这些特性?

TypeScript可以比我自己创建更好的JavaScript

more >>

ajaxfileupload.js 原理、常见错误及注意事项

刚刚接到一个BUG任务,在IE8中使用ajaxfileupload组件无法上传文件到服务器,根据单步调试(IE的单步调试还是比较有用)并分析了ajaxfileupload组件。

问题
组件抛出错误为“拒绝访问”,使用控制台发现数据已经返回,服务器上已经成功上传,但是客户端无法获取到结果,因此提示上传失败。

QQ Photo20150513194835.jpg

使用该组件

下载该组件 点击下载

$.ajaxFileUpload({
    url: 'upload.php', //上传地址,需要注意跨域问题
    secureuri: false,
    data: data,
    fileElementId: 'fileToUpload', //该上传input 的ID
    dataType: 'json',
    success: function (data) {
        alert(data.msg);

    },
    error: function (data) {
        alert("error");
    }
});

more >>

nodejs 框架express重要接口思维导图

express() 程序入口,启动一个应用,返回application对象
Application 对象
    简介:app应用单例
    app.set(name, value) 设置应用
    app.get(name) 获取应用设置
    app.enable(name) 启用一项设置
    app.disable(name) 禁用一项设置
    app.use([path], function) 使用中间件方法
    settings 可配置项
        env 运行时环境,默认为 process.env.NODE_ENV 或者 "development"
        trust proxy 激活反向代理,默认未激活状态
        jsonp callback name 修改默认?callback=的jsonp回调的名字
        json replacer JSON replacer 替换时的回调, 默认为null
        json spaces JSON 响应的空格数量,开发环境下是2 , 生产环境是0
        case sensitive routing 路由的大小写敏感, 默认是关闭状态, "/Foo" 和"/foo" 是一样的
        strict routing 路由的严格格式, 默认情况下 "/foo" 和 "/foo/" 是被同样对待的
        view cache 模板缓存,在生产环境中是默认开启的
        view engine 模板引擎
        views 模板的目录, 默认是"process.cwd() + ./views"
    app.engine(ext, callback) 模板引擎
    app.param([name], callback) 实现路由方法
    app.VERB(path, [callback...], callback)  根据请求头部类型快捷实现路由方法
    app.all(path, [callback...], callback) 响应所有的路由请求
    app.locals 放置用于渲染给模板的变量对象
    app.render(view, [options], callback) 渲染模板
    app.routes 存放实现的路由方法列表
    app.listen() 启动http监听
Request 对象
    简介:用于存放客户端发起的请求信息
    req.params 例如路由/user/:name 相似的参数表
    req.query urlget 参数
    req.body 请求体参数
    req.files  bodyParser() 中间件提供 的文件上传后的参数体
    req.param(name) 获取参数通用方法
        请求优先级 req.params > req.body > req.query
    req.route 请求的路由信息
    req.cookies  请求的cookie
    req.get(field) 获取头部字段
    req.accepts(types) 获取客户端接收类型
    req.is(type)  头部类型
    req.ip  返回IP注意代理的情况
    req.ips 返回IP和代理IP数组
    req.path 请求路径
    req.host
    req.xhr 是否是ajax请求
    req.protocol 请求协议
    req.subdomains 获取子域
    req.originalUrl 获取url
    req.acceptedCharsets 获取请求字符集
Response 响应客户端对象
    res.status(code) 返回响应码
    res.set(field, [value]) 设置头部
    res.get(field) 获取响应头部信息
    res.cookie(name, value, [options]) 返回cookie
    res.clearCookie(name, [options]) 清除cookie
    res.redirect([status], url)  res.location  重定向
    res.charset 设置字符集
    res.send([body|status], [body]) 发送响应数据
    res.json([status|body], [body]) 
    res.jsonp([status|body], [body])
    res.attachment([filename]) 设置响应类型为附件,系统根据后缀名自动设置http类型
    res.sendfile(path, [options], [fn]]) 发送文件
    res.download(path, [filename], [fn]) 下载
    res.render(view, [locals], callback) 渲染模板
重要的几个中间中间件
    basicAuth()  用户验证
    bodyParser() 请求体解析 对几个常用的中间件再封装
        json()
         urlencoded()
        multipart() 
    compress() 压缩
    cookieParser() cookies解析
    cookieSession() 利用cookies实现的session
    csrf() CSRF 防护中间件
    directory() 目录解析中间件
其他常用模块
    path nodejs提供
    static-favicon icon模块
    morgan 日志模块
    connect-mongo mongodb 模块
    connect-flash 用户提示消息模块
    multer 比较重要的模块,用于文件上传

more >>

JavaScript作用域练习题总结

1、var的含义是什么?下面函数f1中两行代码有什么区别?

    function f1() {
        var a = 10; 
        b = 10;
    }

解析:var 是变量声明语句,=是赋值语句。第一行和第二行的区别为一个是变量声明和赋值,第二个缺省了变量申明的赋值,如果在严格模式下,为一个没有声明的变量赋值就会报错,而在非严格模式下解释器就会自动写入一个元素到window。

2、控制台输出什么内容?

    function f1() {
        var a ;
        function f2() {
            a = 5;
            b = 6;
        }
    }
    f2();
    console.log(a);
    console.log(b);

解析:抛出异常,6。根据作用域的原理。变量a 被申明但是在f1 内部,f2给a赋值的时候a能够找到于是a在f1作用域下被赋值,而在引用a的时候a在全局下没有被申明。b没有被声明过,因此在全局下被自动声明(非严格模式)。因此得出,不能说没有使用var 就是全局变量,使用了var 就是局部变量。

more >>

Angularjs学习笔记脑图

angularjs

angularjs.jpg
1、第一章 angularjs简介

客户端模板:html 模板

MVC:Model View Controller

数据绑定:模板和上的值和变量绑定

依赖注入:通过应用需要的东西,而不必再创建一次的一种模块化机制

指令:用户增加VIEW层功能的拓展html 标签

more >>

javascript 从去重到排序的考量

写这篇文章的原因是因为在某个简单的问题上翻船,往往高手和新手的区别就在于看似平常的地方,一直以来都在思考高手和新手的本质区别,高手绝非工作经验和工作时间的堆积造就的,10年工作经验的人也许是1年工作经验用了十年也不一定。

这里有一道题目,是这样:数组去重、并按倒数第二个字母排序

这个问题实在是非常简单
去重:定义一个新的数组,取出原数组的元素,依次放入新的数组,放入之前需要检查是否在新的数组已经存在即可。
排序:使用数组的sort()方法,javascript 默认使用冒泡排序,只需要传入2个元素的比较结果即可,按照题目,只需要取出字母,然后比较即可。
于是得到代码:

function uniqe(arr){
var tmp = {};
var result = [];
for(var i = 0,len = arr.length;i < len;i ++){
    var item = arr[i];
    if(item in tmp){
        continue;
    }
    result.push(item);
}
return result.sort(function(a,b){
    return a.charCodeAt(a.length-2) - b.charCodeAt(b.length-2);
});

}

var arr =['hello','world','nodejs','javascript',
'html','world','css','flash','adobe','java','hello'];
uniqe(arr)

那么我们把这个问题继续简化!!数字数组去重、并排序。
看这个问题是否更加简单?但是等等,这种基础函数,一般都需要承载丰富的业务逻辑,被大量引用,也许是在循环等复杂的逻辑中,因此要求足够健壮、高效。我们不仅需要检查输入还需要选择更好算法,解决这个问题的思路应该是:step1 排序 setp2 查找 step3 去重

more >>

Qunit 中文文档

1、官方文档地址

http://qunitjs.com/cookbook/#asserting-results

Introduction 简介

Automated testing of software is an essential tool in development. Unit tests are the basic building blocks for automated tests: each component, the unit, of software is accompanied by a test that can be run by a test runner over and over again without any human interaction. In other words, you can write a test once and run it as often as necessary without any additional cost.

In addition to the benefits of good test coverage, testing can also drive the design of software, known as test-driven design, where a test is written before an implementation. You start writing a very simple test, verify that it fails (because the code to be tested doesn't exist yet), and then write the necessary implementation until the test passes. Once that happens, you extend the test to cover more of the desired functionality and implement again. By repeating those steps, the resulting code looks usually much different from what you'd get by starting with the implementation.

Unit testing in JavaScript isn't much different from in other programming languages. You need a small framework that provides a test runner, as well as some utilities to write the actual tests.

 

    自动化的测试软件在开发中是必备的。单元测试将会为自动化测试创建一些基本的代码块:组件、单元,伴随着不需要人工的干预,一次一次的重复运行的测试程序。总之,你能编写一次测试就能在必要的时候再次运行而不用再次编写。

   额外的好处就是代码运行的覆盖测试,同时测试也能驱动软件更好的设计,就像著名的测试驱动开发,在实现之前写一个测试,你甚至可以写一个简单的测试,然后测试失败(因为现在代码仍然没有开始编写),然后开始实现你的代码直到你的测试通过。你能够拓展你的测试去覆盖更多的需求和功能,并且再次扩充你的实现代码。通过重复这些步骤,最终你得到的代码看起来常常和你最初开始实现的代码大为不同。

   Javasscript 的单元测试和其他计算机编程语言来说非常不同。因此你需要一个小的测试框架来运行你的测试用例,同时也作为一组编写单元测试的工具。

more >>

一句话扯扯数据结构的概念点

数据结构的很多概念真的是很莫名其妙,很多坑爹的定义,笔者开始很搞不明白,为什么学数据结构?为什么用哪个拗口词语?这些概念到底用在什么地方?笔者试图用自己简单的话来阐述这些问题,希望能对这些感觉不是很好理解的同学有帮助。如有错误,欢迎指正!email:linksgo2011@gmail.com

  数据结构是算法的基石,算法是软件灵魂。

  不废话,直接开始。

  一、概论

   时间复杂度:就是算法实现的执行的时间,说白了就是程序套了好多循环。没有就是o(n),2层循环就是o(n2),如此,剩下就不要管了。

   空间复杂度:说白了就是你定义了好多的变量,程序执行是额外使用了好多冗余内存。

   算法标准:什么算法是好的算法?好用就行。1、正确2、简单 3、占内存少 4、速度快 ,这几点不可兼得,自己把握,其实能简单和速度是主要的。

   二、线性表

    顺序存储结构 连续的存储

    

    链式存储结构      内存中随机存储的,只需要指针写出下一个结点在哪里即可

    线性表:逻辑上不分叉就行。一个个数据元素前后相连(就是前驱、后继)。数据项平等对待。与此相对就是数、图。用途:其实就是数组啦。

    链表:采用链式存储方式的线性表。什么是链式存储?就是一个数据项中不仅保存数据还要告诉下一个数据在哪里。用途:数据大小不确定时用。

    从普通链表拓展的概念:

    1、循环链表:首尾相连的链表;

    2、双链表:前后相随的链表;前< >后

      用途:特殊情况加快链表的操作;

more >>

从cnblog 到 Typecho

cnblog 已经用了2年,cnblog的缺陷和不足是无法托管DEMO和已经完善的组件产品,看着我写的DEMO散落一地,不忍丢弃所以切换到独立博客,如果有好的作品也可以与大家分享。cnblog 地址 http://www.cnblogs.com/linksgo2011

今天是2014年最后一天,恰好生日,留在公司谢了新博客的第一篇博文,cnblog是刚刚工作就开始写,如今已经2年3个月了,工作了这么久也没留下什么优秀的作品和文章,从typeho开始算是告别过去,迎接未来吧。
2015与君共勉。

more >>