学习使用CoffeeScript(一)以及部分js基础知识扫盲……

2014年3月26日22:39:49

前一阵子一直听马老板推荐coffee script 这个神器。
我的理解是这货是一个用于JS预处理的东东,coffee 之于 javacript 就如 less 之于 css。
今天难得下班比较早,外加早上又不小心点到她人人主页围观了一会儿以及下午又被来面试前端的童鞋的高水平给刺激到了..
于是就稍微研究了一下这个东西,顺便开启博客恢复更新模式..
好了,废话不多说了,先上coffeescript 的官方网站: http://coffeescript.org/
然后打开nodejs客户端,输入以下命令:
npm install -g coffee-script

1-install-coffeescript

下载安装完之后就可以使用啦,文档的话还是参照官方网站好了。
2-test-coffeescript
2-test-coffeescript
接下来安装官网上的介绍做一下示例程序~
3-demo-coffeescript
3-demo-coffeescript
先是简单的一个定义语句

4-use-coffeescript

由 coffee 转为 javascript 之后,多了不少东东呢..
5-coffeescript-to-javascript
5-coffeescript-to-javascript
嗯.. js孤陋寡闻的我还是研究下这个“简单”的代码吧。。
首先,这个似乎是由一个匿名函数包裹起来.. 最后为啥尼玛又call调用自己啊我戳。。
查阅了一下 MDN的手册 ,
上面的解释是:
 The call() method calls a function with a given this value and arguments provided individually.
说人话大概就是:call()方法根据给定的this值和若干参数来调用一个函数…
实际操作呢结合到上面的代码,就是:直接调用这个匿名函数的call方法,木有参数。
查阅了JS高级程序设计这本书的第116以及117页,5.5.5 函数属性和方法。
上面写到:
每个函数都包含两个非继承而来的方法:apply()和call()。两者的用途都是在特定的作用域中调用函数,实际上等于设置函数体内的this对象的值。
而函数体内的this对象,由5.5.4 函数内部属性 可知,
函数内部有两个特殊对象,arguments 和 this, 其中 this 的行为与 Java和C#中的this大致类似。
换句话说,this引用的是函数据以执行的环境对象——或者也可以说是this值(挡在网页的全局作用域中调用函数时,this对象引用的就是window)。
举个栗子:
window.color = “red”;
var o = {color:”blue”};
function sayColor() {
     alert(this.color);
}
sayColor();       // ???
o.sayColor = sayColor ;
o.sayColor();   //  ???
—————————
一定要牢记:函数的名字仅仅是一个包含指针的变量而已。因此,即使是在不同的环境中执行,全局的sayColor()函数与o.sayColor() 指向的仍然是同一个函数!
—————————
以上
清风迅来(XuXun)
Dalston Xu

弱弱发一则招聘启事我知道肯定木有人来看的~~~

 爱回收网招前端开发实习生,www.aihuishou.com
在这里,你将与视觉设计师一起,参与完成产品线Web功能的开发;
我们希望你,关注新事物、新技术,有较强的学习能力,喜欢挑战,热爱前端开发;我们希望你,可以熟练使用各种 Web 前端技术,包括CSS布局、解决常见浏览器兼容性问题;
我们希望你,有基于Ajax 应用的开发经验,了解一门后台开发语言。
有兴趣的可以留言~

【前端】table中使用colgroup应用样式在HTML5文档标准下的问题

近日,在做一个页面的时候,需要对一个表格的某几列添加一些样式,理所当然地想到了一个标签: colgroup。于是乎打算先在w3cschool上DIY下看看效果,结果发现被坑爹了……

 

colgroup样例代码的显示就出问题了

以上的代码我还没有对其修改,结果显而易见,colgroup里的style:color 属性失效了……  同时,就连 align 属性也跪了..

当时的开发需求是需要对N个网页里的表格模板进行样式修改,所以总不见得把每一个模板的table的那些行都手工添加上一个class吧 T_T..

在网上找了下原因,结果在  Table columns  这篇文章里,发现了一些相关的介绍,大致意思是:原先在HTML4的时候确实是可以对colgroup应用样式的,但是到了HTML5里:

