Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
本的字體、大小、顏色和樣式
CSS 美化文本可以通過以下方式實現:
以下是一些示例代碼:
/* 設置字體樣式 */
p {
font-family: Arial, sans-serif;
}
/* 設置字體大小 */
h1 {
font-size: 24px;
}
/* 設置字體粗細 */
strong {
font-weight: bold;
}
/* 設置字體樣式 */
em {
font-style: italic;
}
/* 設置文本對齊 */
ul {
text-align: left;
}
/* 設置文本裝飾 */
a {
text-decoration: underline;
}
/* 設置文本顏色 */
h2 {
color: #FF0000;
}
/* 設置文字陰影 */
h3 {
text-shadow: 2px 2px 2px #000;
}
/* 設置文字轉換 */
p {
text-transform: capitalize;
}
/* 設置文字間距 */
p {
letter-spacing: 1px;
}
/* 設置文字行高 */
p {
line-height: 1.5;
}
CSS文本的對齊、縮進和行高可以通過以下屬性進行設置:
p { text-align: center; }
p { text-indent: 2em; }
p { line-height: 1.5; }
CSS文本的裝飾和轉換可以通過以下屬性進行設置:
p { text-decoration: underline; }
h1 { text-transform: uppercase; }
p { text-shadow: 2px 2px 4px #000000; }
傳統的面向對象語言中,給對象添加功能常常使用繼承的方式,但是繼承的方式并不靈活, 還會帶來許多問題:一方面會導致超類和子類之間存在強耦合性,當超類改變時,子類也會隨之 改變;另一方面,繼承這種功能復用方式通常被稱為“白箱復用”,“白箱”是相對可見性而言的, 在繼承方式中,超類的內部細節是對子類可見的,繼承常常被認為破壞了封裝性。裝飾者模式能夠在不改變對象自身的基礎上,在程序運行期間給對象動態地添加職責。跟繼承相比,裝飾者是一種更輕便靈活的做法,這是一種“即用即付”的方式
背景
當我們拍了一張照片準備發朋友圈時,許多小伙伴會選擇給照片加上濾鏡。同一張照片、不同的濾鏡組合起來就會有不同的體驗。這里實際上就應用了裝飾者模式:是通過濾鏡裝飾了照片。在不改變對象(照片)的情況下動態的為其添加功能(濾鏡)。
需要注意的是:由于 JavaScript 語言動態的特性,我們很容易就能改變某個對象(JavaScript 中函數是一等公民)。但是我們要盡量避免直接改寫某個函數,這會導致代碼的可維護性、可擴展性變差,甚至會污染其他業務。
什么是 AOP
想必大家對"餐前洗手、飯后漱口"都不陌生。這句標語其實就是 AOP 在生活中的例子:吃飯這個動作相當于切點,我們可以在這個切點前、后插入其它如洗手等動作。
AOP(Aspect-Oriented Programming):面向切面編程,是對 OOP 的補充。利用AOP可以對業務邏輯的各個部分進行隔離,也可以隔離業務無關的功能比如日志上報、異常處理等,從而使得業務邏輯各部分之間的耦合度降低,提高業務無關的功能的復用性,也就提高了開發的效率。
在 JavaScript 中,我們可以通過裝飾者模式來實現 AOP,但是兩者并不是一個維度的概念。 AOP 是一種編程范式,而裝飾者是一種設計模式。
ES3
了解了裝飾者模式和 AOP 的概念之后,我們寫一段能夠兼容 ES3 的代碼來實現裝飾者模式:
這樣我們就實現了抽離拍照與濾鏡邏輯,如果以后需要自動上傳功能,也可以通過aop函數after來添加。如果我們把它加到函數原型鏈上,Function.prototype.before 方法和 Function.prototype.after 方法如下圖,
那么使用起來就更加方便了
ES5
在 ES5 中引入了Object.defineProperty,我們可以更方便的給對象添加屬性:
基于原型鏈和類的裝飾者實現
我們知道,在 JavaScript 中,函數也好,類也好都有著自己的原型,通過原型鏈我們也能夠很方便的動態擴展,以下是基于原型鏈的寫法:
使用 ES7 修飾器實現裝飾者
在 ES7 中引入了@decorator 修飾器的提案,參考阮一峰的文章。修飾器是一個函數,用來修改類的行為。目前Babel轉碼器已經支持。注意修飾器只能裝飾類或者類屬性、方法。三者的具體區別請參考 MDN Object.defineProperty ;而 TypeScript 的實現又有所不同:TypeScript Decorator。
可以看到,使用修飾器的代碼非常簡潔明了。
場景:性能上報
裝飾者模式可以應用在很多場景,典型的場景是記錄某異步請求請求耗時的性能數據并上報:
這樣使用@report修飾后的代碼就會上報請求所消耗的時間。擴展或者修改report函數不會影響業務代碼,反之亦然。
場景:異常處理
我們可以對原有代碼進行簡單的異常處理,而無需侵入式的修改:
通過以上兩個示例我們可以看到,修飾器的定義很簡單,功能卻非常強大,尤其是在nodejs的開發中,裝飾器很常用、很好用,也很有用。
小結
我們一步一步通過高階函數、原型鏈、Object.defineProperty和@Decorator分別實現了裝飾者模式。接下來在回顧一下:
微信小程序視頻教程來啦,每周末都有前端視頻教程學
參考文章:
https://juejin.im/post/5d0f5dd551882532d72507f2
https://juejin.im/post/5c2e10a76fb9a049c0432697
eb前端開發課程:css文本模塊-文本裝飾。
講課人:波波老師。
text-decoration:文字添加裝飾。line-height:行高。text-shadow:文字添加陰影。text-align:文字水平對齊方式。word-break:文本自動換行。word-wrap:長單詞自動換行。
text-decoration文本的裝飾主要用于設置文本的上劃線、下劃線和中劃線,也就是刪除線。這個功能最主要的用處是處理鏈接默認自帶的下劃線。
來看一下代碼。
·首先來做一個鏈接,可以看到這個鏈接是帶一個下劃線的,把下劃線去掉。text-decoration:none,可以看到下劃線就去掉了。
·然后再來做class="under",等于下部。class="over",這個class="del"。從下劃線、上劃線、刪除線。
·來做這三個樣式。首先是得.under,把它做成underline,可以看underline是有下劃線的。再做一個overline,做成overline,overline是上劃線。這個有點近了,把它分開,這回可以看到這個是有上劃線的。再做一個刪除線,del,看到這個做了一個刪除線。
這個先講到這里,進行下一個。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。