web生涯

時間  2019-11-14
標籤 web 生涯 欄目 HTML 简体版
原文   原文鏈接

1.css3@media規則

使用 @media 查詢，你能夠針對不一樣的媒體類型定義不一樣的樣式。javascript

@media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設置設計響應式的頁面，@media 是很是有用的。css

當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面。html

列：若是文檔寬度小於 300 像素則修改背景顏色(background-color):前端

@media screen and (max-width: 300px) {
    body {
         margin: 0px; padding: 0px; color: rgb(170, 17, 17); font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px;">lightblue;
    }
}java

你也能夠針對不一樣的媒體使用不一樣 stylesheets :node

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">css3

2.HTML5響應式（自適應）網頁設計

指能夠自動識別屏幕寬度、並作出相應調整的網頁設計git

一、容許網頁寬度自動調整 在網頁代碼的頭部，加入一行viewport元標籤程序員

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">es6

       1）width=device-width ：表示寬度是設備屏幕的寬度

　　2）initial-scale=1.0：表示初始的縮放比例，1.0就是佔網頁的100%

　　3）minimum-scale=1.0：表示最小的縮放比例

　　4）maximum-scale=1.0：表示最大的縮放比例

　　5）user-scalable=no：表示用戶是否能夠調整縮放比例

全部主流瀏覽器都支持這個設置，包括IE9。對於那些老式瀏覽器（主要是IE六、七、8），須要使用css3-mediaqueries.js。

<!–[if lt IE 9]><script src=」http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js」></script><![endif]–>

二、不使用絕對寬度

　　因爲網頁會根據屏幕寬度調整佈局，因此不能使用絕對寬度的佈局，也不能使用具備絕對寬度的元素。這一條很是重要。

        具體說，CSS代碼不能指定像素寬度：width:xxx px;只能指定百分比寬度：width: xx%;或者width:auto;

3、相對大小的字體

　　字體也不能使用絕對大小（px），而只能使用相對大小（em）。body {font: normal 100% Helvetica, Arial, sans-serif;}

　　上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。h1 {font-size: 1.5em;}

　　而後，h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）。small {font-size: 0.875em;}

　　small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。

4、流動佈局（fluid grid）

　　「流動佈局」的含義是，各個區塊的位置都是浮動的，不是固定不變的。

　　.main {float: right;width: 70%;}.leftBar {float: left;width: 25%;}

5、選擇加載CSS

　　自適應網頁設計」的核心，就是CSS3引入的Media Query模塊。自動探測屏幕寬度，而後加載相應的CSS文件。

       <link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)"href="smallScreen.css" />

6、圖片的自適應（fluid image）

　　除了佈局和文本，」自適應網頁設計」還必須實現圖片的自動縮放。

　　這隻要一行CSS代碼：img { max-width: 100%;}

　　這行代碼對於大多數嵌入網頁的視頻也有效，因此能夠寫成：img, object { max-width: 100%;}

　　老版本的IE不支持max-width，因此只好寫成：img { width: 100%; }

　　此外，windows平臺縮放圖片時，可能出現圖像失真現象。這時，能夠嘗試使用IE的專有命令：img { -ms-interpolation-mode: bicubic; }

3.null instanceof Object

  instanceof 運算符用來測試一個對象在其原型鏈中是否存在一個構造函數的 prototype 屬性。

      object(參數) instanceof constructor（要檢測的對象）

  alert(typeof(null)); //object   alert(null instanceof Object); //false

　　這是由Javascript規範規定的，Null和Object都是javascript中的數據類型。 
　　Null數據類型只有一個值：null。就像undefined數據類型只有一個值：undefined。 
　　問題出在typeof操做符的定義規範，以下

　　11.4.3 The typeof Operator The production UnaryExpression : typeof UnaryExpression is evaluated as follows:

　　1. Evaluate UnaryExpression.

　　2. If Type(Result(1)) is not Reference, go to step 4.

　　3. If GetBase(Result(1)) is null, return "undefined".

　　4. Call GetValue(Result(1)).

