jQuery源码学习

jquery工具方法学习及原理

now
    用法： jquery.now
    作用： 获取距离1979年1月1日到现在的毫秒数
    原理： 是利用原生ECMA5 Date.now 属性
    
Callbacks
    用法： var a = jquery.Callbacks(); a.add( fn )添加或者a.fire()触发
    作用： 对函数的统一管理。通过add方法把函数放到队列当中， 通过fire进行触发。
    原理： 利用数组push方法， 把方法push进数组里面，然后调用fire方法的时候循环进行触发

Defered
    用法： 和Callbacks用法类似。
    作用： 对异步的统一管理。
    原理： 底层调用的是Callbacks方法， 使用的是观察者模式
    
queue
    用法： jquery.queue(elem , name , fn )
    作用： 入队操作。用的一般不是太多， 主要就是用来做动画队列的，了解下就行
    原理：相当于把函数push到数组里面。
    
dequeue
    用法： jquery.dequeue( elem , name )
    作用： 出队操作
    原理： 利用数组的shift()方法， 对数组的第一个函数进行触发。
    

jquery的一些实例方法用法及原理

data
    用法： $(elem).data();
    作用： 和attr方法相识， 都是给DOM元素上面增加自定义的属性， 不过data方法一般是用来设置比较大的数据。
    原理： 为了防止内存泄漏，data的设计用了映射。然后核心的原理用到了Object.defineProperty()这个方法 ， 目的是自定义的属性，不允许被修改。vue的核心原理也是用的defineProperty这个方法， 大家可以百度下。

queue
    用法： $(elem).queue();
    作用： 入队
    原理： 调用的工具方法queue

dequeue
    用法： $(elem).dequeue()
    作用： 出队
    原理： 调用工具方法dequeue
    
delay
    用法： $(elem).delay()
    作用： 延迟队列的方法 ， 实际开发我们用这些东西几乎用不到
    原理： 利用setTimeOut定时器做的。
    
clearqueue
    作用： 清楚队列，一般用不到
    原理： this.queue( [] );
    

前端老司机必备知识

在我们写移动端的时候，一般字体的大小是用media控制， 类似这样的：

@media only screen and (max-width: 1920px) and (min-width: 720px) { body{ font-size: 20px; }.viewport{max-width: 720px;}}
@media only screen and (max-width: 719px) and (min-width:690px) { body{ font-size: 19.4444px; }.viewport{max-width: 700px;}}
@media only screen and (max-width: 689px) and (min-width:660px) { body{ font-size: 18.6331px; }.viewport{max-width: 689px;}}
@media only screen and (max-width: 659px) and (min-width:630px) { body{ font-size: 17.8217px; }.viewport{max-width: 659px;}}
@media only screen and (max-width: 629px) and (min-width:600px) { body{ font-size: 17.0103px; }.viewport{max-width: 629px;}}

但是这样做并不能百分百的按照设计图的尺寸来， 即使media写的再详细， 并且在字体方面更加难控制， 有时候因为设计的不合理， 字体在小分辨率下会掉下来。难以控制。

所以针对这种情况。淘宝团队是这样做的。 可以百分百的还原设计图。
原理 ： 利用屏幕的物理尺寸 除以  一个系数。 这个系数一般选为设计图的尺寸/100 。这样做的目的比较好计算。 单位是rem。因为rem是基于html的字体大小变化的。
代码 ： document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.2 + “px”;
例如 ： 当前设计图是720PX 。 那么当前最终计算的HTML的font-size就是100px;  设计图head部分的高是90px;  那么你页面当中的head就可以设为0.9rem;  真正做到的100%还原设计图。
弊端 ： 就是每次屏幕大小发生改变时。 页面不会发生变化。 不过这种情况在真正上线是不存在的。 因为你见过手机的浏览器可以拉大拉小吗？

是不是get到了

欢迎分享本文，转载请保留出处：前端ABC » jQuery源码学习