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

資訊專欄INFORMATION COLUMN

前端，不只局限于vue！

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

點擊上方“IT那活兒”公眾號，關注后了解更多內容，不管IT什么活兒，干就完了！！！

前 言

入坑項目vue有些時日了，從nodejs的安裝到v格式的語法，vue監控數據進行dome回寫的架構理念均有無數文章深入介紹。
實際到了應用上大家可能更多遇到的是···這個數據回寫怎么沒反應？那個效果狀態如何實現？這個需求是不是能做出來？

更多涉及到的卻涵蓋各方各面，針對需求實現，以下列舉一些經常被提問到的前端技術，前端可不僅僅只局限于vue！

簡單動畫效果如何實現

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

css如何實現動畫效果？

  • 通過@keyframes創建動畫。
  • 在@keyframes里指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。
  • 把@keyframes創建的動畫綁定到一個選擇器。
如：運行名為myfirst的動畫：
div{
animation-name:myfirst; //調用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進行編寫

在項目需求里面會經常遇到拖移，點擊等等事件的編寫。
dom里有哪些事件呢？

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

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

在vue頁面銷毀之前一定需要將監聽事件取消，避免污染其他頁面應用，new對象同理。

html5中的可視化技術：Canvas和SVG

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

通常大數據可視化項目中這兩類技術應用比較常見，比如地圖繪制可以通過svg，密集型圖形化動畫繪制可以使用Canvas。

元素在頁面中的定位position

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

通過設定元素的z-index值，能強制對絕對定位的元素進行圖層的排布，相當于三維中的z軸，數字越大，位置越浮于上。

定時器瘋狂點擊隊列問題

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

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





本文作者：曾愷茜（上海新炬王翦團隊）

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/129226.html

相關文章

  • 了解Webpack嗎？

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

    Cympros 評論0 收藏0

  • StateOfJS: 2018年JavaScript生態圈趨勢報告

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

    wemallshop 評論0 收藏0

  • StateOfJS: 2018年JavaScript生態圈趨勢報告

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

    lsxiao 評論0 收藏0

  • [ 一起學React系列 -- 0 ] React技術棧學習路線

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

    Java3y 評論0 收藏0

  • 2017前端技術總結：收獲非淺，但仍需進步

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

    txgcwm 評論0 收藏0

發表評論

0條評論

IT那活兒

男|高級講師

TA的文章

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