五
17

【转载】对话《JavaScript高级程序设计》作者 Nicholas C. Zakas（中文版）

业界大牛尼古拉斯扎卡斯的一份访谈实录，蛮开阔眼界的，转载给大家，如果喜欢请注意标明转载出处。

注：以下根据Nicholas C. Zakas回复图灵社区访谈邮件的原文翻译。

转自： http://www.ituring.com.cn/article/1791

—————————————– 正文如下 ————————————————-

Q1：对各种JavaScript库的优点和缺点一直存在很多争论。在您看来，开发人员应该怎么选择合适的库？

Zakas：在选择JavaScript库的时候，有几个非常重要的方面要考虑。首先，就是时间问题，也就是你的项目多长时间必须做完？如果时间很短，那最好选择你最熟悉的JavaScript库。如果时间不那么紧迫，那你可以研究一下别的库。此时，必须要回答几个问题。还有谁在使用这个JavaScript库？这个库有人在不断完善吗？这个库的文档是否完整详细？这个库的背后有没有一个社区，假如你遇到了问题，能不能获得该社区的支持？是否容易找到具有使用这个库经验的工程师？这个库能不能解决你的所有问题，还是只能解决其中一部分？所有这些都是在选择某个JavaScript库时需要考虑的重要因素。

Q2：你对HTML5的未来怎么看？现在的宣传是不是太过分了？

Zakas：HTML5对Web发展是一件好事儿。但不好的是，一些外行的非技术人员，不分青红皂白地给很多无关的东西都扣上”HTML5“的帽子，这才搞得HTML5这个概念满天飞。这与几年前“Ajax”的情况非常相似。从某种角度看，确实宣传上有点过了，仿佛HTML5会彻底改变每个人的生活。事实并非如此。HTML5的意义在于为开发人员提供了更多的工具，利用这些工具能够创建更有吸引力的用户体验。

Q3：看来，Mobile Web（移动互联网）开发会成为下一行业焦点，你觉得呢？

Zakas：移动互联网开发已经是焦点了。今天，谁不关注移动用户，谁就要被时代抛弃。移动互联网可不是昙花一现，它将是一个时代。如果你真是在开发Web应用，那么就必须考虑移动体验，否则就会让别人让抢占先机。

Q4：现在有很多基于JavaScript改进的语言，比如Dart、 CoffeeScript，等等。你认为JavaScript今后的路会朝着哪方面发展呢？是更加类似于JVM这种的中间层，还是仍然维持一个强大灵活的编程语言存在？或者说，对于专注于JavaScript的前端工程师来说，是否应该投入大精力去研究和使用CoffeeScript这种语言来简化工作，而不是纠结于JavaScript本身可能的繁复解决方案呢？

Zakas：我没觉得JavaScript有一天只会被当成一个中间层。Dart和CoffeeScript很引人关注，这说明开发人员可能更希望JavaScript能多适应一些应用场景。最终，我想JavaScript会博采众长，吸纳其他语言中更流行的范式，从而使语言核心更完善。但我不认为将来的Web开发人员会只用Dart或CoffeeScript或者其他能编译为JavaScript的语言写代码。

Q5：你觉得Node.js怎么样？它会在服务器端开发中发挥重要作用吗？将来，Web前、后端开发真能只用一种语言来做吗？ Read more…

五
12

NodeJS与webSocket

NodeJS貌似在一直升温。的确，从去年就一直开始关注NodeJS了，那个时候还是吴玺喆同学和我谈起这个事情~~~回头我就算变扫了一下，无非就是在服务器端运行的JS而已。使用JavaScript作为指令调用底层的C++，这个思维模式还是挺不错的，并且在服务器端执行的效果也非常理想。那个时候想养肥了再看看，结果不到半年时间NodeJs已经有了飞速的发展，各方面的组件，各方面的社区文章介绍都已经非常全面了。NodeJS并且已经退出了Windows版本的安装程序。极大的方便了开发者（之前是在Ubuntu环境下部署的）。

