互聯(lián)網(wǎng)廣告展現(xiàn)系統(tǒng)

摘；；模塊具有獲取站點(diǎn)配置、返回物料等功能渲染模塊從檢索模塊獲取相關(guān)數(shù)據(jù)，負(fù)責(zé)渲染和推廣平臺(tái)支持站長(zhǎng)自助配；；：互聯(lián)網(wǎng)；瀏覽器；渲染；；檢OneoftheimportantpillarsofInternetadvertisingrevenuesasanimportantpartoftheadvertisingmarket,butalsothecompany'sInternetisplayinganincreasinglylargeinfluencetomakebusinessmoreefficientflowofinformation,todevelopabroadermarketdemand.However,thetraditionalInternetadvertising,suchasbannerads,pop-upads,advertisingafixedposition,notenoughnewform,theinteractionisnotfriendlyenough,takeupmorespaceonthepageandthepoorinthesmallscreensofmobiledevicesexperience.Therefore,thedevelopmentofgooduserexperience,clickrates,adaptingmobileInternetadvertisingproducts,theInternetcompanyhasaveryimportantsignificance.Inthispaper,wedesignasetofimage-basedInternetadvertisingdisplaysystem.Thesystemobtainsimageinformationpagefeaturesandbrowserfingerprintsandotherinformationtoobtainthecorrespondingadvertisementdataandrendertheadsontherightpageimage.Thesystemincludesadrenderingmodule,aretrievalmoduleadvertising,advertisingplatformandothermajormodules.Advertisingretrievalmodulehavingtoobtainasiteconfigurationreturnsadvertisingmaterials,andotherfunctions;adrenderingmoduletoobtaintherelevantdatafromtheadretrievalmodule,responsiblefortheadrenderingandadvertisingmonitoring;advertisingself-serviceadvertisingplatformsupportWebmasterconfiguredtofacilitaterapidadvertiseEachmoduleofthesystemhasbeenalotofstabilityandusabilitytesting,validation:Internetadvertising;Browserfingerprint;Adrendering;Advertisingpromotion;Adversitingsearch目摘第1 緒 第2 相關(guān)理論與技 2.1精準(zhǔn)投放技 瀏覽器 MVC模 第3章系統(tǒng)需求分 樣 第4章系統(tǒng)概要設(shè) 4.2.1檢索模 4.2.2渲染模 第5章系統(tǒng)詳細(xì)設(shè)計(jì)與實(shí) 5.1檢索模 5.2渲染模 Loader模 Render模 5.3推廣平 第6章系統(tǒng)測(cè)試與驗(yàn) 6.1檢索模塊及渲染端測(cè) 第7章總結(jié)與展 7.1總 參考文 致 1章選題背景與意1.1.1投放技術(shù)及市場(chǎng)前互聯(lián)網(wǎng)由1969年國(guó)防部遠(yuǎn)景研究規(guī)劃局ARPANET項(xiàng)目發(fā)展而來(lái)，最，告投放時(shí)與主往往需要。這個(gè)階段互聯(lián)網(wǎng)的溝通成本及，，第二階段主以及對(duì)的要求越來(lái)越高，他們希望有達(dá)到更，；，點(diǎn)擊率。例如，杭州某家旅游景區(qū)做的可以只展示給浙江地區(qū)的網(wǎng)民面的。利用人們不同區(qū)域、不同時(shí)間段的不同需求而投放的針對(duì)；，，第三階段，隨著網(wǎng)絡(luò)的普及和網(wǎng)民數(shù)量的急劇上升系統(tǒng)迎來(lái)大數(shù)據(jù)時(shí)，，的互聯(lián)網(wǎng)[3]。這個(gè)階段，交易平臺(tái)ADX（AdExchange）和需求方平臺(tái)DSP（DemandSidePlatform）在龐大的互聯(lián)網(wǎng)需求下，逐漸發(fā)展壯大起來(lái)?，F(xiàn)階段互聯(lián)網(wǎng)的生態(tài)已經(jīng)比較完善主與無(wú)需直接溝通，不同樣式，要包括精準(zhǔn)投放技術(shù)和復(fù)雜web應(yīng)用的架構(gòu)設(shè)計(jì)。精準(zhǔn)度的提高主要加準(zhǔn)確[5]。在互聯(lián)網(wǎng)web前端開(kāi)發(fā)上，會(huì)發(fā)現(xiàn)交互以及樣式不斷迭代更新，同時(shí)需要考慮在PC瀏覽器和移動(dòng)瀏覽器上的適配，結(jié)構(gòu)越來(lái)越復(fù)雜。。統(tǒng)主要基于，這點(diǎn)與其他互聯(lián)網(wǎng)顯著不同展現(xiàn)系統(tǒng)需要支持站點(diǎn)。 和用戶之互聯(lián)網(wǎng)投放技術(shù)的國(guó)內(nèi)外研究現(xiàn)利用來(lái)定位用戶，但保存在瀏覽器端，其大小有一定限制，會(huì)被用戶和瀏覽器清理。在被清理后，再次植入就會(huì)發(fā)生變化，所以這種方式本基本就可以用系統(tǒng)生成的Baiduid唯一標(biāo)識(shí)一個(gè)用戶。同時(shí)公司利用搜索應(yīng)一個(gè)用戶的、、關(guān)注點(diǎn)。通過(guò)Baiduid和搜索記錄、網(wǎng)頁(yè)瀏覽記錄結(jié) ，這幫助用戶過(guò)濾了他們不感的也只針對(duì)感的人群展現(xiàn)，幫助，后用戶看到的要少4%，同時(shí)點(diǎn)擊的可能性要高32%[11]。主要研究?jī)?nèi)、、及的技術(shù)進(jìn)行調(diào)研和簡(jiǎn)單介紹，并對(duì)索模塊渲染模塊推廣平臺(tái)、、對(duì)系統(tǒng)所涉及到精準(zhǔn)投放技術(shù)、復(fù)雜web應(yīng)用的架構(gòu)設(shè)計(jì)等技術(shù)章節(jié)組織結(jié)第二章相關(guān)理論和技術(shù)研究。重點(diǎn)對(duì)展現(xiàn)系統(tǒng)中涉及到的技術(shù)進(jìn)行介第三章系統(tǒng)需求分析?？傮w分析系統(tǒng)需求，明確功能需求、非功能需求以、、第五章系統(tǒng)詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)主要是對(duì)檢索模塊渲染模塊、、第六章系統(tǒng)測(cè)試與驗(yàn)證。主要測(cè)試檢索端的服務(wù)以及展示效果和2章web2.1精準(zhǔn)投放技，的數(shù)量，也就是流量流量拓展的由業(yè)務(wù)人員完成；另一方面是提高廣，用戶并要用唯一確定的ID來(lái)標(biāo)記該用戶目前主要使用瀏覽器標(biāo)記用戶權(quán)重調(diào)整對(duì)于系統(tǒng)來(lái)說(shuō)的數(shù)和競(jìng)價(jià)是可見(jiàn)的，（使用了link，一般資源文件，如css樣式文件），另一種是頁(yè)面文件的、與的、與的、與應(yīng)用程序的等[13]。web，url與頁(yè)面特征的urlurl的，瀏覽器人的受遺傳和生活環(huán)境共同影響，由于重復(fù)率極小，大約150億分之一，也就是說(shuō)可以唯一確定一個(gè)人。瀏覽器技術(shù)能生成類似于人類的結(jié)果，能幫助系統(tǒng)去唯一標(biāo)識(shí)一個(gè)瀏覽器，或者說(shuō)標(biāo)記一位用戶在使用HTTP協(xié)議的過(guò)程中瀏覽器按照HTTP協(xié)議會(huì)把瀏覽器的串作為該瀏覽器的。如圖2.4所示：2.1生成瀏覽器瀏覽器技術(shù)的一個(gè)技術(shù)難點(diǎn)是應(yīng)對(duì)瀏覽器的變化17]。人的在正常情況下的變化很少，而瀏覽器不同。比如，用戶會(huì)更換或新增瀏覽器插件，做調(diào)整分辨率大小等操作這樣新生成的瀏覽器與之前的不同對(duì)于調(diào)整過(guò)相關(guān)瀏覽器設(shè)置的用戶，可以簡(jiǎn)單處理，認(rèn)為用戶改變了自己以往的瀏覽偏好，一定程度上可視為一個(gè)新的用戶。復(fù)雜web應(yīng)用的架構(gòu)設(shè)計(jì)方傳統(tǒng)互聯(lián)網(wǎng)端渲染的模塊普遍比較簡(jiǎn)單，例如固定大小的推廣廣告如下圖2.2，渲染好的html如圖2.3。圖2.2推廣示圖2.3html示，上圖中的渲染模塊的投放代碼主要任務(wù)是在頁(yè)面固定大小的位置插入文設(shè)計(jì)的互聯(lián)網(wǎng)展現(xiàn)系統(tǒng)區(qū)別一般互聯(lián)網(wǎng)與相關(guān)的特殊位和特殊的交互方式，無(wú)法直接仿照傳統(tǒng)渲染模塊直接完成渲染模塊需設(shè)計(jì)一套完善的渲染模塊架構(gòu)，保證的正常渲染以及。，但隨著瀏覽器和網(wǎng)絡(luò)性能的提升，web應(yīng)用的功能越來(lái)越強(qiáng)大，隨之而來(lái)的是webJavaScript語(yǔ)管理工具，能夠良好的管理js文件之間的依賴管理，填補(bǔ)JavaScript這個(gè)語(yǔ)言模MVCWebWeb發(fā)展逐漸細(xì)分出來(lái)的領(lǐng)域。早期前端開(kāi)發(fā)比較簡(jiǎn)

