成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Angular使用總結(jié)

tigerZH / 2322人閱讀

摘要：每個(gè)自定義指令都可以實(shí)現(xiàn)這個(gè)方法，當(dāng)模版引擎在鏈接模版的時(shí)候會(huì)回調(diào)指令的方法，調(diào)用時(shí)將當(dāng)前的和作為參數(shù)傳進(jìn)來(lái)。

前端開(kāi)發(fā)大部分時(shí)候面對(duì)兩類問(wèn)題：一是業(yè)務(wù)邏輯，二是界面展示邏輯。在一個(gè)管理系統(tǒng)或互聯(lián)網(wǎng)產(chǎn)品中，我們首先會(huì)通過(guò)業(yè)務(wù)數(shù)據(jù)對(duì)整個(gè)業(yè)務(wù)系統(tǒng)建模。所謂業(yè)務(wù)邏輯，反映到程序?qū)用婢褪菍?duì)一些業(yè)務(wù)數(shù)據(jù)的增刪改查操作；同時(shí)我們也需要將這些業(yè)務(wù)邏輯的操作結(jié)果反饋給用戶，這就是界面展示邏輯。比如當(dāng)你在發(fā)布一條微博，在業(yè)務(wù)邏輯上是多了一條微博數(shù)據(jù)，同時(shí)在界面上也需要將這條數(shù)據(jù)呈現(xiàn)出來(lái)。在我看來(lái)，用戶界面本質(zhì)上就是業(yè)務(wù)數(shù)據(jù)的一種對(duì)用戶友好的展示形態(tài)。一個(gè)理想的前端架構(gòu)是將業(yè)務(wù)邏輯和界面展示邏輯完全分離，兩者獨(dú)立變化，互不影響。在我們考慮業(yè)務(wù)邏輯的時(shí)候，就不要考慮界面展示的問(wèn)題；在考慮界面展示問(wèn)題的時(shí)候，就不要考慮業(yè)務(wù)邏輯的問(wèn)題。如果將兩者耦合在一起，那么在面對(duì)復(fù)雜問(wèn)題的時(shí)候可能就會(huì)左右為難，無(wú)從下手。

MVC模式的主要目的就是將業(yè)務(wù)邏輯和界面展示分離。雖然對(duì)于C(Controller)是有爭(zhēng)議的，但是M(model)和V(view)是普遍認(rèn)同的。將業(yè)務(wù)邏輯和界面展示分離的關(guān)鍵也在model和view的分離。angular是一個(gè)非常優(yōu)秀的MV*框架，非常好的體現(xiàn)了MVC的思想，本文將從該角度來(lái)介紹angular的一些使用心得。

需求

這是一個(gè)后來(lái)管理頁(yè)面，用來(lái)設(shè)置各個(gè)客戶端的banner顯示。頁(yè)面主要有以下功能：
1.編輯banner信息，可以設(shè)置banner的類型和上傳banner圖片。
2.刪除和插入。
3.上下移動(dòng)banner順序。
4.保存。

實(shí)現(xiàn)業(yè)務(wù)邏輯

不考慮頁(yè)面展示，我們可以先實(shí)現(xiàn)業(yè)務(wù)邏輯。各個(gè)端banner列表的邏輯是一樣的，只是類型以及與后臺(tái)的交互接口不一樣。我們可以將banner的這些列表邏輯定義成一個(gè)service，不同端的列表都可以重用這個(gè)service。其定義如下。

這個(gè)service的實(shí)現(xiàn)非常簡(jiǎn)單，就是對(duì)一個(gè)banner數(shù)組進(jìn)行增刪改查。

實(shí)現(xiàn)界面展示邏輯

實(shí)現(xiàn)完業(yè)務(wù)邏輯我們?cè)賮?lái)解決界面展示的問(wèn)題。angular提供了一個(gè)非常強(qiáng)大的模版引擎,通過(guò)指令和表達(dá)式就能將數(shù)據(jù)呈現(xiàn)到界面。如何才能模版中使用這些業(yè)務(wù)數(shù)據(jù)和方法呢？我們需要將這些數(shù)據(jù)和方法寫到scope對(duì)象中,scope對(duì)象定義了對(duì)應(yīng)模版能夠使用的數(shù)據(jù)和方法。bannerCollection service的attach(scope)方法就是將對(duì)應(yīng)的banner數(shù)據(jù)和方法寫到scope對(duì)象中以便能在模版中使用。下面的代碼是在mobile controller中使用bannerCollection service,并通過(guò)其attach方法和對(duì)應(yīng)的scope對(duì)象綁定。

將數(shù)據(jù)和方法注冊(cè)到scope對(duì)象后，我們就可以在模版中使用了。下圖是模版的一部分。

ng-repeat指令用來(lái)展示banner列表，雙花括號(hào)用來(lái)輸出數(shù)據(jù)，ng-click用來(lái)響應(yīng)用點(diǎn)擊。angular框架提供了許多非常有用的內(nèi)建指令，基本上能滿足我們大部分的需求了。除了內(nèi)建指令，angular還為我們提供了自定義指令的接口，通過(guò)自定義指令我們可以擴(kuò)展出非常豐富的web組件。在這個(gè)banner管理頁(yè)面中，有個(gè)上傳banner圖片的功能，我們就可以將其封裝成一個(gè)指令。

