Archives

文件夹

这是一篇翻译文章来自于知乎   认证是任何 web 应用中不可或缺的一部分。在这个教程中,我们会讨论基于 token 的认证系统以及它和传统的登录系统的不同。这篇教程的末尾,你会看到一个使用 AngularJS 和 NodeJS 构建的完整的应用。 传统的认证系统 在开始说基于 token 的认证系统之前,我们先看一下传统的认证系统。 用户在登录域输入 用户名 和 密码 ,然后点击 登录 ; 请求发送之后,通过在后端查询数据库验证用户的合法性。如果请求有效,使用在数据库得到的信息创建一个 session,然后在响应头信息中返回这个 session 的信息,目的是把这个 session ID 存储到浏览器中; 在访问应用中受限制的后端服务器时提供这个 session 信息; 如果 session 信息有效,允许用户访问受限制的后端服务器,并且把渲染好的 HTML 内容返回。 在这之前一切都很美好。web 应用正常工作,并且它能够认证用户信息然后可以访问受限的后端服务器;然而当你在开发其他终端时发生了什么呢,比如在 Android 应用中?你还能使用当前的应用去认证移动端并且分发受限制的内容么?真相是,不可以。有两个主要的原因: 在移动应用上 session 和 cookie 行不通。你无法与移动终端共享服务器创建的 session 和 cookie。 在这个应用中,渲染好的 HTML 被返回。但在移动端,你需要包含一些类似 JSON 或者 XML 的东西包含在响应中。 在这个例子中,需要一个独立客户端服务。 基于 token 的认证 在基于 […]

