分类 大前端 下的文章

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);//手指离开屏幕触发


form中好用却不常见的 accept-charset 属性


起步

我们曾用过不同的编码来做过页面UTF-8GB2312GBk,而很多时候,又和服务端的编码不一致,如果不进行特殊处理,就会出现乱码。我们可能无法控制接收方的编码问题,这时accept-charset就能提供很好的解决方案。

解决

假如服务端使用的utf-8的编码方式.

<form method="post" action="..." accept-charset="utf-8"> 
    <!-- code... --> 
</form>

剩下的工作交给浏览器搞定了。


网站添加支付宝捐款功能


起步

在浏览一些开源项目网站时看到有捐赠页面,也想自己的开源页面能不能也加个,毕竟为开源事业做贡献也是不容易。

zfb-btn-index.png

提交表单方式捐赠

看其他网页的前端代码,就能发现有个隐藏的表单。

<form action="https://shenghuo.alipay.com/send/payment/fill.htm" method="post" target="_blank" accept-charset="gbk">
    <input name="optEmail" type="hidden" value="你的支付宝账户" />
    <input name="payAmount" type="hidden" value="10" />
    <input name="memo" type="hidden" value="留下您的联系方式" />
    <input name="pay" type="image" value="转账" src="https://img.alipay.com/sys/personalprod/style/mc/btn-index.png" />
</form>

这种方式测了一下,需要再确认收款人的信息,并不方便,推荐用第二种方式