如上圖，該指令的實(shí)現(xiàn)主要在link方法中。每個(gè)自定義指令都可以實(shí)現(xiàn)這個(gè)方法，當(dāng)模版引擎在鏈接模版的時(shí)候會(huì)回調(diào)指令的link方法，調(diào)用時(shí)將當(dāng)前的scope和element作為參數(shù)傳進(jìn)來(lái)。link方法非常重要,它體現(xiàn)了指令的本質(zhì)：scope到element之間的一個(gè)橋梁，其實(shí)也就是model到view的一個(gè)橋梁。我們可以在這個(gè)link方法中監(jiān)聽(tīng)element的事件來(lái)響應(yīng)用戶操作并修改scope中的數(shù)據(jù)；也可以監(jiān)聽(tīng)scope中數(shù)據(jù)的變化將其反映到用戶界面上。scope對(duì)象有個(gè)$watch方法，可以通過(guò)該方法去監(jiān)聽(tīng)scope中需要關(guān)心的數(shù)據(jù)的變化。
在這個(gè)圖片上傳的指令中，我們?cè)趌ink方法中監(jiān)聽(tīng)了用戶選擇文件的事件。當(dāng)用戶選擇文件后，通過(guò)post請(qǐng)求將圖片上傳到后臺(tái)生成url和dsfid，同時(shí)更新scope中的img數(shù)據(jù)；ng-repeat指令在監(jiān)聽(tīng)到scope中img數(shù)據(jù)的變化后又會(huì)刷新相應(yīng)的界面展示。

結(jié)語(yǔ)

angular為我們提供了一個(gè)非常好的業(yè)務(wù)邏輯和界面展示邏輯分離的機(jī)制，極大地簡(jiǎn)化了前端開(kāi)發(fā)。特別對(duì)于數(shù)據(jù)型應(yīng)用，angular是非常好的選擇。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78889.html

相關(guān)文章

  • 前端知識(shí)點(diǎn)總結(jié)——Angular

    摘要：前端知識(shí)點(diǎn)總結(jié)一概述基于命令行的開(kāi)發(fā)方式編譯工作集成了打包工具。。。。在瀏覽器中接管展現(xiàn)應(yīng)用的內(nèi)容，并根據(jù)我們提供的操作指令響應(yīng)用戶的交互。在開(kāi)發(fā)時(shí)，八大組成部分模塊組件模板自帶的標(biāo)簽指令綁定相關(guān)的的語(yǔ)法元數(shù)據(jù)告訴如何處理一個(gè)類。 前端知識(shí)點(diǎn)總結(jié)——Angular 一、Angular概述 基于命令行的開(kāi)發(fā)方式？ ①hot reload ②編譯工作 ③集成了webpack打包工具 。。。...

    BaronZhang 評(píng)論0 收藏0

  • 前端每周清單半年盤點(diǎn)之 Angular 篇

    摘要：延伸閱讀學(xué)習(xí)與實(shí)踐資料索引與前端工程化實(shí)踐前端每周清單半年盤點(diǎn)之篇前端每周清單半年盤點(diǎn)之與篇前端每周清單半年盤點(diǎn)之篇 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開(kāi)發(fā)教程、工程實(shí)踐、深度閱讀、開(kāi)源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(hào)（ID：frontshow），及時(shí)獲取前端每周清單；本文則是對(duì)于半年來(lái)發(fā)布的前端每周清單...

    LeviDing 評(píng)論0 收藏0

  • angular2初入眼簾之－多components協(xié)作

    摘要：我們使用了模式書寫，并引入了思想，這些以前只在里見(jiàn)到的設(shè)計(jì)，現(xiàn)在里也有體現(xiàn)，并且在本章中會(huì)著重講解多的協(xié)作。如果之前寫過(guò)，那對(duì)于這種書寫方式一定無(wú)比熟悉。每次數(shù)據(jù)的變更，無(wú)論是還是，都將變化冒泡到，然后由再向下逐級(jí)推送各組件是否重繪。 前集回顧 在上一章里我們講了如何在angular2下開(kāi)發(fā)一個(gè)component(還沒(méi)做的趕緊去學(xué)吧)。我們使用了Unidirectional Data ...

    dreamans 評(píng)論0 收藏0

  • Angular中關(guān)于時(shí)間的操作總結(jié)

    摘要：上顯示出來(lái)時(shí)間本地系統(tǒng)顯示時(shí)間發(fā)送前控制臺(tái)打印出來(lái)瀏覽器網(wǎng)絡(luò)中監(jiān)測(cè)顯示解決方案只有在發(fā)送時(shí)間類型的數(shù)據(jù)時(shí)會(huì)進(jìn)行轉(zhuǎn)換，導(dǎo)致相差個(gè)小時(shí)，但是我發(fā)送前就將其轉(zhuǎn)換成字符串，就不會(huì)造成這樣的結(jié)果了。 創(chuàng)建時(shí)間 使用new Date(),可以看見(jiàn)有5種構(gòu)造函數(shù) showImg(https://segmentfault.com/img/remote/1460000013946509); co...

    mengera88 評(píng)論0 收藏0

  • angular2 + JSSDK的微信分享定制總結(jié)

    摘要：本篇文章就記錄我的做微信分享信息定制的過(guò)程和踩坑總結(jié)。但是，這就要求在每個(gè)組件中都加微信分享代碼，會(huì)導(dǎo)致維護(hù)困難。 在微信瀏覽器內(nèi)打開(kāi)任何網(wǎng)頁(yè)，若不配置分享接口，微信會(huì)默認(rèn)使用如下信息作為分享信息： 默認(rèn)標(biāo)題：HTML的title 默認(rèn)連接：當(dāng)前頁(yè)面的地址，即location.href 默認(rèn)圖片：會(huì)取當(dāng)前頁(yè)面body內(nèi)最前面的一張符合條件的圖片（尺寸必須大于300px × 300px...

    qylost 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<