012020-3

【W(wǎng)eb前端開(kāi)發(fā)】第二課、HTML基礎(chǔ)之HTML概述

前端達(dá)人

文章目錄

一、HTML的概述

什么是HTML？
HTML的標(biāo)簽、元素、屬性
標(biāo)簽、元素
標(biāo)簽、屬性

附：補(bǔ)充上一節(jié)課網(wǎng)站和網(wǎng)頁(yè)的筆記：

附：img標(biāo)簽的詳細(xì)介紹

一、HTML的概述
什么是HTML？

HTML指的是超文本標(biāo)記語(yǔ)言（Hyper Text Markup Language）

HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言 (markup language)

標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)

HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)

HTML不區(qū)分大小寫
HTML的標(biāo)簽、元素、屬性
標(biāo)簽、元素

由尖括號(hào)包圍，比如 <title>

通常是成對(duì)出現(xiàn)的

<title>百度一下，你就知道</title>

其中，<title> 為開(kāi)始標(biāo)簽

中間的 “百度一下，你就知道” 為內(nèi)容

</title>為結(jié)束標(biāo)簽，我們可以清楚的觀察到，標(biāo)簽結(jié)束是有 “/”。

則標(biāo)簽和內(nèi)容，構(gòu)成了網(wǎng)頁(yè)的元素。

標(biāo)簽的嵌套關(guān)系，如下列例子，你品

<html><body></body></html>

<html><body></html></body>

標(biāo)簽的嵌套縮進(jìn)

如圖所示<html>為外層標(biāo)簽，稱為父元素，<head>和<body>為內(nèi)層標(biāo)簽，稱為子元素。其中<head>與<body>又互稱為兄弟元素

<!DOCTYPE html>

聲明不是 HTML 標(biāo)簽；它是指示 web 瀏覽器關(guān)于頁(yè)面使用哪個(gè) HTML 版本進(jìn)行編寫的指令。

聲明必須是 HTML 文檔的第一行，位于 <html> 標(biāo)簽之前。

<!DOCTYPE> 聲明沒(méi)有結(jié)束標(biāo)簽。

<!DOCTYPE> 聲明對(duì)大小寫不敏感。

在 HTML 4.01 中有三種 <!DOCTYPE> 聲明。在 HTML5 中只有一種：<!doctype html>

我們學(xué)習(xí)的是HTML5，所以我們不過(guò)多對(duì)HTML4的聲明做過(guò)多解釋。

如果上述對(duì)<!doctype html>的概述不清楚的話，

那記住以下兩點(diǎn)即可，1. 不分大小寫，2.在HTML的網(wǎng)頁(yè)<html>標(biāo)簽之前加上<!doctype html>就可以啦。

圖示為 HTML DOM樹，DOM：Document Object Model（文檔對(duì)象模型）

2. 標(biāo)簽、屬性

一個(gè)標(biāo)簽可能有多個(gè)屬性，屬性先后與順序無(wú)關(guān)

“=” 為賦值符號(hào)

屬性與屬性之間用空格隔開(kāi)

附：補(bǔ)充上一節(jié)課網(wǎng)站和網(wǎng)頁(yè)的筆記：

HTML網(wǎng)頁(yè)的編碼為 utf-8

網(wǎng)站可以理解成一個(gè)文件夾，而網(wǎng)頁(yè)就是一個(gè)個(gè)的文件

網(wǎng)頁(yè)的文件后綴常見(jiàn)的有：htm、html、jsp、php、asp

網(wǎng)站的文件結(jié)構(gòu)通常包含 images文件夾，css文件夾，js文件夾，

一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，的文件目錄通常由 images、css、js，作用顧名思義，就是存放相對(duì)應(yīng)的文件資源

附：img標(biāo)簽的詳細(xì)介紹

<img> 標(biāo)簽有兩個(gè)必需的屬性：src 和 alt。

注釋：從技術(shù)上來(lái)說(shuō)，圖像并不會(huì)插入到HTML頁(yè)面中去，而是通過(guò) src的值(URL) 鏈接到HTML頁(yè)面上的，<img>標(biāo)簽的作用是為被引用的圖像創(chuàng)建占位符。

<img>標(biāo)簽常用的屬性有src、alt、width、height、title

src和alt為 img 標(biāo)簽的必需元素。

話不多說(shuō)，看圖，為你們講解代碼。

看網(wǎng)站的演示圖和代碼圖，想必大家都很清楚了吧。

（為了更直觀的看到效果，我寫了div和div的樣式，1px粗的紅色實(shí)線邊框，這里的代碼以后再具體詳解）

title和alt 的區(qū)別別，體現(xiàn)在第 11 行和第 14 行，想必大家就能看出來(lái)了吧

i. alt 屬性是在圖片不能正常顯示時(shí)出現(xiàn)的文本提示。

ii. title 屬性是在鼠標(biāo)在移動(dòng)到元素上的文本提示。

width和height的作用，用來(lái)規(guī)定圖像的寬度和高度，單位為像素（px）

src路徑，由于我的文件夾結(jié)構(gòu)為 index.html文件和 images 文件夾。

所以 src 的路徑為 src="images/圖片.后綴"，即src="URL"

URL即（Uniform Resource Locator,統(tǒng)一資源定位符，在WWW上，每一信息資源都有統(tǒng)一的且在網(wǎng)上唯一的地址。

簡(jiǎn)單的理解URL，就是網(wǎng)址，地址

如果圖片路徑引用錯(cuò)誤，都會(huì)導(dǎo)致網(wǎng)頁(yè)中的圖片無(wú)法正常顯示！如，第 14 行和第 20 行代碼。

以上為img標(biāo)簽的常見(jiàn)用法。在我們寫網(wǎng)頁(yè)的時(shí)候，建議img寫上 src、alt、width、height這四個(gè)屬性，是否需要 title 具體看網(wǎng)站的功能。

以上就是，第二課、Web前端開(kāi)發(fā)之HTML基礎(chǔ)的全部?jī)?nèi)容了，感謝閱讀

————————————————

版權(quán)聲明：本文為CSDN博主「MineChen」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/MineSu/article/details/104549536

評(píng)論(0) 瀏覽(2112)

012020-3

vue框架漸進(jìn)性的理解和mvvm模式的理解

前端達(dá)人

引言

現(xiàn)在市場(chǎng)很多前端開(kāi)發(fā)的招聘崗位都或多或少的要求你要掌握vue，可以說(shuō)vue在國(guó)內(nèi)是非常的火爆的，下面我給大家介紹一下vue框架吧！

vue是漸進(jìn)式框架

