目錄
一、第一種專案風格
#專案:騰訊管家前端動畫
#二、第二種專案風格
專案一:奕賞
專案二:省錢日報
首頁 web前端 html教學 前端工程師履歷中的專案經驗怎麼寫

前端工程師履歷中的專案經驗怎麼寫

May 14, 2018 pm 04:39 PM
工程師 專案

有不少前端工程師,在寫履歷時就煩惱。履歷中的項目怎麼寫,怎麼描述。覺得自己雖然工作了好幾年,做過許多項目,但是覺得都沒做什麼高大上的事情,自然就覺得沒啥可寫的。或是覺得做的事情都一樣,寫來寫都那幾樣。

這裡我獻醜,貢獻幾個專案經驗寫法的小實例!


一、第一種專案風格

#專案:騰訊管家前端動畫

作品描述:该项目将一个完整flash剧情动画还原成一个由JS+CSS3实现的前端动画。
链接:https://dxb123456.github.io/tengxun/
实现技术:CSS+HTML+JS+H5+CSS3+jqury;
项目难点:
1.定时器的清除 
        部分动画效果需要js自动生成,时间的控制使用了timeout和innertal,其中timerout包含了innertal,点击事件和定时器不在同一个js文件中,快速来回点击的时候,定时器清除不起作用。 
   解决方案:将该li对应页的所有定时器绑定在该li身上,每次点击的时候清除timeout和innertal。
2.带阴影折线运动处理 
        对于倾斜的p通过js改变其高度,并且按照数学逻辑改变top和left值的情况下,p在运动时候会出现偏移,和抖动。 
   解决方案:给p一个运动基准点,这样p在运动的时候就无需改变top和left值,只需要改变宽度或高度即可。
3.抛物线的运动 
         css中两个点运动都是直线运动。 
   解决方案:给初始点一个旋转角度,这样看起来就有抛物线的感觉。
4.遮罩层处理 
     在多层级的html渲染中,中间图层的遮罩效果无法实现。 
   解决方案:遮罩层可以在最底层使用,但是中间层级的遮罩效果需要对图片进行处理,改成png图片,再进行css操作。
5.卡顿的处理 
      在Firefox和ie中,小图标的缓慢移动效果会出现卡顿。 
   解决方案:给运动时间的时候,判断如果不是chrome浏览器,减小运动时间。
6.性能的优化 
      图片的使用让动画加载的速度变慢,影响用户体验。 
   解决方案:对部分能使用p代替的图片采用p生成,对代码,图片进行深度压缩上传等。

#二、第二種專案風格

專案一:奕賞

项目描述:本项目是一款手机端APP,采用vue框架构建,其中涉及swiper触控滑动模块,slide子页之间采用了懒加载技术保证用户体验,iscroll上拉加载下拉刷新模块,购物车模块与登录注册模块均采用了本地存储技术。
岗位职责:主要负责页面的布局和数据渲染,并且配合APP完成页面的嵌套。
项目架构:
1.使用vue框架,以及vue-router构建单页面应用。 
   2.项目采用vuex处理各组件间的通讯,vue-resource处理请求,使用mint-ui组件库中部分功能进行快速开发,通过vue-cli 快速搭建开发环境。 
   3.采用手机淘宝适配方案。 
   4.使用阿里矢量图标库。
技术要求:
运用HTML5语义化标签+CSS3新特性进行页面布局,实现页面的动态效果,提高代码的清            晰度和代码质量,将页面体现的更加丰满,代码更健壮。
运用vue.js开发,采用前后端分离开发模式。
运用vue.js中的指令和服务与后台接口对接,进行数据交互,进行页面渲染,实现功能            模块的判断。
使用JavaScript实现某些功能的逻辑处理和某些页面的动态效果。
项目测试阶段可以自己用node连接数据库进行接口对接和数据渲染模拟,测试功能模块         是否完善,逻辑处理是否正确。
运用swiper框架进行部分页面的设计。
运用sass进行代码的编写,运用gulp进行代码的整理和压缩。

專案二:省錢日報

项目描述:本项目是一个促销商品推荐网站的移动APP,使用vue+webpack构建的单页面应用,项目采用了vuex、vue-route、vue-resource以及ES6语法,采用组件化思想搭建整个项目,从而使组件高度复用,代码十分简洁。
岗位职责:主要负责项目页面的布局和数据渲染,完成与后端的接口对接,配合后端的对接联调,解决不同浏览器或者不同手机端页面布局错乱的问题。
项目架构:
1.使用vue框架,以及vue-router构建单页面应用。 
   2.使用vue+webpack构建项目环境。 
   3.采用手机淘宝适配方案。 
   4.使用阿里矢量图标库。
技术要求:
1.项目采用node(express框架)+mysql来搭建后台服务器;  
   2.基于webpack来搭建项目工程,配置第三方插件; 
   3.使用vue框架,vue-router搭建项目路由,vuex来实现单文件组件和数据的抽离 
   4.使用Swiper实现首页banner的轮播切换,iscoll结合ajax实现上拉加载,下拉刷新 
   5.合理使用钩子函数,实现数据的监听、渲染页面、页面节点的实例化功能。

以上是前端工程師履歷中的專案經驗怎麼寫的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

