All posts in Front-end

Angular or React ?

如今这又是个容易引发部落冲突的问题,就像当年vim还是emacs,eclipse还是netbeans一样,虽然我打部落战已经相当熟练,但是没有必要的部落战争能不参与还是不参与为妙;

可以值得确认的是,我至今还没有个可以真正自由选择他们从而好好比较一番的契机(我这人最近又比较懒,没事也打不起精神去琢磨他们……);项目里面要不是已经做出了选择要不就是已经各种框死,余地不是不大是根本没有,好在本人早就过了年轻气盛横冲直撞的年纪,最近也反正无欲无求与世无争的,感觉就差遁入空门了……

项目用啥就用啥呗,学学用起来便是,没啥好争的,存在便于存在的意义,所谓开卷有益,开个lib什么的自然也不会害人;真要争也要等都好好用过一番了再说,没用过就评论和豆瓣上那些没看过几遍电影就好评差评的一样极其不负责任;

所以鄙人以下一部分言论属于极其不负责任的范畴;
Continue reading →

AngularJS Tutorial – Learn AngularJS in 30 minutes (Part 2)

由于篇幅过长,所以人为强行分成两篇,望见谅。

接上篇,AngularJS Tutorial – Learn AngularJS in 30 minutes (Part 1)

隐藏和显示elements

AngularJS另外还提供了一套指令(directive),允许用户根据一些条件或者表达式来隐藏或者显示某个DOM element。这些指令有ngHide,ngShow,ngSwitch和ngIf。这些指令提供了相类似的结果,不过在不同的情况下它们分别会很有用。当你遇到一些类似case switch的情况下ngSwitch指令会很有用,比如一些单选按钮开关(radio switch toggle)。ngHide,ngShow和ngIf有些本质上的不同,虽然表面十分相似。ngIf会将受影响的element从DOM里面移除,而ngHide和ngShow只是加了一个 display:none 的css属性来隐藏它。

因此因尽量可能的使用ngIf,因为这样可以为已经忍受杂乱不堪DOM的浏览器省掉一部分内存。ngHide和ngShow在显示动画效果的时候会特别有用,因为ngIf会由于牵涉到DOM的创建和删除这类比较消耗资源的操作通常会影响到动画的展示效果。

在我们这个简单的例子里,我想在每个我最喜欢的TV show的边上加上一个星星。可以使用ngIf来达到这个效果,让我们来修改index.html。

<h3>A list of TV shows</h3>
<ul class="list-group">
    <li class="list-group-item" ng-repeat="show in main.shows"><span class="glyphicon glyphicon-star" ng-if="show.favorite"></span> {{show.title}} <span class="badge">{{show.year}}</span></li>
</ul>

这样在show.favorite这个属性是true的时候,页面DOM就会被简单的加上一个星星。这里还另外支持表达式,所以像 show.favorite == true 或者 show.favorite != false这样的表达式在这里也同样可行。
Continue reading →

AngularJS Tutorial – Learn AngularJS in 30 minutes (Part 1)

每当我要逼自己去学习点新东西的时候,我总是强迫自己去认真读完一系列关于此类知识或是技术的一看上去就不错的文章,所谓开卷有益;但鄙人有个坏习惯就是喜欢一目十行断章取义,可能互联网的快餐式节奏让我和我的小伙伴们都渐渐趋于浮躁了,当然也许趋于浮躁的只有鄙人也说不定,小伙伴们可能都很淡定,无故拉上不明真相的群众垫背纯属鄙人以小人之心度君子之腹;

于是,本文就在这样的大背景下诞生了;

本文为译文,翻译自原文:http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/

同理按我以前翻(xue)译(xi) )其他文章的尿性,标题通常保留原文标题,属于不被待见的范畴,标题君默默哭晕在厕所;

============================== 我是分割线 ==============================

摘要

本AngularJS教程将会在30分钟里以一套合理优化过的知识介绍带你浏览整个AngularJS的世界,带你装逼带你飞(译者注)。当看完本篇篇幅不长但内容细致的教程后,您将能快速的创建强大且直观的web应用程序。

观看演示
查看源代码
Continue reading →

YUI3: Creating a Module with Dependencies

前文类似,本文为译文,相关事宜同前文。

[问题]
你想要创建一个自定义的YUI模块并确保它会把另外一个YUI模块作为依赖加载。

[解决办法]
使用YUI.add()方法注册你的code作为一个YUI全局对象(YUI global object)的一个模块,注册的过程中把模块的依赖作为配置对象传给它。在模块名字和定义之后,YUI.add()还接收两个可选的参数:

  • 一个模块的字符串形式的版本数字。这是你的模块的版本号,并不是你的模块所兼容的YUI版本。
  • 一个包含模块metadata的配置对象。目前这个配置对象(configuration object)里面最常见的field是一个叫requires的array,它列出了该模块的所有依赖。对里面所列出的每个模块,YUI会自动在需要的时候加载它们,必要的时候会远程的加载。

下面的例子对前文例子做了修改。Y.Hello.sayHello()不在返回一个字符串值,而是改变一个单个Y.Node的内容。这个hello模块定义了一个node-base的依赖,来确保调用hello模块的时候node.setHTML()是存在并可用的。
Continue reading →

YUI3: Creating Your Own Modules

本文节选翻译自YUI3 Cookbook,翻译的目的是force自己focus看完,因为最近实在过于焦躁不安心神不宁;好了废话不多说,我们开始,因为可能牵涉到版权问题,所以恕不能同时附上英文原文。水平有限,如有错误皆是本人认知问题,与原文无关。

[问题]
你需要以YUI模块的形式来包装并复用你的code。

[解决办法]
使用YUI.add()方法把你的code注册成为YUI全局对象(YUI global object)的一个模块。最少需要给YUI.add()提供:

  • 一个模块的名字。习惯上,YUI模块的名字一般为小写字母,使用hyphens(-)分割;
  • 一个实际定义模块代码的回调函数(callback function)。可以通过把这个component定义到Y对象上的方法来expose这个模块的相关属性或方法。

一旦YUI.add()执行完毕,你便可以像其它任何YUI模块一样来使用你自己的代码。下面的例子里面i,模块定义之后紧接着的就是YUI().use(),它会加载模块以及其依赖,并在回调函数里面执行其模块方法。

< !DOCTYPE html>
<title>Creating and using a Hello World module</title>
<div id="demo"></div>
<script type="text/javascript" src="http://yui.yahooapis.com/3.8.0/build/yui/yui-min.js"></script><script type="text/javascript">
  YUI.add('hello', function (Y) {
    Y.namespace('Hello');
    Y.Hello.sayHello = function () {
      return 'GREETINGS PROGRAMS';
    };
  });
  YUI().use('node-base', 'hello', function (Y) {
    Y.one('#demo').setHTML(Y.Hello.sayHello());
  });
</script>

为了避免命名冲突,你可以使用Y.namespace()来创造一个“Hello”的namespace作为这个sayHello()方法的命名空间。Y.namespace()是个方便实用的工具,虽然这里例出的例子非常简单,本质上等同于:

Y.Hello = {};
注:上面这个例子只展现出最基本的创建模块的代码block。这个example对于构建真正可复用的code并不足够。真实世界里面的模块需要定义依赖和其它metadata,且它们通常会被定义在另外独立的文件中。

Continue reading →

[Footnotes]
  1. 译者改成了使用yui3最新版:3.8.0 []