web基礎要點記錄

時間 2019-11-11

標籤 web 基礎要點記錄欄目 HTML 简体版

原文原文鏈接

　　最近公司項目作完了，不怎麼忙，翻看了一些基礎的資料，文章。就作了個簡單的記錄。javascript

1.Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示, 可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決；html

2. position:inherit; 規定從父元素繼承 position 屬性的值；html5

3.使用 window.top.document.compatMode 可查看瀏覽器渲染模式是標準模式，仍是怪異模式；java

4.<img>垂直居中的簡單方式 display:table-cell; text-align:center; vertical-align:middle; ；jquery

5.閉包簡單而言就是內層做用域能夠訪問外層做用域的變量，閉包中引用到的包裹函數中定義的變量永遠不會被釋放，應用到閉包時須要注意及時釋放閉包函數（內存泄漏）；web

6.事件綁定：(1)addEventListener;(2)attachEvent(IE低版本)；ajax

7.阻止事件冒泡 e.stopPropagation();/*標準*/ event.cancelBubble=true; /*<=ie9*/; ；數組

8.阻止默認事件 return false 或 e.preventDefault(); ；瀏覽器

9.原生JS操做DOM節點 obj.appendChild();/*添加*/ obj.insertBefore();/*插入*/ obj.replaceChild();/*替換*/ obj.removeChild();/*刪除*/ ；緩存

10. undefined的產生有三種狀況：(1)變量定義了沒有被賦值；(2)想要獲取一個對象上不存在的屬性或者方法；(3)數組中沒有被賦值的元素；(not defined 語法錯誤)

11.變量聲明提高：

var foo = 1;
function(){
    console.log(foo);//undefined
    var foo = 2;
    console.log(foo);//2
}
//函數聲明與變量聲明會被JS引擎隱式提高到當前做用域的頂部，可是隻提高名稱不會提高賦值部分；

12.arguments.callee：獲取當前函數的引用，返回正在被執行的function，也就是所指定的function對象的正文；arguments.caller是返回一個對函數的引用，該函數調用了當前函數；

13.undefined、任意的函數以及 symbol 值，在序列化過程當中會被忽略（出如今非數組對象的屬性值中時）或者被轉換成 null（出如今數組中時）；

14.JS精度不能精確到0.1；

var n = 0.3,m = 0.2, i = 0.2, j = 0.1;
alert((n - m) == (i - j)); //false
alert((n-m) == 0.1); //false
alert((i-j)==0.1); //true

15.bind：綁定事件，對新添加的事件不起做用，方法用於將一個處理程序附加到每一個匹配元素的事件上並返回jQuery對象； live：方法將一個事件處理程序附加到與當前選擇器匹配的全部元素（包含現有的或未來添加的）的指定事件上並返回jQuery對象；delegate：方法基於一組特定的根元素將處理程序附加到匹配選擇器的全部元素（現有的或未來的）的一個或多個事件上；

16.JS函數聲明優先於變量聲明

function a() {
}
var a;
alert(typeof a);//function

var a; 
function a() { 
}
alert(typeof a);//function

17.arguments的操做

function foo(a) {
    arguments[0] = 2;
    alert(a);//答案：2，由於：a、arguments是對實參的訪問，b、經過arguments[i]能夠修改指定實參的值
}
foo(1);

18.CSS3新特性

1. CSS3實現圓角（border-radius），陰影（box-shadow），
2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜
4. 增長了更多的CSS選擇器  多背景 rgba 
5. 在CSS3中惟一引入的僞元素是 ::selection.
6. 媒體查詢，多欄佈局
7. border-image

19.html5新特性

1. 拖拽釋放(Drag and drop) 
2. 語義化更好的內容標籤（header,nav,footer,aside,article,section）
3. 音頻、視頻(audio,video)
4. 畫布(Canvas) 
5. 地理(Geolocation) 
6. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
7. sessionStorage 的數據在瀏覽器關閉後自動刪除
8. 表單控件，calendar、date、time、email、url、search  
9. 新的技術webworker, websocket, Geolocation

