内置对象

ECMA-262 把内置对象(built-in object)定义为“由 ECMAScript
实现提供的、独立于宿主环境的所有对象,在 ECMAScript
程序开始执行时出现”。这意味着开发者不必明确实例化内置对象,它已被实例化了。ECMA-262
只定义了两个内置对象,即 Global 和 Math
(它们也是本地对象,根据定义,每个内置对象都是本地对象)。

理清楚了这几个概念,有助于理解我们下面要讲述的原型和原型链。

Flex 布局教程:实例篇:

1 赞 2 收藏
评论

图片 1

使用 SVG 输出 Octicon

2016/03/18 · HTML5 ·
SVG

原文出处:
aaronshekey   译文出处:[百度EFE

  • Justineo]()   

GitHub.com 现在不再使用字体来输出图标了。我们把代码库中所有的 Octicon
替换成了 SVG 版本。虽然这些改动并不那么明显,但你马上就能体会到 SVG
图标的优点。

图片 2

Octicon 上的对比

切换到 SVG
以后,图标会作为图片渲染而非文字,这使其在任何分辨率下都能很好地在各种像素值下显示。可以比较一下左侧放大后的字体版本和右侧清晰的
SVG 版本。

JS 中原型和原型链深入理解

2018/05/05 · JavaScript
· 原型

原文出处: erdu   

首先要搞明白几个概念:

  1. 函数(function)
  2. 函数对象(function object)
  3. 本地对象(native object)
  4. 内置对象(build-in object)
  5. 宿主对象(host object)

align-self属性

align-self 和align-items
一样,都是清理额外空间,但它是单独设置某一个伸缩项目的。所有的值和align-itmes
一致。

CSS

p:nth-child(2){ align-self:center; }

1
2
3
p:nth-child(2){
    align-self:center;
}

此时的效果就是:

图片 3

其他属性值的效果同align-items,这里就不赘述。

可访问性

就像在《图标字体已死》一文中所述,有些用户会覆盖掉
GitHub
的字体。对于患有读写障碍的用户,某些特定字体是更加容易阅读的。对于修改字体的用户来说,我们基于字体的图标就被渲染成了空白方框。这搞乱了
GitHub 页面布局,而且也不提供任何信息。而不管字体覆盖与否,SVG
都可以正常显示。对于读屏器用户来说,SVG
能让我们选择是读出 alt 属性还是直接完全跳过。

本地对象

ECMA-262 把本地对象(native object)定义为“独立于宿主环境的 ECMAScript
实现提供的对象”。简单来说,本地对象就是 ECMA-262
定义的类(引用类型)。它们包括:
Object,Function,Array,String,Boolean,Number
Date,RegExp,Error,EvalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError.

我们不能被他们起的名字是本地对象,就把他们理解成对象(虽然是事实上,它就是一个对象,因为JS中万物皆为对象),通过

typeof(Object) typeof(Array) typeof(Date) typeof(RegExp) typeof(Math)

1
2
3
4
5
6
typeof(Object)
typeof(Array)
typeof(Date)
typeof(RegExp)
typeof(Math)
 

返回的结果都是function

也就是说其实这些本地对象(类)是通过function建立起来的,

function Object(){ } function Array(){ } …

1
2
3
4
5
6
7
function Object(){
    
}
function Array(){
    
}

可以看出Object原本就是一个函数,通过new
Object()之后实例化后,创建对象。类似于JAVA中的类。

justify-content属性

justify-content
在当灵活容器内的各项没有占用主轴上所有可用的空间时对齐容器内的各项(水平)。

CSS

div{ display:flex; justify-content:space-around; }

1
2
3
4
div{
    display:flex;
    justify-content:space-around;
}

效果如下:

图片 4

可以看到所有项目平均分布,而且两端也有保留一半的空间。

此属性的属性值有:

  • flex-start : 伸缩项目以起始点靠齐
  • flex-end : 伸缩项目以结束点靠齐
  • center : 伸缩项目以中心点靠齐
  • space-between : 伸缩项目平均分布
  • space-around : 伸缩项目平均分布,但两端保留一半的空间

因为这些效果还是很容易就理解了,这里我就不一一演示了。

对页面渲染的改进

因为我们直接将 SVG 注入
HTML(这也是我们选择这种方式更大的原因),所以不再会出现图标字体下载、缓存、渲染过程中出现的样式闪动。

图片 5页面闪动

函数对象

函数就是对象,代表函数的对象就是函数对象

官方定义,
在Javascript中,每一个函数实际上都是一个函数对象.JavaScript代码中定义函数,或者调用Function创建函数时,最终都会以类似这样的形式调用Function函数:var
newFun = new Function(funArgs, funBody)

其实也就是说,我们定义的函数,语法上,都称为函数对象,看我们如何去使用。如果我们单纯的把它当成一个函数使用,那么它就是函数,如果我们通过他来实例化出对象来使用,那么它就可以当成一个函数对象来使用,在面向对象的范畴里面,函数对象类似于类的概念。

var foo = new function(){ } typeof foo // object 或者 function Foo (){ }
var foo = new Foo(); typeof foo // object

1
2
3
4
5
6
7
8
9
10
11
12
13
var foo = new function(){
    
}
typeof foo // object
 
或者
 
function Foo (){
    
}
var foo = new Foo();
 
typeof foo // object

上面,我们所建立的对象

最后

在这里我推荐一下阮一峰写的两篇关于flex布局的博客,写得非常好:

图形尺寸更合适

我们目前对每个图标在所有尺寸下提供单一的图形。因为站点的加载依赖了图标字体的下载,我们曾被迫把图标集限制在最重要的
16px 尺寸下。这让每个符号在视觉上做出一些让步,因为我们是针对 16px
方格进行优化的。当在新页面或营销页上缩放这些图标时,显示的还是 16px
的版本。而 SVG 可以方便地 fork
全部的图标集,在我们指定的每个尺寸提供更合适的图形。当然对图标字体也可以这么做,但这样用户需要下载两倍的数据量,可能更多。

函数

function foo(){ } var foo = function(){ }

1
2
3
4
5
6
function foo(){
    
}
var foo = function(){
    
}

前者为函数声明,后者为函数表达式。typeof foo
的结果都是function。

flex-direction属性

flex-direction属性用于设置伸缩项目的排列方式。

CSS

div{ display:flex; flex-direction:column; }

1
2
3
4
div{
    display:flex;
    flex-direction:column;
}

效果如下:

图片 6

结果就是容器内的所有项目按照从上到下排列的。

当你设置为row-reverse时,效果就是:

图片 7

这个是从浏览器的右边往左边排列的。

此属性的属性值有:

  • row : 设置从左到右排列
  • row-reverse : 设置从右到左排列
  • column : 设置从上到下排列
  • column-reverse : 设置从下到上排列

大家不妨都试一下,看看每一个的效果如何。

性能

在切换到 SVG
以后,我们还没发现页面加载和性能上有任何不良影响。我们之前曾预计渲染时间会大幅下降,但往往性能和人的感知更相关。由于
SVG
图标被渲染为了指定宽高的图像,页面也不再会像之前那样闪动了。

同时由于我们不再输出字体相关的 CSS,我们还能干掉一些多余的 CSS
代码。

发表评论

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