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源码学习

赞 (1)
分享到:更多 ()

发表评论 0