012020-3

html+css實(shí)現(xiàn)自定義圖片上傳按鈕

前端達(dá)人

可以自定義一個(gè)file選擇文件的按鈕：

思路為：
用定位將自定義的按鈕遮住原來的選擇文件按鈕，
再讓點(diǎn)擊自定義按鈕時(shí)觸發(fā)原來的選擇文件按鈕的事件即可
（對此，label可實(shí)現(xiàn)）

eg:
html:

css樣式：

結(jié)果圖：

點(diǎn)一下，就可以彈出選擇文件的文件夾啦！

評論(0) 瀏覽(3650)

012020-3

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

前端達(dá)人

文章目錄

一、HTML的概述

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

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

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

一、HTML的概述
什么是HTML？

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

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

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

HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁

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

由尖括號包圍，比如 <title>

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

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

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

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

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

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

標(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)于頁面使用哪個(gè) HTML 版本進(jìn)行編寫的指令。

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

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

<!DOCTYPE> 聲明對大小寫不敏感。

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

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

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

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

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

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

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

“=” 為賦值符號

屬性與屬性之間用空格隔開

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

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

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

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

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

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

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

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

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

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

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

話不多說，看圖，為你們講解代碼。

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

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

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

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

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

width和height的作用，用來規(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)上唯一的地址。

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

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

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

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

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

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

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

評論(0) 瀏覽(3025)

012020-3

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

前端達(dá)人

引言

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

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

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

當(dāng)你把JavaScript對象傳入vue實(shí)例作為data選項(xiàng)，vue會(huì)遍歷此對象的所以屬性，并使用Object.defineProperty把這些屬性轉(zhuǎn)換為getter和setter，每一個(gè)組件都有一個(gè)watcher實(shí)例，它會(huì)在組件渲染過程中，把接觸過的數(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)訪問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：無法監(jiān)聽es6的set，map變化
2：無法監(jiān)聽class類型的數(shù)據(jù)
3：屬性的新增和刪除也無法監(jiān)聽
4：數(shù)組元素的新整和刪除也無法監(jiān)聽
}

評論(0) 瀏覽(3386)

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è)平面對元素進(jìn)行的操作。

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

1

2

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

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

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

3D變換

2d場景，在屏幕上水平和垂直的交叉線x軸和y軸
3d場景，在垂直于屏幕的方法，相對于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;/*過渡時(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)滑過覆蓋上方的白色部分 */
.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;/*過渡時(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)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43513126/article/details/104570062

評論(0) 瀏覽(4030)

012020-3

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

前端達(dá)人

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

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

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ǔ)的小伙伴來一起交流。

CSS 圓角

by Webmonkey

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

垂直居中

by michael lascarides

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

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

by Erik

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

更好的嵌入字體

by Webmonkey

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

CSS 變量

by Jeffrey Jordan Way, via css-tricks.com

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

更好地支持 100% height

by JLR

設(shè)置了 100% height 的容器的頂部和底部真正附著在頁首和頁尾，頁面中間部分匹配內(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í)，對里面的 CSS 定義應(yīng)該可以覆蓋全局定義。

一句話復(fù)原

by Chris Pitzer

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

body { clear-default-styles:true; }

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

by Stephen Bell

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

img .horiz { rotate:90; }

成組的 CSS 簡化定義

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 是被各種瀏覽器支持得最完美的容器對象。

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

使用 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 圓角就變得十分簡單了。

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

by Anonymous

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

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

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

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

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

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

評論(0) 瀏覽(3127)

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.語法

3.異同

一、this

1.什么是this

this 關(guān)鍵字在大部分語言中都是一個(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 表示該方法所屬的對象。

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

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

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

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

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

3.綁定 this 的方法

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

4.this的指向

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

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.作為對象方法調(diào)用，this 指代上級對象

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

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

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

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

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

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

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

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

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

（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è)對象。

4.箭頭函數(shù)中的this
箭頭函數(shù)是ES6的新特性，最重要的特點(diǎn)是它會(huì)捕獲其所在上下文的this作為自己的this，或者說，箭頭函數(shù)本身并沒有this，它會(huì)沿用外部環(huán)境的this。也就是說，箭頭函數(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固定下來，避免出現(xiàn)意想不到的情況。JavaScript 提供了call、apply、bind這三個(gè)方法，來切換/固定this的指向。

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

二、Function.prototype.bind()
bind()方法主要就是將函數(shù)綁定到某個(gè)對象，bind()會(huì)創(chuàng)建一個(gè)函數(shù)，函數(shù)體內(nèi)的this對象的值會(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}對象，從第二個(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ù)的過程其實(shí)是一個(gè)典型的函數(shù)柯里化的過程（Curry）。

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

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

2.語法
call()

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

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

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

apply()

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

Function.apply(obj[, argArray]);

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

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

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

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

一般來說，this總是指向調(diào)用某個(gè)方法的對象，但是使用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

評論(0) 瀏覽(3172)

012020-3

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

鶴鶴

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

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

在當(dāng)今互聯(lián)網(wǎng)背景下簡單來解釋說，就是大而近的目標(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)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

評論(0) 瀏覽(4129)

012020-3