軟件學(xué)院研究生實(shí)習(xí)報(bào)告

軟件學(xué)院研究生實(shí)習(xí)報(bào)告學(xué)號14126086姓名范凌云專業(yè)方向軟件開發(fā)實(shí)習(xí)單位北京陌游科技有限公司導(dǎo)師劉鐸實(shí)習(xí)指導(dǎo)人黃鑫

實(shí)習(xí)單位名稱北京陌游科技有限公司實(shí)習(xí)單位地址北京市海淀區(qū)大鐘寺中坤廣場C座西南角城投大廈單位聯(lián)系方習(xí)日期2015/8/31---至今實(shí)習(xí)崗位和內(nèi)容（不少于2000字）實(shí)習(xí)崗位：HTML5前端工程師實(shí)習(xí)內(nèi)容：轉(zhuǎn)眼間，研究生的生活已經(jīng)接近尾聲，畢業(yè)的鐘聲將要敲響。將課堂所學(xué)知識運(yùn)用于實(shí)踐成為畢業(yè)生們必經(jīng)的道路。帶著老師的忠告，2015年8月31日我有幸來到北京陌游信息科技有限公司的技術(shù)部實(shí)習(xí)。北京陌游信息科技有限公司始建于2013年，注冊資金達(dá)到1000萬美元，是APP中陌游的開發(fā)者。目前這家公司已經(jīng)擁有員工50多人，陌游一款為游戲玩家設(shè)計(jì)的社交工具