信各種宣傳頁(yè)面html5面小游戲等等,前端代碼的邏輯也越來(lái)越復(fù)雜近五六年以來(lái),各種尺寸的智能和平板電腦層出不窮，越來(lái)越多的人使用移動(dòng)設(shè)備來(lái)互聯(lián)網(wǎng)這就給前端代碼的跨平臺(tái)性復(fù)用性易性帶來(lái)了更高的要求如果有跨平臺(tái)的復(fù)用性好且易的框架的話可以大大提高開(kāi)發(fā)效率因此前端開(kāi)發(fā)人員也在不停地探索C模型在Web開(kāi)發(fā)中應(yīng)用廣泛，實(shí)現(xiàn)了展示模塊和數(shù)據(jù)邏輯處理模塊的分離20]。因此很多公司開(kāi)始借鑒C在后端的運(yùn)用，建立前端C架構(gòu)，代表的框架有rS，BackBon21。MVC的相關(guān)概念。MVCmodel、view、controller。M排第一，應(yīng)用當(dāng)中涉及到的所有業(yè)務(wù)對(duì)象都應(yīng)盡可能抽像成Model。以一個(gè)、、html表單表單為例子，這個(gè)model的屬性、、

事件表單檢查事件，表單發(fā)送事件等等；VCM較弱，V代表渲染用到的視圖，即為呈現(xiàn)給用戶的界面，就像上面提到的表單；C代表控制器，modelviewmodelview以及使用哪些modelview?？偟脕?lái)說(shuō)，MVCmodel,view,controller三個(gè)方面來(lái)描述你的應(yīng)用，并通過(guò)三者的交互，使應(yīng)用功能得以MVC開(kāi)發(fā)規(guī)范，也便于多人協(xié)作開(kāi)發(fā)。jquery.smustache.js(html模板)，less（css預(yù)處理器）等等。