20.CSS3新增僞類

p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素；
p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素；
p:only-of-type  選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素；
p:only-child    選擇屬於其父元素的惟一子元素的每一個 <p> 元素；
p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p> 元素；
:enabled、:disabled 控制表單控件的禁用狀態；
:checked，單選框或複選框被選中；

21.Ajax：

Ajax並不算是一種新的技術，全稱是asynchronous javascript and xml，能夠說是已有技術的組合，主要用來實現客戶端與服務器端的異步通訊效果，實現頁面的局部刷新，
早期的瀏覽器並不能原生支持ajax，可使用隱藏幀（iframe）方式變相實現異步效果，後來的瀏覽器提供了對ajax的原生支持
使用ajax原生方式發送請求主要經過XMLHttpRequest(標準瀏覽器)、ActiveXObject(IE瀏覽器)對象實現異步通訊效果
基本步驟：
var xhr =null;//建立對象 
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
     xhr.open(「方式」,」地址」,」標誌位」);//初始化請求 
     xhr.setRequestHeader(「」,」」);//設置http頭信息 
     xhr.onreadystatechange =function(){}//指定回調函數 
     xhr.send();//發送請求

22.http經常使用狀態碼

100-199 用於指定客戶端應相應的某些動做。

200-299 用於表示請求成功。

300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息。

400-499 用於指出客戶端的錯誤。

400 語義有誤，當前請求沒法被服務器理解。

401 當前請求須要用戶驗證

403 服務器已經理解請求，可是拒絕執行它。

500-599 用於支持服務器錯誤。

503 – 服務不可用

23.一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？

分爲4個步驟：
1. 當發送一個 URL 請求時，無論這個 URL 是 Web 頁面的 URL 仍是 Web 頁面上每一個資源的 URL，瀏覽器都會開啓一個線程來處理這個請求，
同時在遠程 DNS 服務器上啓動一個 DNS 查詢。這能使瀏覽器得到請求對應的 IP 地址。
2. 瀏覽器與遠程 Web 服務器經過 TCP 三次握手協商來創建一個 TCP/IP 鏈接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，
這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試創建起通訊，然後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。
3. 一旦 TCP/IP 鏈接創建，瀏覽器會經過該鏈接向遠程服務器發送 HTTP 的 GET 請求。遠程服務器找到資源並使用 HTTP 響應返回該資源，值爲 200 的 HTTP 響應狀態表示一個正確的響應。
4. 此時，Web 服務器提供資源服務，客戶端開始下載資源。

24.多個域名來存儲網站資源更有效

確保用戶在不一樣地區能用最快的速度打開網站，其中某個域名崩潰用戶也能經過其餘域名訪問網站，而且不一樣的資源放到不一樣的服務器上有利於減輕單臺服務器的壓力。

25.僞數組轉標準數組，log方法添加一個」(app)」前綴

function log(){
      var args = Array.prototype.slice.call(arguments);  //爲了使用unshift數組方法，將argument轉化爲真正的數組
      args.unshift('(app)');
      console.log.apply(console, args);
};

26.this指向問題

var User = {
  count: 1,
  getCount: function() {
    return this.count;
  }
};
console.log(User.getCount());  //1
var func = User.getCount;
console.log(func());  // undefined

func是在winodw的上下文中被執行的，因此會訪問不到count屬性。

如何確保Uesr老是能訪問到func的上下文，即正確返回1

Function.prototype.bind = Function.prototype.bind || function(context){
   var self = this;
   return function(){
      return self.apply(context, arguments);
   };
}
var func = User.getCount.bind(User);
console.log(func());

27.window.onload 與 $(document).ready(function(){})的區別

window.onload()方法是必須等到頁面內包括圖片的全部元素加載完畢後才能執行。
$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。

28.eval 是把對應的字符串解析成JS代碼並運行；應該避免使用eval，不安全，很是耗性能