webSocket 是一个非常不错特性，与其说是Html5的功能，不如说是浏览器支持的功能。Html5只是一个规范草案，添加了canvas，header，footer，nav，silder等一系列更加优化的语义标签，而Geolocation，webSocket，localStore等都是浏览器厂商支持的结果。（概念不要混淆哦）正好趁着去学习的时间，做了一个NodeJS与webSocket的小例子。拿出来和各位共享一下。

webSocket 是 Html5 的一种新的协议。它实现了浏览器与服务器的双向通讯。webSocket API 中，浏览器和服务器端只需要通过一个握手的动作，便能形成浏览器与客户端之间的快速双向通道，使得数据可以快速的双向传播。

Read more…

五
12

程序员日记（四）

很久没有更新了，不是因为别的，最近手上有私单，公司的事情也有一堆，暂时忙不过来，太久没更新，也挺对不起观众的。

最近一直在研究着Rails以及NodeJS，另外，收获了不错的PhoneGAP学习心的，那马上的好好的和朋友们交流交流。

公司最近还在催着做无线前端组件库的事，o(︶︿︶)o 唉，wo+的事情还在手上，越来越多的事情会堆积在这里，怎么样好好的处理，这才是我要做的事情，也没啥好抱怨的，食君之禄担君之忧，不管怎么说，一个程序员的技术可以不好，但是职业素养一定要有，不是常说么，素质决定这你这辈子的高度。

三
20

JavaScript 数组过滤函数

很奇怪，数组为什么没有这样的功能，自己扩展的一个函数，欢迎大家拍砖。

Array.prototype.filterArr = function(){
      var targArr = this;
      var newArr = new Array();
      for(var i=0,count=targArr.length;i<count;i++){
          //如果数组元素为无意义元素
          if(targArr[i]!=null&&targArr[i]!=""&&targArr[i]!="undefined"){
              var _tempString_ = newArr.toString();
              if(_tempString_.indexOf(targArr[i])<0){
                  newArr.push(targArr[i]);//植入数组中
              }
          }
      }
      alert(newArr);
      return newArr;
  }
  //使用方法
  var ssss = ['1','1','1123123','1','1','1','1','1','1234','123423554','1','1','11','1534','23421','1234','111','11','14234342','123']
  ssss = ssss.filterArr();
二
11

JavaScript的值与引用

example-1

var obj1 = new Object();
var obj2 = obj1;
obj1.name = "michael"
alert(obj2.name == obj1.name);        //return true;

obj1，obj2 同为对象，obj1 虽然有修改对象属性，但其 obj2 与 obj1 对象指向同一对象，即便动态修改对象的属性值，其对象的引用还是一致。所以返回 true。

example-2

var str1 = "hello world";
var str2 = str1;
str1 += " china";
alert(str1 == str2);        //return false;

String 对象为基础对象，在JavaScript运行中直接指向地址，当 str1 发生改变时，已经重新创建了新的对象，所以 str1 与 str2 返回 false。

二
02

JavaScript 面向对象开发

什么是面向对象开发？

面向对象编程（Object-Oriented Programming，OOP）是一个软件开发范式，它基于称为 “对象” 的数据结构的定义，由数据属性和函数组成。这些属性（成员变量）和函数（或方法）定义软件与那个对象可能进行的交互。OOP 的主要好处是，简化您的代码结构，有助于代码重用和维护。

“面向对象” 基础知识

面向对象编程的基本前提是：在您的软件中创建一些对象，这些对象定义一系列应用于该对象的属性和一系列能够检索或修改该对象的属性的方法或函数。car 可能是一个简单的对象示例。与一个 car 关联的数据属性可能包括它的 manufacturer、model number、registration number、color、cubic capacity，等等。一个 car 对象提供的方法可能包括 accelerate、brake、change gear、turn、stop 等等。在 OOP 中，理念是您定义对所有汽车都通用的基本属性和方法，每辆汽车都将采用那个定义的形式，尽管每辆汽车都采用不同的值。本文稍后将介绍，软件开发中有不同的面向对象途径。

常用OOP术语

为最大限度地利用本文，您至少应该熟悉面向对象编程及其概念。下面简要描述讨论面向对象开发时使用的一些常用术语。需要说明的是，并非所有 OOP 类型都包含每个概念；例如，基于原型的对象语言（比如 JavaScript）中就没有 “类”。

