フロントエンドの基礎知識の定着

フロントエンドの基礎知識を固めるカテゴリー

久しぶりにhtmlとjsの基礎知識を振り返ってみました。面接の質問に関する記事を読んで、突然忘れていたことをたくさん発見しました。よし、鉄は熱いうちに打って基礎知識を学びましょう。

• HTML について

#html は、Hyper Text Markup Language (Hyper Text Markup Language) の略称で、標準のユニバーサル マークアップ言語のアプリケーションです。 。 HTMLはプログラミング言語ではなく、Webページ制作に必要なマークアップ言語です。写真、音楽、ビデオ、リンク、プログラムなどのテキスト以外の要素を含めることができます。

• DOCTYPEの役割

DOCTYPEとはドキュメントタイプの略称であり、HTMLタグではなく、マークアップのドキュメントタイプですlanguage. 現在の HTML のどのバージョンが記述されているかをブラウザーに伝えることを目的としたステートメント。ブラウザがドキュメントを解析するためにどの仕様 (DTD) を使用する必要があるか (HTML または XHTML 仕様など)。

• HTML5 に追加された新しいタグとその利点ページまたはエリアのヘッダーの定義
  メインコンテンツの指定ドキュメントの
  

  ページまたはエリアの下部を定義します
  

  記事を定義します
  

  ナビゲーションリンクを定義します
  エリアを定義します
  

  ページのコンテンツ部分のサイドバーを定義します
  

  Web ページまたはエリア セクションのタイトルを結合するために使用します
  

  メディア コンテンツとタイトルのグループを定義します
  

  図要素のタイトルを定義します
  <アドレス>記事所有者の連絡先情報を定義します
  

  フォームタグを追加します

  日付、時刻、電子メール、URL、検索およびその他のタイプ
  ビデオタグ
  <ビデオ幅="" 高さ="" コントロール>
  オーディオタグ
  <オーディオ src="">
  

  利点: コンテンツに基づいた構造化された使用 セマンティック タグにより、開発者はブラウザ クローラーや検索エンジンの解析だけでなく、よりよく読んで理解できるようになります。

• CSSについてcssとは、HTML（Standard Universal Markup Language）の一種であるカスケード スタイル シート（正式名称：Cascading Style Sheets）です。 ) アプリケーション) または XML (標準汎用マークアップ言語のサブセット)。 CSS は Web ページを静的に変更できるだけでなく、さまざまなスクリプト言語と連携して、Web ページのさまざまな要素を動的にフォーマットすることもできます。

• ボックスモデルとは

ボックスモデルは、要素コンテンツ(content)を含め、ボックスモデル(Box Model)とも呼ばれます。パディング（パディング）、ボーダー（境界線）、マージン（マージン）。ボックスの幅と高さを計算します: コンテンツのパディング境界。

• 一般的に使用される CSS 単位

1.px (絶対単位であるピクセルを表します。他の要素のサイズ。ページは正確なピクセルに従って表示されます)

2.pt (ポイントは絶対単位であり、1/72 インチに等しい長さの物理単位です。その値の範囲は px に似ています)
3.em (相対現在のオブジェクト内のテキストのフォント サイズ。たとえば、body の font-size: 12px; body 内の子要素の場合は 1em=12px)
4.rem (ルート要素のフォント サイズの単位であり、相対単位でもあり、em と多少似ていますが、計算ルールの 1 つはルート要素に依存し、もう 1 つは親要素に依存する点が異なります。
5.vh (フォント サイズの 1/100)レイアウト ビューポートの高さ)
6.vw (レイアウト ビューポートの高さ 1/100)

• クリア フローティング

場合フローティングを解消する必要はありますか?フローティングを解消する方法は何ですか?

float 属性が子要素に設定されており、親要素が幅と高さを設定しておらず、子要素によってサポートされている場合、親要素の幅と高さが折りたたまれます。時間が経過したら、フロートをクリアする必要があります。
方法: 1. 親要素に属性 overflow:hidden を設定します || auto

 2、子元素最后一个元素添加clear:both
 3、父级定义伪类：after和zoom 
 {display:block;clear:both;content:"",visibility:hidden;height:0}
 {zoom:1}
 4、父级定义height
 5、父级也一起浮动

#要素を水平方向および垂直方向の中央に配置する方法
• #1 、
.children{

position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%)

}
2.flexbox

