分类 大前端 下的文章

jQuery源码分析(三):构造器


起步

这篇是对上一篇的一个补充,静态与实例方法共享设计的在上一篇也提过了:

$(".xx").each()    //作为实例方法存在
$.each()           //作为静态方法存在

源码中:

jQuery.fn = jQuery.prototype = {
    each: function( callback, args ) {
        return jQuery.each( this, callback, args );
    }
};

实例方法取于静态方法,这就是静态与实例方法共享设计。所以jQuery通过2个构造器划分2种不同的调用方式一种是静态,一种是原型。


jQuery源码分析(二):无new构建原理


起步

jQuery里面,你既可以用$.isArray()调用jq的静态方法,也可以通过$().css()获取对象执行对象方法。

在js中,要实现一个变量既能被new,又能调用它的方法,其实不难实现:

var a = function () {};
a.func = function () {alert("静态方法");};
a.prototype.t = function () {alert("对象方法");};

var t = new a();
t.t();
a.func();


jQuery源码分析(一):立即调用函数


起步

想看jquery源码已经很久了,用它来dom、动画、事件等操作真是太方便了。终于有个时间来看看源码,结构清晰,模块紧凑,很适合有点小空闲就拿出来阅读,第一次读觉得枯燥无味,多次看就会赞叹它的精妙无比。

应该是会有版本之间的差异,我看的版本是2.14。


Diigo技术调研


简介:

Diigo:像在本子上一样为网页做笔记,后面再进入(本地)该页面会显示原来做的笔记

功能调研

功能一:选择一段文字 可以设置背景颜色

diigo不支持选择文字的再选择,我们调研时 做成可再选择的。 比如一段

<div class="test">
    <p>对于选中的一段文本 应该记录其在dom节点的所有段 给其加标签</p>

    <ol>
        什么鬼啊
        <li>回复数阿飞</li>
        666
        <li>找商店帖</li>
        <li>言论是对的,在100年</li>
    </ol>
</div>

然后选中了

                                             有段 给其加标签</p>

    <ol>
        什么鬼啊
        <li>回复数阿飞</li>
        666
        <li>找商

如果是直接输出window.getSelection()的话是有段 给其加标签什么鬼啊回复数阿飞666找商 与标签无关,没有任何意义 这时候应该按如下步骤去操作:

获取Range

var range=window.getSelection().getRangeAt(0);

什么是Range及用法请参考这里

利用Range得到选中文字两端所在的dom节点

var startNode = range.startContainer; //得到‘选择文字’左部所在的容器节点(文本节点,nodeType=3)
//如这边startNode.nodeName是#text 而不是p
var endNode = range.endContainer; 
//文本节点获取其父节点:Element节点 用parentElement 也可以
//不能只记录父节点,需要记录父节点的第几个#TEXT 因为文本节点的父节点不一样只有一个child文本节点 如本例中的<ol>
//不能记录文本节点,因为getElementsByTagName不支持search #TEXT
var startParentNode = startNode.parentNode;
var endParentNode = endNode.parentNode;


video标签下触摸坐标归一化[考虑全屏,转屏,PC/Mobile Web/WebView]


先给出一些基本知识

触摸点位置

clientX / clientY:// 触摸点相对于浏览器窗口viewport的位置  参照点会随着浏览器的滚动而变化
pageX / pageY:// 触摸点相对于页面的位置  参照点不会随着浏览器的滚动而变化
screenX /screenY:// 触摸点相对于屏幕的位置 

所以如果要算鼠标在当前div的相对位置 通过获取var offset = $("#mainScreen").offset();后 当前鼠标的绝对位置要用pageX/Y去拿 否则浏览器页面滚动后会少算一段

触摸事件

PC

onmousemove script  当鼠标指针移动到元素上时触发。
onmouseout  script  当鼠标指针移出元素时触发。
onmouseup 属性在松开鼠标按钮时触发。
提示:相对于 onmouseup 事件的事件次序(限于鼠标左/中键):
onmousedown
onmouseup
onclick
onmouseup 事件的事件次序(限于鼠标右键):
onmousedown
onmouseup
oncontextmenu
onMouseover和onMousemove有什么区别?
区别是进入后onmousemove鼠标每动一下都会执行事件,onmouseover只在鼠标进入时执行一次

Mobile

基本事件如下,其他的都是对这些事件的组合封装

mainScreen.addEventListener("touchmove", touchMove, false);//手指在屏幕上移动时触发[不动但停留太久也会触发]
mainScreen.addEventListener("touchstart", touchStart, false);//手指一触摸屏幕就触发
mainScreen.addEventListener("touchend", touchEnd, false);//手指离开屏幕触发