为什么这么说呢？不知道大家有没有注意到，前端虽然发展很快，但是一些知名的框架至少会火很长时间，比如Backbone、React、Ember。如果你想学习它，你必须有足够的时间来学习它。毕竟事实摆在眼前。许多公司的在线产品都是用React编写的。例如，Teambition的简单聊天似乎是从Backbone重构的。但是，很多同学在接手一个新项目的时候，往往会手足无措，不知道该用什么技术，或者说，他们只依赖自己擅长的技术，即使它可能不是最适用于某些场景。是因为这些学生不够努力吗？没有。他们可能读晚了书，浏览了很多博客，只是为了了解CORS的应用，或者想知道为什么Angular中的范围在某些时候不能双向绑定。是的，时间是花的，但是遇到问题还是手足无措。也许前端就是这样的工作。我鼓励你学游泳，学蛙泳，学自由泳，学蝶泳，海啸来了你就被冲走了……那这篇文章讲的是什么？假设你现在什么都没学，靠基本功完成一个静态页面。当然还有业务逻辑，包括数据增删改查和动画。怎么做？有一个关于VanillaJS的梗。不知道你们看过没有，一定会笑的。没有了jQuery，没有了Bootstrap，扔掉你所有引以为豪的武器，但大魔王IE6还在。我不给你具体的要求，反正你也实现不了。如果你真的想做，你可以制作一个待办事项应用程序。当DOM查询没有第三方框架可用时，如果真的按照函数列表，从第一项到最后一项，每个模块都包裹了一个自执行的匿名函数，所有代码都写在一个文件中，这看起来很合理，但如果真的这样做，恐怕你会发疯。哦，好处是可以跟别人吹嘘今天写了三四百行代码，产量很高！所以，不用第三方框架，我们可以自己写，只要它的功能满足应用场景就行，不用考虑各种不会发生的怪情况。好的，让我们开始吧。我们最依赖的功能就是通过CSS选择器获取对应的DOM元素。这里我们只使用最兼容的方法，即id和元素名称选择器。varidRegex=/^#[\w\-]+/i,tagRegex=/^[a-z]+/i;functionquery(selector,context){context=context||document;if(idRegex.test(selector)){returndocument.getElementById(selector.substring(1));}elseif(tagRegex.test(selector)){returncontext.getElementsByTagName(selector);}returnnull;}对了，我把所有的DOM操作都放在了F.DOM命名空间下，所以查询方法是这样使用的：F.DOM.query('#id');确实比jQuery的$('#id')方法麻烦多了，但是“儿不丑其母，犬不穷其家”，我写的代码，再烂是的，我必须使用它。其他必要的操作就不贴代码了，比如addClass,removeClass,hasClass等DOM事件如果有同学参加过面试，我觉得“如何监听DOM事件？请尽可能考虑浏览器兼容性”这个问题"经常被问到。在这里写一个可行的计划。/监听DOM事件函数addEventListener(el,event,handler,useCapture){if(el.addEventListener){el.addEventListener(event,handler,useCapture);}elseif(el.attachEvent){el.attachEvent('on'+event,handler);}else{//notsupport}}//取消DOM事件函数removeEventListener(el,event,handler,useCapture){if(el.removeEventListener){el.removeEventListener(event,handler,useCapture);}elseif(el.detachEvent){el.detachEvent('on'+event,handler);}else{//notsupport}}我知道你可能有更好或更完整的解决方案，但很抱歉这里讨论的不是它。关于DOM事件，还有preventDefault、stopPropagation等有用的方法，也可以自己封装。那么我想在这里讨论DOM加载完成的事件。在jQuery中，我们将像这样使用它：$(function(){//ready});如果我们想封装一个类似的方法，我们可能会这样写：addEventListener('window','load',callback);但是load事件是在什么情况下触发的呢？加载页面上的所有资源（包括图像）时触发！也就是说，如果图片很多，网速很慢，触发加载的时间会很长。在本地调试时没有这种延迟问题，所以往往被忽略。如何纠正？首先，您可以将
