前端基础（一）

时间：2020-06-30 19:04:35 收藏：0 阅读：51

HTML

html元素嵌套问题:
- 元素嵌套：块元素可以包含内联元素或某些块元素，但内联元素却不能包含块级元素，只能包含其他的内联元素。
- P元素嵌套问题 ：
```
<p>
      <div></div>
</p>
```
  实际结果：
  通过查询，发现原来p元素内无法包裹块级元素。因为我们使用的DTD规定了块级元素是不能放在
  里面的。
- 内联元素：其实再内联元素中，还是可以区分一下的，有几个元素<img>、<input>比较特别，它们可以定义宽高。虽然在IE浏览器里，所有元素都可以定义宽高，但是IE自己的标准，并非所有浏览器都支持。W3C称他们为replaced元素，其实就是行内块，虽然这些元素属于Inline,但却具体有一定的block(可以设置宽高)，因此我们可以赋予任何元素css属性display:inline-block。本身具有inline-block的元素应该没有
HTML语义化
- 理解：用正确的标签做正确的事
- 例如：段落用p标签，标题用h系列标签，边栏用aside标签，主要内容用main标签
- 为什么要关注语义化：
  - 便于团队的开发与维护
  - 在没有加载CSS的情况下也能呈现较好的内容结构与代码结构，易于阅读。
  - 有利于SEO，利于搜索引擎的爬虫依赖来确定上下文的各关键字的权重

JS

继承，封装
- js继承共分为5种：构造函数式继承、原型链链式继承、组合式继承、寄生式继承和寄生组合式继承
  - 构造函数式继承：
```
function Flower() //构造函数
{ this.colors = [‘黄色‘, ‘红色‘]; 
      this.print = function () { 
            console.log(this.colors) } 
}
function Rose() { 
      Flower.call(this); 
} ? 
var r1 = new Rose(); 
var r2 = new Rose(); ? 
console.log(r1.print()); // [ ‘黄色‘, ‘红色‘ ] 
console.log(r2.print()); // [ ‘黄色‘, ‘红色‘ ] 
```
    我们现在有一个基类Flower，它有一个属性colors，现在我们把某一个实例的colors值改一下：
```
r1.colors.push(‘紫色‘); ? 
onsole.log(r1.print()); // [ ‘黄色‘, ‘红色‘, ‘紫色‘ ] 
console.log(r2.print()); // [ ‘黄色‘, ‘红色‘ ] 
```
    结果如上，显然，改变的只有r1的值，因为通过构造函数创造出来的实例对象中，所有的属性和方法都是实例内部独立的，并不会跟其他实例共享。
    - 总结一下构造函数的优缺点：
      - 优点：所有的基本属性独立，不会被其他实例所影响；
      - 缺点：所有希望共享的方法和属性也独立了，没有办法通过修改父类某一处来达到所有子实例同时更新的效果；同时，每次创建子类都会调用父类构造函数一次，所以每个子实例都拷贝了一份父类函数的内容，如果父类很大的话会影响性能；
  - 原型链链式继承：
```
function Parent() {//列子
      this.color = ‘red‘;
      this.print = function() { 
      console.log(this.color); 
      } 
} 
function Son() { } 
```
    我们有一个父类和一个空的子类；
```
Son.prototype = new Parent();
Son.prototype.constructor = Son; 
```
    接着我们把子函数的原型属性赋值给了父函数的实例;
```
var son1 = new Son(); 
son1.print(); // red 
```
    最后新建子类实例，调用父类的方法，成功拿到父类的color和print属性方法；
    
    我们重点来分析一下下面两行代码：
```
Son.prototype = new Parent(); 
Son.prototype.constructor = Son; 
```
    这段代码中，子函数的原型赋给了父函数的实例，我们知道prototype是函数中的一个属性，js的一个特性就是：如果一个对象某个属性找不到，会沿着它的原型往上去寻找，直到原型链的最后才会停止寻找。
    我们看到最后实例son成功调用了Print方法，输出了color属性，这是因为son从函数Son的prototype属性上面去找到的，也就是从new Parent这个对象里面找到的；这种方式也不是真正的继承，因为所有的子实例的属性和方法，都在父类同一个实例上了，所以一旦某一个子实例修改了其中的方法，其他所有的子实例都会被影响，来看下代码：
```
function Flower() { 
      this.colors = [‘黄色‘, ‘红色‘]; 
      this.print = function () { 
            console.log(this.colors) 
      } 
} ? 
function Rose() {} 
Rose.prototype = new Flower(); 
Rose.prototype.constructor = Rose;     
var r1 = new Rose(); 
var r2 = new Rose(); ?  
console.log(r1.print()); // [ ‘黄色‘, ‘红色‘ ] 
console.log(r1.print()); // [ ‘黄色‘, ‘红色‘ ] ?         
r1.colors.push(‘紫色‘); ? 
console.log(r1.print()); // [ ‘黄色‘, ‘红色‘, ‘紫色‘ ] 
console.log(r2.print()); // [ ‘黄色‘, ‘红色‘, ‘紫色‘ ] 
```
    还是刚才的例子，这次Rose子类选择了原型链继承，所以，子实例r1修改了colors之后，r2实例的colors也被改动了，这就是原型链继承不好的地方。
    - 总结下原型链继承的优缺点：
      - 优点：很好的实现了方法的共享；
      - 缺点：正是因为什么都共享了，所以导致一切的属性都是共享的，只要某一个实例进行修改，那么所有的属性都会变化；