vue的核心是一個(gè)視圖模板引擎，但是這并不能說(shuō)明vue不是一個(gè)框架，如上圖所示在聲明式渲染（視圖模板）基礎(chǔ)上，vue可以添加組件系統(tǒng)component，vue-router客戶端路由，vuex的狀態(tài)管理，vue-cli構(gòu)建工具來(lái)構(gòu)建一個(gè)完整的框架，更重要的是這些功能相互獨(dú)立，你可以任意選用你項(xiàng)目需要的部件，不一定非要全部整合在一起（就像是vuex它是一個(gè)很好的可以管理組件之間共享狀態(tài)的部件，但非必須在你的每一個(gè)項(xiàng)目中使用它，如果說(shuō)你的項(xiàng)目相對(duì)簡(jiǎn)單，組件之間的通信相對(duì)簡(jiǎn)單你完全可以不使用它），可以看到漸進(jìn)式，其實(shí)就是vue的使用方式，同時(shí)也能看到vue的設(shè)計(jì)理念
vue是mvvm模式
為什么說(shuō)vue是mvvm模式呢？這個(gè)大家首先要知道m(xù)vvm是什么。mvvm是Model-View-ViewModel的簡(jiǎn)寫，即模型視圖視圖模型。模型是指后端傳過(guò)來(lái)的數(shù)據(jù)，視圖是指我們看到的頁(yè)面，視圖模型是mvvm框架的核心，他是連接view和model的橋梁，它有兩個(gè)方向，第一將后端傳來(lái)的數(shù)據(jù)轉(zhuǎn)換成頁(yè)面可以看到的視圖，第二，將用戶在頁(yè)面上的交互轉(zhuǎn)化成為后端數(shù)據(jù)，我們稱之為雙向綁定。
總結(jié)mvvm模式的視圖和模型是不能直接通信的，它們通過(guò)ViewModel來(lái)通信，ViewModel通常要實(shí)現(xiàn)一個(gè)observer觀察者，當(dāng)數(shù)據(jù)發(fā)生變化，ViewModel能夠監(jiān)聽(tīng)到數(shù)據(jù)的這種變化，然后通知到對(duì)應(yīng)的視圖做自動(dòng)更新，而當(dāng)用戶操作視圖，ViewModel也能監(jiān)聽(tīng)到視圖的變化，然后通知數(shù)據(jù)做改動(dòng)，這實(shí)際上就實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定。并且MVVM中的View 和 ViewModel可以互相通信
vue框架可以理解為是ViewModel，它可以實(shí)現(xiàn)dom監(jiān)聽(tīng)和數(shù)據(jù)綁定
vue的數(shù)據(jù)綁定原理

當(dāng)你把JavaScript對(duì)象傳入vue實(shí)例作為data選項(xiàng)，vue會(huì)遍歷此對(duì)象的所以屬性，并使用Object.defineProperty把這些屬性轉(zhuǎn)換為getter和setter，每一個(gè)組件都有一個(gè)watcher實(shí)例，它會(huì)在組件渲染過(guò)程中，把接觸過(guò)的數(shù)據(jù)記錄為依賴，當(dāng)依賴的setter被觸發(fā)是，他會(huì)通知watcher，重而使關(guān)聯(lián)的數(shù)據(jù)重新渲染，以下是代碼展示。

<div id = "box"></div>
var obox = document.getElementById('box')
var obj = {}
object.defineProperty(obj,'myname',{
    get () {
        // obj設(shè)置了一個(gè)myname屬性，當(dāng)訪問(wèn)obj.myname屬性會(huì)執(zhí)行g(shù)et方法
    },
    set (data) {
        // 當(dāng)修改myname屬性會(huì)執(zhí)行set方法
        // data會(huì)得到你修改的值
        obox.innerHTML = data
    }
})

object.definePeoperty有一下缺點(diǎn)： {
1：無(wú)法監(jiān)聽(tīng)es6的set，map變化
2：無(wú)法監(jiān)聽(tīng)class類型的數(shù)據(jù)
3：屬性的新增和刪除也無(wú)法監(jiān)聽(tīng)
4：數(shù)組元素的新整和刪除也無(wú)法監(jiān)聽(tīng)
}

評(píng)論(0) 瀏覽(2406)

012020-3

html5+css3實(shí)現(xiàn)2D-3D動(dòng)畫效果實(shí)例

前端達(dá)人

html5+css3實(shí)現(xiàn)2D-3D動(dòng)畫效果實(shí)例

主要實(shí)現(xiàn)的功能就是一些2D、3D的動(dòng)畫效果，如平移、縮放、旋轉(zhuǎn)等等。

文章目錄

html5+css3實(shí)現(xiàn)2D-3D動(dòng)畫效果實(shí)例

2D變換

3D變換

2D中應(yīng)用實(shí)現(xiàn)案例

3D中應(yīng)用實(shí)現(xiàn)案例

css3動(dòng)畫

2D變換

是在一個(gè)平面對(duì)元素進(jìn)行的操作。

可以對(duì)元素進(jìn)行水平或者垂直位移、旋轉(zhuǎn)或者拉伸.

1

2

*2d對(duì)下面面坐標(biāo)系簡(jiǎn)單分析如下：

（1）.默認(rèn)狀態(tài)下，x軸是水平的，向右為正。

（2）.默認(rèn)狀態(tài)下，y軸是垂直的，向下為正，這與傳統(tǒng)的數(shù)學(xué)坐標(biāo)系不同。

3D變換

2d場(chǎng)景，在屏幕上水平和垂直的交叉線x軸和y軸
3d場(chǎng)景，在垂直于屏幕的方法，相對(duì)于2d多出個(gè)z軸

下面首先需要了解2D、3D中的功能函數(shù)：

位移 translate()
translateX() 方法，元素在其 X 軸以給定的數(shù)值進(jìn)行位置移動(dòng)
translateY() 方法，元素在其 Y 軸以給定的數(shù)值進(jìn)行位置移動(dòng)
縮放scale()
scaleX()：相當(dāng)于scale(sx,1)。表示元素只在X軸（水平方向）縮放元素，其默認(rèn)值是1。
scaleY()：相當(dāng)于scale(1,sy)。表示元素只在Y軸（縱橫方向）縮放元素，其默認(rèn)值是１。
旋轉(zhuǎn)rotate()
rotateX() 方法，元素圍繞其 X 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)
rotateY() 方法，元素圍繞其 Y 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)
正數(shù)”是順時(shí)針，“負(fù)數(shù)”是逆時(shí)針，單位為“deg”。
傾斜skew()
一個(gè)參數(shù)時(shí)：表示水平方向的傾斜角度；
兩個(gè)參數(shù)時(shí)：第一個(gè)參數(shù)表示水平方向的傾斜角度，
第二個(gè)參數(shù)表示垂直方向的傾斜角度
3D中多了Z軸，其他屬性值不變

2D中應(yīng)用實(shí)現(xiàn)案例
位移 translate()
效果圖：

 position: absolute;
    left: 20px; top: 40px;
    transition: 2s;/*過(guò)渡時(shí)間*/
    transform: translateY(-320px);

.box3:hover .box3_h2{
    transform: translateY(0px);
}

<!-- 盒子3：實(shí)現(xiàn)位移 -->
        <div class="box3 box">
            <img class="img_3" src="../16/images/3.png" alt="">
            <div class="box_mm"></div>
            <h2 class="box3_h2">Taylor Swift</h2>
            <p class="box3_p1">I'm so glad you made time to see me. How's life, 
                tell me how's your family? I haven't seen them in a while. 
                You've been good, busier then ever. 
                We small talk, work and the weather Your guard is up and I know why...</p>
        </div>

/* 公共樣式 */
.box{
    width:350px;
    height: 300px;
    position: relative;
    transform: 1s;
    margin: 20px 20px;
    float: left;
}
img{
    display: block;
    width: 350px;
    height: 300px;
}
/* 鼠標(biāo)滑過(guò)覆蓋上方的白色部分 */
.box_mm{
    width:350px;
    height: 300px;
    transform: 1s;
    background-color: #fff;
    position: absolute;/*設(shè)置定位，擋住box，*/
    top: 0;
    opacity: 0;/*透明，0全透明*/
}
h2{
    font-size: 20px;
}