。將基于游戲數(shù)據(jù)的深度分析,從多方面多緯度的發(fā)現(xiàn)您在游戲之中的成就,生成精美的頭銜名片作為您在虛擬世界中榮譽(yù)的永久收藏.同時(shí)也是一個(gè)基于地理位置,游戲公會及相同興趣的玩家間的社交平臺。剛開始的兩天技術(shù)老大讓我熟悉公司工作環(huán)境以及了解公司做前端的大致框架。熟悉公司游戲頁的“角色詳情頁”的各種JavaScript文件，熟悉使用ajax進(jìn)行后臺交互，請求數(shù)據(jù)。在熟悉以后我嘗試著對“角色詳情頁”的各種JavaScript文件進(jìn)行編寫，于此同時(shí)我還要從中數(shù)據(jù)JQuery庫中各函數(shù)的編寫使用。接觸到的第一個(gè)任務(wù)是修改資訊中文字排版樣式，并將其傳到測試線，接下來我試著做角色詳情頁中H5頁面，之前沒有做過這種整個(gè)網(wǎng)頁的布局幾乎是完全靠div的層層嵌套實(shí)現(xiàn)的。按照原始的布局一步一步的做，整個(gè)頁面是雜亂無章的，因?yàn)樵季W(wǎng)頁的height是通過js文件獲取的，所以在沒有定義固定高度的情況下，我的整個(gè)頁面特別亂。我后來把放棄的仿照模板的方式去完成制作，先按照自己原始的方法。為了調(diào)整整個(gè)網(wǎng)頁的布局我查了好多關(guān)于多層嵌套下，div布局問題及解決方法，然后我又想到了，這么多層div的嵌套對于網(wǎng)頁的布局和加載有沒有影響，和被引擎搜到的幾率有沒有影響，答案是完全不會影響被搜到的幾率，不過div的嵌套最多不要超過5層。完成在不同的接口下通過ajax異步請求數(shù)據(jù)，實(shí)現(xiàn)相對接口信息的輸出。完成在不同的接口下通過ajax異步請求數(shù)據(jù)，實(shí)現(xiàn)相對接口信息的輸出。我使用btn點(diǎn)擊事件觸發(fā)要調(diào)用哪個(gè)接口就點(diǎn)擊哪個(gè)btn來實(shí)現(xiàn)的，寫代碼的過程中遇到405錯(cuò)誤，后來截圖給后臺那邊，他提示我token寫錯(cuò)地方了，它是一個(gè)json中屬性，我卻把它寫成params的一部分了，改過之后整個(gè)程序就完成了。讓鑫哥檢查的時(shí)候他指出應(yīng)該盡量避免使用btn點(diǎn)擊事件，其實(shí)整個(gè)過程的實(shí)現(xiàn)是只需要知道程序進(jìn)入的接口，完了就自然觸發(fā)事件的完成了，后來去掉以后同樣實(shí)現(xiàn)了相同的效果，而且結(jié)果都顯示出來了。做抽獎(jiǎng)界面2，熟悉上一個(gè)界面布局后，做界面2就已經(jīng)輕松了好多。自適應(yīng)各種寬度布局，主要依靠的是JS函數(shù)中數(shù)學(xué)的計(jì)算?；顒?dòng)規(guī)則的div我添加了一個(gè)<p>標(biāo)簽，結(jié)果<p>標(biāo)簽由于字?jǐn)?shù)的原因，高度超過了相應(yīng)的div的高度，后來知道在W3的html4.0中明確規(guī)定P標(biāo)簽時(shí)不能包含塊元素的孩子，雖然不會出現(xiàn)報(bào)錯(cuò)，但是對頁面布局時(shí)有影響的。完成“小助手關(guān)鍵字差查詢”，在做“小助手關(guān)鍵字差查詢”時(shí)，和產(chǎn)品那邊一直沒溝通好，開小會的時(shí)候才知道需要?jiǎng)討B(tài)把后臺數(shù)據(jù)加載進(jìn)來，最后實(shí)現(xiàn)了網(wǎng)頁的詳盡功能，通過接口請求數(shù)據(jù)，并將數(shù)據(jù)動(dòng)態(tài)加載到網(wǎng)頁中。更換realm和characterName可以變換該用戶相應(yīng)的關(guān)鍵字。我把entity中wordList看成是一個(gè)二維數(shù)組，通過wordList[i][0]和wordList[i][1]來把他們存到相應(yīng)的數(shù)組當(dāng)中，在用隨機(jī)數(shù)據(jù)取相應(yīng)的數(shù)據(jù)到div中。點(diǎn)擊click事件是出現(xiàn)的對話框我是用div+div：after實(shí)現(xiàn)的，布局中關(guān)鍵多的時(shí)候會亂一個(gè)，after可能會出現(xiàn)兼容性問題，就改成嵌套div。后繼又做了“陌游女神高校活動(dòng)”，“四周年活動(dòng)抽獎(jiǎng)圖”“聊游戲活動(dòng)界面以及相應(yīng)的資訊跳轉(zhuǎn)”“獲獎(jiǎng)名單，“游戲規(guī)則”等HTML5頁面。中獎(jiǎng)紀(jì)錄"圖，根據(jù)后臺數(shù)據(jù)來動(dòng)態(tài)添加抽獎(jiǎng)記錄信息未完成.動(dòng)態(tài)加載數(shù)據(jù)時(shí)，只能獲取到最后一條object對象的信息。頁面只顯示該條信息.思路：我使用.html()方法獎(jiǎng)信息加載到頁面的，所以它會自動(dòng)覆蓋頁面上的所有內(nèi)容只顯示這一條。解決方法：使用$("id")appendChild()方法來動(dòng)態(tài)加載信息到頁面。改變問題1的寫法后出現(xiàn)UncaughtTypeError:$(...).appendChildisnotafunction。無思路，百度無結(jié)果。上網(wǎng)發(fā)帖，后來有人告訴我說：appendChild()是原生dom對象的方法jquery的是$("#mainContent").append(newDiv1);div動(dòng)態(tài)創(chuàng)建成功，但是只有一條且沒有內(nèi)容。思路：通過console.log發(fā)現(xiàn)，之前的輸出函數(shù)的思路有些問題，我把從后來獲取到的數(shù)據(jù)按rank的奇偶性分成了兩個(gè)數(shù)組，在分別用for循環(huán)從兩個(gè)數(shù)組中取數(shù)據(jù)，但其實(shí)這兩個(gè)for循環(huán)中的i只是局部變量，和總數(shù)組中for的i是無關(guān)的，所以不能根據(jù)i的1,2,3,4等等值取出相應(yīng)的object對象。解決方法，把有關(guān)的奇偶信息的兩個(gè)for循環(huán)放到，判斷rank奇偶性相對應(yīng)的if…else循環(huán)中。"聊游戲"界面及幾個(gè)相應(yīng)欄的資訊加載。問題1：設(shè)置width為100%時(shí)，body不能占滿瀏覽器屏幕。思路：設(shè)置了body的float屬性后是無法通過width來獲取body的寬度的。解決方法:去掉浮動(dòng)屬性。問題2：根據(jù)url來動(dòng)態(tài)加載相應(yīng)資訊。思路及解決方法：根據(jù)type的值來判斷加載相應(yīng)的內(nèi)容相關(guān)文獻(xiàn)技術(shù)綜述（不少于3000字）HTML5是近十年來Web開發(fā)標(biāo)準(zhǔn)巨大的飛躍。和以前的版本不同，HTML5并非僅僅用來表示W(wǎng)eb內(nèi)容，它的新使命是將web帶入一個(gè)成熟的平臺，在HTML5平臺上，視頻、音頻、圖像、動(dòng)畫，以及同電腦的交互都被標(biāo)準(zhǔn)化。HTML5有很多優(yōu)點(diǎn)，一，易用性。兩個(gè)原因使得使用HTML5創(chuàng)建網(wǎng)站更加簡單：語義上及其ARIA。新的HTML標(biāo)簽像<header>,<footer>，<nav>，<section>，<aside>等等，使得閱讀者更加容易去訪問內(nèi)容。在以前，即使你定義了class或者ID你的閱讀者也沒有辦法去了解給出的一個(gè)div究竟是什么。使用新的語義學(xué)的定義標(biāo)簽，你可以更好的了解HTML文檔，并且創(chuàng)建一個(gè)更好的使用體驗(yàn)。ARIA是一個(gè)W3C的標(biāo)準(zhǔn)主要用來對HTML文章中的元素指定“角色“，通過角色屬性來創(chuàng)建重要的頁面地形例如,header，footer，navigation或者aritcle很有必要。這一點(diǎn)曾經(jīng)被忽略掉了并且沒有廣泛被使用，因?yàn)槭聦?shí)上并不驗(yàn)證。然而，HTML5將會驗(yàn)證這樣屬性。同時(shí)，HTML5將會內(nèi)建這些角色并且無法不覆蓋。二．視頻和音頻支持忘了flash和其它第三方應(yīng)用吧，讓你的視頻和音頻通過HTML5標(biāo)簽<video>和<audio>來訪問資源。正確播放媒體一直都是一個(gè)非?？膳碌氖虑?，你需要使用<embed>和<object>標(biāo)簽，并且為了它們能正確播放必須賦予一大堆的參數(shù)。你的媒體標(biāo)簽將會非常復(fù)雜，大堆得令人迷惑的代碼。而且HTML5視頻和音頻標(biāo)簽基本將他們視為圖片：<videosrc=”"/>。但是其它參數(shù)例如寬度和高度或者自動(dòng)播放呢？不必?fù)?dān)心，只需要像其它HTML標(biāo)簽一樣定義：<videosrc=”url”width=”640px”height=”380px”autoplay/>。實(shí)際上這個(gè)過程非常簡單，然而我們的老瀏覽器可能并不喜歡我們的HTML5，你需要添加更多代碼來讓他們正確工作。但是這個(gè)代碼還是比<embed>和<object>來的簡單的多。三．更清晰的代碼HTML5允許寫出簡單清晰富于描述的代碼。符合語義學(xué)的代碼允許分開樣式和內(nèi)容。使用HTML5可以通過使用語義學(xué)的HTMLheader標(biāo)簽描述內(nèi)容來最后解決你的div及其class定義問題。以前需要大量的使用div來定義每一個(gè)頁面內(nèi)容區(qū)域，但是使用新的<section>，<article>，<header>，<footer>，<aside>和<nav>標(biāo)簽，讓代碼更加清晰易于閱讀。四．更聰明的存儲HTML5中最酷的特性就是本地存儲。有一點(diǎn)像比較老的技術(shù)cookie和客戶端數(shù)據(jù)庫的融合。它比cooke更好用因?yàn)橹С侄鄠€(gè)windows存儲，它擁有更好的安全和性能，即使瀏覽器關(guān)閉后也可以保存。因?yàn)樗莻€(gè)客戶端的數(shù)據(jù)庫，你不用擔(dān)心用戶刪除任何cookie，并且所有主流瀏覽器都支持。本地存儲對于很多情況來說都不錯(cuò)，它是HTML5工具中一個(gè)不需要第三方插件實(shí)現(xiàn)的。能夠保存數(shù)據(jù)到用戶的瀏覽器中意味你可以簡單的創(chuàng)建一些應(yīng)用特性例如：保存用戶信息，緩存數(shù)據(jù)，加載用戶上一次的應(yīng)用狀態(tài)。五．更好的互動(dòng)我們都喜歡更好的互動(dòng)，我們都喜歡對于用戶有反饋的動(dòng)態(tài)網(wǎng)站，用戶可以享受互動(dòng)的過程。輸入<canvas>，HTML5的畫圖標(biāo)簽允許你做更多的互動(dòng)和動(dòng)畫，就像我們使用Flash達(dá)到的效果。六．游戲開發(fā)使用HTML5的<canvas>開發(fā)游戲。HTML5提供了一個(gè)非常偉大的，移動(dòng)友好的方式去開發(fā)有趣互動(dòng)的游戲。如果你開發(fā)Flash游戲，你就會喜歡上HTML5的游戲開發(fā)。七遺留及其跨瀏覽器支持現(xiàn)代流行瀏覽器都支持HTML5（Chrome，F(xiàn)irefox，Safari，IE9和Opera），并且創(chuàng)建了HTML5doctype這樣所有的瀏覽器，即使非常老非常令人厭惡瀏覽器像IE6都可以使用。但是因?yàn)槔系臑g覽器能夠識別doctype并不意味它可以處理HTML5標(biāo)簽和功能。幸運(yùn)的是，HTML5已經(jīng)使得開發(fā)更加簡單了，更多支持更多瀏覽器，這樣老的IE瀏覽器可以通過添加javascript代碼來使用新的元素八．

