jquery的事件系统和缓存系统&& seajs

1, jquery的事件系统和缓存系统

事件的起因, 不能解除匿名函数

绑定:

给dom元素打上一个以版本随机号的标识, 比如1, 然后在 $.cache 上建立1的缓存对象, 如 $.cache.1.events, data; 从而引入缓存系统, 好处是只是在dom上标识下, 数据全在 $.cache 上, 而删除的时候会根据标识来删除cache,

会生成 cache[id] = {

handle: 统一一个句柄,

events: 事件集,

data: 数据

}

事件空间,触发

由于有缓存对象的存在, jquery可使用 trigger触发事件, 过程是通过type找到 cache上的event对象, 然后执行看是否返回false, 如果不是则触发下元素的type事件, 这里有趣的是, 往往在实际过程中开发人员需要只触发句柄, 而不触发元素的行为, 那么 triggerHandler 就诞生了, 但要注意的是他只触发第0个元素, 且不会返回jquery对象

事件委托

冒泡和捕获, 普通的委托实现方式, jquery委托的实现方式, cache[id].events[type][0].selector = '';

事件属性

event兼容, 阻止冒泡, 阻止默认事件, 事件源(target || srcElement)

注意的问题

如果要移除一个元素, 不用先删除他的子元素任何(数据)， jquery会递归的删除所有子元素的数据和事件

如果要大量操作dom, 可以先把元素 detach, 或者 remove, 操作完后再appendTo到页面, 这样可以提高效率, 因为频繁的操作dom树不可取, detach移除元素但不删除数据,事件, remove会删除一切数据,事件, 他们俩个都不会删除子

如果要清空数据使用empty, 会删除子+子的数据+事件

使用html方法时要谨慎, 如果已知非常正确的 HTML代码的时候, 可使用innerHTML来设置, 因为 html方法要各种正则, 各种判断, 最终再使用innerHTML设置

不要给dom上添加过大的数据, 使用 data 方法替换, 要不然会有内存泄漏

live,on,bind,delegate的区别

$("#ele").live("click", fn) ==> $(document).on("#ele", "click", fn) ==> $(document).on("click", "#ele", fn)

 

2, seajs

define(回调);

define(id, 回调);

define(id, 依赖, 回调);

在使用define后则给seajs缓存上添加一个对象, 有uri, id, 回调, 然后判断是否有依赖参数, 如果没有把回调方法toString一下, 并用正则查找require字抽取依赖, 然后生出如: {

uri: '',

id: '',

回调: '',

依赖: [],

状态: 0

}

 

在use使用的时候, 先解析路径, 并load这个文件, 然后执行这个文件的define, 并递归的加载依赖, 直到所有的依赖加载完成并执行回调且把返回值写入到这个模块的缓存里, 然后会对加载完成的依赖打上标识, 都加载完后执行use的回调

每次use的时候会先判断 seajs.cache 里是否有这个uri文件, 如果有, 则直接执行模块的缓存.

 

需要注意的:

由于打包问题, 建议不使用alias,paths,var等变量(目前我使用grunt打包未通过)

一定要明确seajs的base根目录是哪, 这个很重要, 也会有利于调试

在模块里引用别的模块时候路径都使用相对路径

路径规则

use("xl");//基于base引用, use时可用, require时不可用, 因为在seajs是通过的, 但grunt打包时不通过, 因为路径指针有问题

use("./xl");//基于当前目录引用

use("../xl");//返回上目录

use("/xl");//基于当前网址的根目录引用,不建议

模块的依赖在内部就要处理好, 外部调用的时候为直接使用, 包括css, 对外暴露常用接口: 显示,隐藏,初始化,销毁,重置等