.parent{

display:flex;
justify-content:center;
align-items: center;

}
3 を変換します。幅と子要素の高さは固定、親要素の幅と高さが0以外の場合、.parent{

height:200px;

}
.children{

width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin: -50px 0 0 -50px;

}

css セレクターには、どれが優先されますか。

• 1. タグ セレクター (body、p など)
2. クラス セレクター(class="box")

3. ID セレクター (id="app")

4、グローバル セレクター (*{})
5、結合セレクター (.header .header_box)
6 、子孫セレクター (.#header ul li)
7. グループ セレクター (.box .header .content)
8. 継承されたセレクター (p p)
9. 疑似クラス セレクター (アクティブ ホバーにアクセスしたリンク)
10. 文字列照合用の属性セレクター (^ $ * はそれぞれ先頭、末尾、包含に対応)
11、サブセレクター (p>p)
12、CSS 隣接兄弟セレクター (p p)

優先度:
!重要 > インライン スタイル > ID セレクター > クラス セレクター > タグ セレクター > ワイルドカード > 継承 > ブラウザのデフォルト プロパティ

每个选择器的权值：
行内样式 1000
ID选择器 100
class选择器 10
HTML标签选择器 1

• sass

sass: 是一款强化css的辅助工具，它在css语法的基础上变量、嵌套、混合、导入等高级功能，可提高开发效率。
sass有两种语法格式，首先是scss，是在css3的语法基础上进行拓展，所有css3语法在scss中都是通用的，同时加入sass的特色功能。此外，scss也支持大多数css hacks写法以及浏览器前缀写法，以及早期的IE滤镜写法，这种格式以.scss作为拓展名。
另一种也是最早的sass语法格式，被称为缩进格式（Indented Sass）通常简称“sass”，只是与scss相比个别地方采取了不同的表达方式。
使用：
定义变量（$width:5rem #box{width:$width})
混合器 （@Minxin class {

border-radius:5px;
background:#f00;

}
.box{

@include class

}
具体更多用法参考文档sass官方文档。

• javascript基础

1、js有哪些数据类型：

原始数据类型 - String Number Boolean Undefined null
对象类型 - Array Function Object

null和undefined的区别 - undefined是一个特殊值，通常不是变量尚未赋值。null是在计算机中具有保留的值，用于指示指针不引用有效对象。可以把undefined作为空的变量，null看做是空的对象。
原始类型和引用类型的区别 - 基本类型指的是保存在栈内存中的简单数据段，
引用类型指的是那些保存在堆内存中的对象，意思是，变量中保存的实际上是只是一个指针，这个指针执行内存中的另一个位置，由该位置保存对象。
访问的方式也不同 - 基本类型是按值访问，操作也是他们的实际保存的值，
引用类型是按引用方式访问，当查询时，我们需要先从栈中读取内存地址，然后再找到保存在堆内存中的值。
复制的类型也不同 - 基本类型变量的复制，从一个变量向另一个变量复制时，会在栈中创建一个新值，然后把值复制到新变量分配的位置上。
引用类型复制，复制的是存储在栈中的指针，将指针复制到栈中为新变量分配的空间中，而这个指针副本和原指针执行存储在堆中的同一个对象；复制结束后，两个变量实际上引用同一个对象，因此改变其中一个，讲影响另一个。

2、如何理解prototype，什么时候用prototype
在javascript中，所有的对象都是Object的实例，并且会继承Object.prototype的属性和方法，那么，Object.prototype是所有对象的爸爸。我们在创建对象时，就会有一些已经定义好的属性，在定义函数时候，这个预定义的属性就是prototype,是函数的一个属性，是一个指向对象的指针。而定义一个普通对象时候，会生成一个__proto__,指向的是对象的构造函数prototype。
js中构造函数和实例之间有着微妙的关系，构造函数通过定义prototype来约定其实例的规格，再通过new来构造实例，他们的作用就是产生对象。通过new构造对象的特点是，obj的prototype指向了构造器的prototype属性。
什么时候用prototype呢？
使用prototype的好处是不会产生额外的内存，所有实例化后的对象都会从原型上继承这个方法，相当于公共方法，就是一个子类拥有父类的某些特性，又可以给自己添加一些独立的属性，而且不会影响父时使用prototype。
prototype通常来解决一个问题：对象的创建比较耗费资源，例如，对象创建的时候需要访问数据库、读取外部文件、需要使用网络。这些都是比较耗费时间和内存的。
写一个prototype小栗子：

            function Parent(name){
                this.drink = function(){
                    return 'I Can Drink\t' + name
                }
            }
            let parent = new Parent('red wine')
            console.log(parent.drink())//I Can Drink red wine

            function Person (name, age) {
                Parent.call(this,'beer')
                this.name = name;
                this.age = age;
            }
            Person.prototype.sayName = function() {
                return this.name
            }

            let person =  new Person('sunny', 18)
            let person1 = new Person('cherry',28)
            console.log(person.sayName()) // sunny
            console.log(person1.drink())// I Can Drink beer

3.什么是闭包、使用场景有哪些、闭包会引起什么问题
概念：闭包就是一种可以重复使用变量而且不会造成全局变量污染的机制，它是一种特殊的对象。
它由两部分组成：函数以及创建该函数的环境。而环境是由闭包创建时在作用域中的任何局部变量组成。可以用来定义私有属性和方法。
小栗子：

function sum(){
    let x = 1,y = 2;
    function res(){ //闭包
        return x + y
    }
    return res //闭包函数
}
let result = sum();
result() // 3

从上面的这个简单的闭包例子可以看出，在外部函数的内部创建一个内部函数。并且内部函数读取着外部函数作用域中定义的局部变量，而内部函数又作为外部函数的返回值。所以总结一下：闭包的作用域链包含着它自己的作用域，以及包含它的函数的作用域和全局作用域。
使用场景：需要设计私有变量和方法的时候。
举栗子：

function Person() {
    let name = 'sunny'
    this.getName = () => name
}
let person = new Person;
person.name //undefined
person.getName() // sunny

闭包引起的问题：正常情况下，一个函数的作用域和其所有变量在函数执行后都会被销毁，但是在创建一个闭包后，这个函数会一直保存，直到闭包不存在为止。也就是闭包函数会一直保存着父函数的执行期上下文。这样就会造成内存泄露。
举个栗子：

const handleDom = () => {
    let dom = document.getElementById('#el');
    let id = dom.id;
    dom.onclick = () => {
        console.log(id)
    }
    dom = null;
}

上面这个函数中的闭包函数里保存着一个HTML元素，这就意味着这个元素无法销毁，所以我们应该在操作完元素之后要主动销毁。
还有一个场景是缓存机制，栗子在下面：

(() => {
    let num = 0;
    setInterval(() => {
        console.log(num++);
    }, 1000)
})() // 1 2 3 4 5 6 ....

这个就验证了是吗的说法：闭包函数会一直拿着外部函数的变量，并且不会销毁，所以会一直用着加1之后的最新值。

4.什么是浅拷贝和深拷贝？怎么实现一个深拷贝？
在这之前要先理解一下js的基本类型和引用类型的区别：
基本类型：直接存储在栈中的数据（String、Number、Boolean、Undefined、Null)
引用类型：是把该对象的引用地址存储在栈中，对象里的数据放在堆中（Array、Function、Object)
浅拷贝：只拷贝一层，不会拷贝对象的子元素，相当于直接赋值。
深拷贝：会克隆出一个对象，数据是相同的，但是引用地址不同。
举栗子说明：