“很不幸,W3C声明中,只有一部分的样式属性可以应用到column上(border,background,width和visibility)。例外: IE7 及更低版本”

这份介绍看得我真是菊花甚痛…… 我于是用ie浏览器去测试了一下,结果确实如此:从IE8一直到IE10,都无法显示colgroup的样式,但是到了IE7就瞬间亮瞎……

IE7下colgroup的属性正常应用样式

IE7下colgroup的属性能够正常应用样式..

以上的问题在 w3.org 的wiki上也有提及,确实是目前仅能应用4个样式。

按照语义化来说,使用 colgroup 确实是符合标准的诶,不知道为何目前仍然没有支持。根据 stackoverflow 上面的一个问答,发现竟然已经是5年前的问题了… 有一种可能性是因为table的物理模型上,colgroup以及col是位于第二、第三层,仅高于最底层的table,而tr,td,th等都位于最高层,会覆盖底层的样式?(可是也尝试给colgroup加了id以增加,不过也没有效果)

于是乎,回过头来看自己项目本身的需求,也只是需要修改下字体的对齐方式(居左改为居中),所以兼容性的要求相对也不是很高,决定使用 css 3 的 选择器。所以稍作权衡,就决定用css3选择器 :nth-child(n)

———————————————–

不过实际上,当我看到后台模板编辑里的某个东东的时候… 瞬间就手贱了……

富文本编辑器的text-align

