Archives

文件夹

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的方式读取并执行。  

本文章所提到的书为《AngularJs权威教程》 Ari Lerner著   绑定策略涉及到4个方式,分别为:“@”,=”,“&” 书中对于绑定策略的描述:   本地作用域属性:使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域变量。 @(or @attr)   双向绑定:通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就想普通的数据绑定一样,本地属性会反映出父数据模型中所发生的改变。 =(or =attr)   父级作用域绑定:通过&符号可以对父级作用域进行绑定,以便在其中运行函数。意味着对这个值进行设置时会生成一个指向父级作用域的包装函数。 要使调用带有一个参数的父方法,我们需要传递一个对象,这个对象的键是参数的名称,值是要传递给参数的内容。 &(or &attr)   因为书里面的描述比较简单,这里做一些补充说明: 从传递的内容来说 @ 传递过来的是一个字符串 = 传递过来的是一个字符串或对象 & 这里一定不要认为&传递的是一个函数,实际上父级作用域绑定传递的是一个函数的描述,通过该描述和父级作用域的函数建立联系然后执行。   简单的例子,一个有参函数的定义(无参函数比较容易理解这里就不做说明了): //指令HTML部分 <plug-in callback=”fun(value)”><plug-in> <script type=”text/javascript”> //对绑定的方法进行设计 app.run([‘$rootScope’,function($rootScope){ $rootScope.fun = function(value){ console.log(value); } }]); //指令的设计 app.directive(‘plugIn’,[function(){ return{ replace:true, scope:{callback:”&”}, template:'<div class=”demo”></div>’, restrict: “EA”, link:function($scope){ //执行绑定的方法 $scope.callback({value:1,data:2}); […]