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。码析网站源码系统
在内部方法中,码析attributeData负责获取节点中所有data-*属性的码析值,并将它们存储到store对象中。码析node.attributes获取的码析是所有属性,所以遍历时需要判断属性名是码析否以"data-"开头。存储时,码析去掉"data-"并转换为驼峰式,码析作为store对象的码析键。属性值默认为字符串,码析web 源码下载为方便操作,通过deserializeValue方法转换成对应的数据类型。
setData方法用于存储数据,通常不需要写入DOM,而是在内存中进行操作。它首先读取node的exp属性,以确保属性名的web源码下载唯一性,避免覆盖用户自定义属性。如果node尚未标记exp,则设置数据存储。从data中获取缓存数据,如果为空,则调用attributeData获取所有data-*属性的值并缓存。
getData方法根据指定的http在源码属性名获取缓存值。没有指定名则返回所有缓存,缓存为空则调用setData。如果指定name在store中,则返回结果。兼容camel-name参数形式,提供更灵活的API。如果store中未找到,macd 源码则返回通过$.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。
所有文章在微信公众号上同步发布,欢迎关注和提出宝贵意见。
2024-12-24 10:39
2024-12-24 10:28
2024-12-24 10:17
2024-12-24 09:42
2024-12-24 09:04
2024-12-24 08:54
2024-12-24 08:37
2024-12-24 08:35