类
在基于类的面向对象开发中，一个类定义组成一个对象的不同属性和函数。类定义用于生成对象的模板，因此它们应该定义这些对象能够遵守的公共属性和动作。类通常由成员变量和方法构成。
成员变量
对象的成员变量就是该对象的属性。在前面提到的汽车示例中，这些属性包括该汽车的 manufacturer model、color、cubic capacity，等等。
方法
方法是对象能够执行的动作。例如，一辆汽车能够 accelerate、brake、turn，等等。通常，方法将修改成员变量的值。例如，当一个 car 对象使用 accelerate 方法加速时，它的当前速度属性将增加。许多对象都有一个称为 constructor 的方法，该方法在对象创建后立即被调用。
实例或对象 Read more…

一
29

程序员日记（三）

二零一二终于来了，我的职业规划第一阶段也进入尾声了，在第一个五年规划即将结束的时候。我有了什么提升么？

我很意外我成为了一名前端开发工程师，虽然最初的梦想是成为一名高级Java架构师，在编程路上，前端无疑给我了更好的选择。色彩、体验、互联网的环境给我很大程度的支持，让我来到了前端开发工程师的岗位。首先要感谢 吴玺喆 同学。没有他，就没有今天的我的前端开发工程师之旅。

我离我的目标还有一定距离，JavaScript 还是我的软肋，更好的系统架构，更好的抽象，更好的OOD风格。目前还是我的硬伤，Html,Css 的坚实基础倒是让我能够在前端开发道路上有一些建树。接下来还需要在 JavaScript 中发力。继续前端架构师的路。路，还很长~~~~~~~~

  1. 坚定不移的从Java转到Ruby系。
  2. Speaking English is piece of cake.
  3. JavaScript OOP 以及性能优化。
  4. Html5 & Css3

2012 蜕变的时候到了。

^_^

 

一
23

程序员日记（二）

今天是二零一二年的正月初一，外面烟花似锦，处处融融洽洽。首先跟大家拜个年，希望大家龙年大发。多多赚钱，早日移民。 ^_^


开始正题吧，这是我的第二篇程序员日记，（如果想看第一篇日记请移步：程序员日记（一））因为日记都是不定期发的，作为程序员平常也是埋头编程，“两耳不闻屏外事，一心沉浸coding中”应该不光只是我，也是大多程序员的写照。归结起来，程序员可以算是“匠人”每一个入行的程序员都是怀揣着“改变世界”的梦想的。是的，不管是Android，IPhone还是我们常用的扫描枪，超声波检测以（B超）处处都有这程序员的辛劳的编码，日以继夜的调试，尽职尽责的BUG修复和打补丁，部署和测试程序。作为行业从业人员，我想一句由客户发自内心由衷的赞叹比多拿一些物质上的奖励还要来的弥足珍贵（当然，有钱又有表扬是最好的）。

北京国之源软件有限公司，张总，昱哥，小敏，吸管姐，杨老大，张佩安，李海军，朱玲玲小胖子，李福中，徐诺，当然还有伟大的雅姐。这就是我在国之源最大的收货，为什么离开国之源，其实心里的原因我一直没有清楚的回答过老张。老张绝对是我工作以来对我最好的领导之一，对我的信任和器重我不用言语来表达，至今我还一直把自己当成国之源的一份子，虽然人不在公司，但是至少也算是在国之源有过一段快乐的回忆。

