Development

Preface

这篇文档将会介绍实现 At.js 的一些细节和点.
以下的内容都出现在 jquery.atwho.coffee 里面
为了方便描述，绑定对象以 textarea 为例，（还有 input). 注册的监听字符以 @ 为例,(当然可以是任意字符)

Mirror

Mirror 类用来克隆一个 textarea，为了获取 @ 在整个document中的位置（offset）或者说坐标.

实现要点如下:

• 复制textarea所有的样式到一个透明的div里. 详细看 第33行
• 用 span 元素包裹 @，并赋予id。使用 $.position() 获得这个@在div中的位置.50行
• 向 div 填充 textarea里的内容.140行

通过以上两步，再将@的坐标加上textarea的坐标就可以获得 @ 在整个document 中的位置.

###长句和空白符号的处理

####空白符号 其实除了空白符，还有一些html不能识别的符号如换行符号. 对它们的处理看 第130行

####长句 由于html正文会忽略输入到textarea空格(html的空白符是 ).
为了保证填充到div里的内容排版跟textarea一样.我们可以使用pre代替div，但是我们要插入span元素获得@位置.
所以这里不可用, 但个更好的方法只是不兼容IE浏览器。

只需要在div加入'white-space': 'pre-wrap'的样式就可以和textarea一样进行断句,并且不会忽略空格 表现形式跟pre一样.

由于 white-space 是css2 的属性，所以在比较老的 IE 浏览器是不能使用的.
对于 pre-wrap 的详细解释请看: whitespace.

还有一点，将所有内容分别用span元素包裹起来, 像这样 <span>hello</span><span>@</span><span>Haoao</span>
这样在长句出现时可以更准确的获得 @ 的位置。

这里有另一个解法就是在每个空格都用一个html元素包裹, 非IE浏览器加上 pre-wrap的样式，IE的则用pre元素包裹.
为什么不都用 pre 包裹空格呢？ 经过试验，pre 在非IE浏览器下对长句的处理貌似不大理想.(回头再详细总结)

###兼容IE 上一节有说到IE兼容的问题. 但是那些在 Mirror 都没有使用到。因为后来发现了一个非常严重的问题：
textarea 的 font 样式如果和 html 的 font 样式不一样的时候，以上对IE的解法都将无效.
本来在克隆的时候有将 textarea的 font 样式克隆到 div 里， 但是在IE系列的浏览器里面竟然没有效.