/* 盒子3 */
.box3{
    overflow: hidden;
}
.img_3{
    transition: 2s;
}
.box3_h2{
    color: #fff;
    position: absolute;
    left: 20px; top: 40px;
    transition: 2s;/*過(guò)渡時(shí)間*/
    transform: translateY(-320px);
}
.box3_p1{
    font-size: 14px;
    width: 320px;
    position: absolute;
    left: 20px; bottom: 80px;
    transition: 2s;
    opacity: 0;
}
/*交互樣式*/
.box3:hover .img_3{
    transform: translateY(-10px);
}
.box3:hover .box3_h2{
    transform: translateY(0px);
}
.box3:hover .box3_p1{
    transform: translateY(-50px);
    opacity: 1;
}

————————————————
版權(quán)聲明：本文為CSDN博主「weixin_43513126」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43513126/article/details/104570062

評(píng)論(0) 瀏覽(2937)

012020-3

Web開(kāi)發(fā)期待的CSS的一些功能

前端達(dá)人

著名的 Web 設(shè)計(jì)網(wǎng)站 CSS-tricks.com 最近組織了一次調(diào)查，請(qǐng)15名頂尖的 Web 設(shè)計(jì)師對(duì) CSS 提出自己的期望，15名設(shè)計(jì)師包括 Jon Hicks, Wolfgang Bartelme, Mint 的 Shaun Inman 以及 Stuff and Nonsense 的 Andy Clarke。

調(diào)查結(jié)果顯示，最被期待的 CSS 功能是 CSS 圓角，其它期待的功能包括跨瀏覽器漸變與陰影，類似 Photoshop 的層融合效果，更一致的聲明簡(jiǎn)化語(yǔ)法以及對(duì)條件判斷的本地支持。這些期待中一部分已經(jīng)包含在未來(lái)的 CSS-3 中，但更多的仍然只是一些夢(mèng)想。

WebMonkey 的編輯們將這個(gè) Wishlist 發(fā)表在他們的網(wǎng)站并讓 WebMonkey 的讀者投票選出最熱門的項(xiàng)目，以下是按投票多少排列的 CSS Wishlist 部分列表（只選取最熱門的項(xiàng)目）。新建一個(gè)前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準(zhǔn)備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來(lái)一起交流。

CSS 圓角

by Webmonkey

標(biāo)準(zhǔn)的，直接基于 CSS 的圓角是很多人的期待，這樣，就不必再費(fèi)盡心機(jī)只為了顯示一個(gè)圓角。

垂直居中

by michael lascarides

針對(duì) block 對(duì)象的更容易的垂直居中設(shè)置。（div + css 讓人既愛(ài)且恨的一個(gè)重要原因就是垂直居中，讓一個(gè)對(duì)象垂直居中顯示在 block 容器中，且兼容所有主流瀏覽器簡(jiǎn)直就是一個(gè)噩夢(mèng) - 譯者）

兼容所有主流瀏覽器的 CSS 2.1 與 CSS 3

by Erik

能兼容所有主流瀏覽器的 CSS 2.1 與 CSS 3 是 Erik 的夢(mèng)想，但其中的某些功能在某些瀏覽器中總是磕磕絆絆。

更好的嵌入字體

by Webmonkey

不要 sFIR, 不要圖片，要真正的字體。

CSS 變量

by Jeffrey Jordan Way, via css-tricks.com

能定義諸如色彩值一類的變量

更好地支持 100% height

by JLR

設(shè)置了 100% height 的容器的頂部和底部真正附著在頁(yè)首和頁(yè)尾，頁(yè)面中間部分匹配內(nèi)容并準(zhǔn)確顯示滾動(dòng)條。搜索“100% height css”能找到各種解決方法，但事情原本不該這么復(fù)雜。

可重復(fù)使用變量

by Neal Lindsay

比如:

@var mycolor = #0080FF

h1 { color: mycolor; }

div.containbox { border: 1px mycolor; }

瀏覽器一致性與定義順序

by JML

瀏覽器一致性非常重要。某些 CSS 在某些瀏覽器被忽略或部分忽略使 CSS 只有借助 JavaScript 才能正常使用。同時(shí)，對(duì)里面的 CSS 定義應(yīng)該可以覆蓋全局定義。

一句話復(fù)原

by Chris Pitzer

很多設(shè)計(jì)者要寫40多行代碼才能清除瀏覽器默認(rèn) CSS 定義，應(yīng)當(dāng)有一個(gè)簡(jiǎn)單的聲明一次性將所有 CSS 復(fù)原，比如：

body { clear-default-styles:true; }

圖形旋轉(zhuǎn)與反轉(zhuǎn)

by Stephen Bell

在設(shè)置圖形圓角效果時(shí)候，我們需要同一個(gè)圓角圖片的4個(gè)旋轉(zhuǎn)版本來(lái)實(shí)現(xiàn)。應(yīng)該有一個(gè)簡(jiǎn)單的聲明實(shí)現(xiàn)旋轉(zhuǎn)，如：

img .horiz { rotate:90; }

成組的 CSS 簡(jiǎn)化定義

by Volkan G?rgülü, via css-tricks.com

如:

foo h1, #foo h2, #foo h3

改為:

foo [h1, h2, h3]

漸變

by Anonymous

以避免一條線一條線地實(shí)現(xiàn)漸變。

定位計(jì)算

by Anonymous

不使用 JavaScript 而是直接在 CSS 中實(shí)現(xiàn)：

left: ID1.Left + ID1.Width + 2px;

網(wǎng)格布局

by Kurt Krumme

table 布局曾經(jīng)流行一時(shí)，因?yàn)?table 布局更接近網(wǎng)格布局的原理。CSS 的設(shè)置者們?yōu)槭裁匆瞥鲆粋€(gè)不倫不類的 box 模型？

div + css 在 Web 設(shè)計(jì)界已經(jīng)紅得發(fā)紫，盡管 div 有眾多缺陷（比如垂直居中，比如在 IE 中的眾多 BUG），如果哪個(gè)設(shè)計(jì)師膽敢使用 table，被人查出源代碼，是會(huì)被恥笑的。然而譯者從不畏懼使用 table + css，且愿意告戒那些盲目追隨 div 并被折磨得半死的人，至少在目前，table 是被各種瀏覽器支持得最完美的容器對(duì)象。

新建一個(gè)前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準(zhǔn)備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來(lái)一起交流。

使用 image 作 border

by Anonymous

應(yīng)當(dāng)可以用 image 作為 border，如：

border-right: url('image.png')

支持多個(gè)背景圖

by Brad

這個(gè) CSS 功能非常有用，有了這個(gè)功能，完美實(shí)現(xiàn) CSS 圓角就變得十分簡(jiǎn)單了。

所有瀏覽器支持統(tǒng)一標(biāo)準(zhǔn)

by Anonymous

這里特指 IE<8 的版本。CSS 有成型的標(biāo)準(zhǔn)，但有些瀏覽器一定要搞一些自己的東西出來(lái)。

以上來(lái)自cb。大師們的期望果然很獨(dú)特，相當(dāng)多的期望也非常有用，如果實(shí)現(xiàn)了，Web開(kāi)發(fā)就是多么輕松愉快的一件事情??！比如變量、清除定義和定位計(jì)算，是我認(rèn)為非常有用的。目前IE下可以用一些IE特有的表達(dá)式，但用起來(lái)太復(fù)雜。

還是期望CSS3更好更強(qiáng)大。也期望各個(gè)瀏覽器盡快支持CSS3

————————————————

