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

相关推荐
m0_748247552 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255022 小时前
前端常用算法集合
前端·算法
真的很上进3 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203983 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2343 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1234 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~4 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语4 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport4 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg4 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全