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}`- styles设置样式属性
- props设置标签属性
- 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