韦德国际官网不要痴迷于HTML5,新司机开车指南

不要痴迷于HTML5 和 CSS3

2011/06/27 · HTML5 ·
CSS3,
HTML5

作为Web设计师,我们都不约而同的痴迷于HTML5和CSS3,我们需要学习HTML5和CSS3有关技术。博客里有很多关于这方面的教程、评论、讲解。但是,自己究竟学到了多少实用的技术?

我们似乎花了大量的时间在阅读关于这方面的文章,但是学到的技术和时间却不成正比。除了这个,还有很多方面值得我们去注意。

下面从几个方面讲讲我的心得,供大家参考。

用户服务

我们需要学习客户服务的几个原因:

第一,我们所做的是为了给用户提供更好的服务。我们不只是单纯的在做网站,我们要引导用户,为用户提供咨询意见和技术支持。

第二,通常多数网站上都会创建用户服务窗口,用户最终需要的往往不是网站程序,而是网站上的信息。

我们要为客户和用户提供更好的服务,所以我们要学习用户服务技术。我的建议是先阅读一些用户服务的博客,从客户体验问题开始入手。

心理学

心理学应该融入到我们工作的每一个细节中,例如:销售、项目管理、用户界面设计和设计美学。我们应该能换位思考,考虑客户和用户的感受,从中感受到他们所需要的东西。

我们只是知道本能的去学习,而不是通过任何正式的培训来弥补这方面的不足。我们设计灵感往往是直觉的反应,而不是那些死板的布局。能够洞察别人脑袋里的想法是至关重要的,无论是用户或是客户。

内容策划

内容是每一个网站的基础,以各种形式展现出来,包括:图像、文本、视频、音频和功能。

客户对于内容上的要求有很多,如果设计师提供不出满意的资料,客户将会取消与你的合作,转而把工作转交给别人。这样就白白错失一个合作的机会。

内容策划并然重要,但也不必成为内容策划的专家,只是需要了解这方面的知识。正如McCoy所说:“我是一个Web设计师,不是一个策划。”

如果在这方面欠缺的比较多,那就该为自己充充电了。推荐从Kristina
Halvorson写的书中开始学习,《Content Strategy for the Web》。

策略

如今的客户现在不只是单纯的需要设计一个网站,他们需求更多的是寻找一个可以告诉他们如何在网络世界中推广他们的业务的顾问。他们需要有人在业务上帮助他们做出回答,告诉他们如何才能把自己的产品、服务推广给更多的人,造成更大的社会效应。这一点往往都被设计师们忽视,所以我们也要在这方面加强学习。我相信只要策略制定明确,接下来的工作会事半功倍,避免一些重复的修改。

总结

现在问题就摆在我们的面前,每个设计师都在学习HTML5和CSS3,错过了学习其他知识的机会。随着网络变得越来越复杂,我们需要扩大自己的视野,拓展自己的知识面,才能迎合未来的互联网。

原文:webdesignerdepot
译文:张祺

 

赞 收藏
评论

韦德国际官网 1

JavaScript 深入之从 ECMAScript 规范解读 this

2017/05/17 · JavaScript
· this

原文出处: 冴羽   

SVG 新司机开车指南

2017/04/10 · HTML5 ·
SVG

原文出处: Tw93   

前言

在《JavaScript深入之执行上下文栈》中讲到,当JavaScript代码执行一段可执行代码(executable
code)时,会创建对应的执行上下文(execution context)。

对于每个执行上下文,都有三个重要属性

  • 变量对象(Variable object,VO)
  • 作用域链(Scope chain)
  • this

今天重点讲讲this,然而不好讲。

……

因为我们要从ECMASciript5规范开始讲起。

先奉上ECMAScript 5.1规范地址:

英文版:

中文版:

让我们开始了解规范吧!

TL,TR

SVG其相关特性远比想象中要强,本文首先介绍下SVG的相关定义、特点和Demo,接下来会介绍它的相关语法和动画,最后告诉大家如何使用和优化SVG。

确保大家一小时内可以开车上路….. 来不及解释了,快上车…..

韦德国际官网 2

Types

首先是第8章Types:

Types are further subclassified into ECMAScript language types and
specification types.

An ECMAScript language type corresponds to values that are directly
manipulated by an ECMAScript programmer using the ECMAScript language.
The ECMAScript language types are Undefined, Null, Boolean, String,
Number, and Object.

A specification type corresponds to meta-values that are used within
algorithms to describe the semantics of ECMAScript language constructs
and ECMAScript language types. The specification types are Reference,
List, Completion, Property Descriptor, Property Identifier, Lexical
Environment, and Environment Record.

我们简单的翻译一下:

