2014-12-16 ES6 Template String | 写给大家看的设计书

[hjzheng]

ES6 Template String

//Basic usage with an expression placeholder
var person = 'Hao Ju Zheng';
console.log(`Yo! My name is ${person}`);

//Expressions work just as well with object literals
var user = {name: 'Zhen Ou Yun'};
console.log(`Thanks, ${user.name}`);

//Expression interpolation, One use is readable inline math.
var a = 50;
var b = 100;
console.log(`The number of JS frameworks is ${a + b} and not ${ 2 * a +b }`);

//Multi-line strings without needing \n\
console.log(`string text line 1
string text line 2`);

//Function inside expressions
function fn() {return "result"}
console.log(`foo ${fn()} bar`);

浏览器支持情况

• firefox34 及其以上版本
• chrome 马上会支持

  目前解决浏览器兼容方案

• es6TemplateString: 基于ejs和multiline实现

  用途

• 国际化
• HTML模板
• 多行文本

  ES6 Features

  ES6 Features兼容表

  ES6 Template String PPT

[hjzheng]

推荐一本书《写给大家看的设计书》

在这部畅销全球多年、影响了一代设计师的经典著作中，作者将优秀设计的秘诀归纳为对比、重复、 对齐和亲密性四条基本原则，用简洁通俗、幽默生动的文笔，配以大量经过修改进行前后对比的实例 图解和设计练习（并提供解答），直观而清晰地传授给读者。

设计四个基本原则：

• 对比（Contrast） 对比的基本思想是，要避免页面上的元素太过相似。如果元素（字体、颜色、大小、线宽、形状、空间等）不相同，那就干脆让它们截然不同。要让页面引人注目，对比通常是最重要的一个因素，正是它能使读者首先看这个页面。
• 重复（Repetition） 让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片，等等。这样一来，既能增加条理性，还可以加强统一性。
• 对齐（Alignment） 任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。
• 亲密性（Proximity） 彼此相关的项应当靠近，归组在一起。如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，为读者提供清晰的结构。