let person = {
    name:'sunny',
    age:13,
    sayName:function(){
        console.log(this.name)
    }
}
let person1 = person;
console.log(person1) //和person的相同
person1.name = 'cherry'
console.log(person1.name) //cherry
console.log(person.name) //cherry

因为是引用的用一个地址，所以person1的改变也修改person的值；

深拷贝：
es6的 "..."可以实现一个深拷贝，其实也说不上深拷贝， 如果对象里面包含引用类型，也会失败。

let obj = {
    name:'sunny',
    age: 30,
    arr: [1,2,3,4]
}
let obj1 = obj
// console.log(obj1)
// obj1.name = 'cherry'
// console.log(obj1)
let copyObj = { ...obj }
copyObj.name = 'cherry'
copyObj.arr[0] = 8
console.log(copyObj)

console.log(obj)//obj的arr被改变了 ，但是基本类型没有受到影响

深拷贝实例：

const deepClone = (val) => {
  let res;
  if (val && Array.isArray(val)) {
    res = [];
    val.forEach((item) => {
      res.push(deepClone(item));
    });
  } else if (typeof val === 'object' && val !== null) {
    res = {};
    for (let key of Object.keys(val)) {
      res[key] = deepClone(val[key]);
    }
  } else {
    res = val;
  }
  return res;
}

推荐教程：《JS教程》

以上がフロントエンドの基礎知識の定着の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。