　　5. Return a string determined by Type(Result(4)) according to the following table: Type Result

  　　Undefined "undefined"

 　　 Null "object"

 　　 Boolean "boolean"

  　　Number "number"

  　　String "string"

  　　Object (native and doesn’t implement [[Call]]) "object"

  　　Object (native and implements [[Call]])

  　　"function" Object (host) Implementation-dependent

  　　能夠看到，對於Null類型的值（只有null），規範就是定義返回」object」這個字符串。可是本質上Null和Object不是一個數據類型，null值並非以Object爲原型建立出來的。因此null instanceof Object是false。但從這裏也能夠看到，null確實是javascript中用來表示空引用的  一個特殊值。使得它不是instanceof Ojbect，而typeof null是「object」。在語義上也是能夠理解的。

1 instanceof Number //false var a = new Number(1); a instanceof Number // true
instanceof判斷一個對象是不是另外一個對象的實例，而數字1是基本數據類型，不是對象，
var a = new Number(1)；是經過包裝類Number把數字1轉換成對象，你能夠用typeof a，和typeof 1，看看他們返回的值
原始類型 使用instanceof 都返回false 而第一個是使用Number把1包裝成了對象

4.類型轉換


　　var aa = function(){return true},
　　bb = function(){return false};
(function(){
　　if( (aa() && [])==![] ){
　　aa = function(){
　　　　return false
　　}；

       function bb(){return true}
　　}
})();
console.log("aa"+aa());
console.log("bb"+bb());

alert( [] == ![] )//true

[] == ![]
[] == !true // ! 操做符的優先級高於 == ，因此先執行 ! 操做
[] == false // !true 獲得的是 false
[] == 0 //比較規則1：若是值爲true或false，則轉成1或0來繼續比較
[] == 0 //執行左側的 [] 的 valueOf 方法，而 [] 是對象，因此 [].valueOf() 返回自己 []
"" == 0 //執行左側的 [] 的 toString 方法，[].toString() 返回 ""
0 == 0 //比較規則2：若是一個值是數字，一個值是字符串，則把字符串轉換爲數字，再進行比較，"" 轉成數字是 0。

最終是執行 0 == 0 ，結果爲 true
《JavaScript權威指南》或者《JavaScript高級程序設計》等書目。其中有兩條指出：
  1. 若是其中一個值是true，則將其轉換爲1再進行比較。若是其中一個值是false，則將其轉換爲0再進行比較。
  2. 若是一個值是對象，另外一個值是數字或字符串，則將對象轉換爲原始值再進行比較。對象經過toString()方法或valueOf()方法轉換爲原始值。JavaScript語言核心的內置類首先嚐試使用valueOf()，在嘗試使用toString()，除了日期類，日期類只使用toString()方法，那些不是JavaScript語言核心中的對象則經過各自實現中定義的方法轉換爲原始值。

有了以上兩條做爲基礎，咱們再來看問題。
控制檯指出等號右邊爲布爾值，由第一條可知，它將轉換爲數字0，也就是數字類型。

！的優先級較==高，先運算==左側的操做數：[]是對象，會轉換成true，而後再轉成false（加！的必定是轉換成boolean）
== 的左操做數是[]，數組（對象處了日期對象，都是對象到數字的轉換），碰到==要先調用本身的valueOf()方法=>[]（仍是自己），而後調用本身的toString()方法=>空字符串=>false (或者空字符串轉成0，而後再轉成false，可是終歸會是false)

false==false

執行類型轉換的規則以下：
若是一個運算數是 Boolean 值，在檢查相等性以前，把它轉換成數字值。false 轉換成 0，true 爲 1。
若是一個運算數是字符串，另外一個是數字，在檢查相等性以前，要嘗試把字符串轉換成數字。
若是一個運算數是對象，另外一個是字符串，在檢查相等性以前，要嘗試把對象轉換成字符串。
若是一個運算數是對象，另外一個是數字，在檢查相等性以前，要嘗試把對象轉換成數字。
在比較時，該運算符還遵照下列規則：
值 null 和 undefined 相等。
在檢查相等性時，不能把 null 和 undefined 轉換成其餘值。
若是某個運算數是 NaN，等號將返回 false，非等號將返回 true。
若是兩個運算數都是對象，那麼比較的是它們的引用值。若是兩個運算數指向同一對象，那麼等號返回 true，不然兩個運算數不等。

 

5.回調地獄