版權(quán)聲明：本文為CSDN博主「前端基礎(chǔ)開(kāi)發(fā)」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/html886/article/details/104582007

評(píng)論(0) 瀏覽(2187)

012020-3

JavaScript中的this/call/apply/bind

前端達(dá)人

文章目錄

一、this

1.什么是this

2.this 代表什么

3.綁定 this 的方法

4.this的指向

5.改變指向

二、Function.prototype.bind()

三、call/apply

1.定義

2.語(yǔ)法

3.異同

一、this

1.什么是this

this 關(guān)鍵字在大部分語(yǔ)言中都是一個(gè)重要的存在，JS中自然不例外，其表達(dá)的意義豐富多樣甚至有些復(fù)雜，深刻理解this是學(xué)習(xí)JS、面向?qū)ο缶幊谭浅Ｖ匾囊画h(huán)。

2.this 代表什么

this代表函數(shù)（方法）執(zhí)行的上下文環(huán)境（上下文，類似與你要了解一篇文章，了解文章的上下文你才能清晰的了解各種關(guān)系）。

但在 JavaScript 中 this 不是固定不變的，它會(huì)隨著執(zhí)行環(huán)境的改變而改變。

1.在方法中，this 表示該方法所屬的對(duì)象。

2.如果單獨(dú)使用，this 表示全局對(duì)象。

3.在函數(shù)中，this 表示全局對(duì)象。

4.在函數(shù)中，在嚴(yán)格模式下，this 是未定義的(undefined)。

5.在事件中，this 表示接收事件的元素。

6.類似 call() 和 apply() 方法可以將 this 引用到任何對(duì)象。

3.綁定 this 的方法

this的動(dòng)態(tài)切換，固然為 JavaScript 創(chuàng)造了巨大的靈活性，但也使得編程變得困難和模糊。有時(shí)，需要把this固定下來(lái)，避免出現(xiàn)意想不到的情況。JavaScript 提供了call、apply、bind這三個(gè)方法，來(lái)切換/固定this的指向。

4.this的指向

1.在一般函數(shù)方法中使用 this 指代全局對(duì)象

function test(){
　　　　this.x = 1;  //這里this就是window
　　　　console.log(this.x);
　　}
　　test(); // 1

JS規(guī)定，函數(shù)中的this，在函數(shù)被調(diào)用時(shí)確定，它指函數(shù)當(dāng)前運(yùn)行的環(huán)境。

2.作為對(duì)象方法調(diào)用，this 指代上級(jí)對(duì)象

var x =3;
function test(){
　　alert(this.x);
}
var o = {
  x:1,
  m:test 
};
o.m(); // 1

如果函數(shù)作為對(duì)象的方法時(shí)，方法中的 this 指向該對(duì)象。

3.作為構(gòu)造函數(shù)調(diào)用，this 指代new 出的對(duì)象

function test(){
　　　　console.log(this);
　　}
　　var o = new test();
       test();
//可以看出o代表的不是全局對(duì)象

new關(guān)鍵詞的作用是調(diào)用某個(gè)函數(shù)并拿到其中的返回值，只是調(diào)用過(guò)程稍特殊。在上面的代碼實(shí)例中。test函數(shù)被new關(guān)鍵詞調(diào)用時(shí)，內(nèi)部依次執(zhí)行了以下步驟:

（1）創(chuàng)建一個(gè)空對(duì)象。

（2）將這個(gè)空對(duì)象的原型，指向這個(gè)構(gòu)造函數(shù)的prototype。

（3）將空對(duì)象的值賦給函數(shù)內(nèi)部的this（this就是個(gè)空對(duì)象了）。

（4）執(zhí)行函數(shù)體代碼，為this這個(gè)對(duì)象綁定鍵值對(duì)。

（5）返回this，將其作為new關(guān)鍵詞調(diào)用oop函數(shù)的返回值。

所以構(gòu)造函數(shù)中的this，依舊是在構(gòu)造函數(shù)被new關(guān)鍵詞調(diào)用時(shí)確定其指向，指向的是當(dāng)前被實(shí)例化的那個(gè)對(duì)象。

4.箭頭函數(shù)中的this
箭頭函數(shù)是ES6的新特性，最重要的特點(diǎn)是它會(huì)捕獲其所在上下文的this作為自己的this，或者說(shuō)，箭頭函數(shù)本身并沒(méi)有this，它會(huì)沿用外部環(huán)境的this。也就是說(shuō)，箭頭函數(shù)內(nèi)部與其外部的this是保持一致的。

this.a=20
var test={
    a:40，
    init:()=>{
        console.log(this.a)
        function go(){
            this.a=60
            console.log(this.a)
        }
        go.prototype.a=50
        return go
    }   
}

var p=test.init()
p()
new (test.init())()
//輸出 20 60 60 60

5.改變指向
this的動(dòng)態(tài)切換，固然為 JavaScript 創(chuàng)造了巨大的靈活性，但也使得編程變得困難和模糊。有時(shí)，需要把this固定下來(lái)，避免出現(xiàn)意想不到的情況。JavaScript 提供了call、apply、bind這三個(gè)方法，來(lái)切換/固定this的指向。

bind方法和apply、call稍有不同，bind方法返回一個(gè)新函數(shù)，以后調(diào)用了才會(huì)執(zhí)行，但apply、call會(huì)立即執(zhí)行。

二、Function.prototype.bind()
bind()方法主要就是將函數(shù)綁定到某個(gè)對(duì)象，bind()會(huì)創(chuàng)建一個(gè)函數(shù)，函數(shù)體內(nèi)的this對(duì)象的值會(huì)被綁定到傳入bind()中的第一個(gè)參數(shù)的值，例如：f.bind(obj)，實(shí)際上可以理解為obj.f()，這時(shí)f函數(shù)體內(nèi)的this自然指向的是obj；

示例：

function f(y, z){
    return this.x + y + z;
}
var m = f.bind({x : 1}, 2);
console.log(m(3));
//6

這里bind方法會(huì)把它的第一個(gè)實(shí)參綁定給f函數(shù)體內(nèi)的this，所以這里的this即指向{x : 1}對(duì)象，從第二個(gè)參數(shù)起，會(huì)依次傳遞給原始函數(shù)，這里的第二個(gè)參數(shù)2，即是f函數(shù)的y參數(shù)，最后調(diào)用m(3)的時(shí)候，這里的3便是最后一個(gè)參數(shù)z了，所以執(zhí)行結(jié)果為1 + 2 + 3 = 6分步處理參數(shù)的過(guò)程其實(shí)是一個(gè)典型的函數(shù)柯里化的過(guò)程（Curry）。

三、call/apply
1.定義
每個(gè)函數(shù)都包含兩個(gè)非繼承而來(lái)的方法：call()方法和apply()方法。

call和apply可以用來(lái)重新定義函數(shù)的執(zhí)行環(huán)境，也就是this的指向；call和apply都是為了改變某個(gè)函數(shù)運(yùn)行時(shí)的context，即上下文而存在的，換句話說(shuō)，就是為了改變函數(shù)體內(nèi)部this的指向。

2.語(yǔ)法
call()

調(diào)用一個(gè)對(duì)象的方法，用另一個(gè)對(duì)象替換當(dāng)前對(duì)象，可以繼承另外一個(gè)對(duì)象的屬性，它的語(yǔ)法是：

Function.call(obj[, param1[, param2[, [,...paramN]]]]);
1
obj：這個(gè)對(duì)象將代替Function類里this對(duì)象
params：一串參數(shù)列表