29. "use strict" 意思是使用嚴格模式，使用嚴格模式，一些不規範的語法將再也不支持

30. new操做符new完以後

一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。
二、屬性和方法被加入到 this 引用的對象中。
三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

31.HasOwnProperty不會去查找原型

32. AMD（Asynchronous Modules Definition）、CMD（Common Module Definition）規範的區別

主要經過requirejs與seajs的對比

一、對於依賴的模塊，AMD 是提早執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改爲能夠延遲執行（根據寫法不一樣，處理方式不一樣）。CMD 推崇 as lazy as possible.
2、CMD 推崇依賴就近，AMD 推崇依賴前置。
3. AMD 的 API 默認是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。好比 AMD 裏，require 分全局 require 和局部 require，都叫 require。CMD 裏，沒有全局 require，
而是根據模塊系統的完備性，提供 seajs.use 來實現模塊系統的加載啓動。CMD 裏，每一個 API 都簡單純粹。

33.

Object.hasOwnProperty( ) 檢查屬性是否被繼承 
Object.isPrototypeOf( ) 一個對象是不是另外一個對象的原型 
Object.propertyIsEnumerable( ) 是否能夠經過for/in循環看到屬性 
Object.toLocaleString( ) 返回對象的本地字符串表示 
Object.toString( ) 定義一個對象的字符串表示 
Object.valueOf( ) 指定對象的原始值

34.js的運行主要分兩個階段：js的預解析和運行，預解析階段全部的變量聲明和函數定義都會提早，可是變量的賦值不會提早

35.javascript對象的幾種建立方式

1. 工廠模式

function createStudent(name,sex,grade){                                                         
    var o = new Object();
    o.name = name;
    o.sex = sex;
    o.grade = grade;

    o.sayName = function(){
        console.log(this.name);
    }
    return o;
}
var s1 = createStudent('Claiyre','famale',1);

2. 構造函數模式

function Student(name,sex,grade){                                                   
    this.name = name;
    this.sex = sex;
    this.grade = grade;
    this.sayName = function(){
        console.log(this.name);
    }
}
var s2 = new Student('孫悟空'，'male',2);

3. 原型模式

function Student_1(){

}
Student_1.prototype.name = 'Claiyre';
Student_1.prototype.sex = 'female';
Student_1.prototype.class = 5;
Student_1.prototype.sayName = function (){
    console.log(this.name);
}

var s5 = new Student_1();                                                         
s5.sayName();    //Claiyre
var s6 = new Student_1();
s6.sayName();    //Claiyre

4. 混合構造函數和原型模式

function Student(name,sex,grade){                                                   
    this.name = name;
    this.sex = sex;
    this.grade = grade;
}

Student.prototype.sayName = function(){
        console.log(this.name);
}
Student.prototype.school = 'Joooh school';

5. 動態原型模式

function Person(name, age, job) {
    //屬性
    this.name = name;
    this.age = age;
    this.job = job;
    // 方法
    if(typeof this.sayName != 'function') {
        Person.prototyep.sayName =  function(){
            alert(this.name);
        }
    }
}
var friend = new Person('Nicholas', 29, 'Software Engineer');
friend.sayName();

6. 寄生構造函數模式

function SpecialArray(){
    var array = new Array();
    array.push.apply(array,arguments);
    array.toPipedString = function(){
        return this.join("|");
    };
    return array;
}
var colors = new SpecialArray("red","green","pink");
alert(colors.toPipedString());// red|green|pink
alert(colors instanceof SpecialArray); // false 

7. 穩妥構造函數模式

先說穩妥二字，別人定義了一個穩妥對象，即沒有公共屬性，並且其方法也不引用this對象，這種模式適應於一些安全環境中（禁止使用this和new），或防止數據被其餘應用程序改動，像下面這樣：
function Person(name,age,gender){
    var obj = new Object();
    obj.sayName = function(){
        alert(name);
    };
    return obj;
}
var person = Person("Stan",0000,"male"); // 這裏沒有使用new操做符
person.sayName(); // Stan
alert(person instanceof Person); // false

