20230314----重返学习-原生JavaScript开发思路-DOM自定义属性-JavaScript编程思想-匿名函数具名化-jQuery

day027-twenty-seven-20230314-原生JavaScript开发思路-DOM自定义属性-JavaScript编程思想-匿名函数具名化-jQuery

原生JavaScript开发思路

涉及页面的原生js开发

分析想要做什么
想操作谁就先获取谁
给DOM绑定事件
写事件

传统的项目开发思想

首先分析项目的需求，把需要实现的功能和开发思路都分析好！
然后开始编写代码实现需求
1. 想要操作谁就先获取谁，一般是DOM元素对象
  - 注意: 获取元素要精准，不要多获取其它元素或少获取想要的元素
  - 写类名这类最好用ctrl-C复制 ctrl-V粘贴
2. 完成事件绑定
  - 基于querySelectorAll()获取的是一个节点集合NodeList，此集合是一个类数组。
    - 节点集合NodeList内部可以是任意节点，而元素集合则只能是元素。
    - 因为是类数组，不能直接使用数组的方法。需要使用鸭式变形。
    - 因为是类数组，但它也有自己的方法。在原型上可以看到有什么方法。
      - 如forEach()，但这个forEach()不是数组的，而是NodeList集合自己的。不过语法类似于数组的。
    - NodeList集合中的每一项，都是我们需要获取元素的DOM元素对象。
      - 在JavaScript中，基于任何办法获取的元素，都是获取此元素的DOM元素对象。
  - 基于getElementsByClassName()拿到的是HTMLCollection元素集合
  - 前提是需要用户手动操作才触发的事件
  - 不需要用户手动操作的事件，直接写就行了或者自调用函数里写
  - DOM元素对象的成员
    - 常用成员(键值对)
    - classList 样式类名集合
      - add() 新增样式类
      - remove() 移除样式类
      - toggle() 新增或移除
      - contains() 验证是否包含
      - ......
    - className 也可以操作样式类名，但是其是基于字符串修改所有的样式类名
    - innerHTML 获取元素的内容或者修改元素的内容
    - onxxx 这一类都是事件绑定
      - 默认为null，可以赋值为一个函数
      - 常用事件
        
        onclick 点击事件
        
        onmouseover 鼠标移入事件
    - tagName 获取大写的标签名
    - style 操作元素行内样式
    - …
      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NcM7qARp-1678804645582)(./DOM元素对象在堆内存中表示.png)]
  - 循环的作用无外乎做相同的事
3. 最后按照需求，修改元素的样式或内容
  - 给元素的某个事件绑定方法，当事件触发，绑定的方法执行，方法中的this一般就是当前操作的元素
    - 如果没手动绑定this，一般就是这样。
    - 如果手动改了，如call()及bind()或箭头函数之类的，看具体情况
  - 一般的事件不外乎修改元素的样式或修改元素的内容或修改全局变量或ajax操作前后端通信
  - 如果有bug，可以告诉给openai的chatGTP说代码有bug，问它那里有问题

DOM自定义属性

给DOM元素对象设置自定义属性的方式

对象的成员访问
- 原理:
- 直接操作DOM元素对象的堆内存空间
基于setAttribute/removeAttribute/getAttribute去管理
- 原理:
  - 直接设置在元素的标签上
    - 所以所设置的属性值都会转换为字符串，并且属性名不区分大小写
      - 因为所有属性在标签上都是字符串，属性名都会转为小写
两种方式因为原理不一样，所以不能混在一起使用
- 除非一些特殊的内置属性
  - 例如
    - id，在结构中设置，在堆内存空间中也有
      - 改了堆内存中的信息，元素标签的结构也跟着改变了
      - 这个叫做DOM映射

JavaScript编程思想

JavaScript中的两大编程思想
- 函数式编程
  - 把要干的事交给函数来完成
    - 函数可能是自己封装的
    - 函数可能是别人封装的
    - 可以是浏览器或node.js等环境实现的
  - 主要关注的是what 结果
  - 不关注how 过程
  - 把需要实现的功能基于函数进行了封装，后期想实现这个需求，直接把函数执行即可，无需重复去一步步实现
  - 优势:
    - 低耦合高内聚，函数复用率高导致代码被重用的概率大
    - 提高开发效率
  - 优先推荐函数式编程
  - 弊端
    - 不灵活，需要完全按照方法内部的操作去处理
    - 代码效率可能不太高
- 命令式编程
  - 主要关注的是how 过程
  - 功能需要自己一步步的去实现这个功能，每一个实现步骤，都是自己去把控的
  - 弊端
    - 冗余代码多
    - 开发效率低
  - 好处
    - 可以灵活把控每一个步骤，实现自己特殊的需求
      - for循环之类中，可以跳过一些循环
    - 代码效率上限高点
- 有特殊需求，有需要实现指定详细步骤和控制流程的算法或逻辑时，或者对性能要求高的场景下，就用命令式编程。其它情况下，优先函数式编程。

匿名函数具名化

匿名函数具名化
- 原本是匿名函数，不需要写名字，但之后给加了个名字

匿名函数具名化常见场景

自执行函数

在函数的外面是不允许使用的

即便设置了名字，也不是实名函数，所处的环境中是不声明这个名字的

        (function func() {
            console.log(func); //但是在函数里面是可以使用的，存储的是函数本身
        })();
        console.log(func); //Uncaught ReferenceError: func is not defined 在函数的外面是不允许使用的「虽然设置了名字，也不是实名函数，所处的环境中是不声明这个名字的」

但是在函数里面是可以使用的，存储的是函数本身

优势

设置的名字对外部不会产生影响，但是在函数内部可以使用，代表函数本身