1。回調函數是JavaScript里約定俗成的一個名稱。實際上並不存在肯定的「回調函數」，只是你們就管那個位置的函數做回調函數。與大多數運行後馬上給出結果的函數不一樣，使用回調的函數要花一些時間才能得出結果。「異步」這個詞就是表明‘要花時間，未來運行’。一般回調函數會用在下載文件、讀取文件、或者數據庫相關事務等

處理：

a.不要嵌套函數，命名後調用更好   

b.使用函數提高

c.建立可重用函數，寫成模塊，讓你更容易讀懂代碼。把你的代碼拆分紅小塊能夠幫助你處理錯誤，寫測試，重構，方便爲你的代碼寫更穩定的API     

d.處理回調函數的每個錯誤

一些寫模塊的經驗：

  • 先把常常重複使用的功能寫成一個函數

  • 當這個函數寫得夠大以後，把他移動到另外一個文件，用module.exports暴露它，而後用require引入

  • 若是你的代碼是通用的，能夠寫readme文件和package.json發佈到npm或者github

  • 一個好模塊，體積要小，並且針對只一個問題

  • 模塊中的單個文件不該超過約150行

  • 模塊不該該有多個級別的嵌套文件夾，其中包含JavaScript文件。若是是這樣，它可能作的太多了

讓有經驗的程序員介紹你一些好用的模塊，嘗試理解這個模塊的功能，若是花了幾分鐘的話，這個模塊可能就不夠好了

6.字符串去除空格

 去掉字符串先後全部空格：

function Trim(str)
  {
   return str.replace(/(^\s*)|(\s*$)/g, "" );
}
去掉字符串中全部空格(包括中間空格,須要設置第2個參數爲:g)
   function Trim(str,is_global)
   {
    var result;
    result = str.replace(/(^\s+)|(\s+$)/g, "" );
    if (is_global.toLowerCase()== "g" )
    {
     result = result.replace(/\s/g, "" );
     }
    return result;
}
若是隻須要 trim 函數的，能夠只寫一個：
if (!String.prototype.trim){
  /*---------------------------------------
   * 清除字符串兩端空格，包含換行符、製表符
   *---------------------------------------*/
  String.prototype.trim = function () {
   return this .replace(/(^[\s\n\t]+|[\s\n\t]+$)/g, "" );
  }
}
var str = " abcd " .trim();

7.箭頭函數

const Person = { 'name': 'little bear', 'age': 18, 'sayHello': function () { setInterval(function () { console.log('我叫' + this.name + '我今年' + this.age + '歲!') }, 1000) } } Person.sayHello()
上例的輸出結果是什麼呢？可能對javascript特性不是很熟悉的同窗(我本身也是)會認爲輸出固然是
我叫little bear,今年18歲咯。若是你的答案是這個的話，那麼我要恭喜你，答錯了。其實上例的輸出結果是我叫undefined，今年我undefined歲。爲何會輸出這種結果呢？
這是由於setInterval執行的時候，是在全局做用域下的，全部this指向的是全局window,而window上沒有name和age，因此固然輸出的是undefined咯。不明白的同窗能夠去看看this的工做原理this。
那麼，咱們怎麼要解決這個問題呢？
一般的寫法是緩存this,而後在setInterval中用緩存的this進行操做，以下
const Person = { 'name': 'little bear', 'age': 18, 'sayHello': function () { let self = this setInterval(function () { console.log('我叫' + self.name + '我今年' + self.age + '歲!') }, 1000) } } const sayHelloFun = Person.sayHello sayHelloFun()
箭頭函數的語法很是簡單，看一下最簡單的箭頭函數表示法
() => console.log('Hello')
以前沒有接觸過箭頭函數的人可能會驚訝於其代碼的簡潔。對比以前若是要寫一個這樣的函數
function(){ console.log('hello') }

從上面的例子中，咱們已經能夠看出箭頭函數的優點。
和普通函數相比，箭頭函數主要就是如下兩個方面的特色

    1. 不綁定this，arguments
    2. 更簡化的代碼語法

什麼叫不綁定this，我我的的理解爲箭頭函數的this其實就是在定義的時候就肯定好的，之後無論怎麼調用這個箭頭函數，箭頭函數的this始終爲定義時的this 
咱們仍是之前面的那個setInterval代碼爲例