离开国之源的原因有三
  • 金钱：毫不掩饰的说，钱是一个方面，任何不以金钱作为跳槽的原因考虑在内的不是装B就是扯淡，国之源当时的工资体系确实让我倍感压力，看着身边的同事一个个都拿着高于自己N多的薪水，能不动心想想是否要另谋出路么？
  • 进步：在国之源公司基本上没啥东西持续进步，前端技术基本上都需要靠自己摸索，没有伙伴的那种孤独感，作为一个三年的前端开发工程师来说我想我要走的路还有有很长，也不擅长于在这里就开始扮演一个导师的角色，我想和大家一起进步，多分享，在技术公司，分享应该是常态化，公司的培训比较少，当然，长沙也没有北京那种环境，没事周几一个社团或者组织就会有一次免费的学习，让大家一起交流真正坐在一起作为工程师的节日。不过公司对于送员工出去培训没有任何概念，既没有鼓励也没有组织，处于一个管理的中空地带和比较尴尬的位置。对于银子不多的程序员来说，不图钱又暂时没发展，任何人都会萌生退意吧？
  • 产品理念：这是我最头疼的一个方面，也是直接导致我离开公司的重要原因，资源库，浙江网二期的改版工作，研究性学习平台。我一直有一个疑惑，我们是靠什么来驱动产品的开发？客户的需求，市场调研，还是面对面的文档确认？至少来公司的工作的这段日子。产品经理这个位置一个比较模糊。任何不以数据或者文档为原型的系统都可以把它当作自己的意淫。需求文档的细节把握不到位，原型文档的还原不到位都有可能直接导致需求还原的失真。一个软件在大目标和方向上的偏差会直接导致产品质量和成本的损耗。这应该不是我应该要教各位的了。
国之源的工期其实挺“赶”的，说实话。工期大部分都不是放在了正常的开发和需求讨论中，大部分都是在不断的需求迭代和版本的更新之间消耗了。错误的工作方式是导致软件质量无法提升的一个根本。在公司，最常见的现象就是一堆程序员从一个项目挂到另一个项目，从一个BUG修复到另一个BUG。从心理角度来分析，这样的工作模式是会让人产生非常不良的抵触情绪的。我能够理解公司在人力成本控制上的初衷，也能理解一个公司在求生存的初期碰到的问题和需要付出的代价。我谈这些也没有职责公司和诋毁公司任何同事工作不到位的意思。只是觉得有问题，大家应该提出来，然后看看怎么解决，不能解决，我们有没有替代方案ABC，让大家觉得公司注重的是“自上而下的执行力”。回归正题，一位员工同事兼几个项目其实挺不好的，首先，原来出现的问题需要修复，如果在忙的时候，大家想当然的都是为了解决BUG去解决代码，其次是为了完成功能而去CODING。最后才是安安稳稳，沉下心来进行“代码设计”。“设计”这两个字其实挺考究的，有幸在公司学习了管理上的“杨三角”理论，“设计代码”完全可以理解为是员工的思维，也就是自主能动性。调动员工的积极性创造出来的产品才是最有价值的。把员工放在单一的产品上，既能够快速的的找出软件的BUG，也能够快速的重构和重新设计软件的架构。即便从A版本递增到B版本，BUG的快速修复和新功能的叠加在一位员工上有积累，那么做出来的产品版本与版本之间的精细度和质量会越来越高，为什么谷歌公司一名工程师想升职必须要在某一个特定项目拥有十年的工作历史，而从一个项目到另一个项目不断的谷歌工程师却不受欢迎，不是没有道理的。

以上是我的个人愚见，我也欢迎大家给我留言讨论和交流。下面是我给各位的新年祝福
——————– 华丽的分割线 ——————–

徐诺：哥们，你是个非常不错的小伙子，也就是今天咱看了RUBY入门编程突然由徐诺想起了国之源公司，才有了上面的文章。哈，哥们咱一个人在公司都没有一个一起喝咖啡的人了，最近更是获得了“奶茶叔叔”的称号，o(︶︿︶)o ~~~~~~~~~岁月催人老啊。如果将来有幸我们还能同事，哥一定出资去买个咖啡机，咱一起装B做文艺小青年。

昱哥：不知道昱哥的头发张长了没有。

杨老大：EasyTrac 最终还是没用上，o(︶︿︶)o 唉，倒是在Linux下把Trac给搭建起来了，不过很可惜，一直没用上。

雅姐：越来越可爱了，这小姑娘，你还让不让人活啊？

吸管姐：其实早上在食堂吃东西挺没意思的，好久没有听见那熟悉的吸管声了，哈，在公司我又认识了你们红图集团的一位PHP工程师哦。

小敏：o(︶︿︶)o 唉，这姑娘越来越有女人味了，你还让不让别的姑娘活？？？？给你的HTML前端基础别荒废了，有空多把玩把玩，不管是在任何公司作为WEB设计师，设计风格肯定是有一定的局限的。既然是WEB设计师，肯定就会带有WEB的“工业性”，别忘了我教你的东西。

