【前端3分钟】高效使用 JQuery

⭐️ 本文首发自 前端修罗场(点击加入)，是一个由 资深开发者 独立运行 的专业技术社区，我专注 Web 技术、Web3、区块链、答疑解惑、面试辅导以及职业发展。博主创作的 《前端面试复习笔记》（点击订阅），广受好评，已帮助多人提升实力、拿到 offer。现在订阅，私聊我即可获取一次免费的模拟面试机会，帮你评估知识点的掌握程度，获得更全面的学习指导意见！

DOM 操作

• createDocumentFragment 代替 createElement 创建节点内容
  在 createDocumentFragment 中可以将多个文档内容片段先缓存起来，最后一次性插入到DOM中；而 createElement 每次创建节点都需要插入到DOM 中，所以前者能提高DOM操作效率。

JQuery 高效使用

• 尽可能使用ID选择器进行DOM查询操作，不同使用组合选择器
• 缓存一切需要复用的jqeury Dom 对象，使用find()子查询
• 不用滥用jQuery，尽量使用原生代替
• 尽可能使用jQuery静态方法
• 使用事件代理，不要直接使用元素的事件绑定
• 尽量使用较新的的版本
• 尽可能使用链式写法来提高编程效率和代码运行效率

前端MVC模式

基本思路: 将DOM交互的内容分为“数据模型”、“视图”、“事件控制函数”三个部分，并对它们进行统一管理。

• Model 用来存放请求的数据结果和数据对象；

• View 用于页面DOM的更新与修改；

• Controller 用于根据前端路由条件来调用不同Model给View渲染不同数据内容
  路由的主要思路：让URL地址内容匹配对应的字符串然后进行相应的操作；另外 HTML5 中 history.pushState(state,title,url) 方法可以改变当前页面的url而不发生跳转，并将不同的state数据和对应的url对应起来。如果页面显示的内容是根据不同的数据状态来自动完成的，这样根据state的内容来加载不同的组件就很有用。