也可以使用arguments.callee代表函数本身

但用'use strict'开启了js的严格模式之后，就用不了arguments.callee，会报错

"use strict"
(function () {
    console.log(arguments.callee); //获取的也是函数本身  但是在严格模式下，是不允许使用arguments.callee的「报错：Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them」
    // arguments.callee();
})();

更符合语法规范

"use strict"; //开启JS的严格模式{未来项目中全部都是JS严格模式}
(function anonymous() {
    console.log(anonymous); //函数本身
})();

函数表达式
- 把函数作为值，赋值给变量或事件进行绑定，或者作为回调函数

选项卡进阶阶段

进阶阶段
1. 正常写，命令式编程 - 先实现效果，更灵活
2. 函数式编程 - 语法更规范，流程更标准和清晰
3. 使用闭包 - 减少DOM对象上多余的属性，防止外界访问或修改到内部逻辑
4. 使用事件委托 - 效率更高
5. 封装成插件 - 自定义组件，更方便复用
6. npm发布 - 更方便别人使用，同时容易升级

jQuery开发

`jQuery`的`简写`

JQ
jQuery

jQuery的定义

jQuery是一个前端框架或类库。

它里面封装了大量的方法，可以简化我们对DOM的操作以及其它的一些操作

jQuery版本

jQuery类库存在三大主版本

v1.xx
- 特点:
  - 兼容到IE6
  - jQuery的王炸年代，基本上那年代开发都用到它
v2.xx
- 特点:
  - 放弃了IE6-8的兼容，主要是为手机等移动端准备的
  - 有一个孪生兄弟jQueryMobile，专门为移动端开发
  - 但同时代中，出现了一个语法和jQuery几乎完全类似但比jQuery更懂移动端的类库Zepto
v3.xx
- 特点
  - 依然是不考虑IE6-8的兼容
  - 设计思想和代码的编写上，都升级了很多
  - 生不逢时，时代变了，编程思想变了，几乎都用Vue和React这样的框架去开发项目
  - jQuery时代凋零了

jQuery提供的方法

jQuery提供的方法中，大部分都是关于对DOM的操作

获取元素
事件绑定
动画处理
样式处理
内容管理
DOM的增删改
…
除了对DOM的操作，也有对数组与对象的操作，以及ajax数据通信等

jQuery提供了非常强大的选择器方案，可以很方便地获取到需要的元素或元素集合

选择器:
- $(选择器)
- jQuery(选择器)
习惯于把基于jQuery选择器获取的内容，用基于$开头的变量存储
- let $tabList = $tabBox.find('.options li')
获取元素时，jQuery为jQuery对象提供了三大筛选方法
- find() 后代查找
  - $('.box').find('.link') 首先获取样式类名是.box的元素，再在其后代中，找到所有样式类名是.link的元素
    - 类似于$('.box .link')
- children() 子代查找
  - $('.box').children('.link') 只在.box的儿子中找，找到所有样式类名是.link的元素
    - 类似于$('.box>.link')
- filter() 同级查找(筛选)
  - $('a').filter('.active') 首先获取页面中所有的a标签，再从这些a标签中，筛选出有.active样式类的
    - 类似于$('.box.link')
想获取jQuery元素集合中的某一个(得到一个jQuery对象)
- eq(索引)
- …
jQuery中的事件绑定(最基础的应用)
- $xxx.on(事件类型,绑定的方法)
jQuery中有内置的循环机制
- $xxx是一个集合(包含很多项)，直接去用集合进行操作，jQuery内部会分别迭代集合中的每一项，帮助我们一项项的去处理
  - 不需要我们自己搞循环了
  - 例如:
    - 事件绑定
    - 修改样式等
jQuery中有一个循环迭代的办法:
- each((index, item) =>{})
  - 形参的顺序和数组的forEach是相反的
  - item是基础的DOM元素对象
只有基于jQuery选择器获取的内容才能使用jQuery提供的办法
- 如jQuery对象
jQuery中绑定了DOM元素对象后的方法中
- $(this)指的是当前触发了事件的这一项
- $(this).index()获取到元素的索引，去结构中找到所有的兄弟，算出自己所在位置的索引
jQuery中操作样式类的方法
- $().addClass(类名) 新增样式类
- $().removeClass(类名) 移除样式类
- $().toggleClass(类名) 切换样式类(新增/移除样式类)
按原生js的思想做事件绑定，和原生js差不多。所以它可以是一个类库
jQuery中提供了获取兄弟元素的方法，
- $().prev() 上一个哥哥
- $().prevAll() 所有哥哥
- $().next() 下一个弟弟
- $().nextAll() 所有弟弟
- $().siblings() 获取所有的兄弟
- 这些方法里面还接收选择器，用于筛选想要某些特征的特定兄弟集合
jQuery中还提供了链式写法
- 就是一直可以调用下去

jQuery目前价值

jQuery源码，学习它的编程思想
兼容IE6-8及老版本浏览器

版本号

我们未来会用很多的插件、类库、框架、UI组件库等，他们都有一个自己的版本号

版本号的组成
- 主版本号.副版本号.补丁包
  - 主版本号 变化比较大，可能基础都变了，兼容性都没了
  - 副版本号 新加或减少一些api方法
  - 补丁包 修补bug，api无新增
- 主版本号.副版本号.补丁包阶段的描述
  - 1.11.2-alpha.1 「内测」跟上技术浪潮，优先看这个，可以看到技术的发展
  - 1.11.2-beta.2「公测」熟人测试，有好意见就改，改变还是会比较多的
  - 1.11.2-rc.1「预发」一般和正式差别不大
  - 1.11.2 「正式发版」稳定了，一般无bug

进阶参考

jQuery API文档