const Person = { 'name': 'little bear', 'age': 18, 'sayHello': function () { setInterval(function () { console.log('我叫' + this.name + '我今年' + this.age + '歲!') }, 1000) } Person.sayHello()
當Person.sayHello()去執行setInterval的時候，是在全局做用下執行的全部setInterval回調函數的this就爲全局對象。es3-5中的函數this的值和調用這個函數的上下文有關。（注意是調用）
咱們用箭頭函數重寫上訴函數
const Person = { 'name': 'little bear', 'age': 18, 'sayHello': () => { setInterval(() => { console.log('我叫' + this.name + '我今年' + this.age + '歲!') }, 1000) } Person.sayHello()
你們猜猜結果是什麼？？？
輸出的是我叫'little bear'，今年18歲嘛？
哈哈，太天真了，我開始也是這樣想的，後面輸出以後發現結果不對，輸出的仍是undefined。爲何呢？？
由於我把方法寫在了對象裏，而對象的括號是不能封閉做用域的。因此此時的this仍是指向全局對象。
因此，經過以上的錯誤能夠提醒咱們，最好不要用箭頭函數做爲對象的方法。
咱們須要從新舉一個例子，以下
function Person () { this.name = 'little bear', this.age = 18 let self = this setInterval(function sayHello () { console.log('我叫' + self.name + '我今年' + self.age + '歲!') }, 1000) } let p = new Person()
緩存this，而後輸出，能達到咱們想要的結果。
把上述例子改成箭頭函數的形式以下
function Person () { this.name = 'little bear', this.age = 18 setInterval(() => { console.log('我叫' + this.name + '我今年' + this.age + '歲') },1000) } let p = new Person()
箭頭函數還有一個比較有特色的地方就是其不綁定arguments,即若是你在箭頭函數中使用arguments參數不能獲得想要的內容。
let arrowfunc = () => console.log(arguments.length) arrowfunc() //output arguments is not defined
因此在箭頭函數中咱們是不能直接使用arguments對象的，可是若是咱們又想得到函數的參數怎麼辦呢？
咱們可使用剩餘參數來取代arguments剩餘參數詳情

何時不能用剪頭函數let arrowfunc = (...theArgs) => console.log(theArgs.length) arrowfunc(1,2) //output 2
前面咱們已經看到了不少關於es6箭頭函數的好處，也看到了箭頭函數的一些不足。那麼咱們應該在何時使用箭頭函數，而何時最好不要使用呢？
1.做爲對象的方法
在寫這篇博客的例子時，因爲本人的水平確實有限，致使了篇頭出現的錯誤。不過我也想由此告訴你們，最好不要在對象的方法中使用箭頭函數，這樣可能會致使一些問題的產生。除非你很熟悉箭頭函數。
2.不能做爲構造函數
因爲箭頭函數的this不綁定的特色，因此不能使用箭頭函數做爲構造函數，實際上若是這樣作了，也會報錯。
3.定義原型方法
function Person (name){ this.name = name } Person.prototype.sayHello = () => { console.log(this) } var p1 = new Person() p1.sayHello() //output window對象
這裏的this指向的是window對象，這點和在對象方法中定義有點像

8.ES6擴展運算符

擴展運算符（ spread ）是三個點（...）。它比如 rest 參數的逆運算，將一個數組轉爲用逗號分隔的參數序列

應用
（1）合併數組
  1. // ES5  
  2. [1, 2].concat(more)  
  3. // ES6  
  4. [1, 2, ...more]  
  5. var arr1 = ['a', 'b'];  
  6. var arr2 = ['c'];  
  7. var arr3 = ['d', 'e'];  
  8. // ES5 的合併數組  
  9. arr1.concat(arr2, arr3);  
  10. // [ 'a', 'b', 'c', 'd', 'e' ]  
  11. // ES6 的合併數組  
  12. [...arr1, ...arr2, ...arr3]  
  13. // [ 'a', 'b', 'c', 'd', 'e' ] 

（2）與解構賦值結合

  1. / ES5  
  2. a = list[0], rest = list.slice(1)  
  3. // ES6  
  4. [a, ...rest] = list  
  5. 下面是另一些例子。  
  6. const [first, ...rest] = [1, 2, 3, 4, 5];  
  7. first // 1  
  8. rest // [2, 3, 4, 5]  
  9. const [first, ...rest] = [];  
  10. first // undefined  
  11. rest // []:  
  12. const [first, ...rest] = ["foo"];  
  13. first // "foo"  
  14. rest // []  

（3）函數的返回值

JavaScript 的函數只能返回一個值，若是須要返回多個值，只能返回數組或對象。擴展運算符提供瞭解決這個問題的一種變通方法。

  1. var dateFields = readDateFields(database);  
  2. var d = new Date(...dateFields);  

上面代碼從數據庫取出一行數據，經過擴展運算符，直接將其傳入構造函數Date

（4）字符串

  1. [...'hello']  
  2. // [ "h", "e", "l", "l", "o" ]  

9.Object.assign()

Object.assign()方法用於將全部可枚舉屬性的值從一個或多個源對象複製到目標對象。它將返回目標對象。

若是目標對象中的屬性具備相同的鍵，則屬性將被源中的屬性覆蓋。後來的源的屬性將相似地覆蓋早先的屬性。

const object1 = {
a: 1,
b: 2,
c: 3
};

const object2 = Object.assign({c: 4, d: 5}, object1);

console.log(object2.c, object2.d);
// expected output: 3 5

Object.assign 方法只會拷貝源對象自身的而且可枚舉的屬性到目標對象。該方法使用源對象的[[Get]]和目標對象的[[Set]]，因此它會調用相關 getter 和 setter。所以，它分配屬性，而不只僅是複製或定義新的屬性。若是合併源包含getter，這可能使其不適合將新屬性合併到原型中。爲了將屬性定義（包括其可枚舉性）複製到原型，應使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。

複製一個對象

var obj = { a: 1 }; var copy = Object.assign({}, obj); console.log(copy); // { a: 1 }

深拷貝問題

針對深拷貝，須要使用其餘方法，由於 Object.assign()拷貝的是屬性值。假如源對象的屬性值是一個指向對象的引用，它也只拷貝那個引用值。

function test() { 'use strict'; let obj1 = { a: 0 , b: { c: 0}}; let obj2 = Object.assign({}, obj1); console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} obj1.a = 1; console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} obj2.a = 2; console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}} obj2.b.c = 3; console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} // Deep Clone obj1 = { a: 0 , b: { c: 0}}; let obj3 = JSON.parse(JSON.stringify(obj1)); obj1.a = 4; obj1.b.c = 4; console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}} } test();

