資訊專欄INFORMATION COLUMN
項目vue入坑已有一年之久，從nodejs的安裝到v格式的語法，vue監(jiān)控數(shù)據(jù)進行dome回寫的架構(gòu)理念均有無數(shù)文章深入介紹。
實際到了應用上大家可能更多遇到的是···這個數(shù)據(jù)回寫怎么沒反應？那個效果狀態(tài)如何實現(xiàn)？這個需求是不是能做出來？
更多涉及到的卻涵蓋各方各面，針對需求實現(xiàn)，以下列舉一些經(jīng)常被提問到的前端技術，前端可不僅僅只局限于vue！
分為兩種：js實現(xiàn)動作交互，css3實現(xiàn)指定動態(tài)。
何謂css3？
對于頁面元素實現(xiàn)樣式的一套規(guī)則標準。css2以及css3其實都是一樣的東西。
3就是2的升級版本。性能增加，bug改進，此概念可以類推到html5，所以以后請不要再問我會不會html5了！
大哥們！html5就是html規(guī)則的一個版本、版本、版本！
css3+html5很厲害嗎？
當然厲害！兩套規(guī)則發(fā)布時間相隔不遠，主要在于指導大廠瀏覽器內(nèi)核開發(fā)，而前端的開發(fā)又依賴于瀏覽器發(fā)布出來的css、js接口。
為了適應前端越來越多樣化的更迭，新版本較突出的貢獻是css加入的動畫，html加入畫布，多媒體等元素。
css如何實現(xiàn)動畫效果
通過@keyframes創(chuàng)建動畫。
在@keyframes里指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。
把@keyframes創(chuàng)建的動畫綁定到一個選擇器
如：運行名為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;}
}
在項目需求里面會經(jīng)常遇到拖移，點擊等等事件的編寫。dom里有哪些事件呢？
以上是最常用的兩類交互事件，在鼠標事件上一個點擊事件又存在事件冒泡（內(nèi)含元素綁定的事件在觸發(fā)時父級元素事件也會被觸發(fā)），這種情況需要使用到：
event.stopPropagation(); //阻止事件冒泡到DOM樹上
在vue單頁面開發(fā)中，有時候也會需要對body進行事件的監(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)聽事件取消，避免污染其他頁面應用，new對象同理。
Canvas畫布，利用JavaScript在網(wǎng)頁繪制圖像，通過.getContext("2d")來在畫布中繪制圖形。能夠以.png和.jpg格式保存存儲圖像，可以說是位圖。
SVG，可縮放矢量圖形（ScalableVector Graphics），基于可擴展標記語言XML。
svg中的每個圖形都是以DOM節(jié)點的形式插入到頁面中，可以用js或其他方法直接操作，Canvas就像動畫，每次顯示全部的一幀的內(nèi)容，想改變里面某個元素的位置或者變化需要在下一幀中全部重新顯示。
通常大數(shù)據(jù)可視化項目中這兩類技術應用比較常見，比如地圖繪制可以通過svg，密集型圖形化動畫繪制可以使用Canvas。
將html元素指定到頁面中的固定位置這就是css中的position屬性。
在應用transform樣式的dom中的fixed定位，父級元素將不再指向瀏覽器，而是應用了transform樣式的dom元素
通過設定元素的z-index值，能強制對絕對定位的元素進行圖層的排布，相當于三維中的z軸，數(shù)字越大，位置越浮于上。
在頁面沒有刷新的時候，通過setTimeout定義的定時器會一直存在，即便在dom銷毀的狀態(tài)下，也會一直觸發(fā)定時事件，這就需要開發(fā)中一定要記得對其進行銷毀動作。
varaction=setTimeout(function(){...},1000); //使用變量action接收定時器名稱
if(action)clearTimeout(action); //判斷定時器是否存在,有的話就清除
最后給大家提供一張前端的技術圖譜，有興趣的可以從頭了解起！
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/130009.html
摘要：你了解嗎核心概念的核心概念大致分為四個入口出口插件，是一個打包模塊化的工具，專注構(gòu)建模塊化項目。優(yōu)點只更新變更內(nèi)容，以節(jié)省寶貴的開發(fā)時間。在構(gòu)建過程中，將引用的靜態(tài)資源路徑修改為上對應的路徑。可以通過在啟動時追加參數(shù)來實現(xiàn)提取公共代碼。 你了解Webpack嗎？ 核心概念 Webpack的核心概念大致分為四個：入口、出口、loader、插件，是一個打包模塊化js的工具，專注構(gòu)建模塊化項...
摘要：年的報告，總共有來自個不同的國家共多名開發(fā)者參與調(diào)查中國占總數(shù)的，共個開發(fā)者。今年的報告和前兩年不同，取消了部分。此比率較高的國家地區(qū)顯示為紅色，較低的國家地區(qū)顯示為藍色調(diào)查受訪者總數(shù)少于的國家地區(qū)將被省略。 前言 作為前端開發(fā)者，及時了解行業(yè)動態(tài)對我們的工作、學習方向起到至關重要的作用，畢竟知識太多，選擇對的學習方向才能既省力又能緊跟技術發(fā)展潮流。近期，StateOfJS發(fā)布了剛剛過...
摘要：年的報告，總共有來自個不同的國家共多名開發(fā)者參與調(diào)查中國占總數(shù)的，共個開發(fā)者。今年的報告和前兩年不同，取消了部分。此比率較高的國家地區(qū)顯示為紅色，較低的國家地區(qū)顯示為藍色調(diào)查受訪者總數(shù)少于的國家地區(qū)將被省略。 前言 作為前端開發(fā)者，及時了解行業(yè)動態(tài)對我們的工作、學習方向起到至關重要的作用，畢竟知識太多，選擇對的學習方向才能既省力又能緊跟技術發(fā)展潮流。近期，StateOfJS發(fā)布了剛剛過...
摘要：的出現(xiàn)真可謂是前端界的福音，正與之宗旨所說，。據(jù)統(tǒng)計，目前世界上有的項目使用了。技術棧學習路線直到前段時間筆者的朋友給推薦了一個，真是欣喜若狂也更加堅定了自己在繼續(xù)前進的想法。這是一個外國友人總結(jié)的一套技術棧學習路線，先給傳送門。 我相信點進來的同學都是沖著標題來的，當然本文也不會讓各位失望。不過在正式介紹標題所述的內(nèi)容之前，我們不妨先放下技術，一起回顧下自己做前端技術的心路歷程。 前...
摘要：平臺主要功能如下支持客戶端渲染和服務端渲染微信登錄鑒權頁面組件增刪改查，復制移動等圖片上傳微信文章一鍵復制等等動態(tài)組件的配置原理之后專門用一篇文章詳細寫吧持續(xù)集成這個其實也不算是項目，算是前端的工具。 2017年算是踏入真正的前端的一年，從實習到去年，說是前端的崗位，但卻因為實習生的身份、公司技術不夠等原因，一直停留在傳統(tǒng)的html+css+jq，那時候感覺前端的世界在翻天覆地地變化，...
閱讀 1346·2023-01-11 13:20
閱讀 1684·2023-01-11 13:20
閱讀 1132·2023-01-11 13:20
閱讀 1858·2023-01-11 13:20
閱讀 4100·2023-01-11 13:20
閱讀 2704·2023-01-11 13:20
閱讀 1385·2023-01-11 13:20
閱讀 3597·2023-01-11 13:20
