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 1string 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 = 0const 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 = 0const 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