国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端，不只局限于vue！

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

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

前 言

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

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

簡單動畫效果如何實(shí)現(xiàn)

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

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

  • 通過@keyframes創(chuàng)建動畫。
  • 在@keyframes里指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。
  • 把@keyframes創(chuàng)建的動畫綁定到一個選擇器。
如：運(yùn)行名為myfirst的動畫：
div{
animation-name:myfirst; //調(diào)用myfirst定義的動畫效果
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
@keyframesmyfirst //定義動畫效果
{
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有哪些事件接口可以通過js進(jìn)行編寫

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

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

  • event.stopPropagation();   //阻止事件冒泡到DOM樹上。
在vue單頁面開發(fā)中，有時候也會需要對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頁面銷毀之前一定需要將監(jiān)聽事件取消，避免污染其他頁面應(yīng)用，new對象同理。

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

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

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

元素在頁面中的定位position

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

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

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

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

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





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

本文來源：“IT那活兒”公眾號

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

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

相關(guān)文章

  • 了解Webpack嗎？

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

    Cympros 評論0 收藏0

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

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

    wemallshop 評論0 收藏0

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

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

    lsxiao 評論0 收藏0

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

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

    Java3y 評論0 收藏0

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

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

    txgcwm 評論0 收藏0

發(fā)表評論

0條評論

IT那活兒

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<