成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

前端，不只局限于vue！

IT那活兒 / 3010人閱讀
前端，不只局限于vue！

點(diǎn)擊上方“IT那活兒”公眾號(hào)，關(guān)注后了解更多內(nèi)容，不管IT什么活兒，干就完了！??！

前 言

入坑項(xiàng)目vue有些時(shí)日了，從nodejs的安裝到v格式的語(yǔ)法，vue監(jiān)控?cái)?shù)據(jù)進(jìn)行dome回寫的架構(gòu)理念均有無(wú)數(shù)文章深入介紹。
實(shí)際到了應(yīng)用上大家可能更多遇到的是···這個(gè)數(shù)據(jù)回寫怎么沒反應(yīng)？那個(gè)效果狀態(tài)如何實(shí)現(xiàn)？這個(gè)需求是不是能做出來(lái)？

更多涉及到的卻涵蓋各方各面，針對(duì)需求實(shí)現(xiàn)，以下列舉一些經(jīng)常被提問(wèn)到的前端技術(shù)，前端可不僅僅只局限于vue！

簡(jiǎn)單動(dòng)畫效果如何實(shí)現(xiàn)

分為兩種：js實(shí)現(xiàn)動(dòng)作交互，css3實(shí)現(xiàn)指定動(dòng)態(tài)。
何謂css3？
對(duì)于頁(yè)面元素實(shí)現(xiàn)樣式的一套規(guī)則標(biāo)準(zhǔn)。css2以及css3其實(shí)都是一樣的東西。
3就是2的升級(jí)版本。性能增加，bug改進(jìn)，此概念可以類推到html5，所以以后請(qǐng)不要再問(wèn)我會(huì)不會(huì)html5了！
大哥們！html5就是html規(guī)則的一個(gè)版本、版本、版本！
css3+html5很厲害嗎？
當(dāng)然厲害！兩套規(guī)則發(fā)布時(shí)間相隔不遠(yuǎn)，主要在于指導(dǎo)大廠瀏覽器內(nèi)核開發(fā)，而前端的開發(fā)又依賴于瀏覽器發(fā)布出來(lái)的css、js接口。
為了適應(yīng)前端越來(lái)越多樣化的更迭，新版本較突出的貢獻(xiàn)是css加入的動(dòng)畫，html加入畫布，多媒體等元素。

css如何實(shí)現(xiàn)動(dòng)畫效果？

  • 通過(guò)@keyframes創(chuàng)建動(dòng)畫。
  • 在@keyframes里指定一個(gè)CSS樣式和動(dòng)畫將逐步從目前的樣式更改為新的樣式。
  • 把@keyframes創(chuàng)建的動(dòng)畫綁定到一個(gè)選擇器。
如：運(yùn)行名為myfirst的動(dòng)畫：
div{
animation-name:myfirst; //調(diào)用myfirst定義的動(dòng)畫效果
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
@keyframesmyfirst //定義動(dòng)畫效果
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100%{background: red; left:0px; top:0px;}
}

dom有哪些事件接口可以通過(guò)js進(jìn)行編寫

在項(xiàng)目需求里面會(huì)經(jīng)常遇到拖移，點(diǎn)擊等等事件的編寫。
dom里有哪些事件呢？

以上是最常用的兩類交互事件，在鼠標(biāo)事件上一個(gè)點(diǎn)擊事件又存在事件冒泡（內(nèi)含元素綁定的事件在觸發(fā)時(shí)父級(jí)元素事件也會(huì)被觸發(fā)），這種情況需要使用到：

  • event.stopPropagation();   //阻止事件冒泡到DOM樹上。
在vue單頁(yè)面開發(fā)中，有時(shí)候也會(huì)需要對(duì)body進(jìn)行事件的監(jiān)聽，監(jiān)聽方法：
mounted() {
document.body.addEventListener(click,this.functionName, false);
},
beforeDestroy() {
document.body.removeEventListener(click,this. functionName, false); //取消監(jiān)聽
},