10.數組字符串互相轉換

var a, b;
a = new Array(0,1,2,3,4);
b = a.join("-");      //"0-1-2-3-4"
var s = "abc,abcd,aaa";
ss = s.split(",");// 在每一個逗號(,)處進行分解  ["abc", "abcd", "aaa"]
var s1 = "helloworld";
ss1 = s1.split('');  //["h", "e", "l", "l", "o", "w", "o", "r", "l", "d"]

11.js的DOM建立刪除查找

1、建立節點、追加節點
一、createElement（標籤名）建立一個元素節點（具體的一個元素）。
二、appendChild（節點）追加一個節點。
三、createTextNode（節點文本內容）建立一個文本節點

  1. var oDiv = document.createElement("div");//建立一個div元素，由於是document對象的方法。  
  2. var oDivText = document.createTextNode("666");//建立一個文本節點內容是「666」，由於是document對象的方法。  
  3. oDiv.appendChild(oDivText);//父級.appendChild(子節點);在div元素中添加「666」  
  4. document.body.appendChild(oDiv);//父級.appendChild(子節點);;document.body是指向<body>元素  
  5. document.documentElement.appendChild(createNode);//父級.appendChild(子節點);;document.documentElement是指向<html>元素  

2、插入節點
一、appendChild（節點）也是一種插入節點的方式，還能夠添加已經存在的元素，會將其元素從原來的位置移到新的位置。
二、insertBefore（a,b）是參照節點，意思是a節點會插入b節點的前面。

  1. var oDiv = document.createElement("div");//建立一個div元素，由於是document對象的方法。  
  2. var oDiv1 = document.getElementById("div1");  
  3.             document.body.insertBefore(oDiv,oDiv1);//在oDiv1節點前插入新建立的元素節點  
  4.     ul.appendChild(ul.firstChild); //把ul的第一個元素節點移到ul子節點的末尾  