妥妥地偷懒使用富文本编辑器的对齐功能了…… (不过实际上没偷懒多少吧… 还是要一个个跑到模板里去改…… ORZ….

 

徐迅
Dalston
2013年11月25日20:57:53

 

iPhone前端开发折腾记录……

今天正式开始弄iPhone前端开发…… 这个和Web前端开发差得够多了的啊……

① 安装 Xcode 4.1 时,报错说,要关闭其他安装程序,以及升级至10.6.6……
可问题是我那台 Mac Mini 是 10.7.4 的…… 后来知道原来要安装 高版本的 Xcode……
比如: Xcode 4.3 ……

② 安装Xcode时,遭遇 An unknown error occurred :
查阅日志文件发现: com.apple.SecurityServer: Failed to authorize right ‘system.install.app-store-software’ by client

解决方案是网上谷歌的结果:

签名过期了,把系统时间调到3月23号以前

之后从技术总监大神那了解到:最新版Xcode只需要把安装包拖到“应用中心”就能进行安装~

Google I/O Extended上海分场活动宣传

活动介绍

一年一度的Google I/O又近在眼前,如果你没有在20分钟内抢到今年Google I/O的门票,不要难过,因为我们今年有Google I/O Extended!


Google I/O Extended是谷歌支持的在当地收看Google I/O Keynote和其他Session直播的活动,今年I/O Extended来到了上海,所以上海的开发者和谷歌爱好者们有福啦 🙂

今年的Google I/O Extended分两个会场
 

谷歌上海的办公室(人数有限制)

地址:世纪大道100号上海环球金融中心60楼

22:15 – 22:30 签到及暖场
22:30 – 23:00 AdMob开场演讲
23:00 – 23:30 Chrome 及 HTML 5 技术探讨
23:30 – 00:00 Google I/O 2012 预热
00:00 – 01:00 现场直播 Google I/O 大会主题演讲

联合创业办公社 会场

地址:上海静安区昌平路990号8号楼 延平智阁 (近延平路)

23:00 – 24:00 介绍Google i/o 暖场 聊天
0:00 – 1:00 Google i/o Keynote 直播
1:00 – 3:00 Google i/o Sessions 直播
3:00 – 7:00 自由交流

主办方介绍

上海Google Developer Group


上海GDG(Google Developer Group,谷歌开发者社区),以前叫GTUG(Google Technology User Group, Google技术用户组) ,众所周知,Google的搜索引擎、地图、GA,Android等各项技术,在世界范围内有大量开发者和用户,为了满足学习和使用Google技术的需要,上海的Google技术开发者和用户形成社区,聚集在一起,共同研究,相互讨论,互相学习,共同提高技术水平。

联合创业办公社


联合创业办公社是坐落在上海静安繁华之地的一家分享办公空间。聚集在此地的大都是年轻的创业者或自由职业人。在这里,每一个创业者和团队都是背靠背的兄弟!大家通过彼此间的交流,分享了更多元的人脉关系和资源。无论你是已经走在了创业的路上,或者是揣怀着美好的梦想,你都可以在这里为自己的想法找到新鲜的创业灵感和丰富的自由。

媒体支持

爱范儿

爱范儿(ifanr)是国内最出色的新锐科技媒体,为《新周刊》2011年度网站奖项得主,致力于“独立,前瞻,深入”的原创报道和分析评论。

TopGeek

顶尖极客沙龙(TopGeek)是面向技术极客的组织,定期举办线下活动,讨论软件和互联网的一些新的技术潮流,开发理念和经验。

 

详见报名网站 http://googleio.51qiangzuo.com/,有兴趣的同学一起来吧

 

【开源】梦里和现实中语言表达、组织的方式是否一样?

现象:梦里自己说话是脱口成章,现实自己说话却言语迟钝

分析:

① 是否是因为梦里能意识到自己控制的那个人时,已经处于意识和半意识之间,是直接由语感完成语言组织和表达?而此时的语言能力最好?
② 还是说梦中的语言只是,只是对于梦的呈现,是控制着自己说出本就注定要说出来的话?

YY :如果将上述情况通过某种途径(比如:催眠?)应用到改善语言能力中,是否会有效果呢?

以上,昨晚做梦有感……

清风迅来
Dalston Xu
2012年6月24日

【SEO】用优质的评论回复引来访客围观你的网站~

以下,是清风迅来这两天亲身体会的一个小例子(主要面向群体为个人网站博主):

大致的思路是,在具有较高访问量的网站,(比如高质量的个人博客站),对博文发表相对较高质量回复、或者是用心、认真回复,当有些访客觉得你的评论很不错时,会下意识地把鼠标移动到你的昵称上,然后,click~ 接着就来到了你的网站了。

以图为据,当然…很明显我的那条回复也谈不上多少高质量,充其量只算是比较用心
清风迅来在卢松松博客上的回复
清风迅来在卢松松博客上的回复
 然后,截止到现在(2012年6月22日14点18分),已经有………………… 4 个独立IP的访问了,其中两位热心的童鞋还回复了我的文章…荣幸啊~…(对于我这个小博客而言,已经很不错了~~)
源自卢松松网站的访客
源自卢松松网站的访客

为了做到以上的条件,我说说一些可能会有帮助的 Tips:

① 昵称:尽量起得和当前博文属于相近的类别

比如一篇内容为程序开发的技术型文章,那么,尽量用“geek”,“c++ lover”等等比较技术型的名字;如果是吐槽型的内容,那么……“最炫XX风”,“无力”……;当然,对于个人博客的站长,就更好办了,直接挂上您的名号吧~

(我也最推崇使用个人名号:艺名、网名、外号、小名、真名一类…… 因为人的名字更具有亲近感~)

总之,就是让访客对你的昵称产生一种共鸣感,认为你和他是同一类人

当然前提是要保证你的网站包含昵称提及的内容,不然这就是在坑访客了,要始终坚持访客至上的原则~

此外,个人不建议使用XX公司等代表机构类型的,具有鲜明广告色彩的昵称,原因是我认为:大多数有耐心看博客文章、博客评论的访客相对都比较理性,普遍会对广告比较反感…… =。=

② 个人网站:最好留个能记录访客来源的网址

(或许可以考虑与当前文章内容相关的网址,因为可以说当前文章提供了你文章的上下文情景,这样能减少访客的阅读理解时间,也就是说提高阅读体验

③ 内容:心平气和、利人利己、精益求精、量力而为

以上,个人观点,欢迎各位大神指点~!

PS:发现自己的文章越写越偏题…… 思维太发散了…………  也觉得自己似乎都尝试从用户心理的角度上进行分析……

清风迅来
2012年6月22日

附:
文章中提及的卢松松大神的那篇文章: http://lusongsong.com/reed/491.html