說(shuō)明：call方法可以用來(lái)代替另一個(gè)對(duì)象調(diào)用一個(gè)方法，call方法可以將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)閛bj指定的新對(duì)象，如果沒(méi)有提供obj參數(shù)，那么Global對(duì)象被用于obj。

apply()

和call()方法一樣，只是參數(shù)列表不同，語(yǔ)法：

Function.apply(obj[, argArray]);

obj：這個(gè)對(duì)象將代替Function類里this對(duì)象
argArray：這個(gè)是數(shù)組，它將作為參數(shù)傳給Function

說(shuō)明：如果argArray不是一個(gè)有效數(shù)組或不是arguments對(duì)象，那么將導(dǎo)致一個(gè)TypeError，如果沒(méi)有提供argArray和obj任何一個(gè)參數(shù)，那么Global對(duì)象將用作obj。

3.異同
相同點(diǎn)

call()和apply()方法的相同點(diǎn)就是這兩個(gè)方法的作用是一樣的。都是在特定的作用域中調(diào)用函數(shù)，等于設(shè)置函數(shù)體內(nèi)this對(duì)象的值，以擴(kuò)充函數(shù)賴以運(yùn)行的作用域。

一般來(lái)說(shuō)，this總是指向調(diào)用某個(gè)方法的對(duì)象，但是使用call()和apply()方法時(shí)，就會(huì)改變this的指向，看個(gè)例子：

function add(a, b) {
    return a + b;
}

function sub(a, b) {
    return a - b;
}

console.log(add.call(sub, 2, 1));//3

評(píng)論(0) 瀏覽(2132)

012020-3

看懂設(shè)計(jì)（一）：菲茲定律在UI設(shè)計(jì)中的實(shí)際應(yīng)用

ui設(shè)計(jì)分享達(dá)人

菲茲定律在交互設(shè)計(jì)中的應(yīng)用是很普遍和廣泛的，有時(shí)候在我們?cè)O(shè)計(jì)界面之時(shí)，不知不覺(jué)就應(yīng)用了菲茲定律，但是我們卻未察覺(jué)。

關(guān)于菲茲定律的具體內(nèi)容，可以說(shuō)是大家耳熟能詳，甚至在學(xué)生時(shí)代就有所了解：從一個(gè)起始位置移動(dòng)到最終目標(biāo)點(diǎn)所需的時(shí)間由兩個(gè)參數(shù)來(lái)決定，到目標(biāo)的距離（D）和目標(biāo)的大小（W），可以用數(shù)學(xué)公式表達(dá)為：

在當(dāng)今互聯(lián)網(wǎng)背景下簡(jiǎn)單來(lái)解釋說(shuō)，就是大而近的目標(biāo)區(qū)域意味著用戶用需要耗費(fèi)太大的精力即可輕易點(diǎn)擊或者關(guān)注到目標(biāo)，反之，小而遠(yuǎn)的目標(biāo)區(qū)域則意味著用戶將耗費(fèi)一些時(shí)間和動(dòng)作才能觸及到目標(biāo)。在一般情況下，讓用戶耗費(fèi)時(shí)間和動(dòng)作的操作，會(huì)使人產(chǎn)生負(fù)面的用戶體驗(yàn)。

以上說(shuō)的，其實(shí)是對(duì)菲茲定律表象的解釋，每個(gè)人在網(wǎng)上也會(huì)搜到很多類似的解釋。當(dāng)你搜索時(shí)會(huì)發(fā)現(xiàn)，關(guān)于對(duì)菲茲定律的應(yīng)用，網(wǎng)上絕大多數(shù)的資料都是在以PC端界面作為定律的解釋，但移動(dòng)界面卻少之又少，這里面的一部分原因是菲茲定律提出的時(shí)間，一部分也是因?yàn)樵谝苿?dòng)端的設(shè)計(jì)中，菲茲定律會(huì)變得很零散和瑣碎，很難真正用幾句話來(lái)總結(jié)，這篇文章也是我第一次試著在移動(dòng)端的交互設(shè)計(jì)的范疇內(nèi)對(duì)菲茲定律的應(yīng)用進(jìn)行簡(jiǎn)單的總結(jié)。

1. 讓按鈕更大一些

我在這一部分分了幾種情況，分別進(jìn)行討論，其一呢，就是fab button。在現(xiàn)有的fab button中，大家會(huì)發(fā)現(xiàn)，雖然按照正常iOS的設(shè)計(jì)規(guī)范，一般按鈕的大小都會(huì)被設(shè)計(jì)為88px，但是在設(shè)計(jì)fab button時(shí)，我們一般都會(huì)選擇大一些的尺寸，例如100px、110px、120px。

其二就是頁(yè)面內(nèi)功能按鈕的大小，我們?cè)谧鼋缑嬖O(shè)計(jì)的時(shí)候，都知道做到統(tǒng)一性，但很少去深入地想，界面統(tǒng)一的背后是在像用戶傳達(dá)一個(gè)什么意思。

舉個(gè)例子，這是【洋蔥數(shù)學(xué)】和【360家庭防火墻】的登錄界面，市面上的登錄界面大多大同小異，基本組成就是賬號(hào)+密碼+按鈕（或手機(jī)號(hào)+按鈕等）的組合。

那我們來(lái)思考一個(gè)問(wèn)題：為什么在手機(jī)號(hào)只有11位已經(jīng)確定的情況下，輸入框和【下一步】按鈕還要做這么長(zhǎng)，接近通欄的一個(gè)樣式。

我試著來(lái)找到這個(gè)問(wèn)題的答案，第一個(gè)，是對(duì)于品牌設(shè)計(jì)規(guī)范的執(zhí)行，對(duì)邊距是有一定要求的，也就是我們常說(shuō)的保持頁(yè)面元素的統(tǒng)一性；第二個(gè)，即是對(duì)菲茲定律的應(yīng)用，在這個(gè)頁(yè)面中，最核心的兩個(gè)功能【輸入】和【下一步】給予他們一個(gè)足夠的大小，會(huì)讓用戶的注意力更加集中，避免被分散精力。

2. 讓相關(guān)聯(lián)的信息內(nèi)容距離更近

這也和設(shè)計(jì)原則中的親密性相一致。依舊可以用我們常見(jiàn)的信息輸入界面來(lái)加以印證。這兩個(gè)界面是我隨手做的，對(duì)比一下即可看出優(yōu)劣。

在相關(guān)性比較強(qiáng)的功能中，拉近彼此距離，既能夠給信息一個(gè)清晰的層級(jí)，更能夠減少用戶的操作成本。

3. 界面的邊界會(huì)讓用戶操作更加精準(zhǔn)和容易

在研究交互界面的時(shí)候，我們總聽(tīng)到一個(gè)說(shuō)法，“界面的邊界是無(wú)限的”，它當(dāng)然不是在說(shuō)界面是無(wú)限大的，對(duì)于一塊屏幕來(lái)說(shuō)，在進(jìn)行操作的時(shí)候，無(wú)論是PC的鼠標(biāo)光標(biāo)，還是移動(dòng)屏幕的手指，在操作到界面邊緣時(shí)，因?yàn)闊o(wú)法延伸，所以最精準(zhǔn)。

這也是我們看絕大多數(shù)fab button彈出的菜單是在界面邊緣，而不是在界面中央的原因。

