老铁们,大家好,相信还有很多朋友对于什么是驼峰命名法和html url不建议用驼峰的相关问题不太懂,没关系,今天就由我来为大家分享分享什么是驼峰命名法以及html url不建议用驼峰的问题,文章篇幅可能偏长,希望可以帮助到大家,下面一起来看看吧!
本文目录
什么是驼峰命名法
驼峰命名法是一种命名规范,它是一种用于标识符名称(如变量、函数、类等)的约定。该命名法将多个单词组合在一起时,首字母小写的单词之后的第一个单词的首字母大写,例如myVariable、myFunction、MyClass等。这种命名规范的好处是可以方便人们快速认知标识符的含义,也更符合阅读习惯。此外,驼峰命名法也有其它变体,如Pascal命名法和下划线命名法等。
如何设计一个typed CSS
在平时的工作当中,我们在操作dom的样式的时候,其实操作的就是css的对象模型cssOM,其实在16年的时候,就发布了一组新的对象模型cssTypeOM,这是一个全新的操作css样式的方式,它的好处有很多,我们一一列举。
在讲解cssOM和cssTypeOM的区别的同时,我们要了解浏览器是如何渲染视图的:
1、解析html后构建dom对象
2、解析css后构建cssOM对象
3、浏览器将dom与css组成渲染树
4、最终浏览器渲染到视图中
cssOM
varwidth=100;
document.body.style.width=width+'px';
//需要修改时
document.body.style.width=(width+n(要改变的值))+'px';
复制代码
这就是cssOM目前存在的问题,它没有办法基于目前的值去做属性的变更,如果想在基础上做变更,你还需要去先获取到当前的值(是个字符串),转换成数字,才能去做递增或者递减的操作,这个样子运算成本很大,还会有可能出现不必要的bug。
typedOM
typedOM的出现,给我们对样式的增删改查操作提供了很大的便利,typedOM不同于cssOM,它不是通过字符串表现形式去修改一个值,而是通过map对象的形式去修改一个值,并且,所有属性的名称直接可以按照css样式的方式去设置,不用写驼峰了。
如何确认我们的浏览器,是否支持typedOM呢?
window.CSS&&CSS.number
复制代码
typedOM的操作方式绑定在dom的attributeStyleMap方法上,是一个StylePropertyMap对象,该对象提供了四个方法:
append:
暂时还没有搞明白怎么用,在MDN中的文档中所说的,和实际操作的不同,如果有知道的小伙伴请及时留言,好让我及时跟进文档
set:
dom.attributeStyleMap.set(prop,val)
//示例
document.body.attributeStyleMap.set('width','100px')
//或
document.body.attributeStyleMap.set('width',CSS.px(100))
复制代码
用来设定某一个属性。
clear:
dom.attributeStyleMap.clear()
复制代码
用来清除所有StylePropertyMap中设置的属性,但是并不会清除掉样式表当中设置的属性。
delete:
dom.attributeStyleMap.delete(prop)
复制代码
用来清除某一个指定的属性,但是并不会清除掉样式表当中设置的属性。
在StylePropertyMap的原型链上,还有一个get方法,可以通过传对应的prop,并返回一个对象,对象里面包括两个值,一个是对应的数值,一个是该属性值的单位:
dom.attributeStyleMap.get('width')
//{value:100,unit:"px"}
复制代码
总结
其实,csstypedOM远不止我文档里面写的这些,还有很多数学操作的方法,便于我们更快的进行计算。
综上所述,我们其实可以看出来一些csstypedOM的优势了,这里我在总结一下:
1、最大限度的降低了通过字符串表现形式去修改css样式,降低了出现此类bug的风险
2、通过csstypedOM的运算方法,最短时间最快的去进行样式运算
3、错误处理,如果有接收到错误的css,就会直接抛出错误,方便在最短的时间去定位问题
4、由于dom上的attributeStyleMap方法是一个StylePropertyMap对象,所以方便使用所有的map对象的方法
5、更好的性能!!!由于减少了字符串操作,对于CSSOM的操作性能得到了更进一步的提升,由TabAkins提供的测试表明,操作TypedOM比直接操作CSSOM字符串带来了大约30%的速度提升
浏览器兼容
该api在部分浏览器支持方面,可能会比较差,建议如果想提升性能的同时,又需要兼容n种浏览器,请提前写好兼容性代码,保证用户体验。
OK,关于什么是驼峰命名法和html url不建议用驼峰的内容到此结束了,希望对大家有所帮助。