移動(dòng)你可以稱之為“直覺”，但是我認(rèn)為移動(dòng)技術(shù)將會變得更加的流行。我知道，這里有些非常瘋狂的猜測，有些可能你也想到了–Mobile是一個(gè)時(shí)尚！移動(dòng)設(shè)備將占領(lǐng)世界。更多的接受移動(dòng)設(shè)備將會增長的非常迅速。這意味著更多的用戶會選擇使用移動(dòng)設(shè)備訪問網(wǎng)站或者web應(yīng)用。HTML5是最移動(dòng)化的開發(fā)工具。隨著Adobe宣布放棄移動(dòng)flash開發(fā)，你將會考慮使用HTML5來開發(fā)webp應(yīng)用。當(dāng)手機(jī)瀏覽器完全支持HTML5那么開發(fā)移動(dòng)項(xiàng)目將會和設(shè)計(jì)更小的觸摸顯示一樣簡單。這里有很多的meta標(biāo)簽允許你優(yōu)化移動(dòng)：viewport:允許你定義viewport寬度和縮放設(shè)置；全屏瀏覽器：ISO指定的數(shù)值允許Apple設(shè)備全屏模式顯示；Homescreenicons:

就像桌面收藏，這些圖標(biāo)可以用來添加收藏到IOS和Android移動(dòng)設(shè)備的首頁。實(shí)習(xí)單位鑒定意見實(shí)習(xí)單位負(fù)責(zé)人：（蓋章）年月日實(shí)習(xí)成績（由實(shí)習(xí)指導(dǎo)人評定）（百分制）導(dǎo)師意見導(dǎo)師簽字：年月日實(shí)習(xí)總結(jié)在北京陌游科技有限公司經(jīng)歷三個(gè)月的工作實(shí)習(xí)已經(jīng)結(jié)束了，在這三個(gè)月里，我和公司的職工以及領(lǐng)導(dǎo)都相處得很是融洽，大家對我也關(guān)懷備至，時(shí)常給我鼓勵(lì)和幫助。下面，我將實(shí)習(xí)三個(gè)月的工作總結(jié)如下：

