前端 JavaScript 设计模式前奏--面向对象JQ实例与总结

Posted 2022-11-01 黑木令

1. 面向对象 – JS 的应用举例

/**
 * 1. 我们可以认为 JQuery 就是一个类
 *    1. JQ 的打包源码中是一个函数, 这个函数就是一个构造函数, 其实就是一个 class 。
 *    2. $('p') 其实就是 JQ 的一个实例 。
 *
 * 2. 实现原理 (实际上使用的 ES5  的构造函数):
 */
class jQuery 
  constructor(selector) 
    let slice = Array.prototype.slice
    let dom = slice.call(document.querySelectorAll(selector)) // 通过 slice.call() 返回一个数组 。
    let len = dom ? dom.length : 0
    for (let i = 0; i < len; i++) 
      this[i] = dom[i] // 我们将数组的每个元素, 都指向 this 即实例的元素; 元素的 key 其实就是数组下标 。
    
    this.length = len
    this.selector = selector || ''
  
  append(node) 
    // ...
  
  addClass(name) 
    // ...
  
  html(data) 
    // ...
  



// 入口
window.$ = function (selector) 
  // 这里使用的是 工厂模式
  return new jQuery(selector)



// 使用
var $p = $('p')
console.log('==========:', $p[0].innerHTML)
console.log('==========:', $p[1].innerHTML)

console.log('==========:', $p.addClass) // 结果是一个空函数

如图所示:

2. 总结: 面相对象的意义

1. 程序执行: 顺序 -> 判断 -> 执行 --- 结构化
   1. 顺序: 执行逻辑
   2. 判断: if...else...
   3. 执行: for...

2. 面向对象 --- 数据结构化
   1. 面向对象的意义在于将零散的数据结构化 。
 
3. 对于计算机, 结构化才是最简单的 。
   1. 我们的浏览器加载网页, 其实加载的数据流, 也就是字符串 。
   2. 浏览器加载的 CSS/JS 其实就是一堆字符串 。
   3. 浏览器拿到这些字符串第一步就是解析为 renderTree 。
 
4. 编程应该是 简单 & 抽象 。
   1. 0 与 1 就是最实在的举例 。

如如所示:

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 “前端设计模式” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。

《前端设计模式》专栏上篇: 面向对象-Class类

如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨 。

有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容 。