/** * segment - A little JavaScript class (without dependencies) to draw and animate SVG path strokes * @version v0.0.4 * @link https://github.com/lmgonzalves/segment * @license MIT */
这是一本袖珍书，灵感来自于其他免费、简短、友好的编程书，例如Alex MacCaw的《The Little Book on CoffeeScript》。我写这本书的目的是像我学习AugularJS那样介绍它，关注典型环境的快速web开发中如何应用AngularJS。依据帕累托原则（Pareto principle）， 优先讲简单、实用的功能，课程结束之后，您可能只了解AngularJS的一部分，却可以利用该框架轻松创建强大的前端应用。本书是一个动态网站，所有案例使用最新版的AngularJS（Angular 1.3.14），如果您倾向于交互学习，那么修改代码指令，您可以实时的看到运行效果，鼓励大家进行探究性、实验性学习。
##2.1 AngularJS 难或易? 我有近十年的web MVC的工作经验，从 Struts 到Spring MVC到Ruby on Rails到Backbone，我甚至还写了一本Backbone and CoffeeScript方面的书，因此我自认为学习AngularJS起来肯定非常简单。但是，当我沉浸在API和文档中时，我发现各种各样不熟悉的名词和术语（transclusion, directive, and isolate scope）阻碍了学习进程，当我阅读官方文档和教程时，所谓的简单易学好像没有出现，反而是一头雾水，比如说下面这段折磨人的文字。
The advantage of transclusion is that the linking function receives a transclusion function which is pre-bound to the correct scope. In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope. This makes it possible for the widget to have private state, and the transclusion to be bound to the parent (pre-isolate) scope.
当然，Angular是一个明显的、固执己见的选择(Angular is a broad, opinionated solution)。虽然通常被认作一个库，但是Angular内置的对模块化、依赖注入的支持，将会改变您的项目管理方式。如果你想找一个Angular的替代方案，或许更加成熟的，或许最佳的，但是这些都不可能完全替代Angular。除非您的项目肯定能达到Google工程师认为的经典的水准，你可能不需要达到Angular核心团队认定的组织支持的水平。依赖注入尽管可以用在单元测试方面，但还是太过复杂，大家可以到Dependency Injection 看看实在的案例。
未来标准 尽管我不能确定Angualr能达到什么高度，Angular母公司Google会如何创造未来，有一点非常明确，Angular的使用方式非常接近目前提出的标准 Web Components，另外，Angular接近于下个版本Javascript的特征（例如Object.observe）它的基础原则将会被维持而不会弃用。
[10] === 10 // is false
[10] == 10 // is true
'10' === 10 // is false
'10' == 10 // is true
[] === 0 // is false
[] == 0 // is true
'' === false // is false
'' == false // is true but true == "a" is false
悬挂(Hoisting)
首先来看段代码，大家先猜下运行结果。
1 2 3 4 5 6
var a = 1; functiongo(){ console.log(a); var a = 2; } go();
var a; a = 1; functiongo(){ var a; console.log(a); a = 2; } go();
立即调用函数表达式(IIFE)
立即调用函数表达式(IIFE, Immediately Invoked Function Expressions)是Javascript里面常用特性，我们可以利用它“避免污染全局变量”、“解决闭包冲突”、“只执行一次的函数”、“减少重复创建比较大的对象的开销（常见在一些工具函数内部，保存正则对象，数组，长字符串等对象”等。
var f1 = function() { var res = []; var fun = null; for(var i = 0; i < 10; i++) { fun = function() { console.log(i);};//产生闭包 res.push(fun); } return res; } // 会输出10个10，而不是预期的0 1 2 3 4 5 6 7 8 9 var res = f1(); for(var i = 0; i < res.length; i++) { res[i](); }
我们可以使用IIFE解决这个问题，修正过的代码如下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
var f1 = function() { var res = []; for(var i = 0; i < 10; i++) { // 添加一个IIFE，立即执行 (function(index) { fun = function() {console.log(index);}; res.push(fun); })(i); }
return res; }
// 输出结果为0 1 2 3 4 5 6 7 8 9 var res = f1(); for(var i = 0; i < res.length; i++) { res[i](); }
模拟单例，javascript中我们可以使用IIFE实现OOP。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
var counter = (function(){ var i = 0; return { get: function(){ return i; }, set: function( val ){ i = val; }, increment: function() { return ++i; } }; }());
/*定义*/
/// Returns the opposite direction of each direction in a list
/// @author Hugo Giraudel
/// @param {List} $directions - List of initial directions
/// @return {List} - List of opposite directions
@function opposite-direction($directions) {
$opposite-directions: ();
$direction-map: (
'top': 'bottom',
'right': 'left',
'bottom': 'top',
'left': 'right',
'center': 'center',
'ltr': 'rtl',
'rtl': 'ltr'
);
@each $direction in $directions {
$direction: to-lower-case($direction);
@if map-has-key($direction-map, $direction) {
$opposite-directions: append($opposite-directions, unquote(map-get($direction-map, $direction)));
} @else {
@warn "No opposite direction can be found for `#{$direction}`. Direction omitted.";
}
}
@return $opposite-directions;
}
/*使用*/
.selector {
background-position: opposite-direction(top right);
}
<h2class="icon">Let's go to whqet's blog</h2> <p>前端开发whqet，<aclass="blog"href="http://blog.csdn.net/whqet/">王海庆的技术博客</a>，关注前端开发，分享相关资源，希望可以对您有所帮助。csdn专家博客http://blog.csdn.net/whqet和个人独立博客http://whqet.github.io同步更新，希望可以得到您的支持与肯定，您的支持是我最大的动力！王海庆，浙江邮电职业技术学院软件技术青椒一枚，其貌不扬、其名不翔，关心技术、热爱生活，我爱<aclass="link"href="#">怒放的生命</a>。</p>
其他浏览器