在vue頁(yè)面銷毀之前一定需要將監(jiān)聽事件取消，避免污染其他頁(yè)面應(yīng)用，new對(duì)象同理。

html5中的可視化技術(shù)：Canvas和SVG

Canvas畫布，利用JavaScript在網(wǎng)頁(yè)繪制圖像，通過(guò).getContext("2d")來(lái)在畫布中繪制圖形。能夠以.png和.jpg格式保存存儲(chǔ)圖像，可以說(shuō)是位圖。
SVG，可縮放矢量圖形（ScalableVector Graphics），基于可擴(kuò)展標(biāo)記語(yǔ)言XML。
svg中的每個(gè)圖形都是以DOM節(jié)點(diǎn)的形式插入到頁(yè)面中，可以用js或其他方法直接操作，Canvas就像動(dòng)畫，每次顯示全部的一幀的內(nèi)容，想改變里面某個(gè)元素的位置或者變化需要在下一幀中全部重新顯示。

通常大數(shù)據(jù)可視化項(xiàng)目中這兩類技術(shù)應(yīng)用比較常見，比如地圖繪制可以通過(guò)svg，密集型圖形化動(dòng)畫繪制可以使用Canvas。

元素在頁(yè)面中的定位position

將html元素指定到頁(yè)面中的固定位置這就是css中的position屬性。
在應(yīng)用transform樣式的dom中的fixed定位，父級(jí)元素將不再指向?yàn)g覽器，而是應(yīng)用了transform樣式的dom元素。

通過(guò)設(shè)定元素的z-index值，能強(qiáng)制對(duì)絕對(duì)定位的元素進(jìn)行圖層的排布，相當(dāng)于三維中的z軸，數(shù)字越大，位置越浮于上。

定時(shí)器瘋狂點(diǎn)擊隊(duì)列問(wèn)題

在頁(yè)面沒有刷新的時(shí)候，通過(guò)setTimeout定義的定時(shí)器會(huì)一直存在，即便在dom銷毀的狀態(tài)下，也會(huì)一直觸發(fā)定時(shí)事件，這就需要開發(fā)中一定要記得對(duì)其進(jìn)行銷毀動(dòng)作。

  • varaction=setTimeout(function(){...},1000);   //使用變量action接收定時(shí)器名稱
  • if(action)clearTimeout(action);    //判斷定時(shí)器是否存在,有的話就清除
最后給大家提供一張前端的技術(shù)圖譜，有興趣的可以從頭了解起！





本文作者：曾愷茜（上海新炬王翦團(tuán)隊(duì)）

本文來(lái)源：“IT那活兒”公眾號(hào)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/129226.html