PHP教程
1543
276
AI攻克費馬大定理?數學家放棄5年職業生涯,將100頁證明變代碼 AI攻克費馬大定理?數學家放棄5年職業生涯,將100頁證明變代碼 Apr 09, 2024 pm 03:20 PM

費馬大定理,即將被AI攻克?而整件事最有意義的地方在於,AI即將解決的費馬大定理,正是為了證明AI無用。曾經,數學屬於純粹的人類智力王國;如今,這片疆土正被先進的演算法所破解,所踐踏。圖片費馬大定理,是一個「臭名昭著」的謎題,在幾個世紀以來,一直困擾著數學家。它在1993年被證明,而現在,數學家們有一個偉大計畫:用電腦把證明過程重現。他們希望在這個版本的證明中,如果有任何邏輯上的錯誤,都可以由電腦檢查出來。專案網址:https://github.com/riccardobrasca/flt

PyCharm實用技巧:將項目轉換為可執行EXE文件 PyCharm實用技巧:將項目轉換為可執行EXE文件 Feb 23, 2024 am 09:33 AM

PyCharm是一款功能強大的Python整合開發環境,提供了豐富的開發工具和環境配置,讓開發者更有效率地編寫和除錯程式碼。在使用PyCharm進行Python專案開發的過程中,有時候我們需要將專案打包成可執行的EXE文件,以便在沒有安裝Python環境的電腦上執行。本文將介紹如何使用PyCharm將專案轉換為可執行的EXE文件,同時給出具體的程式碼範例。首

分享PyCharm專案打包的簡易方法 分享PyCharm專案打包的簡易方法 Dec 30, 2023 am 09:34 AM

簡單易懂的PyCharm專案打包方法分享隨著Python的流行,越來越多的開發者使用PyCharm作為Python開發的主要工具。 PyCharm是功能強大的整合開發環境,它提供了許多方便的功能來幫助我們提高開發效率。其中一個重要的功能就是專案的打包。本文將介紹如何在PyCharm中簡單易懂地打包項目,並提供具體的程式碼範例。為什麼要打包專案?在Python開發

深入了解PyCharm:快速刪除項目的方法 深入了解PyCharm:快速刪除項目的方法 Feb 26, 2024 pm 04:21 PM

標題:深入了解PyCharm:刪除專案的高效方式近年來,Python作為一種強大而靈活的程式語言,受到越來越多開發者的青睞。在Python專案的開發中,選擇一個高效的整合開發環境至關重要。 PyCharm作為一款功能強大的整合開發環境,為Python開發者提供了許多便利的功能和工具,其中包括快速、有效率地刪除專案目錄。以下將著重介紹如何使用PyCharm中的刪除

製作 iPhone 上 iOS 17 提醒應用程式中的購物清單的方法 製作 iPhone 上 iOS 17 提醒應用程式中的購物清單的方法 Sep 21, 2023 pm 06:41 PM

如何在iOS17中的iPhone上製作GroceryList在「提醒事項」應用程式中建立GroceryList非常簡單。你只需添加一個列表,然後用你的項目填充它。該應用程式會自動將您的商品分類,您甚至可以與您的伴侶或扁平夥伴合作,列出您需要從商店購買的東西。以下是執行此操作的完整步驟:步驟1:開啟iCloud提醒事項聽起來很奇怪,蘋果表示您需要啟用來自iCloud的提醒才能在iOS17上建立GroceryList。以下是它的步驟:前往iPhone上的「設定」應用,然後點擊[您的姓名]。接下來,選擇i

基礎教學:使用IDEA建立Maven項目 基礎教學:使用IDEA建立Maven項目 Feb 19, 2024 pm 04:43 PM

IDEA(IntelliJIDEA)是一款強大的整合開發環境,可協助開發人員快速且有效率地開發各種Java應用程式。在Java專案開發中,使用Maven作為專案管理工具能夠幫助我們更好地管理依賴函式庫、建置專案等。本文將詳細介紹如何在IDEA中建立一個Maven專案的基本步驟,同時提供具體的程式碼範例。步驟一:開啟IDEA並建立新專案開啟IntelliJIDEA

基於開源的 ChatGPT Web UI 項目,快速建立屬於自己的 ChatGPT 站點 基於開源的 ChatGPT Web UI 項目,快速建立屬於自己的 ChatGPT 站點 Apr 15, 2023 pm 07:43 PM

身為科技部落客,了不起比較喜歡各種折騰,之前給大家介紹過ChatGPT接入微信,釘釘和知識星球(如果沒看過的可以翻翻前面的文章),最近再看開源專案的時候,發現了一個ChatGPTWebUI專案。想著剛好之前沒有將ChatGPT接入WebUI,有了這個開源專案可以拿來使用,真是不錯,下面是實操的安裝步驟,分享給大家。安裝官方在Github的專案文件上提供了很多中的安裝方式,包括手動安裝,docker部署,以及遠端部署等方法,了不起在選擇部署方式的時候,一開始為了簡單想著

react啟動專案報錯怎麼辦 react啟動專案報錯怎麼辦 Dec 27, 2022 am 10:36 AM

react啟動專案報錯的解決方法:1、進入專案資料夾,啟動專案並查看報錯資訊;2、執行「npm install」或「npm install react-scripts」指令;3、執行「npm install @ant-design/ pro-field --save」指令。

See all articles