李福中：其实长沙程序员群里面有很多重口味的话题，有空多看看，最近约炮之风也带到的群里了。

张佩安：哥们，别拿你的手机乱刷了，要知道，哥我是花了80块用金卡刷机的代价的。

张总：有空其实咱还是可以好好聊聊。

春霞：o(︶︿︶)o 唉，不说什么了，蛋糕我吃了，要吃的话自己过来找我要吧。

最后希望大家龙年，工作顺利，龙腾四海，龙马精神，龙的传人。。。。。。。。。

（二零一二年一月二十三日晚，十点二十四分）
十二
27

html5 canvas 研究笔记（一）

最近公司开始折腾web game，正好可以接触和使用html5了，开始记录自己的Html5学习曲线。看了N多的帖子，发现自己早就拉后别人一大截了，T_T ~~~~~~~~~~~~

今天写的是一个简单的 Html5 游戏，也是参考了李松峰前辈的博客写的，有兴趣的同学可以移步李松峰前辈的博客

好了，话不多说，今天做的是一个非常简单的功能。在画板上把图片画上去。

代码如下：

(function(){
	var x=y=0;
	var xDirection = 1;
	var yDirection = 1;
	var image = new Image();
	image.src = "jsplatformer1-smiley.jpg";
	var canvas = document.getElementById("canvas");
	var context2D = canvas.getContext('2d');
	//画图函数
	var drawImg = function(){
		clearCanvas();
		context2D.drawImage(image,x,y);
		//边界值判断
		x += xDirection;
		y += yDirection;
		console.log("xpoint is:"+x+",ypoint is:"+y);
		//判断画板边界值
		if(y>canvas.height-150){
			yDirection += -1;
		}else if(x>canvas.width-150){
			xDirection += -1;
		}else if(y<0){
			yDirection += 1
		}else if(x<0){
			xDirection += 1;
		}
	}
	//清理画布
	var clearCanvas = function(){
		context2D.clearRect(0,0,canvas.width,canvas.height);
	}
	//初始函数值
	var init = function(){
		window.setInterval(drawImg,1000/800);
	}
	init();
})();

其中，context2D.clearRect(0,0,canvas.width,canvas.height);  这个方法用于清空画板，众所周知，在 Html5 中是没有动画这个概念的，动画都是基于原始的帧在界面上的模拟。这个方法在动画的应用中是随处可见。也是画板的常用方法之一了。赶快更新代码来试试吧。

十二
05

WAP移动网站开发HTML入门

移动互联网被称为“第五次科技革命”，而随着iPhone和Android等智能手机的日渐流行和iPad等平板电脑的出现，移动互联网的潜力和趋势也愈发显现，针对移动设备的网站开发越来越受到关注，国内很多公司也开始重视面向所有移动设备的网站开发。

一般来说，对于移动网站可以采取两种方式：

  • 专门开发一个独立的移动版本
  • 使用media type和media query控制网站在移动浏览器的样式表

移动网站标记语言的演进

这张图形象的展示了标记语言的发展历程，包括移动网站标记语言。

移动网站开发要比普通的网站开发复杂的多，选择一种用于移动网站的标记语言同样相当纠结。

在最初，WAP论坛(后来和NTT合并，组成OMA，Open Mobile Alliance)创建了一种基于XML的语言，称为WML，这是用于WAP网站的标记语言。它并不是理想的方案，因为它将网站分割为两部分：普通页面使用(X)HTML，而移动网站使用WML。网站开发者想要做一个移动网站也不得不学习一种新的语言而不是转换技术，“一站式”的信条也被打破，用户不能访问他们喜欢的网站并且不得不发现这个网站的WAP版本——如果它们存在的话。另外日本的NTT创建了他们自己的语言cHTML(compact HTML)，但是它并不能与XHTML和WML兼容。

由于这与理想中的方案相去甚远，W3C创建了XHTML Basic 1.0。正如其名，这是一个XHTML 1.1的子集。由于XHTML 1.1将XHTML改善为小型的模块，一个子集就可以只包含一些必须的或者可以在低端移动设备上控制的基本的模块、元素和属性。

Read more…

Go back to top