ECMAScript的类型分为语言类型和规范类型。

ECMAScript语言类型是开发者直接使用ECMAScript可以操作的。其实就是我们常说的Undefined,
Null, Boolean, String, Number, 和 Object。

而规范类型相当于meta-values,是用来用算法描述ECMAScript语言结构和ECMAScript语言类型的。规范类型包括:Reference,
List, Completion, Property Descriptor, Property Identifier, Lexical
Environment, 和 Environment Record。

没懂?没关系,我们重点看其中的Reference类型。

一、简介

Reference

那什么又是Reference?

让我们看8.7章 The Reference Specification Type:

The Reference type is used to explain the behaviour of such operators
as delete, typeof, and the assignment operators.

所以Reference类型就是用来解释诸如delete、typeof以及赋值等操作行为的。

抄袭尤雨溪大大的话,就是:

这里的 Reference 是一个 Specification Type,也就是
“只存在于规范里的抽象类型”。它们是为了更好地描述语言的底层行为逻辑才存在的,但并不存在于实际的
js 代码中。

再看接下来的这段具体介绍Reference的内容:

A Reference is a resolved name binding.

A Reference consists of three components, the base value, the
referenced name and the Boolean valued strict reference flag.

The base value is either undefined, an Object, a Boolean, a String, a
Number, or an environment record (10.2.1).

A base value of undefined indicates that the reference could not be
resolved to a binding. The referenced name is a String.

这段讲了Reference有三个组成部分,分别是:

  • base value
  • referenced name
  • strict reference

而且base value是undefined, an Object, a Boolean, a String, a Number, or
an environment record其中的一种

reference name是字符串。

可是这些到底是什么呢?

让我们简洁的理解base
value是属性所在的对象或者就是EnvironmentRecord,referenced
name就是属性的名称

嗯,举个例子:

var foo = 1; var fooReference = { base: EnvironmentRecord, name: ‘foo’,
strict: false };

1
2
3
4
5
6
7
var foo = 1;
 
var fooReference = {
  base: EnvironmentRecord,
  name: ‘foo’,
  strict: false
};

再举个例子:

var foo = { bar: function () { return this; } }; foo.bar(); // foo var
fooBarReference = { base: foo, propertyName: ‘bar’, strict: false };

1
2
3
4
5
6
7
8
9
10
11
12
13
var foo = {
  bar: function () {
    return this;
  }
};
foo.bar(); // foo
 
var fooBarReference = {
  base: foo,
  propertyName: ‘bar’,
  strict: false
};

而且规范中还提供了可以获取Reference组成部分的方法,比如 GetBase 和
IsPropertyReference

这两个方法很简单,简单看一看:

1.GetBase

GetBase(V). Returns the base value component of the reference V.

返回reference的base value

2.IsPropertyReference

IsPropertyReference(V). Returns true if either the base value is an
object or HasPrimitiveBase(V) is true; otherwise returns false.

简单的理解:base value是object,就返回true

定义

SVG(Scalable Vector
Graphics)是可缩放矢量图形的缩写,基于可扩展标记语言XML来描述二维矢量图形的一种图形格式,由W3C制定,是一个开放标准。

GetValue

除此之外,紧接着规范中就讲了一个GetValue方法,在8.7.1章

简单模拟GetValue的使用:

var foo = 1; var fooReference = { base: EnvironmentRecord, name: ‘foo’,
strict: false }; GetValue(fooReference) // 1;

1
2
3
4
5
6
7
8
9
var foo = 1;
 
var fooReference = {
  base: EnvironmentRecord,
  name: ‘foo’,
  strict: false
};
 
GetValue(fooReference) // 1;

GetValue返回对象属性真正的值,但是要注意,调用GetValue,返回的将是具体的值,而不再是一个Reference,这个很重要。

那为什么要讲References呢?

特点

现在我们可以使用PNG、JPG来展示静态的图片,使用CSS3、JS或者挫一点的GIF来表示动画,厉害一点我们可以使用Canvas来绘图,那么为什么还要使用SVG呢?

  • 和PNG、GIF比较起来,文件体积更小,且可压缩性强;
  • 由于采用XML描述,可以轻易的被读取和修改,描述性更强;
  • 在放大或改变尺寸的情况下其图形质量不会有所损失,与分辨率无关,是可伸缩的;
  • SVG是面向未来 (W3C 标准)的,同时浏览器兼容性好;
  • 使用CSS 和 JS能很方便的进行控制,同时可以很轻易地描述路径动画;
  • 和Canvas相比
    • Canvas基于像素,提供2D绘制函数,是一种HTML元素类型,依赖于HTML,只能通过脚本来绘制图形,Canvas提供的功能比较原始,适合像素处理,动态渲染和大数据量绘制的应用场景;
    • SVG为矢量,提供一系列图形元素(Rect, Path, Circle, Line
      …),还有完整的动画,事件机制,本身可以独立使用,也可以嵌入到HTML中,SVG很早就成为了国际标准,功能更完善,适合静态图片展示,高保真文档查看和打印的应用场景;