除此之外，還有在很多安卓手機(jī)中，卸載app時(shí)會(huì)讓用戶把要卸載的app拖拽到屏幕上邊緣的區(qū)域進(jìn)行卸載，這樣相比給一個(gè)【X】按鈕，會(huì)更加精準(zhǔn)，而且拖拽的操作也會(huì)給用戶更多思考的空間和時(shí)間，減少誤操作的概率。

但是，這個(gè)但是很重要，不要把所有既定的法則都奉為圭臬，所有事物都要辯證著看，在沒(méi)有限定條件的情況下，菲茲定律的應(yīng)用不會(huì)有任何問(wèn)題，但是如果加以條件的限定，就不是這么簡(jiǎn)單了。

簡(jiǎn)單舉個(gè)例子：在進(jìn)行刪除等負(fù)向操作時(shí)，很多app會(huì)把確認(rèn)刪除等操作做得離你的上一步操作區(qū)域更遠(yuǎn)，或者讓確認(rèn)按鈕更加不明顯，這是在幫助用戶，或者說(shuō)希望用戶在做負(fù)向操作時(shí)，有更多的思考空間和時(shí)間，規(guī)避誤操作的影響。

在《看懂設(shè)計(jì)》這個(gè)系列里，我會(huì)選擇性地對(duì)在交互設(shè)計(jì)中常常被應(yīng)用的設(shè)計(jì)心理學(xué)、方法論等進(jìn)行簡(jiǎn)潔有案例的解析，例如大家耳熟能詳?shù)慕换ピO(shè)計(jì)7大定律、斯金納箱理論、邊際效應(yīng)、錨定效應(yīng)、格式塔理論等等讓大家盡可能地在實(shí)際案例中找到它們的應(yīng)用，而不是讓這些方法論成為我們腦海中的空中樓閣，知道、聽(tīng)說(shuō)過(guò)，但是不會(huì)應(yīng)用。

轉(zhuǎn)自：站酷-鹿?fàn)敳皇窍挑~

評(píng)論(0) 瀏覽(2833)

012020-3

純JS對(duì)頁(yè)面表格進(jìn)行EXCEL導(dǎo)出（完整導(dǎo)出，包含頁(yè)面樣式）

seo達(dá)人

純JS對(duì)頁(yè)面表格進(jìn)行EXCEL導(dǎo)出

1.中間部分在style標(biāo)簽?zāi)欠N可以使用css樣式對(duì)表格進(jìn)行任意樣式的修改

2.在tableid.innerHTML中可以對(duì)表格中的內(nèi)容進(jìn)行修改替換（其中放的內(nèi)容就是導(dǎo)出后的表格內(nèi)容）

3.需要引入xlsx.full.min.js文件

4.tableid為為表格的id

5.sheetName為下載后的文件名稱

base64(excelFile) {

return window.btoa(unescape(encodeURIComponent(excelFile)))

},

tableToExcel(tableid, sheetName) {

var uri = 'data:application/vnd.ms-excel;base64,';

var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +

'xmlns=" gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'

+ '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>'

+ '</x:ExcelWorkbook></xml><![endif]-->' +

' <style type="text/css">' +

' .ivu-table td{\n' +

' /background-color: #FFFFFF;/\n' +

' /color: #fff;/\n' +

' /border:1px solid #FFFFFF;/\n' +

' }\n' +

' /每行的基本樣式/\n' +

' .ivu-table-row td {\n' +

' color: #000000;\n' +

' min-width:50px;\n' +

' }\n' +

' /頭部th/\n' +

' .ivu-table-header th{\n' +

' color:\t#FFFFFF;\n' +

' font-weight: bold;\n' +

' background-color: rgb(98,167,249);\n' +

' min-width:50px;' +

' border:1px solid #FFFFFF;' +

' position: relative; \n' +

' top: expression(this.offsetParent.scrollTop); \n' +

' z-index: 300; \n' +

' }\n' +

' /偶數(shù)行/\n' +

' .ivu-table-stripe-even td{\n' +

' background-color: #ffffff!important;\n' +

' }\n' +

' /奇數(shù)行/\n' +

' .ivu-table-stripe-odd td{\n' +

' background-color:#F0FFFF!important;\n' +

' }\n' +

' /選中某一行高亮/\n' +

' .ivu-table-row-highlight td {\n' +

' background-color: #d63333!important;\n' +

' }' +

'</style>' +

'</head><body ><table class="excelTable">{table}</table></body></html>';

if (!tableid.nodeType) tableid = document.getElementById(tableid);

tableid.innerHTML = tableid.innerHTML.replace('暫無(wú)篩選結(jié)果','')

var ctx = {worksheet: sheetName || 'Worksheet', table: tableid.innerHTML};

var a = document.createElement("a");

a.download = sheetName + ".xls";

a.href = uri + this.base64(this.format(template, ctx));;

a.click();

},

format (s, c) {

return s.replace(/{(\w+)}/g,

function (m, p) {

return c[p];

});

}

評(píng)論(0) 瀏覽(3293)

012020-3

淺談數(shù)據(jù)可視化及經(jīng)驗(yàn)分享（上）

ui設(shè)計(jì)分享達(dá)人

結(jié)合學(xué)習(xí)的可視化知識(shí)以及自身的經(jīng)驗(yàn)寫下了這篇關(guān)于數(shù)據(jù)可視化的分享

轉(zhuǎn)自：站酷-四喜sixi

評(píng)論(0) 瀏覽(2287)

012020-3

10天，5個(gè)百度Doodle，成千上萬(wàn)的抗“疫”英雄

ui設(shè)計(jì)分享達(dá)人

他們是“最美逆行者”

前幾天，當(dāng)大家打開(kāi)百度首頁(yè)時(shí)，可能發(fā)現(xiàn)了一些小變化：搜索框上方不再是熟悉的紅藍(lán)標(biāo)志，而是展現(xiàn)出了一系列人物形象。

這些人物都是一直奮戰(zhàn)在抗擊新冠肺炎疫情一線的“最美逆行者”——我們想用這樣的方式，向他們致敬。

2月9日-2月10日，致敬抗疫醫(yī)護(hù)人員

2月11日-2月12日，致敬抗疫志愿者

2月13日-2月14日，致敬抗疫建設(shè)者

2月15日-2月16日，致敬抗疫專家組

2月17日-2月18日，致敬抗疫解放軍

當(dāng)大家點(diǎn)擊這些 Doodle 圖片時(shí)，會(huì)進(jìn)入相關(guān)的戰(zhàn)“疫”專題內(nèi)容頁(yè)，在這里可以實(shí)時(shí)了解抗疫英雄的資訊動(dòng)態(tài)。

醫(yī)護(hù)人員、志愿者、建設(shè)者、專家組、解放軍，他們用堅(jiān)定的信念和堅(jiān)毅的身軀，為這場(chǎng)戰(zhàn)斗筑起了最堅(jiān)固的防線，守護(hù)著無(wú)數(shù)人的生命安全。我們向這些英雄致敬！

此前，我們向廣大網(wǎng)友發(fā)起了“抗疫英雄系列 Doodle”征集活動(dòng)，希望各界設(shè)計(jì)師用手中的畫筆為抗疫英雄們創(chuàng)作特別的百度 Doodle，讓更多人看見(jiàn)疫情中的勇氣與希望。

最終，五組致敬 Doodle 在百度首頁(yè)上線。除此之外，我們還收到了26幅來(lái)自百度網(wǎng)友投稿的設(shè)計(jì)作品。謝謝大家的用心創(chuàng)作！

一起來(lái)欣賞吧!

蔡依彤

林文煌

劉昱

輕撫淡抹素人妝

