Categories: CoffeeScript 教程

CoffeeScript 修饰模式

修饰模式

问题

你有一组数据,需要在多个过程、可能变换的方式下处理。

解决方案

使用修饰模式来构造如何更改应用。

miniMarkdown = (line) ->
    if match = line.match /^(#+)s*(.*)$/
        headerLevel = match[1].length
        headerText = match[2]
        "<h#{headerLevel}>#{headerText}</h#{headerLevel}>"
    else
        if line.length > 0
            "<p>#{line}</p>"
        else
            

stripComments = (line) ->
    line.replace /s*//.*$/,  # Removes one-line, double-slash C-style comments

class TextProcessor
    constructor: (@processors) ->

    reducer: (existing, processor) ->
        if processor
            processor(existing or )
        else
            existing
    processLine: (text) ->
        @processors.reduce @reducer, text
    processString: (text) ->
        (@processLine(line) for line in text.split("
")).join("
")

exampleText = 
              # A level 1 header
              A regular line
              // a comment
              ## A level 2 header
              A line // with a comment
              

processor = new TextProcessor [stripComments, miniMarkdown]

processor.processString exampleText

# => "<h1>A level 1 header</h1>
<p>A regular line</p>

<h2>A level 2 header</h2>
<p>A line</p>"

结果

<h1>A level 1 header</h1>
<p>A regular line</p>

<h2>A level 1 header</h2>
<p>A line</p>

讨论

TextProcessor服务有修饰的作用,可将个人、专业文本处理器绑定在一起。这使miniMarkdown和stripComments组件只专注于处理一行文本。未来的开发人员只需要编写函数返回一个字符串,并将它添加到阵列的处理器即可。

我们甚至可以修改现有的修饰对象动态:

smilies =
    :) : "smile"
    :D : "huge_grin"
    :( : "frown"
    ;) : "wink"

smilieExpander = (line) ->
    if line
        (line = line.replace symbol, "<img src=#{text}.png alt=#{text} />") for symbol, text of smilies
    line

processor.processors.unshift smilieExpander

processor.processString "# A header that makes you :) // you may even laugh"

# => "<h1>A header that makes you <img src=smile.png alt=smile /></h1>"

processor.processors.shift()

# => "<h1>A header that makes you :)</h1>"
admin

这个人很懒,什么都没有留下~

Share
Published by
admin

Recent Posts

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

3 天 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

1 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

2 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

2 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

3 周 ago