3、刪除、移除節點
一、removeChild(節點) 刪除一個節點，用於移除刪除一個參數（節點）。其返回的被移除的節點，被移除的節點仍在文檔中，只是文檔中已沒有其位置了。

         var removeChild = document.body.removeChild(div1);//移除document對象的方法div1  

5、查找節點
一、childNodes 包含文本節點和元素節點的子節點。

 

  1. for (var i = 0; i < oList.childNodes.length; i++) {//oList是作的ul的對象。  
  2. //nodeType是節點的類型，利用nodeType來判斷節點類型，再去控制子節點  
  3. //nodeType==1 是元素節點  
  4. //nodeType==3 是文本節點  
  5.     if (oList.childNodes[i].nodeType == 1) {//查找到oList內的元素節點  
  6.         console.log(oList.childNodes[i]);//在控制器日誌中顯示找到的元素節點  
  7.     }  
  8. } 
二、A、children也能夠獲取子節點，並且兼容各類瀏覽器。包括IE6-8
B、parentNode：獲取父節點
  1. var oList = document.getElementById('list');//oList是作的ul的對象  
  2. var oChild=document.getElementById('child');//oChild是作的ul中的一個li的對象  
  3. //經過子節點查找父節點//parentNode：獲取父節點  
  4. console.log(oChild.parentNode);//在控制器日誌中顯示父節點  
  5. console.log(oList.children);//在控制器日誌中顯示oList子節點  
  6. console.log(children.length)//子節點的個數  

B、lastChild ; lastElementChild查找最後一個子節點。此存在瀏覽器兼容問題：lastChild 是IE兼容，lastElementChild是非IE兼容。

C、nextSibling ; nextElementSibling查找下一個兄弟節點。也是存在兼容性問題。

D、previousSibling ; previousElementSibling查找上一個兄弟節點。也是存在兼容性問題。

12.數據存數

localStorage：

是一種你不主動清除它，它會一直將存儲數據存儲在客戶端的存儲方式，即便你關閉了客戶端（瀏覽器)，屬於本地持久層儲存

sessionStorage：

用於本地存儲一個會話（session）中的數據，一旦會話關閉，那麼數據會消失，好比刷新。

localStorage與sessionStorage具備相同的API，如下方法均可以用於sessionStorage

localStorage.name ='vanida；

localStorage["name"]='vanida'；

localStorage.setItem("name","vanida");

獲取

var name = localStorage["name"]

var name= localStorage.name

var name＝ localStorage.getItem("name");

localStorage清除特定值方法

//清除name的值
localStorage.removeItem("name");

localStorage.name＝'';

 

localStorage清除全部值方法

 localStorage.clear()

2、localStorage的優點與侷限

localStorage的優點

一、localStorage拓展了cookie的4K限制

二、localStorage會能夠將第一次請求的數據直接存儲到本地，這個至關於一個5M大小的針對於前端頁面的數據庫，相比於cookie能夠節約帶寬，可是這個倒是隻有在高版本的瀏覽器中才支持的

localStorage的侷限

一、瀏覽器的大小不統一，而且在IE8以上的IE版本才支持localStorage這個屬性

二、目前全部的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對咱們平常比較常見的JSON對象類型須要一些轉換

三、localStorage在瀏覽器的隱私模式下面是不可讀取的

四、localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡

五、localStorage不能被爬蟲抓取到

localStorage與sessionStorage的惟一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空。

13.地理定位

function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}
else{alert("不支持定位")}
}
function showPosition(position){
alert("Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude)
}
getLocation();

14.em px rem

  px像素（Pixel）。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。通常默認16px

   em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。

EM特色

  • 1. em的值並非固定的；
  • 2. em會繼承父級元素的字體大小。

rem是CSS3新增的一個相對單位（root em，根em），這個單位引發了普遍關注。這個單位與em有什麼區別呢？區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。

15.call

window.val = 1;
var json = {
val: 10,
dbl: function(){
this.val *=2
}
};
json.dbl();
json.dbl.call(window);
alert(window.val+json.val);

16.變量提高

var name = "World";
(function(){
if(typeof name ==="undefined"){
var name = "Jack";
console.log("GoodBye" + name);
}else{
console.log('hello' + name)
}
})();

17.異步

console.log('one');
setTimeout(function(){
console.log('two')
},0);
console.log('three');

for(var i = 0;i < 10;i++){ setTimeout(function(){ console.log(i); },0) }

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程