一、工作成果與收獲

在這三個(gè)月里，我作為一個(gè)HTML5技術(shù)人員，認(rèn)真學(xué)習(xí)公司的質(zhì)量管理流程，根據(jù)崗位職責(zé)的要求，主要有以下工作成果及收獲：1、小助手關(guān)鍵字查詢

。學(xué)習(xí)到頁面的相對布局和絕對布局的定義2、陌游女神活動(dòng)

。知道了頁面中雙層滾動(dòng)是由于什么造成的，避免下次犯同樣的錯(cuò)誤。3、高校聊游戲活動(dòng)

4、抽獎(jiǎng)活動(dòng)中獲獎(jiǎng)名單展示5、抽獎(jiǎng)玩法的HTML5靜態(tài)頁面6、四周年活動(dòng)圖1和圖2以上這些工作使我認(rèn)識到質(zhì)量改進(jìn)是無極限的，產(chǎn)品只有更好，沒有最好。

二、感想和體會

1、態(tài)度決定一切。

工作時(shí)一定要一絲不茍，認(rèn)真仔細(xì)，一個(gè)職員在公司的大部分時(shí)間都是在工作的，這就要求他在這段時(shí)間內(nèi)一定要小心謹(jǐn)慎，一絲不茍，不能老是出錯(cuò),