dom操作chrome瀏覽器，測(cè)試界面渲染情況項(xiàng)目上線需要考慮減少頁(yè)面http請(qǐng)求，壓縮文件能加快載入速度，同時(shí)代碼）本章小。本章對(duì)本文設(shè)計(jì)的系統(tǒng)涉及的理論和技術(shù)的情況進(jìn)行了簡(jiǎn)單闡述精準(zhǔn)投放技術(shù)結(jié)合了頁(yè)面特征提取用戶特征提取以及瀏覽器等技術(shù)通過(guò)這些技術(shù)提高的針對(duì)性進(jìn)而提高的點(diǎn)擊率復(fù)雜b應(yīng)用的架構(gòu)設(shè)計(jì)考慮到本文設(shè)計(jì)的系統(tǒng)區(qū)別于傳統(tǒng)的特點(diǎn)，結(jié)合了依賴管理、C模式和開(kāi)發(fā)輔助工具，保證了渲染模塊的開(kāi)發(fā)、測(cè)試以及上線。。3項(xiàng)目概。片上渲染的變現(xiàn)方案站長(zhǎng)在網(wǎng)頁(yè)中插入投放代碼，在頁(yè)面載入到發(fā)送日志推廣平臺(tái)是提供給站長(zhǎng)的自選樣式并自助獲取。。、、投放代碼的工具檢索模塊渲染模塊推廣平臺(tái)共同完成。、、，展現(xiàn)系統(tǒng)的主要功能。本文主要對(duì)渲染端做詳細(xì)敘述檢索端大量復(fù)用，可行性分，息發(fā)送給交易平臺(tái)，就可得到合適的數(shù)據(jù)。得到之后展現(xiàn)系 ，系統(tǒng)功能需求分3.1。3.1用例互聯(lián)網(wǎng)展現(xiàn)系統(tǒng)：在不影響網(wǎng)民用戶體驗(yàn)的情況下，為提供互聯(lián)網(wǎng)頁(yè)面，同時(shí)需要保證站長(zhǎng)的收入和主的推廣效果。網(wǎng)民：瀏覽投放了該互聯(lián)網(wǎng)的的網(wǎng)民。：投放了該互聯(lián)網(wǎng)的。主為宣傳推廣服務(wù)或商品向提供素材，委托為其進(jìn)行推廣。站、主面的利益，盡可能地最大化總體利益。、、展現(xiàn)系統(tǒng)包括檢索模塊渲染模塊推廣平臺(tái)，其中檢索模塊主要復(fù)用公司模塊由BFP模塊和Nginx組成，渲染模塊由Loader子模塊、Render子模塊以及輔助模塊構(gòu)成。系統(tǒng)模塊劃分如下圖所示。、、圖3.2展現(xiàn)系統(tǒng)模塊實(shí)際線上檢索的過(guò)程中，參與的模塊較多，流程比較復(fù)雜。先通過(guò)一次簡(jiǎn)化版的檢索流程，設(shè)計(jì)出完整的展現(xiàn)系統(tǒng)序列圖，序列圖如圖3.3圖3.3檢索簡(jiǎn)化序列1）渲染模要分為loader和render兩個(gè)模塊，loader需要分析頁(yè)面以獲取合適、并發(fā)出請(qǐng)求獲取內(nèi)容以及最后包裝數(shù)據(jù)和信息，render需要渲染并數(shù)據(jù)2）檢索模于該模塊使 理站點(diǎn)的配置；以及向ADX請(qǐng)求、處理ADX返回的并返回給渲由于時(shí)序圖對(duì)渲染端的功能需求描述不夠詳細(xì)下圖3.4是渲染模塊Loader

