日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

2019年9月1日 星期日 今日学习内容

發布時間:2024/5/14 编程问答 42 豆豆
生活随笔 收集整理的這篇文章主要介紹了 2019年9月1日 星期日 今日学习内容 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
  • localStorage的用法
  • box-sizing: border-box;
  • 函數表達式
  • 事件循環
  • 1.localStorage的用法
    作用: 用于本地存儲,以鍵值對的形式存起來的。
    首先我想問一下localStorage是一個什么東西?
    其實localStorage是一個對象。

    localStorage.setItem('name','wangxiao');

    上面我們為localStorage設置了一個name的鍵值。
    平時我們用localStorage.getItem(‘name’)得到設置的值。如果我們用

    localStorage.name

    會不會得到呢?
    其實是可以得到的,原因是localStorage是一個對象。
    2.box-sizing: border-box||border-content||inherit;

  • border-box width+padding+border(寬度+內邊距+邊框)
  • border-content width
  • inherit 繼承父盒子的box-sizing
    下面有個示例
  • .box{width: 200px;height: 200px;background: red;border: 20px solid #ccc;padding: 20px;box-sizing: border-box; }

    請問紅色盒子的實際寬度和高度是多少?(答案可以執行下面的例子就可以看到)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>box-sizing</title> <style>.box{width: 200px;height: 200px;background: red;border: 20px solid #ccc;padding: 20px;box-sizing: border-box;} </style> </head> <body><div id='root' class='box'></div><script>//box-sizing: border-box || content-box;//border-box width+padding+border//border-content width</script> </body> </html>

    實際的寬度和高度分別為:160px;
    剛才上面提到box-sizing:inherit;繼承父盒子的box-sizing,下面有個例子可以看看:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>box-sizing</title> <style>.box{width: 200px;height: 200px;background: red;border: 20px solid #ccc;padding: 20px;box-sizing: border-box;}.child{width: 100px;height: 100px;background: blue;padding: 10px;border: 10px solid #ccc;box-sizing: inherit;} </style> </head> <body><div id='root' class='box'><div class='child'></div></div><script>//box-sizing: border-box || content-box;//border-box width+padding+border//border-content width</script> </body> </html>

    這里又讓我想到了標準盒模型和怪異盒模型。

    • 標準盒模型 width=content+padding+border+margin
    • 怪異盒模型 width=width+margin (width包括:content+padding+border)

    3.函數表達式
    定義函數的方式有兩種:

  • 函數聲明
  • 函數表達式
  • 函數聲明的語法是這樣的:

    function functionName(arg0,arg1,arg2){//函數體 }

    關于函數聲明的一個最重要的特征就是函數聲明提升,意思是在執行代碼之前會先讀取函數聲明。這就意味著可以把函數聲明放在函數調用的后面。

    test(); function test(){}

    第二種創建函數的方式是使用函數表達式。函數表達式有幾種不同的語法形式。下面是最常見的一種形式。

    var functionName = function(arg0,arg1,arg2){//函數體 }

    函數聲明和函數表達式最重要的區別就是:前者可以函數聲明提升,后者不會。
    理解函數提升的關鍵,就是理解函數聲明與函數表達式之間的區別。
    下面有一個題目考的就是函數聲明和函數表達式的區別。

    console.log(foo()); function foo(){return bar();var bar = function(){ return 5}var bar = ()=>6;var bar = (function(){return 7})()function bar(){return 8} }

    返回的結果是8,函數聲明提升,因此會返回相應的結果。如果是下面的例子呢?會有什么不同

    console.log(foo()); function foo(){return bar();function bar(){return 8}var bar = function(){ return 5}var bar = ()=>6;var bar = (function(){return 7})() }

    結果是一樣的。
    再變一下,看有沒有什么不同之處。

    console.log(foo()); function foo(){function bar(){return 8}var bar = function(){ return 5}var bar = ()=>6;var bar = (function(){return 7})()return bar(); }

    返回的結果是:

    VM646:7 Uncaught TypeError: bar is not a function

    因為var bar = (function(){return 7})()已經執行完了相當于

    var bar = 7;

    因此才會有 bar is not a function

    總結

    以上是生活随笔為你收集整理的2019年9月1日 星期日 今日学习内容的全部內容,希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。