相關(guān)文章

  • 了解Webpack嗎？

    摘要：你了解嗎核心概念的核心概念大致分為四個(gè)入口出口插件，是一個(gè)打包模塊化的工具，專注構(gòu)建模塊化項(xiàng)目。優(yōu)點(diǎn)只更新變更內(nèi)容，以節(jié)省寶貴的開發(fā)時(shí)間。在構(gòu)建過(guò)程中，將引用的靜態(tài)資源路徑修改為上對(duì)應(yīng)的路徑?？梢酝ㄟ^(guò)在啟動(dòng)時(shí)追加參數(shù)來(lái)實(shí)現(xiàn)提取公共代碼。 你了解Webpack嗎？ 核心概念 Webpack的核心概念大致分為四個(gè)：入口、出口、loader、插件，是一個(gè)打包模塊化js的工具，專注構(gòu)建模塊化項(xiàng)...

    Cympros 評(píng)論0 收藏0

  • StateOfJS: 2018年JavaScript生態(tài)圈趨勢(shì)報(bào)告

    摘要：年的報(bào)告，總共有來(lái)自個(gè)不同的國(guó)家共多名開發(fā)者參與調(diào)查中國(guó)占總數(shù)的，共個(gè)開發(fā)者。今年的報(bào)告和前兩年不同，取消了部分。此比率較高的國(guó)家地區(qū)顯示為紅色，較低的國(guó)家地區(qū)顯示為藍(lán)色調(diào)查受訪者總數(shù)少于的國(guó)家地區(qū)將被省略。 前言 作為前端開發(fā)者，及時(shí)了解行業(yè)動(dòng)態(tài)對(duì)我們的工作、學(xué)習(xí)方向起到至關(guān)重要的作用，畢竟知識(shí)太多，選擇對(duì)的學(xué)習(xí)方向才能既省力又能緊跟技術(shù)發(fā)展潮流。近期，StateOfJS發(fā)布了剛剛過(guò)...

    wemallshop 評(píng)論0 收藏0

  • StateOfJS: 2018年JavaScript生態(tài)圈趨勢(shì)報(bào)告

    摘要：年的報(bào)告，總共有來(lái)自個(gè)不同的國(guó)家共多名開發(fā)者參與調(diào)查中國(guó)占總數(shù)的，共個(gè)開發(fā)者。今年的報(bào)告和前兩年不同，取消了部分。此比率較高的國(guó)家地區(qū)顯示為紅色，較低的國(guó)家地區(qū)顯示為藍(lán)色調(diào)查受訪者總數(shù)少于的國(guó)家地區(qū)將被省略。 前言 作為前端開發(fā)者，及時(shí)了解行業(yè)動(dòng)態(tài)對(duì)我們的工作、學(xué)習(xí)方向起到至關(guān)重要的作用，畢竟知識(shí)太多，選擇對(duì)的學(xué)習(xí)方向才能既省力又能緊跟技術(shù)發(fā)展潮流。近期，StateOfJS發(fā)布了剛剛過(guò)...

    lsxiao 評(píng)論0 收藏0

  • [ 一起學(xué)React系列 -- 0 ] React技術(shù)棧學(xué)習(xí)路線

    摘要：的出現(xiàn)真可謂是前端界的福音，正與之宗旨所說(shuō)，。據(jù)統(tǒng)計(jì)，目前世界上有的項(xiàng)目使用了。技術(shù)棧學(xué)習(xí)路線直到前段時(shí)間筆者的朋友給推薦了一個(gè)，真是欣喜若狂也更加堅(jiān)定了自己在繼續(xù)前進(jìn)的想法。這是一個(gè)外國(guó)友人總結(jié)的一套技術(shù)棧學(xué)習(xí)路線，先給傳送門。 我相信點(diǎn)進(jìn)來(lái)的同學(xué)都是沖著標(biāo)題來(lái)的，當(dāng)然本文也不會(huì)讓各位失望。不過(guò)在正式介紹標(biāo)題所述的內(nèi)容之前，我們不妨先放下技術(shù)，一起回顧下自己做前端技術(shù)的心路歷程。 前...

    Java3y 評(píng)論0 收藏0

  • 2017前端技術(shù)總結(jié)：收獲非淺，但仍需進(jìn)步

    摘要：平臺(tái)主要功能如下支持客戶端渲染和服務(wù)端渲染微信登錄鑒權(quán)頁(yè)面組件增刪改查，復(fù)制移動(dòng)等圖片上傳微信文章一鍵復(fù)制等等動(dòng)態(tài)組件的配置原理之后專門用一篇文章詳細(xì)寫吧持續(xù)集成這個(gè)其實(shí)也不算是項(xiàng)目，算是前端的工具。 2017年算是踏入真正的前端的一年，從實(shí)習(xí)到去年，說(shuō)是前端的崗位，但卻因?yàn)閷?shí)習(xí)生的身份、公司技術(shù)不夠等原因，一直停留在傳統(tǒng)的html+css+jq，那時(shí)候感覺前端的世界在翻天覆地地變化，...

    txgcwm 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<