• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

如何设计一个typed_CSS学习

当前位置：网站建设 > 技术支持

如何设计一个typed？

在平时的工作当中，我们在操作dom的样式的时候，其实操作的就是css的对象模型cssOM，其实在16年的时候，就发布了一组新的对象模型cssTypeOM，这是一个全新的操作css样式的方式，它的好处有很多，我们一一列举。

在讲解cssOM和cssTypeOM的区别的同时，我们要了解浏览器是如何渲染视图的：

1、解析html后构建dom对象

2、解析css后构建cssOM对象

3、浏览器将dom与css组成渲染树

4、最终浏览器渲染到视图中

cssOM

var width = 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"}

复制代码

总结

其实，css typed OM远不止我文档里面写的这些，还有很多数学操作的方法，便于我们更快的进行计算。

综上所述，我们其实可以看出来一些css typed OM的优势了，这里我在总结一下：

1、最大限度的降低了通过字符串表现形式去修改css样式，降低了出现此类bug的风险

2、通过css typed OM的运算方法，最短时间最快的去进行样式运算

3、错误处理，如果有接收到错误的css，就会直接抛出错误，方便在最短的时间去定位问题

4、由于dom上的attributeStyleMap方法是一个StylePropertyMap对象，所以方便使用所有的map对象的方法

5、更好的性能！！！由于减少了字符串操作，对于 CSSOM 的操作性能得到了更进一步的提升，由 Tab Akins 提供的测试表明，操作 Typed OM 比直接操作 CSSOM 字符串带来了大约 30% 的速度提升

浏览器兼容

该api在部分浏览器支持方面，可能会比较差，建议如果想提升性能的同时，又需要兼容n种浏览器，请提前写好兼容性代码，保证用户体验。

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。