有必要一定要檢驗(yàn)自己的工作結(jié)果，以確保自己的萬無一失.工作的時(shí)候我一直保持極大的工作熱情，不僅順利完成工作任務(wù)，工作之余還經(jīng)?？偨Y(jié)經(jīng)驗(yàn)教訓(xùn)，不斷提高工作效率，雖然工作中我也會犯一些錯(cuò)誤，受到領(lǐng)導(dǎo)批評，但我認(rèn)為這些錯(cuò)誤和批評是能讓我能在以后的工作中謹(jǐn)慎小心，提高工作效率。在和大家工作的這段時(shí)間里，他們嚴(yán)謹(jǐn)、認(rèn)真的工作作風(fēng)給我留下了很深刻的印象，我也從他們身上學(xué)到了很多自己缺少的東西。這次生產(chǎn)實(shí)習(xí)雖然說時(shí)間比較少，但是卻讓我了解了公司的企業(yè)文化、生產(chǎn)模式和質(zhì)量體系管理等經(jīng)驗(yàn)，這對我來說是很寶貴的。

2、勤于思考

，要善于學(xué)習(xí)。在工作崗位上一定要勤于思考，不斷改進(jìn)工作方法，提高工作效率.

公司的日常工作都會比較繁瑣，而且?guī)滋煜聛硪矔容^枯燥，就是需要你多動(dòng)腦筋，不斷地想方設(shè)法改進(jìn)自己的工作方法，提高工作效率，減少工作所需時(shí)間

。剛進(jìn)技術(shù)部的時(shí)候，我什么也不會，就相當(dāng)于一個(gè)文盲在一群知識分子中。此時(shí)學(xué)習(xí)能力就會很重要。我自我感覺我的適應(yīng)能力還行，在工作后不久我就可以勝任很多工作。在現(xiàn)實(shí)的生活中，學(xué)習(xí)能力很大情況下決定你的未來。學(xué)習(xí)可以修養(yǎng)身心，可以適應(yīng)各種各樣的環(huán)境，可以使自己在不同的環(huán)境中很好的發(fā)揮自己的特長。

3、就是要服從領(lǐng)導(dǎo)的安排，各師其職在一個(gè)公司中，就是一個(gè)很大的整體，相當(dāng)一個(gè)組織，服從組織的領(lǐng)導(dǎo)，是一個(gè)員工最基本的要求。一個(gè)領(lǐng)導(dǎo)都不希望自己的手下有越級的行為。在自己的工作上尚做好自己的事情，并且可以最好是多做一些力所能及的事情，尤其剛進(jìn)入公司的新手，這些都有可能會提高你在領(lǐng)導(dǎo)心中的地位，從而有機(jī)會提高并且進(jìn)一步發(fā)揮自己的實(shí)力。當(dāng)然，現(xiàn)實(shí)的社會不會因?yàn)槟愕膶?shí)力就會讓你又發(fā)揮實(shí)力的機(jī)會，所以你要把握住一切可利用機(jī)會，當(dāng)然能不腐敗就不腐敗了。在學(xué)校中我已經(jīng)可以感覺到金錢的誘惑，更別說在社會這個(gè)大染缸。

當(dāng)然，我剛進(jìn)去公司的時(shí)候，一切都是一個(gè)新手。很多事情需要和別人溝通，否則你可能會什么也做不成。所以，要善于和同事們溝通。溝通是一門技巧，好的領(lǐng)導(dǎo)者會合理的利用這一手段提高企業(yè)的效益。我在實(shí)習(xí)中，也可以感覺到溝通的重要，有很多事情不是你不會做，而是你的經(jīng)驗(yàn)不足，或者說是你的社會閱歷不夠。

還有就是要認(rèn)真，全力以赴。自己能做的事情要做好，自己不能做的事情要盡自己最大的努力去做。這是我的感受。別認(rèn)為自己什么也干不了，有很多的