相超

蔡依彤

林文煌

麥芽

董一孛

林文煌

劉昱

姚思思

趙會(huì)娟

不將就

李小蘭

李鈺

林文煌

孫紅花

陶澤崧

嚴(yán)安琪

張晶

馮勝方

高旭

林文煌

楊曉婧

張晶

在這場(chǎng)疫情狙擊戰(zhàn)中，不論是什么角色、什么崗位，都能貢獻(xiàn)自己獨(dú)特的力量。而這些精美的 Doodle 設(shè)計(jì)作品，正向人們傳達(dá)了必勝的信心和能量。我們衷心感謝所有設(shè)計(jì)師的用心創(chuàng)作.

除了通過(guò)百度 Doodle 為抗疫工作鼓勁，我們還運(yùn)用技術(shù)的力量，專為疫情防控研發(fā)了各種產(chǎn)品和服務(wù)，希望為大家?guī)?lái)實(shí)用有效的幫助，為戰(zhàn)“疫”貢獻(xiàn)一份力量。

我們成立了3億元的疫情及公共衛(wèi)生安全攻堅(jiān)專項(xiàng)基金，用于支持新型冠狀病毒等新疾病的治愈藥物篩選、研發(fā)等一系列抗擊疫情工作。

我們上線了“拒絕野味”的搜索提示，在百度 APP 搜索“蝙蝠”、“果子貍”、“穿山甲”、“豪豬”、“狍子”、“蛇”、“野豬”等關(guān)鍵詞時(shí)，大家都能看到“不可食用”的警告。

從百度“問(wèn)醫(yī)生”免費(fèi)在線咨詢，到新冠肺炎智能自測(cè)工具；從“疫情小區(qū)”地圖，到患者同乘查詢；從免費(fèi)開(kāi)放智能外呼平臺(tái)，到 AI 體溫檢測(cè)落地北京清河火車站……百度一直在行動(dòng)。

當(dāng)所有的決心、愛(ài)心和信心匯聚在一起，我們知道，陰霾和灰暗一定會(huì)被驅(qū)散，春暖花開(kāi)的日子一定會(huì)到來(lái)。眾志成城，我們共渡難關(guān)！

轉(zhuǎn)自：站酷-百度BMD

評(píng)論(0) 瀏覽(2190)

012020-3

10部好片，評(píng)分9+，給你腦洞一個(gè)解釋

ui設(shè)計(jì)分享達(dá)人

探索全球頂尖設(shè)計(jì)好物

大部分人今年過(guò)年基本的生活狀態(tài)如下

如大家所知疫情緊急，

我們雖心系前線卻無(wú)力支援，

盡量避開(kāi)人群不出門也算為國(guó)家做了些許貢獻(xiàn)。

但是宅家除了刷短視頻玩游戲，

作為設(shè)計(jì)師的童鞋們，

咋能不趁此長(zhǎng)假好好充實(shí)自己呢

（學(xué)技能估計(jì)太難了），

在此推薦幾部經(jīng)典的設(shè)計(jì)片，

娛樂(lè)的同時(shí)，也豐富下自己的設(shè)計(jì)知識(shí)。

01

《Abstract: The Art of Design》

《抽象：設(shè)計(jì)的藝術(shù)》

這是由Netflix公司出品的一部文化創(chuàng)意紀(jì)錄片，

豆瓣評(píng)分高達(dá)9.4，紀(jì)錄片總共8集，

每一集都探訪一位全球頂尖的設(shè)計(jì)師，

涉及插畫、建筑、汽車、攝影、平面、室內(nèi)、場(chǎng)景、球鞋等領(lǐng)域，

用獨(dú)特的拍攝敘述手法展示設(shè)計(jì)師的創(chuàng)作過(guò)程，

揭開(kāi)世界設(shè)計(jì)師非凡創(chuàng)意的藝術(shù)理念。

此片由《連線》雜志的主編Scott Dadich 創(chuàng)作并擔(dān)綱制片，并由奧斯卡最佳紀(jì)錄片導(dǎo)演Morgan Neville和Elizabeth Chai Vasarhelyi執(zhí)導(dǎo)，

每一集都可以欣賞到電影畫面般的浸入感。

02

《The Genius of Design》

《設(shè)計(jì)天賦》

此片是BBC英國(guó)廣播公司

播出的一系列關(guān)于產(chǎn)品設(shè)計(jì)紀(jì)錄片，

一共包括五集，每集60分鐘，

通過(guò)采訪各知名設(shè)計(jì)師及相關(guān)的設(shè)計(jì)評(píng)論者，

講述產(chǎn)品設(shè)計(jì)的歷史和未來(lái)。

不管你喜歡Dieter Rams的隱忍

還是Phillipe Stark的奔放，

每個(gè)從事產(chǎn)品設(shè)計(jì)工作的朋友都能從這部紀(jì)錄片得到一些啟發(fā)。

03

《Modern Masters》

《現(xiàn)代藝術(shù)大師》

此片由BBC英國(guó)廣播公司

推出的一檔電視系列節(jié)目，

總共4集，分別介紹了20世紀(jì)四位重要的藝術(shù)大師：

安迪·沃霍爾（Andy Warhol）、馬蒂斯（Henri Matisse）、畢加索（Pablo Picasso）和達(dá)利（Salvador Dali）的工作與生活。

通過(guò)走訪四位藝術(shù)家們生前的居所、

藝?yán)燃安┪镳^等地，

向觀眾展示了他們偉大的藝術(shù)貢獻(xiàn)以及驚人的后世影響力。

你會(huì)發(fā)現(xiàn)，麥當(dāng)娜的專輯封面、米菲兔的文具、

甚至是你家的沙發(fā)和電話，也許就來(lái)源于這四位大師的創(chuàng)作……

04

《Simon Schama's Power of Art》

《藝術(shù)的力量》

此片是由BBC英國(guó)廣播公司推出年度紀(jì)錄片，

總共8集。

講述卡拉瓦喬、貝尼尼、倫勃朗、雅克、透納、梵高、畢加索以及羅斯科八位藝術(shù)家的生平。

該系列結(jié)合了戲劇化的重塑、壯觀的攝影技術(shù)，

以及Simon Schama獨(dú)特而富有個(gè)性化的敘事，

全面剖析藝術(shù)大師們?cè)杏驼Q生藝術(shù)品時(shí)扣人心弦的故事。

這部紀(jì)錄片榮獲國(guó)際艾美獎(jiǎng)最佳藝術(shù)節(jié)目、

2007年第60屆英國(guó)電影電視藝術(shù)學(xué)院獎(jiǎng)最佳攝影紀(jì)實(shí)類等多項(xiàng)國(guó)際大獎(jiǎng)。

05

《Design for Life》

《創(chuàng)意生活》

這是一檔BBC真人秀設(shè)計(jì)師比賽節(jié)目，共6集。

國(guó)際知名設(shè)計(jì)師Phillipe Starck

尋找英國(guó)最有前途的新人設(shè)計(jì)師。

通過(guò)全國(guó)選拔，

12名懷抱熱情與夢(mèng)想的設(shè)計(jì)師來(lái)到到巴黎史塔克設(shè)計(jì)學(xué)院學(xué)習(xí)，

他們的目標(biāo)是把自己的設(shè)計(jì)思路變成真實(shí)的產(chǎn)品。

Phillipe Starck設(shè)計(jì)了一系列任務(wù)，

挑戰(zhàn)設(shè)計(jì)師們的才華創(chuàng)意，但最后的贏家只有一個(gè)，

