注册
登录* 本文来源：segmentfault@名一
本文看完大约需要5分钟，耐心看完！ 本文分享如何只靠基本功，去完成一个静态页面！ 虽然前端发展快，但一些有名的框架至少会火热很长时间，比如 Backbone、React、Ember 。然而，很多同学在接手新项目时，常常会不知所措，不知道用什么技术去做，或者说，只依赖于擅长的技术，就算在一些场景中它可能并不是最适合的。 那这篇文章要说的是什么呢？就是假设你现在什么都没学，就靠基本功，去完成一个静态页面，当然也有业务逻辑，包括数据的 CRUD、动画，怎么做？ 没有 jQuery 了，没有 Bootstrap 了，扔掉所有你引以为傲的武器，但大恶魔 IE 6 还在。具体的需求不给了，反正给了你们也不会照着去实现，真有心要做的话，可以做一个 todo app 吧。 DOM 查询在没有第三方框架可以用的时候，如果真的按照功能列表，从第一条实现到最后一条，每个模块用自执行匿名函数包起来，所有代码写在一个文件中，看上去十分合理，但真这么做的话，恐怕你会疯掉吧。哦，好处是你可以跟别人吹嘘今天写了三四百行代码，产量很高呢！ 所以，不使用第三方框架，我们可以自己写，它的功能只要符合应用场景就可以了，不用去考虑各种不会发生的奇葩情况。 好，开始。我们最依赖的功能是通过 CSS 选择器获取相应的 DOM 元素，这里只使用兼容性最高的方式，就是 id 和元素名选择器。 var idRegex = /^#[\w\-] /i,
tagRegex = /^[a-z] /i;
function query(selector, context) {
context = context || document;
if (idRegex.test(selector)) {
return document.getElementById(selector.substring(1));
} else if (tagRegex.test(selector)) {
return context.getElementsByTagName(selector);
}
return null;
}
对了，我把所有 DOM 操作放在了 F.DOM 命名空间下，所以是这样使用 query 方法的： F.DOM.query('#id');
的确比 jQuery 的 $('#id') 方式麻烦很多，但“子不嫌母丑，狗不嫌家贫”，自己写的代码，再烂也要用下去。 另外一些必须的操作就不把代码贴出来了，比如说 addClass、removeClass、hasClass 等。 DOM 事件如果有同学参加过面试的话，我想“怎么去监听一个 DOM 事件？请尽可能考虑浏览器兼容性”这个问题是经常会问到吧。这儿写一个可行方案吧。 // 监听 DOM 事件
function addEventListener(el, event, handler, useCapture) {
if (el.addEventListener) {
el.addEventListener(event, handler, useCapture);
} else if (el.attachEvent) {
el.attachEvent('on' event, handler);
} else {
// not support
}
}
// 取消 DOM 事件
function removeEventListener(el, event, handler, useCapture) {
if (el.removeEventListener) {
el.removeEventListener(event, handler, useCapture);
} else if (el.detachEvent) {
el.detachEvent('on' event, handler);
} else {
// not support
}
}
我知道大家可能有更好的，或者更完善的方案，但抱歉这里讨论的重点不是它。 关于 DOM 事件方面，还有一些有用的方法，比如 preventDefault 和 stopPropagation 也可以自己去封装一下。然后这儿想讨论一下 DOM 加载完成的事件。jQuery 中我们会这么用： $(function() {
// ready
});
如果我们也想封装一个类似的方法，可能会这么写： addEventListener('window', 'load', callback);
可是 load 事件是在什么情况下触发的呢？当页面上的所有资源，包括图片，加载完之后才触发！也就是说，如果图片很多，网速很慢，那触发 load 要花很长时间。在本地调试时不会有这种延迟的问题，所以往往会被忽略。 那怎么改正呢？第一，可以把 |
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