1、第一步 让我们用我们通篇都用的这个例子来开始吧。我们将写一个最简单的验证器。就像当你检查一个用户给页面提交一个表单或检查外部提供的数据文件的格式时可能用到的那样。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 interface StringValidator {     isAcceptable(s: string): boolean; } var lettersRegexp = /^[A-Za-z]+$/; var numberRegexp = /^[0-9]+$/; class LettersOnlyValidator implements StringValidator {     isAcceptable(s: string) […]

传统JavaScript关注功能和基于原型的继承为基本手段,建立可重用的组件,但这可能会觉得有点尴尬,对程序员来说当熟练使用面向对象的方法来开发时,类所继承的功能和对象是由其创建的。从ECMAScript 6,JavaScript程序员可以使用这种面向对象的基于类的方法构建应用程序。在typescript里,我们现在允许开发人员使用这些技术,无需等待下一个版本的JavaScript在所有主要的浏览器和平台JavaScript和编译它们。 1、类 让我们看看一个简单的基于类的例子: 1 2 3 4 5 6 7 8 9 10 11 class Greeter {     greeting: string;     constructor(message: string) {         this.greeting = message;     }     greet() {         return “Hello, ” + this.greeting;     } } var greeter = new Greeter(“world”); 如果你用过C#或java的话对于以上语法会很熟悉。我们声明了一个新类‘Greeter’,这个类有三个成员,一个属性‘greeting’,一个构造器,一个方法‘greet’。 你需要注意的是当指定类的一个成员时在前面加上‘this’,这表示,这是一个成员的访问。 在最后一行我们构造一个Greeter的实例使用“new”。这要求我们前面定义的构造函数,创建一个新对象的Greeter类型,并运行构造函数来初始化它。 2、继承 在 TypeScript,我们可以使用常见的面向对象模式。当然,基于类的编程是最基本的。模式之一是能够使用继承扩展现有的类来创建新的 让我们看一个例子: 1 2 3 4 5 6 7 8 9 […]

Typescript 的一个核心原则是类型检查关注于值的‘类型’。有时被称作‘鸭子类型’(duck typing)或‘结构类型’(structural subtyping)。在typescript里,接口扮演了命名这些类型的角色,同时也是在你的代码和链接你的外部工程里定义链接的有力方法。 1、我们的第一个接口interface 查看接口如何工作的最简单的方法是开始一个简单的实例: 1 2 3 4 5 6 function printLabel(labelledObj: {label: string}) {   console.log(labelledObj.label); } var myObj = {size: 10, label: “Size 10 Object”}; printLabel(myObj); 类型检查将检查调用‘printLable’。‘printLable’函数有一个带有原型‘lable’类型为字符串string的对象参数。需要注意的是我们传入的对象实属性际要比此要多,但是最终编辑器只是检查符合参数要求的那个属性。 我们再写一次同样的例子,这一次使用接口来描述此函数需要一个字符串类型的属性‘lable’: 1 2 3 4 5 6 7 8 9 10 interface LabelledValue {   label: string; } function printLabel(labelledObj: LabelledValue) {   console.log(labelledObj.label); } var myObj = {size: 10, […]

基础类型(Basic Types) 为了使程序正常工作,我们需要以下基本数据类型:numbers数字,structures结构,strings字符串,boolean布尔型值等等。在typescript中,通过注入一种方便的枚举类型来帮助typescript支持javascript同样的数据类型。 1、Boolean布尔型 Javascript和typeScript(其他语言同理)同样叫做布尔型‘boolean’的值只包含最简单的两个值真和假(true/false)。 1 var isDone: boolean = false;   2、Number数字 跟javaScript一样,typescript所有的数都是浮点数类型。这些浮点数获得类型‘number’。 1 var height: number = 6;   3、string字符串 另一种在网页和服务器端的基本数据类型是字符型数据。跟其他语言一样,我们用‘string’来表示字符类型的数据。跟javascript一样,typescript也是用单引号‘’或双引号“”来包裹字符串型数据。 1 2 var name: string = “bob”; name = ‘smith’;   4、Array数组 同样typescript也允许使用数组。数组类型可以用两种方法来表示。第一种使用元素的类型和后面紧跟的大括号‘[]’来表示素组每一个元素的类型: 1 var list:number[] = [1, 2, 3]; 第二种方法是使用一个通用数组类型,Array<elemType>: 1 var list:Array<number> = [1, 2, 3];   5、Enum枚举 一个对javascript很有用的附加标准数据类型是枚举类型’enum’,和C#一样,枚举类型是一种十分友好的给出名称和名称的值的方法。 1 2 […]

写在前面 本系列来自 @东北大客 http://14ms.net/ 的翻译,虽然没有全部翻译,但是仍然帮我我这种初学者且英语苦手的大忙。 我在东北大客翻译的基础上改了改错别字和一些描述上的问题,算是一点优化。 原文链接为:http://www.typescriptlang.org/   1、安装typescript支持 。 有两种主要方法获得typescript工具:通过node.js的包管理(npm),或者安装VS2012的TypeScript插件。 对于VS 2013用户,点击一下链接: Install TypeScript for Visual Studio 2013 对于NPM用户: 1 > npm install -g typescript   2、在编辑器(如webstrom)中新建greeter.ts文件,敲入一下代码:   1 2 3 4 5 6 7 function greeter(person) {     return “Hello, ” + person; } var user = “Jane User”; document.body.innerHTML = greeter(user);   3、编译TypeScript文件 以上文件使用 .ts为扩展名,但实际代码仍为 javascript。可以直接拷贝粘贴至现有的Javascript 程序中。 在命令行里键入 如下命令,运行 TypeScript 编译器 注:当前目录为greeter.ts的目录。 请完成以上步骤1,即已经安装了typeScript支持。 1 > tsc […]

MVC,MVP 和 MVVM 什么是混合开发(Hybrid) “白鹭”一个Html5游戏开发的引擎 用JS也可以搭建服务器,Nodejs-Express 一些与浏览器有关的统计数据

什么是前端开发工程师 前端开发工程师是Web前端开发工程师的简称,是近五年才真正开始受到重视的一个新兴职业。 这个岗位的职能现在还存在很多争议,尤其是在互联网技术并不发达的地区,但不管如何争执,前端工程师都需要掌握以下几个技能。 HTML CSS JavaScript 而争议就在于上面三个技能水平的不同,能做的事情不尽相同,而且其他岗位,如后端开发也要了解这些技能,一些设计也需要会这三个技能,导致了前端工程师的市场出现了一阵的混乱。 而现在,我们将这些可能造成混乱的岗位,根据岗位需要又进行了细分。   前端开发工程师的分类 美工:从设计,到页面重构全包的岗位,对上面三个技能的要求都只是熟练而已,互联网行业发达的城市几乎看不到该岗位了; 页面重构师:前两年比较标准的前端工程师,精通HTML、CSS,JavaScript是熟练级别能够很好的使用一些现成的类库和框架就好。 高保真原型开发师:一些公司分工非常细,这个岗位不用写JavaScript,但是Html和Css可能是专家级别的,负责将设计稿高度还原成页面。 H5前端开发工程师(JS方向):这个方向的工程师是JavaScript的专家,他们可以不用会写页面,但是写JS是一把好手。 H5前端开发工程师:没有特殊说明的H5前端开发工程师,是三项技能都达到精通的开发者,这类开发者用的前端开发技术比较新,倾向于解决移动端开发方案。 移动端前端开发工程师:很多公司以H5开发工程师来招募这个岗位的人员,然而其实H5开发工程师不一定是移动端开发,所以移动端前端开发工程师是专注移动端页面开发的人员,更了解手持设备。 前端架构师:专家级别的js开发工程师,负责造轮子写公司前端UI架构和脚本架构。 还有与设计和动画相关的前端开发岗位在这里就不赘述了…   前端工程师需要掌握的知识 上面说了3个基本技能,然而这3个基本技能并非像想象的那么简单,尤其是JavaScript,现在的受欢迎程度节节攀升,重要程度也不再是以前那个只做表单验证的被开发人员们嫌弃的语言。 另外前端作为中游开发,负责接收UI设计进行生产,之后产出给后台同学页面(现在一些开发模式不用给后台同学页面了,因为前端包办了后台模板开发的任务),所以前端作为枢纽,需要庞大的知识面,什么都要了解一些才能得心应手地做前端工作。 那么该掌握什么呢? 必须熟练掌握基本的web前端技术,比如:css、js、html 等等; 掌握一个到多个流行的类库(jQuery、zepto等)和框架(Angularjs、backbone、bootstrap等); 至少掌握或了解一门后端语言(JAVA、PHP、.Net); 必须掌握网站的性能优化、SEO、UE、服务器端、兼容性、存在的bug等; 学会用工具辅助开发; 有良好的代码规范编写习惯。 下面的图形象的说明了前端开发根本就是个百晓生… 做前端很简单,做前端很难 前端这个岗位在开发人员中,无疑是最具趣味性的,这得益于所见即所得的开发本质。 任何有一点代码基础的人,甚至不太懂代码的人都可以很快的写出一个页面,并让它运行在你的浏览器里面。 然而前端开发的学习曲线却是异常地陡峭,因此造成了现在市场上该岗位人才的两极分化,也是现在市场上前端开发供不应求的根本原因。   最后说说HTML5 H5前端开发是个奇怪的岗位,因为很多公司招募H5前端开发,其实并不是在用HTML5。 上海这边对稍微高端些的前端开发岗位,尤其是移动端,基本都叫H5开发了。 典型的岗位需求就是你要会一点Nodejs; 要会一个或多个MVVM或MVC框架; 最好会一点Hybrid开发; 能处理手持设备的兼容问题。   结语   智能手机大爆炸时代,移动端用户大暴涨时代,所有的开发应用势必会秉承移动优先的原则,作为专注移动端开发的HTML5,无疑将是未来开发领域的佼佼者。 几年内,HMTL5已经横跨所有智能平台,让我们拭目以待前端开发工程师多彩的未来。  

碰到以gbk做基础编码的项目,就可能避免不了编码混乱导致乱码的问题(水平问题和团队问题的产物)。 这里只说js的解决方案。   在script标签里面有charset这个参数,我们将该参数设置为你js文件的编码模式就可以解决文件中的乱码问题。 现在市面上的主流IDE都支持在下面状态栏显示编码模式的功能,没看到的话看下帮助。 比如你的文件是一个utf-8编码的文件,我们只要 <script src=”xxx.js” charset=”utf-8″></script> 就可以,不管你的页面是什么编码,都以将该js文件以utf-8的方式读取并执行。