什么是语义化?图片下的空隙如何解决?创建对象常用的几种方式?

简介: 语义化是指用合理的html标记以及其特有的属性去格式化文档内容。如标题用h1-h6,段落用p标签。

一省:HTML

14. 什么是语义化?语义化的好处是什么?

  1. 语义化是指用合理的html标记以及其特有的属性去格式化文档内容。如标题用h1-h6,段落用p标签。
  2. 语义化的好处:
  • 在没有css的情况下,页面也能呈现出很好的内容结构。
  • 语义化使代码更具有可读性,便于团队开发和维护。
  • 语义化有利于用户体验。
  • 语义化有利于SEO(和搜索引擎建立良好的沟通,有助于爬虫抓取更多的有效信息)。

二省: CSS

14. 图片下的空隙如何解决?

<style>
    p{
    
    
      width: 200px;
      height: 200px;
      padding: 0;
      margin: 0;
      background: tomato;
    }
    img {
    
    
      width: 200px;
    }
  </style>
</head>
<body>
  <div>
    <p>123</p>
    <img src="./大万万漂亮.jpg" alt="">
    <p>123</p>
  </div>

图片下有缝隙

解决方式:

  1. 父元素设置font-size:0; 缺点是会影响到其他子元素的字体大小。
  2. img标签设置display:block;
  3. img标签设置vertical-align: top/middle/sub属性

三省:JavaScript

14. 创建对象常用的几种方式?

  1. 直接用{}创建,实质上等同于new Object()
    let obj = {
         
         }
    obj.name = "Jack"
    obj.say = function(){
         
         
    console.log("hello!")
    }
    let obj1 = {
         
         }
    obj1.name = "Mick"
    obj1.say = function(){
         
         
    console.log("hello!")
    }
    
  2. 用new Object()创建
    let obj = new Object()
    obj.name = "Jack"
    obj.say = function(){
         
         
    console.log("hello!")
    }
    let obj1 = new Object()
    obj1.name = "Mick"
    obj1.say = function(){
         
         
    console.log("hello!")
    }
    
  3. 字面量创建

    //字面量创建
    let obj = {
         
         
    name: "Jack",
    say = function(){
         
         
     console.log("hello!")
    }
    }
    let obj1 = {
         
         
    name: "Mick",
    say = function(){
         
         
     console.log("hello!")
    }
    }
    

    以上三种方式有一个缺点就是想要创建类似的对象会写很多重复的代码,工厂模式可以解决这个问题。

  4. 工厂模式创建

    // 工厂模式创建
    function createPerson(name) {
         
         
    let obj = {
         
         }
    obj.name = name
    obj.say = function() {
         
         
     console.log("hello!")
    }
    return obj
    }
    let p1 = createPerson("Jack")
    let p2 = createPerson("Mick")
    console.log(p1 instanceof createPerson)//false
    console.log(p1 instanceof Object)//true
    

    工厂模式的缺点就是无法准确识别对象的类型。

  5. 构造函数创建

    // 构造函数创建
    function Person(name){
         
         
    this.name = name
    this.say = function(){
         
         
     console.log("hello!")
    }
    }
    let p1 = new Person("Jack")
    let p2 = new Person("Mick")
    console.log(p1 instanceof Person)//true
    console.log(p1.say === p2.say)//false
    

    构造函数的缺点是其定义的方法在每个实例上都会创建一遍,占用不必要的内存。

  6. 原型模式创建
    ```javascript
    // 原型创建
    function Person(){}
    Person.prototype.name = "Jarry"
    Person.prototype.friends = ["Marry"]
    Person.prototype.say = function() {
    console.log("hello!")
    }

let p1 = new Person()
p1.friends.push("Janms")
let p2 = new Person()
console.log(p1 instanceof Person);//true
console.log(p1.say === p2.say);//true
console.log(p2.friends);//['Marry', 'Janms']

很明显,这种方式创建对象的时候没办法传参数,而且存在引用类型属性共享的问题。

7. 混合(构造函数+原型)模式(推荐)
```javascript
// 构造函数 + 原型
function Person(name) {
  this.name = name
  this.friends = ["Jerry"]
}
Person.say = function() {
  console.log("hello!")
}

let p1 = new Person("Jack")
p1.friends.push("Bob")
let p2 = new Person("Mick")
console.log(p1 instanceof Person);//true
console.log(p1.say === p2.say);//true
console.log(p2.friends);//['Jerry']
相关文章
|
8月前
|
设计模式 算法 前端开发
有什么可以减少注释,但依然能让他人看得懂代码的方法吗?
有什么可以减少注释,但依然能让他人看得懂代码的方法吗?
62 0
每次生成代码注释后 然后把生成的代码插入原代码位置后 方法原来的注解就会错位
每次生成代码注释后 然后把生成的代码插入原代码位置后 方法原来的注解就会错位
40 1
|
8月前
|
前端开发
CSS样式引用方式的区别
CSS样式引用方式的区别
|
8月前
|
XML JavaScript 前端开发
《原型链重置版》一万多字让你读懂JavaScript原型对象与原型链的继承,探秘属性的查找机制! (6)
其实javascript中很多方面都跟原型链有关系,你如果没有弄懂,就等同于没有学会javascript...
51 1
《原型链重置版》一万多字让你读懂JavaScript原型对象与原型链的继承,探秘属性的查找机制! (6)
|
安全 编译器 C++
【C++】影响动态多态的静态联编与对象切割
在使用C++动态多态时,有时候会出错误,这里讲述其中的两个原因
83 0
【C++】影响动态多态的静态联编与对象切割