皮皮网

1.Web前端开发主要学哪些？
2.读Zepto源码之Data模块

Web前端开发主要学哪些？

       å‰ç«¯çŸ¥è¯†æ˜¯ä¸€ç§å¾ˆç«çš„技术，一直在编程语言中名列前茅，而且随着浏览器技术不断发展，还有会很多扩展的可能性，比如3D可视化，谷歌发布一个全新的图形工具TensorFlow Graphics，结合计算机图形学和计算机视觉技术，以无监督的方式解决复杂3D视觉任务，无疑谷歌浏览器也会支持3D图像，前端技术实现在线可视化开发，基于webgl的3D框架有thingjs，three.js。

       thingjs是这两年新兴的3D框架，更加简单，官网有注册优惠别错过~理论知识是基础，对于前端开发者来说，技术应用是进一步的需求，所以thingjs提供免费3D源码和3D模型库，让你在项目开发过程中有东风助力，在实操的过程中你会更好地吸收前端技术知识！

       å‰ç«¯æŠ€æœ¯è‚¯å®šä¸æ˜¯æœ€ç»ˆçš„目的，做成一个有价值的商业项目，才能让你更有成就感！

读Zepto源码之Data模块

       Zepto的码析Data模块主要负责处理DOM节点的数据，包括获取和存储与DOM相关的码析信息。本文将深度解析Data模块的码析工作机制，以Zepto1.2.0版本的码析源码为例。《reading-zepto》在GitHub上开源，码析欢迎star。码析httpclient源码超时

       在内部方法中，码析attributeData负责获取节点中所有data-*属性的码析值，并将它们存储到store对象中。码析node.attributes获取的码析是所有属性，所以遍历时需要判断属性名是码析否以"data-"开头。存储时，码析去掉"data-"并转换为驼峰式，码析作为store对象的码析键。属性值默认为字符串，码析7的源码是怎么来的为方便操作，通过deserializeValue方法转换成对应的数据类型。

       setData方法用于存储数据，通常不需要写入DOM，而是在内存中进行操作。它首先读取node的exp属性，以确保属性名的补码为8ah的源码唯一性，避免覆盖用户自定义属性。如果node尚未标记exp，则设置数据存储。从data中获取缓存数据，如果为空，则调用attributeData获取所有data-*属性的值并缓存。

       getData方法根据指定的抢拍竞拍转售溢价商城源码属性名获取缓存值。没有指定名则返回所有缓存，缓存为空则调用setData。如果指定name在store中，则返回结果。兼容camel-name参数形式，提供更灵活的API。如果store中未找到，泰拉瑞亚吸血飞刀源码则返回通过$.fn.data查找的结果。

       data方法能设置或获取节点的缓存数据，调用setData或getData。当传递name和value时，设置缓存，遍历所有元素进行设置。对于对象传值，遍历设置缓存。最后返回第一个元素的name缓存。

       removeData方法用于删除缓存数据。若无参数，则清空所有，若有参数则仅删除指定数据。names为字符串时先转换为数组，遍历元素进行删除操作，根据names删除指定数据或清空store缓存。

       .remove和.empty方法在移除DOM节点后，需要清空对应节点的数据以释放内存。elements包含所有子节点，如果是.remove方法，自身也被移除，因此加入到要删除的节点中。最后调用removeData方法清空数据，再移除节点。

       $.data方法最终调用DOM的.data方法。$.hasData判断元素是否有缓存数据。通过从缓存中获取对应DOM的缓存store，若store存在且不为空，则返回true，反之返回false。

       所有文章在微信公众号上同步发布，欢迎关注和提出宝贵意见。