前端知识篇——（五）

CSS 题目：自适应布局与响应式布局

JavaScript 题目：继承与原型链

其他题目：前端开发、交互、视觉

CSS

题目：自适应布局与响应式布局

自适应布局

自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。根据屏幕的宽度，自动调节网页的内容大小，但是无论怎么样子，他们的主体的内容和布局是没有变化的。

 自适应设计是基于断点使用静态布局，一旦页面被加载就无法再进行自动适应，自适应会自动**检测屏幕的大小**来加载适当的工作布局，也就是说，当你要采用自适应设计网站时，你得至少设计6种常见的屏幕布局，分别是320、480、760、960、1200、1600分辨率的终端

自适应网页设计优势

1.实施起来代价更低，测试更容易，这往往让它们成为更切实际的解决方案。

2.自适应布局可以让设计更加可控，因为它只需要考虑几种状态就可以了。

响应式布局

由于自适应布局暴露了一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容会过于拥挤。响应式布局就是为了解决这个问题衍生出来的，它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。


响应式就相当于液体（流布局），它可以自动适应不同尺寸的屏幕，使用**CSS** media queries方法，根据目标设备自动改变风格如显示类型,宽度、高度等适应不同尺寸的屏幕

响应式网页设计优势

1.面对不同分辨率设备灵活性强。
2. 能够快捷解决多设备显示适应问题。

自适应和响应式的区别

响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。

JavaScript

题目：继承与原型链

原型链

每个对象都有一个私有属性（称之为 Prototype ，它指向它的原型对象（prototype）。该 prototype 对象又具有一个自己的 prototype ，层层向上直到一个对象的原型为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。


  let  o = {a: 1, b: 2}

  o.prototypr = {b: 3, c: 4}

  o.[[Prototype]].[[Prototype]] = null.
// 综上，整个原型链如下: 
// {a:1, b:2} ---> {b:3, c:4} ---> null
  console.log(o.a); // 1
  console.log(o.c); // 4

（1）属性继承

JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

// 接上面的代码
  console.log(o.a); // 1
  console.log(o.c); // 4

（2）方法继承

当继承的函数被调用时，this 指向的是当前继承的对象，而不是继承的函数所在的原型对象。

let o = {
  a: 2,
  m: function(){
    return this.a + 1;
  }
};

console.log(o.m());    // 3   当调用 o.m 时,'this'指向了o.
let p = Object.create(o);     // p是一个继承自 o 的对象
p.a = 4;   // 创建 p 的自身属性 a
console.log(p.m());   // 5

（3）创建对象和生成原型链

语法结构创建的对象

let o = {a: 1};
// 原型链如下:
// o ---> Object.prototype ---> null

let a = ["yo", "whadup", "?"];
// 原型链如下:
// a ---> Array.prototype ---> Object.prototype ---> null

function f(){
  return 2;
}
// 原型链如下:
// f ---> Function.prototype ---> Object.prototype ---> null

object.create 创建的对象

新对象的原型就是调用 create 方法时传入的第一个参数

let a = {a: 1}; 
// a ---> Object.prototype ---> null

let b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1 (继承而来)

let c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null

let d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty); // undefined, 因为d没有继承Object.prototype

性能

在原型链上查找属性比较耗时，对性能有副作用，这在性能要求苛刻的情况下很重要。另外，试图访问不存在的属性时会遍历整个原型链。

遍历对象的属性时，原型链上的每个可枚举属性都会被枚举出来。要检查对象是否具有自己定义的属性，而不是其原型链上的某个属性，则必须使用所有对象从Object.prototype继承的 hasOwnProperty 方法。

 let a = {a: 1};     

 let b = Object.create(a);

 console.log(b.hasOwnProperty('a'));

其他：前端开发、交互、视觉

前端工程师，在着手代码时，手上一般有产品文档、交互原型、标注图和切好的图片资源。

一个合格的前端，应该明白自己在开发时手中的原材料到底意味着什么，这样写出的代码，更能符合需求，提高产品的最终体验，前端自己也能在这个过程中有更多的思考，修炼自己的各方面能力。

产品篇

需求最开始起源于用户，而我们的产品经理捕捉、提炼、整合这些零散的需求，就产生了我们的开发对象——产品。前端们要去实现的各种逻辑和功能点，都一一对应了这些需求，可以说，这些功能是一个产品的灵魂。

产品类文档可以让开发纵观整个产品，让开发掌握每一个功能点的轻重、意义，能帮助开发根据产品本身优化代码，减少后期维护成本，间接地提高开发效率。

交互篇

交互设计师的工作内容分成两个部分：一个是信息架构，一个是交互细节。

一个产品可能有几十上百种功能，呈现数十种信息，因此交互设计师需要分配这些功能和信息，使得每个功能和信息都能在恰当的层级得到呈现，这就是信息架构的安排，合理的信息架构让一个产品的功能出现在最合适的场景，让用户找到的就是自己想要的。

而交互细节则更像是刀的手感，怎样得当地优化各种功能和信息在层级上的排布、位置和响应等等，让功能不仅恰当的出现，还能顺手地使用。

交互可以直接影响到产品功能能否被用户正确发挥，功能是灵魂、那交互就是撑起灵魂的骨架。

视觉篇

视觉在产品中，相当于交互骨架之外面的皮肤，而皮肤的一大功能是装饰。一个产品的视觉设计决定这个产品是否美观，能否给用户带来愉快视觉感受。一套好看的用户界面，能让人产生愉悦的感受，然而除此之外，视觉设计有着更深层重要的功能，就是引导用户获取信息。

如果把文字和图形都归纳为视觉区域，这个视觉区域的大小、颜色乃至形状，都会都会给人不同的影响力和感受，通过有效的安排这些因素，并加以合理的排列布局，可以有效的引导用户阅读多层次信息，了解不同重要程度的功能。

前端知识篇——（五）

猜你喜欢