es6字符串模板之标签化模板

es6字符串模板

我们经常搞前端开发工作的都会用到。它可以保留字符串换行格式，还能接受变量。这个给前端的字符串拼接带来了非常大的方便。但是还有一种用法可能是我们平时还是没有怎么用到的。

styled-components

在项目中熟悉使用react的童鞋可能会用过styled-components，它的写法如下：

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

效果

最终就是生成一个带有上面样式属性的h1标签。

es6基础

这里看到它用到的就是es6的字符串模板。一开始我以为是预编译工具的语法。后面重温js基础时候看到了这个：

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`

developer.mozilla.org

代码来源：模板字符串 - JavaScript | MDN

字符串模板前面是可以接受函数名字的，而这个函数的参数 arguments的内容是个数组，数组的第一个值是所有普通字符串的数组，剩余的元素是模板里面变量值

例如上面的代码tagFunction`string text ${expression} string text`

假设expression遍历的值是100，tagFunction的arguments的值就是

[

["string text","string text"],

100,
...其他变量值 //这里只有一个变量，所以不存在其他变量值

]

 所以，我们可以理解是执行了tagFunction函数并给该函数传递了解析字符串`string text ${expression} string text`对象

新的书写风格

既然是执行函数，那函数是可以返回值的，那我们可以在这个函数里面return个函数，这样我们就有机会把代码写成这样

alink.styles`
        color:${color};
        font-size:16px;
        background-color:${bgColor};
`
.props`
            href:${url};
            tabIndex:1;
        `
.content`跳转到：${url}`

1. styles设置样式属性
2. props设置标签属性
3. content设置标签内容 

HTMLElement对象拓展

那我们给html标签对象进行拓展方法如下：

 HTMLElement.prototype.styles = function () {
            return this
}
HTMLElement.prototype.props = function () {

            return this
}
HTMLElement.prototype.content = function () {

            return this
}

还需要对 arguments对象进行解析，得到key，value

解析arguments

const getAttAndValueString = (args, isContent) => {
            let startIndex = 0
            const attr = args[0].map((item) => {
                return item.replace('\n', '').replace(/\s/g, '').trim()
            }).filter(item => item)
            const value = args.slice(1).filter(item => item)
            let resultString = ''
            attr.forEach((element, index) => {
                if (element.endsWith(':') || isContent) {
                    resultString += `${element}${value[startIndex]}`
                    startIndex++
                } else {
                    resultString += `${element}`
                }
            })
            return resultString
}

最终代码

  const getAttAndValueString = (args, isContent) => {
            let startIndex = 0
            const attr = args[0].map((item) => {
                return item.replace('\n', '').replace(/\s/g, '').trim()
            }).filter(item => item)
            const value = args.slice(1).filter(item => item)
            let resultString = ''
            attr.forEach((element, index) => {
                if (element.endsWith(':') || isContent) {
                    resultString += `${element}${value[startIndex]}`
                    startIndex++
                } else {
                    resultString += `${element}`
                }
            })
            return resultString
        }
        HTMLElement.prototype.styles = function () {
            let resultString = getAttAndValueString(Array.from(arguments))
            console.log("resultString", resultString)
            const styleAttr = this.getAttribute("style");
            if (styleAttr) {
                resultString = `${styleAttr.endsWith(";") ? styleAttr : styleAttr + ";"} ${resultString}`
            }
            this.setAttribute("style", resultString);
            return this
        }
        HTMLElement.prototype.props = function () {
            // let resultString = getAttAndValueString(Array.from(arguments))
            // let obj = resultString.split(";").filter(item => item.length > 0)
            // obj.forEach(item => {
            //     const [prop, ...value] = item.split(":");
            //     this.setAttribute(prop, value.join(":"))
            // })
            return this
        }
        HTMLElement.prototype.content = function () {
            // this.innerText = getAttAndValueString(Array.from(arguments), true)
            return this
        }
        var alink = document.querySelector('#alink')
        var color = 'red'
        var bgColor = 'blue'
        var url = 'http://baidu.com'
        alink.styles`
        color:${color};
        font-size:16px;
        background-color:${bgColor};
        `.props`
            href:${url};
            tabIndex:1;
        `.content`跳转到：${url}`

在线效果

https://jsbin.com/kawumewoto/4/edit?html,js,output