网站建设推广 公司,海口 网站开发,网站建设运行状况,ui设计师找工作es6字符串模板
我们经常搞前端开发工作的都会用到。它可以保留字符串换行格式#xff0c;还能接受变量。这个给前端的字符串拼接带来了非常大的方便。但是还有一种用法可能是我们平时还是没有怎么用到的。
styled-components
在项目中熟悉使用react的童鞋可能会用过styled-…es6字符串模板
我们经常搞前端开发工作的都会用到。它可以保留字符串换行格式还能接受变量。这个给前端的字符串拼接带来了非常大的方便。但是还有一种用法可能是我们平时还是没有怎么用到的。
styled-components
在项目中熟悉使用react的童鞋可能会用过styled-components它的写法如下
const Title styled.h1font-size: 1.5em;text-align: center;color: palevioletred;
;
效果
最终就是生成一个带有上面样式属性的h1标签。
es6基础
这里看到它用到的就是es6的字符串模板。一开始我以为是预编译工具的语法。后面重温js基础时候看到了这个
string textstring text line 1string text line 2string text ${expression} string texttagFunctionstring text ${expression} string textdeveloper.mozilla.org
代码来源模板字符串 - JavaScript | MDN
字符串模板前面是可以接受函数名字的而这个函数的参数 arguments的内容是个数组数组的第一个值是所有普通字符串的数组剩余的元素是模板里面变量值
例如上面的代码tagFunctionstring text ${expression} string text
假设expression遍历的值是100tagFunction的arguments的值就是
[[string text,string text],100,
...其他变量值 //这里只有一个变量所以不存在其他变量值] 所以我们可以理解是执行了tagFunction函数并给该函数传递了解析字符串string text ${expression} string text对象
新的书写风格
既然是执行函数那函数是可以返回值的那我们可以在这个函数里面return个函数这样我们就有机会把代码写成这样 alink.stylescolor:${color};font-size:16px;background-color:${bgColor};.propshref:${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对象进行解析得到keyvalue
解析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 redvar bgColor bluevar url http://baidu.comalink.stylescolor:${color};font-size:16px;background-color:${bgColor};.propshref:${url};tabIndex:1;.content跳转到${url}
在线效果
https://jsbin.com/kawumewoto/4/edit?html,js,output