如何确定this的值

看规范11.2.3 Function Calls。

这里讲了当函数调用的时候,如何确定this的取值

看第一步 第六步 第七步:

1.Let ref be the result of evaluating MemberExpression.

6.If Type(ref) is Reference, then

a.If IsPropertyReference(ref) is true, then i.Let thisValue be
GetBase(ref). b.Else, the base of ref is an Environment Record i.Let
thisValue be the result of calling the ImplicitThisValue concrete method
of GetBase(ref).

1
2
3
4
  a.If IsPropertyReference(ref) is true, then
      i.Let thisValue be GetBase(ref).
  b.Else, the base of ref is an Environment Record
      i.Let thisValue be the result of calling the ImplicitThisValue concrete method of GetBase(ref).

7.Else, Type(ref) is not Reference.

JavaScript

a. Let thisValue be undefined.

1
  a. Let thisValue be undefined.

让我们描述一下:

1.计算MemberExpression的结果赋值给ref

2.判断ref是不是一个Reference类型,

2.1.如果ref是Reference,并且IsPropertyReference(ref)是true, 那么this =
GetBase(ref)
2.2.如果ref是Reference,并且base值是Environment Record, 那么this =
ImplicitThisValue(ref),
2.3.如果ref不是Reference,那么 this = undefined

让我们一步一步看:

  1. 计算MemberExpression

什么是MemberExpression?看规范11.2 Left-Hand-Side Expressions:

MemberExpression :

  • PrimaryExpression // 原始表达式 可以参见《JavaScript权威指南第四章》
  • FunctionExpression // 函数定义表达式
  • MemberExpression [ Expression ] // 属性访问表达式
  • MemberExpression . IdentifierName // 属性访问表达式
  • new MemberExpression Arguments // 对象创建表达式

举个例子:

function foo() { console.log(this) } foo(); // MemberExpression是foo
function foo() { return function() { console.log(this) } } foo()(); //
MemberExpression是foo() var foo = { bar: function () { return this; } }
foo.bar(); // MemberExpression是foo.bar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function foo() {
    console.log(this)
}
 
foo(); // MemberExpression是foo
 
function foo() {
    return function() {
        console.log(this)
    }
}
 
foo()(); // MemberExpression是foo()
 
var foo = {
    bar: function () {
        return this;
    }
}
 
foo.bar(); // MemberExpression是foo.bar

所以简单理解MemberExpression其实就是()左边的部分

接下来就是判断MemberExpression的结果是不是Reference,这时候就要看规范是如何处理各种MemberExpression,看规范规定这些操作是不是会返回一个Reference类型。

举最后一个例子:

var value = 1; var foo = { value: 2, bar: function () { return
this.value; } } //试验1 console.log(foo.bar()); //试验2
console.log((foo.bar)()); //试验3 console.log((foo.bar = foo.bar)());
//试验4 console.log((false || foo.bar)()); //试验5 console.log((foo.bar,
foo.bar)());

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var value = 1;
 
var foo = {
  value: 2,
  bar: function () {
    return this.value;
  }
}
 
//试验1
console.log(foo.bar());
//试验2
console.log((foo.bar)());
//试验3
console.log((foo.bar = foo.bar)());
//试验4
console.log((false || foo.bar)());
//试验5
console.log((foo.bar, foo.bar)());

在试验1中,MemberExpression计算的结果是foo.bar,那么foo.bar是不是一个Reference呢?

查看规范11.2.1 Property
Accessors,这里展示了一个计算的过程,什么都不管了,就看最后一步

Return a value of type Reference whose base value is baseValue and
whose referenced name is propertyNameString, and whose strict mode
flag is strict.

返回了一个Reference类型!

该值为:

var Reference = { base: foo, name: ‘bar’, strict: false };

1
2
3
4
5
var Reference = {
  base: foo,
  name: ‘bar’,
  strict: false
};

然后这个因为base value是一个对象,所以IsPropertyReference(ref)是true,

那么this = GetBase(ref),也就是foo, 所以this指向foo,试验1的结果就是 2

唉呀妈呀,为了证明this指向foo,累死我了!

剩下的就很快了:

看试验2,使用了()包住了foo.bar

查看规范11.1.6 The Grouping Operator