走到最后的人將獲得和世界頂尖設(shè)計(jì)師一起工作的機(jī)會(huì)，

準(zhǔn)備面試的設(shè)計(jì)師們更要好好看一看喔。

06

《Objectified》

《設(shè)計(jì)面面觀》

這是一部以工業(yè)設(shè)計(jì)為主題的長(zhǎng)篇獨(dú)立紀(jì)錄片。

展示了創(chuàng)造工業(yè)產(chǎn)品流程的實(shí)錄片斷，

并記錄了與世界頂尖設(shè)計(jì)師們的交談與討論。

采訪到的設(shè)計(jì)師們包括：

紐約現(xiàn)代藝術(shù)館館長(zhǎng)Paola Antonelli，

慕尼黑BMW首席設(shè)計(jì)師Chris Bangle，

巴黎兄弟設(shè)計(jì)組合Ronan & Erwan Bouroullec，

美國(guó)明尼阿波利斯市Walker藝術(shù)中心平面設(shè)計(jì)師Andrew Blauvelt等世界最具影響力的設(shè)計(jì)師。

導(dǎo)演Gary Hustwit用洞察深切的鏡頭

記錄了這些在我們身邊隨處可見(jiàn)的工業(yè)設(shè)計(jì)產(chǎn)品，

看似稀松平常的設(shè)計(jì)背后，

卻是設(shè)計(jì)師們傾盡全力的良苦用心。

作為從事工業(yè)設(shè)計(jì)的童鞋來(lái)說(shuō)，

自己的專業(yè)領(lǐng)域能被拍成紀(jì)錄片也是一件感到自豪的事。

07

《Urbanized》

《城市化》

Gary Hustwit 紀(jì)錄片設(shè)計(jì)三部曲的最后一部，

著重記錄一座城市的規(guī)劃與設(shè)計(jì)，

突出了致力于解決城市問(wèn)題和提出對(duì)策的世界頂尖建筑師、規(guī)劃師、決策者等人。

世界上一半以上的人口生活在城市地區(qū)，

到2050年這個(gè)比例將變?yōu)?5%以上。

雖然一些城市正在經(jīng)歷爆炸式的增長(zhǎng)，

但其他一些城市卻處在正在壓縮的過(guò)程中。

在住房、流動(dòng)性、公共空間、民眾參與、經(jīng)濟(jì)發(fā)展和環(huán)境政策之間取得平衡的挑戰(zhàn)正迅速成為一個(gè)普遍關(guān)注的問(wèn)題。

中國(guó)的城市化進(jìn)程也是如此，

因此觀看該片，會(huì)有更深刻的體會(huì)。

08

《我在故宮修文物》

由中國(guó)中央電視臺(tái)出品的一部三集文物修復(fù)類紀(jì)錄片，紀(jì)錄故宮里稀世珍奇文物的修復(fù)過(guò)程和修復(fù)者的生活故事，

把工匠精神這件嚴(yán)肅的事講得細(xì)膩、

溫軟且富有人情味。

該片是一部?jī)?nèi)蘊(yùn)優(yōu)裕的紀(jì)錄片，

在一個(gè)個(gè)對(duì)于文物修復(fù)師而言的稀松日常里，

我們能夠看到比修復(fù)鐘表、青銅器、木器、古琴更多的東西。

片中提到一句“修復(fù)文物是穿越古今與千百年前進(jìn)行對(duì)話的特殊職業(yè)和生命體驗(yàn)”，

在故宮神秘的身影下，這似乎更令人感到驚艷。

作為中國(guó)設(shè)計(jì)師，更應(yīng)好好觀看，

正所謂，民族的，才是世界的。

09

《デザインあ》

《??！設(shè)計(jì)》

《?。≡O(shè)計(jì)》是NHK一檔經(jīng)典設(shè)計(jì)節(jié)目，

每一集邀請(qǐng)重量級(jí)設(shè)計(jì)師講述設(shè)計(jì)的秘訣，

深澤直人、仲條正義、祖父江慎、伊東豐雄，柴田文江……

雖是面向兒童，但視角獨(dú)特、充滿對(duì)思維的啟發(fā)，

贊嘆日本設(shè)計(jì)教育的同時(shí)也讓我們反思。

這部片放到大學(xué)設(shè)計(jì)系的課程都不為過(guò)，

因?yàn)楹芏嘁恍┗镜脑O(shè)計(jì)常識(shí)，

即使已經(jīng)就業(yè)的童鞋可能都不了解，

值得設(shè)計(jì)師好好觀看。

10

《夢(mèng)と狂気の王國(guó)》

《夢(mèng)與狂想的王國(guó)》

該片為日本的一部紀(jì)錄片，

由砂田麻美執(zhí)導(dǎo)，探秘吉卜力手繪動(dòng)畫創(chuàng)作過(guò)程，

展現(xiàn)了宮崎駿、高畑勛、鈴木敏夫，

三位老人以及新時(shí)代年輕人對(duì)動(dòng)畫的執(zhí)著與熱愛(ài)。

關(guān)于宮崎駿、吉卜力的紀(jì)錄片已經(jīng)很多了。

《夢(mèng)與狂想的王國(guó)》則是選取了宮崎駿創(chuàng)作封筆之作《起風(fēng)了》和高畑勛創(chuàng)作《輝夜姬物語(yǔ)》的這段時(shí)間為記錄對(duì)象，

著力表現(xiàn)了兩人的友誼歷史和之后的創(chuàng)作分歧。

宮崎駿乘坐火車去看自己的試片會(huì)。

看完后，他走上臺(tái)只說(shuō)了一句話，

“對(duì)不起，生平第一次看自己的電影哭了?！?

相信看完后，大家都會(huì)想再刷一遍宮崎駿的電影。

這10部紀(jì)錄片，都是設(shè)計(jì)片中的經(jīng)典，

可以收藏起來(lái)反復(fù)的觀看，

每個(gè)設(shè)計(jì)階段都會(huì)有不一樣的感悟。

片子通過(guò)搜索都可以找到片源，

找不到的可以在后臺(tái)回復(fù)（紀(jì)錄片），

會(huì)推送片源鏈接。

最后希望大家身體健健康康的，

祝福祖國(guó)早日抗疫勝利，加油！

轉(zhuǎn)自：站酷-Hang5174

評(píng)論(0) 瀏覽(2228)

首頁(yè)

【W(wǎng)eb前端開(kāi)發(fā)】第二課、HTML基礎(chǔ)之HTML概述

vue框架漸進(jìn)性的理解和mvvm模式的理解

html5+css3實(shí)現(xiàn)2D-3D動(dòng)畫效果實(shí)例

3D變換

Web開(kāi)發(fā)期待的CSS的一些功能

foo h1, #foo h2, #foo h3

foo [h1, h2, h3]

JavaScript中的this/call/apply/bind

看懂設(shè)計(jì)（一）：菲茲定律在UI設(shè)計(jì)中的實(shí)際應(yīng)用

純JS對(duì)頁(yè)面表格進(jìn)行EXCEL導(dǎo)出（完整導(dǎo)出，包含頁(yè)面樣式）

淺談數(shù)據(jù)可視化及經(jīng)驗(yàn)分享（上）

10天，5個(gè)百度Doodle，成千上萬(wàn)的抗“疫”英雄

10部好片，評(píng)分9+，給你腦洞一個(gè)解釋

分類

日歷

鏈接

個(gè)人資料

存檔