皮皮网

1.zeptoԴ??
2.前端开发和web前端开发的区别
3.读Zepto源码之Data模块

zeptoԴ??

       在 zepto 源码中，$.fn 对象有个 ready 函数，其中有这样一句 setTimeout(fn,0);

       时间设为 0 ，就是要立即执行，那为什么还要特意将 fn 套到 setTimeout 里面呢？

       一、线程

       1、外国电商源码浏览器的内核是多线程的，它们在内核控制下相互配合以保持同步，一个浏览器通常由以下常驻线程组成：GUI 渲染线程，javascript 引擎线程，浏览器事件触发线程，定时触发器线程，异步 http 请求线程。qftp 源码

       2、javascript 是单线程的，同一个时间只能做一件事。

       二、任务队列（消息队列）

       同步函数：如果在函数A返回的时候，调用者就能够得到预期结果(即拿到了预期的返回值或者看到了预期的效果)，那么这个函数就是同步的。

       异步函数即如果在函数A返回的时候，调用者还不能够得到预期结果，而是需要在将来通过一定的手段得到，那么这个函数就是异步的。

       三、漏洞 源码setTimeout(fn, 0) 的作用

       调用 setTimeout 函数会在一个时间段过去后在队列中添加一个消息。这个时间段作为函数的第二个参数被传入。如果队列中没有其它消息，消息会被马上处理。但是，如果有其它消息，setTimeout 消息必须等待其它消息处理完。因此第二个参数仅仅表示最少的时间，而非确切的时间。

       零延迟 (Zero delay) 并不是意味着回调会立即执行。在零延迟调用 setTimeout 时，其并不是-32源码过了给定的时间间隔后就马上执行回调函数。其等待的时间基于队列里正在等待的消息数量。也就是说，setTimeout()只是将事件插入了任务队列，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。要是当前代码耗时很长，有可能要等很久，所以并没有办法保证回调函数一定会在setTimeout()指定的时间执行。

前端开发和web前端开发的区别

       ç§»åŠ¨å‰ç«¯å¼€å‘å’Œweb前端开发都属于前端开发，具体有以下区别。

       1、业务的应用场景

       web前端开发主要指传统的PC端网页开发，页面主要是运行在PC端浏览器中，移动前端开发出来的页面主要是运行在手机上。

       ç›´è§‚上会感觉，PC端页面大一些，移动端页面小一些，但是根据开发经验，页面大可并不代表书写的代码复杂，页面小也并不意味着开发简单，难与易主要还是取决于具体的业务需求。

       2、新技术的使用

       ç”±äºŽåœ¨ç§»åŠ¨ç«¯ä¸»è¦ä»¥webkit内核为主，对于HTML5等新技术支持的更好，所以可以更大范围的使用新技术，而PC端开发由于很多场景下要求兼容IE等老版本浏览器，出于浏览器兼容性的考虑，有些情况下限制了新技术的使用。

       3、页面的适配性

       ä¼ ç»ŸPC端的页面开发一般都会选择给页面设定一个固定宽度，两侧有留白，但是移动端的页面由于其载体手机屏幕比PC要小很多，一般都会选择尽可能多的在手机屏幕上显示内容，这就要求移动端页面要能够充分适应各种屏幕尺寸的手机并进行最大程度的利用。

       ä»Žè¿™ä¸€ç‚¹ä¸Šæ¥è¯´ç§»åŠ¨ç«¯é¡µé¢çš„适配难度更高一些。

       4、页面的性能

       PC端的网络情况一般比较稳定，都是通过网线或者Wi-Fi连接网络，但是移动端就比较复杂，除了Wi-Fi，还有2G、3G、4G甚至是在几种不同的网络连接中交替切换也经常发生。

       ä¸ç¨³å®šçš„网络连接对页面性能带来的挑战是移动端的页面资源不能太大，否则在恶劣网络情况下时，页面将会无法访问 ，严重影响用户体验。

       5、框架选型

       ç”±äºŽç§»åŠ¨ç«¯ç½‘络情况的不稳定，导致我们在移动端页面框架选型时，一般只考虑小而美的框架，例如像zepto.js这样的压缩之后只有9.6K，就能满足一般业务的需要，如果是想要构建更复杂的单页面应用，可以选择像vue.js这样的框架，功能强大，但体积压缩后却只有多K。

       è€Œweb端相对选择的范围就比较大，一些比较重型的框架也可以根据项目需求加以考虑，例如古老但庞大的ext.js，依然凭借着众多UI组件活跃在一些企业的后台管理系统项目中。

扩展资料

       Web前端开发需要掌握的技术：

       1、熟练掌握前端开发技术(HTML5、JS、JSON、XHTML、CSS3)，了解各项技术的相关标准。

       2、掌握Ajax异步编程，能够写出高性能、可复用的前端组件。

       3、对OO、MVC、MVVM等编程思想、前端框架有深刻理解，熟练掌握一个前端框架（常用前端框架 Vuejs，AngularJS，React，Bootstrap，QUICK UI，移动端有：Frozen UI，weUI ，SUI，MUI，AUI）了解其原理（框架有很多，选择两三个主流的框架，熟练，深度了解才可以）。

       4、善于Web性能优化，可访问性、对SEO等有良好的体验；理解表现层与数据层分离的概念、 Web语义化（这些也是在找工作中，很有用的加分项）。

       5、了解前端安全机制，熟悉HTTP协议以及浏览器缓存策略。

       6、熟悉常见JS开发框架源码实现，（如：prototype、jQuery、Mootools，Ext， Dojo，underscore、YUI、Kissy），至少熟练一种（当然也不要去选一些用的人很少的框架，要明白大项目都是团队做，不能自己搞一套）。

       7、拥有良好的代码编写，设计文档撰写的经验，熟练使用Git等版本控制工具。

       8、对常见的浏览器兼容问题有清晰的理解，并有可靠的解决方案，如IE6/7/8/9、 Firefox、Safari、Chrome。

       9、具有较高的审美（这个很重要，多去见识一些模板，高端的项目，就能感觉到有多大的差距）。

读Zepto源码之Data模块

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

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

       setData方法用于存储数据，通常不需要写入DOM，而是在内存中进行操作。它首先读取node的exp属性，以确保属性名的唯一性，避免覆盖用户自定义属性。如果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。

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