圖3.4渲染模塊劃；Loader子模塊的主要需求是是為渲染提供數(shù)據(jù)。渲染由于在上進(jìn)行渲染，Loader子模塊需要一個(gè)模塊完成進(jìn)行查找功能渲染也需要用到從檢索端獲取的數(shù)據(jù)，這就需要Loader子模塊創(chuàng)建一個(gè)獲取后端數(shù)據(jù)的模塊除了上面這兩個(gè)模塊建議創(chuàng)建一個(gè)新的模塊處理數(shù)據(jù)和數(shù)據(jù)，RenderapiRender模；RenderRenderMVC的設(shè)計(jì)模式，便于后期的開(kāi)發(fā)。其子模html和css文件進(jìn)行分離，便于文件的復(fù)用；事件綁定和需要考慮擴(kuò)展性，建議提供擴(kuò)展字段便于后期新事件和新的添加。，最后還有推廣平臺(tái)，功能相對(duì)獨(dú)立，該平臺(tái)主要為站長(zhǎng)提供投放代碼服務(wù)。大致流程是站長(zhǎng)先在的上先并申請(qǐng)一個(gè)廣告位id（稱為tu），再在推廣平臺(tái)上選擇樣式，最終獲取到投放代碼，該在網(wǎng)頁(yè)中的上進(jìn)行渲染，目前有以下幾種主要產(chǎn)品形式貼片PC貼片：頁(yè)面載入完成第一次展現(xiàn)時(shí)，隱藏在底部的貼片廣告會(huì)自動(dòng)展開(kāi)，持續(xù)展現(xiàn)5s然后再收起隱藏，之后鼠標(biāo)移入展現(xiàn)5s，鼠標(biāo)移出立即收起隱藏，線上實(shí)例如圖3.4所示。3.4PC移動(dòng)貼片：由于移動(dòng)設(shè)備上交互主要以觸摸、點(diǎn)擊為主，和PC瀏覽器告載入完成后就顯示在底部，一直展現(xiàn)，線上例子如下圖。3.5iconPCicon樣式：當(dāng)鼠標(biāo)hover到上時(shí)，上便顯現(xiàn)一個(gè)閃動(dòng)的“+”號(hào)，移動(dòng)到這個(gè)符號(hào)后，便在符號(hào)下方展現(xiàn)內(nèi)容，鼠標(biāo)離開(kāi)符號(hào)或者內(nèi)容區(qū)域，內(nèi)容隱藏，符號(hào)也同時(shí)隱藏。PC上的實(shí)例如圖3.6所示3.6PCicon樣式移動(dòng)icon樣式：移動(dòng)icon的交互也比較簡(jiǎn)單，一直展現(xiàn)在右上角，示3.7。為了獲取更大的收益，呈現(xiàn)出更好的設(shè)計(jì)，提供更友好的交互，之后將會(huì)有的新樣式開(kāi)發(fā)上線。由于樣式各不相同，渲染要到的數(shù)據(jù)也存在不同，檢索模塊需要根據(jù)樣式返回對(duì)應(yīng)格式的數(shù)據(jù)，這3.7移動(dòng)icon系統(tǒng)性能需求分 的響應(yīng)時(shí)發(fā)送請(qǐng)求到后端返回的時(shí)間要在0.2秒左右，否則會(huì)影響用戶體驗(yàn)。 其他需JSON。拓展性：樣式需求變更頻繁，需要設(shè)計(jì)渲染模塊擴(kuò)展性更強(qiáng)瀏覽器。本章小 4、本章主要介紹互聯(lián)網(wǎng)展現(xiàn)系統(tǒng)的概要設(shè)計(jì)按照整個(gè)展現(xiàn)系統(tǒng)的架構(gòu)及各模塊功能安排，介紹檢索模塊渲染模塊以及推廣平臺(tái)這三個(gè)子模塊以及這三個(gè)子系統(tǒng)的幾個(gè)子模塊安排其中詳細(xì)介紹渲染模塊，簡(jiǎn)單介紹推廣平臺(tái)檢索模塊由于復(fù)用公司已有模塊故只做簡(jiǎn)略介紹。、系統(tǒng)概整個(gè)檢索系統(tǒng)的架構(gòu)如圖4.1所示圖4.1檢索系統(tǒng)整體架構(gòu)、整個(gè)系統(tǒng)可以分做5個(gè)大部分，分別是渲染模塊、推廣平臺(tái)檢索模塊、交易平臺(tái)ADX和需求方平臺(tái)DSP，后三個(gè)模塊實(shí)際開(kāi)發(fā)中主要當(dāng)初、系統(tǒng)結(jié)構(gòu)設(shè)渲染模塊的請(qǐng)求給BFP模塊。BFP模塊的功能包括返回站點(diǎn)配置和處理數(shù)：：信息傳給ADX，ADX根據(jù)頁(yè)面特征和用戶特征請(qǐng)求DSP，通過(guò)競(jìng)價(jià)得到并4.3圖4.3系統(tǒng)子系統(tǒng)劃渲染模塊是展現(xiàn)系統(tǒng)的重要組成部分主要由Loader模塊Render、Loader子模塊包含查找子模塊請(qǐng)求子模塊、loaderApi子模塊。在需求上查找子模塊需要先開(kāi)始按照一定的算法查找頁(yè)面中適合展現(xiàn)、查找結(jié)束后在有適合出的時(shí)將控制權(quán)轉(zhuǎn)交到請(qǐng)求子模塊上；請(qǐng)求子模塊需要向檢索端發(fā)出請(qǐng)求；獲取到有效的數(shù)據(jù)后，loaderApiapiRenderapi包含處理過(guò)的信息以及用于出的的信息。Renderwidgetimpl子模塊，為了于公司以往項(xiàng)目架構(gòu)統(tǒng)一沒(méi)有像常用的MVC模式分出清晰的model、viewcontroller。其中widget似于MVC中的modelview的結(jié)合impl需要獲取loaderApi并調(diào)用widget子MVCcontroller。id，接著自選一種或者多種樣式，最終推廣平臺(tái)根據(jù)選擇結(jié)果產(chǎn)生對(duì)應(yīng)的通信協(xié)議設(shè)整個(gè)展現(xiàn)系統(tǒng)目前主要用到HTTP協(xié)議渲染端與檢索端使用際使用是通過(guò)JSNOP的方式進(jìn)行解決跨域問(wèn)題[23]。檢索端與ADX，ADXDSP之間通信復(fù)用公司模塊，暫不關(guān)注其通信過(guò)程。本章小劃分為檢索模塊渲染模塊和55.1檢索模表5.1第一次調(diào)用檢索端的字序 字 說(shuō) 位id（計(jì)費(fèi)相關(guān) 請(qǐng)求配置，默認(rèn)為 頁(yè)面中的個(gè) loader5.2序 字 說(shuō) 位 請(qǐng)求配置，默認(rèn)為 頁(yè)面中的個(gè)3loader4URL地址5326寬7高第二次請(qǐng)求，檢索端和管理ADX接口，返回?cái)?shù)據(jù)協(xié)議GET方式調(diào)用檢索端用到的具體字段5.2渲染模Loader子模塊開(kāi)始分析頁(yè)面并向檢索端發(fā)出請(qǐng)求包裝信息和數(shù)據(jù)；然后Render模塊根據(jù)Loader模塊提供的數(shù)據(jù)，在對(duì)應(yīng)的上渲染以LoaderLoader主要包含以下幾個(gè)主要功能?？紤]到互聯(lián)網(wǎng)投放在大量站點(diǎn)上，投放js代碼處在不同的下加上服務(wù)器一般都部署在公司下，瀏覽器跨域問(wèn)題無(wú)法避免，因此Loader請(qǐng)求檢索模塊的方式都通過(guò)jsonLoader模塊主要類圖5.1PC端的Loader和移動(dòng)端的Loader，實(shí)線表示繼承，虛線表示使用。簡(jiǎn)單介紹loader模塊各個(gè)類之間的關(guān)系，CommerLoader類作為loader模塊的類繼承了BaseLoader類包裝了Loader模塊常用的一些方法BaseLoader類中具體實(shí)現(xiàn)了請(qǐng)求檢索模塊的主要邏輯和部分查找頁(yè)面、獲取數(shù)據(jù)的邏輯，繼承了Loader類；Loader類做了主要的頁(yè)面查找的邏輯，是Loader模塊的基類，同時(shí)Loader類也調(diào)用了LoaderApi，進(jìn)行數(shù)據(jù)和數(shù)據(jù)的包裝，一邊提供給Render模塊使用。移動(dòng)端的LoaderPCloader查找并頁(yè)a)延遲加b)類似slide的切換（分手動(dòng)和自動(dòng)兩種c)被透明層遮擋，無(wú)法觸發(fā)相應(yīng)鼠標(biāo)事件（在此稱為d)onload目前針對(duì)這些問(wèn)題，搜索的算法設(shè)計(jì)了如圖5.2，搜索的流程比在查找到符合條件的5.1Loader模塊主要類圖5.2查找算5.3Render模塊主要類5.1。和渲染js，主要的相關(guān)請(qǐng)求字段同表5.2。提供LoaderApi給render使在完成前兩步處理之后，loaderRender模塊調(diào)用，便于Render模塊的對(duì)數(shù)據(jù)的使用。目前版本的LoaderApi有以下這5.5LoaderApi目前已有接0Loader1綁定事件事件23獲取的位置和高4renderjs6獲取具體數(shù)7Render及，Render模塊的主要類圖如圖5.3，類圖的結(jié)構(gòu)于Loader模塊比1.繪代碼為了與現(xiàn)有架構(gòu)兼容，主要分為widget和impl兩部分，結(jié)構(gòu)上MVCwidgetmodelview、implcontroller。RenderLoaderApi之后，便開(kāi)始繪制。5.6implwidget主要功能序號(hào)字 說(shuō) 包含了model和view，集合了通用的 implLoaderApi個(gè)div的樣式設(shè)置canvas位置于對(duì)應(yīng)的之上作為渲染最外層的domimplcontrollerLoaderApiwidget實(shí)例化的widget渲染出html，插入canvasdiv，載入css，綁定2.日（優(yōu)化中廢棄ad.plugin.imageplus.Log中。如widget中執(zhí)行如下代碼即可：me.trigger(ui.events.SEND_LOG,{'actionid':3,'attach':'logcontent'});（日志具體實(shí)現(xiàn)是通過(guò)請(qǐng)求一張后端服務(wù)器上的一張1px*1px的小，在服nginx日志上留下記錄，后期在分析日志得出相關(guān)數(shù)據(jù)。日志的主要5.7所示。圖5.6日志主要構(gòu)5.7目前主要日志接110220物料計(jì)費(fèi)點(diǎn)33044058時(shí)間69js 所有文件的依賴關(guān)系，由closurelibrary統(tǒng)一寫(xiě)入一個(gè)標(biāo)記依賴的jsonCSS預(yù)處理：實(shí)際開(kāi)發(fā)中，為了方便樣式的書(shū)寫(xiě)使用了Less。Less屬于stylusCSS的編寫(xiě)和維基礎(chǔ)工具庫(kù)：為了方便dom操作，項(xiàng)目使用了內(nèi)部的tangram.js比較類jquery；為了方便模板渲染使用了，mustache.jshtml的渲染。webnodejser-server，使用該模塊可以在本機(jī)開(kāi)啟一個(gè)簡(jiǎn)單的http服務(wù)器便于的在瀏覽器代碼調(diào)試：代碼邏輯上的測(cè)試，主要使用chromedeveloptool。調(diào)試的時(shí)候主要看網(wǎng)絡(luò)請(qǐng)求狀況、jshtml的渲染結(jié)果。代碼壓縮：上線之前需要進(jìn)行壓縮js，已達(dá)到較少http請(qǐng)求的壓力和防止源碼中的商業(yè)信息被解讀。壓縮使用了closurelibrary文件上線實(shí)際上線需要將壓縮好的js文件上傳到CDN服務(wù)上考慮到瀏覽器會(huì)緩存js以及js的更新迭代，需要設(shè)置js地址定時(shí)產(chǎn)生變化。如 后綴的cachenodejs的一個(gè)模塊edp，edpjs文件。實(shí)際上線如下使用：edpbosapp/main.min.jsbos://cae-pub- 推廣平圖 推廣平臺(tái)前端流程推廣平臺(tái)主要目的供站長(zhǎng)進(jìn)行自助 投放，提供站長(zhǎng)自 5.4所示。類型分為pc和移動(dòng)，首先站長(zhǎng)先根據(jù)類型選擇不同的頁(yè)面；選擇完成后，輸入位id；輸入后，推廣平臺(tái)會(huì)檢測(cè)位id是否有效，有效的下，則提示站長(zhǎng)更換位id。本章小本章主要介紹了檢索模塊推廣平臺(tái)和渲染模塊的詳細(xì)設(shè)計(jì)和實(shí)現(xiàn)。檢索模塊主要復(fù)用了公司原有模塊，渲染模塊包含Loader子模LoaderRender兩個(gè)子模塊構(gòu)成，Loader進(jìn)行頁(yè)面，查找數(shù)據(jù)請(qǐng)求，并包裝信息和數(shù)據(jù)；Render渲染，并廣，66.1檢索模塊及渲染端測(cè)pc設(shè)備和移動(dòng)設(shè)備的硬件參數(shù)都較pc流量測(cè)試和移動(dòng)流量測(cè)試，pc端測(cè)pc端樣式有多種分類需對(duì)各個(gè)樣式的進(jìn)試并檢查渲染icon使用chrome瀏覽器，打開(kāi)測(cè)試網(wǎng)頁(yè)，如 3/67487.html，并打開(kāi)chromedeveloptool查看請(qǐng)求信息，Loader模塊第一次請(qǐng)求獲取站點(diǎn)配置的參數(shù)和響應(yīng)數(shù)據(jù)如圖6.1和圖6.2所示。6.1Loader模塊第一次請(qǐng)求參6.2Loader模塊檢索第一次請(qǐng)求響Loader6.36.4圖6.3Loader模塊第二次請(qǐng)求的請(qǐng)求參圖6.4Loader模塊第二次請(qǐng)求返回?cái)?shù)最終的展現(xiàn)如圖6.7所示，并測(cè)試觸發(fā)展現(xiàn)，關(guān)閉以及點(diǎn)圖 icon樣式6.66.7貼片樣式測(cè)試方法基本同icon樣式，都是先查看兩次請(qǐng)求的信息，再查看渲染情況以及交互。最終展現(xiàn)如圖6.8所示。豎條樣式測(cè)試方法同icon樣式，最終展現(xiàn)如圖6.9所示移動(dòng)流量測(cè)需要在不同網(wǎng)絡(luò)環(huán)境下和不同瀏覽設(shè)備上進(jìn)試。移動(dòng)貼片6.8移動(dòng)貼片樣icon