36.javascript繼承的幾種方法

//1. 原型鏈繼承


// 父親類
function Parent() {
    this.value = 'value';
}
Parent.prototype.sayHi = function() {
     console.log('Hi');
}
// 兒子類
function Child() {

}
// 改變兒子的prototype屬性爲父親的實例
Child.prototype = new Parent();

var child = new Child();
// 首先如今child實例上進行查找，未找到，
// 而後找到原型對象（Parent類的一個實例），在進行查找，未找到，
// 在根據__proto__進行找到原型，發現sayHi方法。

// 實現了Child繼承
 child.sayHi();

//2. 借用構造函數繼承


　　 // 父親類
    function Parent(name) {
        this.name = name;
        this.color = ['pink', 'red'];
    }
    // 兒子類
    function Child(name) {
        Parent.call(this, name);

        // 定義本身的屬性
        this.value = 'test';
    }
    var child = new Child('qq');
    // 將qq傳遞給Parent
    console.log(child.name); // qq

//3. 組合繼承(原型+借用構造)


　　 // 父親類
    function Parent() {
        this.color = ['pink', 'red'];
    }
    Parent.prototype.sayHi = function() {
        console.log('Hi');
    }

    // 兒子類
    function Child() {
        Parent.call(this); // 第二次調用構造函數：在新對象上建立一個color屬性
    }
    Child.prototype = new Parent(); // 第一次調用構造函數Child.prototype將會獲得一個color屬性，屏蔽了原型中的color屬性。

//4. 原型式繼承


　　function createAnother(o) {
        // 建立一個臨時構造函數
        function F() {

        }
        // 將傳入的對象做爲它的原型
        F.prototype = o;
        // 返回一個實例
        return new F();
    }

//5. 寄生式繼承


　　 function Parent() {
        this.color = ['pink', 'red'];
    }
    function createAnother(o) {
        // 得到當前對象的一個克隆
        var another = new Object(o);
        // 加強對象
        o.sayHi = function() {
                console.log('Hi');
            }
        // 返回對象
        return another;
    }

//6. 寄生組合式繼承


　　 // 建立只繼承原型對象的函數
    function inheritPrototype(parent, child) {
        // 建立一個原型對象副本
        var prototype = new Object(parent.prototype);
        // 設置constructor屬性
        prototype.constructor = child;
        child.prototype = prototype;
    }
    // 父親類
    function Parent() {
        this.color = ['pink', 'red'];
    }
    Parent.prototype.sayHi = function() {
        console.log('Hi');
    }
    // 兒子類
    function Child() {
        Parent.call(this);
    }
    inheritPrototype(Parent, Child);

37.Sass、Less

它們是動態的樣式語言，是CSS預處理器,CSS上的一種抽象層。他們是一種特殊的語法/語言而編譯成CSS。
變量符不同，less是@，而Sass是$;
Sass支持條件語句，可使用if{}else{},for{}循環等等。而Less不支持;
Sass是基於Ruby的，是在服務端處理的，而Less是須要引入less.js來處理Less代碼輸出Css到瀏覽器

38.this的理解

在JavaScript中，this一般指向的是咱們正在執行的函數自己，或者是，指向該函數所屬的對象。
全局的this → 指向的是Window
對象中的this → 指向其自己
事件中this → 指向事件對象

39.web性能優化的幾個方案

1、儘可能減小 HTTP 請求
2、使用瀏覽器緩存
3、使用壓縮組件
4、圖片、JS的預載入
5、將腳本放在底部
6、將樣式文件放在頁面頂部
7、使用外部的JS和CSS
八、精簡代碼

40.jquery.extend 與 jquery.fn.extend的區別

Jquery.extend用來擴展jQuery對象自己；jquery.fn.extend用來擴展jQuery實例

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。