Ember.js 技巧、诀窍和最佳实践

Ember.js是一款用来创建炫酷的Web应用程序的JavaScript MV* 框架。 正像AngularJS,Backbone.js一样正在广泛的应用于现代的Web开发中, 知名用户包括 Yahoo!, Groupon, 和 ZenDesk.
总的来说, Ember.js还在推广之中, 国内使用它做开发的还比较少, 官方的文档也不是很完备。 所以这篇文章记录了我使用Ember中收集的一些技巧,诀窍和最佳实践, 并且会不断的更新。

想了解Ember.js和其它JavaScript框架的区别, 可以看这篇文章: AngularJS vs. Backbone.js vs. Ember.js

阅读全文

45个实用的JavaScript技巧、窍门和最佳实践

如你所知,JavaScript是世上编程语言的Number One (编者按: 原文如此), 用来编写Web和移动混合应用(比如PhoneGap或者Appcelerator), 也可以编写服务器端的程序(比如NodeJS或者Wakanda),并且拥有很多其他的实现。 它也是很多新手进入编程世界的启蒙语言,因为它不但可以在浏览器上显示一个简单的alert信息,而且还可以用来控制一个机器人(使用nodebot,或者nodruino)。掌握JavaScript并且能够写出规范并性能高效代码的开发人员,已经成为人才市场上的猎寻目标。

在这篇文章中,Saad Mousliki将分享一组JavaScript的技巧、窍门和最佳实践,这些都是JavaScript程序员应该知晓的,不管他们是使用在浏览器/引擎上,还是服务器端(SSJS Service Side JavaScript)JavaScript解释器上。

需要注意的是,这篇文章中的代码片段都在最新的Google Chrome(版本号30)上测试过,它使用V8 JavaScript引擎(V8 3.20.17.15)

阅读全文

Building With Gulp

对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使用正确的工具自动完成,从而使效率大大提高,这是让很多开发者觉得有趣的地方。

Gulp是一个构建系统,它能通过自动执行常见任务,比如编译预处理CSS,压缩JavaScript和刷新浏览器,来改进网站开发的过程。通过本文,我们将知道如何使用Gulp来改变开发流程,从而使开发更加快速高效。

Grunt 一直是前端领域构建工具的王者,然而它也不是毫无缺陷的,近期风头正劲的 gulp.js 隐隐有取而代之的态势。那么,究竟是什么使得 gulp.js 备受关注呢? gulp.js 的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处,请看nightire的翻译和总结
阮一峰在他的JavaScript 标准参考教程也有专门一节介绍: Gulp:任务自动管理工具
还有chenllos的gulp构建进阶供参考。

阅读全文

Ember命名规则

Ember.js定义了命名的规则, 相应的MVC javascript的名字应当遵循此规则, 并且依照此规则, 有些文件就可以省略。这篇文章整理了Ember的命名的约定规则, 有些官方文档给出了说明, 有些散落在其它文档以上网上的问答中。 有些甚至没有文档记录,Ember.js的文档还是很匮乏的。这篇文章很好的对命名约定(规则)做了一个总结。

阅读全文

Web开发利器:介绍一款快速开发套件 (Node, Grunt, Bower和Yeoman)

最近看到javacodegeeks上的一篇文章Node, Grunt, Bower and Yeoman – A Modern web dev’s Toolkit, 文章介绍了一个web开发的工具集。 正好我今年以来也在使用这套工具集开发Web应用程序,也一直想写一篇文章总结一下这套开发套件的用法,借此机会,参考这篇文章,总结一下我使用这套工具的经验。
在的文章中,作者使用angular 框架开发,而我,遵循公司的选择,使用Ember.js作为我的开发框架。同时使用Compass进行SCSS的编译。这些地方会有所不同。

像Node.js, 已经不算新鲜的玩意了。Node.js第一个版本于2009年发布,现在有很多的公司也采用Node作为后端开发工具。 至于Node.js是否代表先进的开发方向, 目前还有很大的争论。但是基于Node.js的生态圈已经形成,一大波的优秀的的Node.js 模块已经涌现。但是像Grunt, Bower等工具,也有不少的朋友并不了解。所以这篇文章特别介绍一下它们。

阅读全文

CSS的几个属性display,float,clear,overflow,visibility

整理了几个CSS常用的属性。

display属性:block/inline/none

display:block(作用是把行属性标签显示成块属性标签,可以设置宽高) ;
display:inline(作用是把块属性标签显示成行属性标签,这时块属性标签就不能设置宽高啦);
display:none(作用是使所控制的标签不显示)
visibility:hidden(是设置元素的框的不可见,但是在布局中的位置是不变的)
它和display:none的区别就在于后者不会占用那个位置,下一个元素会直接覆盖它,而前者是会占用那个布局,只是不显示内容,是 一片空白;并且下载的时候对于display:none就不会把不显示的元素给下载下来,而visibility:hidden则会把不显示的元素给下 载下来;

阅读全文

Sass基础

翻译自Sass官方文档: Sass Basics.

在使用Sass之前, 你需要在你的项目中设置一下。 如果你只是想浏览本页内容,没问题,继续。 但是还是强烈建议你首先安装Sass。 看这里的文档你可以了解怎么设置Sass。

预处理

Css自己本身很有趣,但是样式单变得越来越大,越来越复杂, 变得很难维护。 这真是预处理器要做的。 Sass让你使用CSS不存在的特性,比如变量,嵌套,混合(mixin), 继承等其它90个好的玩意来让CSS编写变得更有趣。

一旦你开始使用Sass, 它会预处理你的Saa文件, 把它存为一个正常的CSS文件, 用在你的网站上。

阅读全文