6.9移動(dòng)貼片樣測(cè)試主要針對(duì)主要的幾個(gè)日志，實(shí)際較多，如展現(xiàn)、展現(xiàn)日志6.10計(jì)費(fèi)日志（actioned6.11點(diǎn)擊后生成計(jì)費(fèi)隱藏日志（actioned圖6.12隱藏日推廣平臺(tái)的測(cè)推廣平臺(tái)不參與檢索和渲染，主要為站長(zhǎng)提供自助投放服務(wù)，pc6.15所示：6.13pc投放獲取投放代。由圖可知站長(zhǎng)獲取到投放代碼，且代碼已到剪貼板上符合預(yù)。id6.16所示。本章小本章主要對(duì)系統(tǒng)進(jìn)行功能測(cè)試以及驗(yàn)證。檢索模塊，通過(guò)請(qǐng)求返回的數(shù)據(jù)情況，驗(yàn)證其功能；渲染端，通過(guò)請(qǐng)求，頁(yè)面查找，渲6.16選擇移動(dòng)投放獲取投放代7本章主要總結(jié)的行文結(jié)構(gòu)并展望本文設(shè)計(jì)的互聯(lián)網(wǎng)展現(xiàn)系統(tǒng)在未 總本文設(shè)計(jì)的互聯(lián)網(wǎng)展現(xiàn)系統(tǒng)結(jié)合了精準(zhǔn)投放技術(shù)復(fù)雜web項(xiàng)目架構(gòu)設(shè)計(jì)，達(dá)到了精準(zhǔn)推送，樣式精致，交互新穎，用戶體驗(yàn)