Return the result of evaluating Expression. This may be of type
Reference.

NOTE This algorithm does not apply GetValue to the result of
evaluating Expression.

实际上()并没有对MemberExpression进行计算,所以跟试验1是一样的。

看试验3,有赋值操作符
查看规范11.13.1 Simple Assignment ( = ):

计算的第三步:

3.Let rval be GetValue(rref).

因为使用了GetValue,所以返回的不是reference类型,this为undefined

看试验4,逻辑云算法

查看规范11.11 Binary Logical Operators:

计算第二步:

2.Let lval be GetValue(lref).

因为使用了GetValue,所以返回的不是reference类型,this为undefined

看试验5,逗号操作符
查看规范11.14 Comma Operator ( , )

计算第二步:

2.Call GetValue(lref).

因为使用了GetValue,所以返回的不是reference类型,this为undefined

但是注意在非严格模式下,this的值为undefined的时候,其值会被隐式转换为全局对象。

所以最后一个例子的结果是:

var value = 1; var foo = { value: 2, bar: function () { return
this.value; } } //试验1 console.log(foo.bar()); //2 //试验2
console.log((foo.bar)()); //2 //试验3 console.log((foo.bar =
foo.bar)()); //1 //试验4 console.log((false || foo.bar)()); //1 //试验5
console.log((foo.bar, foo.bar)()); //1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var value = 1;
 
var foo = {
  value: 2,
  bar: function () {
    return this.value;
  }
}
 
//试验1
console.log(foo.bar()); //2
//试验2
console.log((foo.bar)()); //2
//试验3
console.log((foo.bar = foo.bar)()); //1
//试验4
console.log((false || foo.bar)()); //1
//试验5
console.log((foo.bar, foo.bar)()); //1

注意:严格模式下因为this返回undefined,所以试验3会报错

最后,忘记了一个最最普通的情况:

function foo() { console.log(this) } foo();

1
2
3
4
5
function foo() {
    console.log(this)
}
 
foo();

MemberExpression是foo,解析标识符
查看规范10.3.1 Identifier Resolution

会返回一个 Reference类型

但是 base value是 Environment Record,所以会调用ImplicitThisValue(ref)

查看规范10.2.1.1.6

始终返回undefined

所以最后this的值是undefined

Demo

使用SVG可以做出什么比较好玩的东西呢?

韦德国际官网 3

上周团队(😂😂臭不要脸插个很硬的广告,阿里飞猪前端团队在招人啦,详细:飞猪寻觅前端同学)有一个小的hackthon,就是通过代码来画这个Loading
GIF,然后就边学边用SVG写了一个相同的loadng,体积从之前GIF的33KB变成了864B的SVG,详细见下面:

See the Pen Fliggy Loading by Tw93
(@tw93) on CodePen.

另外一些有趣的SVG可以查看30 Awesome SVG Animation For Your
Inspiration这里。

多说一句

尽管我们不可能去确定每一个this的指向都从规范的角度去思考,久而久之,我们就会总结各种情形来告诉大家这种情形下this的指向,但是能从规范的角度去看待this的指向,绝对是一个不一样的角度,该文有不严谨的地方,还请大神指正!

二、坐标定位

学习SVG语法之前,我们可以来了解下SVG的坐标定位,这种坐标系统和我们小时候学习的绘图坐标是相反的,但是在HTML中都是用如下方式定位。即以页面的左上角为(0,0)坐标点,坐标以像素为单位,x轴正方向是向右,y轴正方向是向下

韦德国际官网 4

深入系列

JavaScript深入系列预计写十五篇左右,旨在帮大家捋顺JavaScript底层知识,重点讲解如原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念,与罗列它们的用法不同,这个系列更注重通过写demo,捋过程、模拟实现,结合ES规范等方法来讲解。

所有文章和demo都可以在github上找到。如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎star,对作者也是一种鼓励。

本系列:

  1. JavaScirpt 深入之从原型到原型链
  2. JavaScript
    深入之词法作用域和动态作用域
  3. JavaScript 深入之执行上下文栈
  4. JavaScript 深入之变量对象
  5. JavaScript 深入之作用域链

    1 赞 收藏
    评论

韦德国际官网 1

三、元素

基础形状

SVG中提供了很多基础元素可以用来绘制基础的形状,譬如矩形、圆形、椭圆、多边形、折线、线条、路径等,同时可以将这些基础形状组合绘制出复杂的图像。

韦德国际官网 6

以上基础形状的展示效果可以通过这些代码表示出来,详细见下:

See the Pen SVG Basic_Shapes by
Tw93 (@tw93) on CodePen.

发表评论

电子邮件地址不会被公开。 必填项已用*标注