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

45 篇文章 0 订阅
5 篇文章 0 订阅

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

原生JavaScript开发思路

涉及页面的原生js开发

  1. 分析想要做什么
  2. 操作谁就先获取谁
  3. DOM绑定事件
  4. 事件

传统的项目开发思想

  • 首先分析项目的需求,把需要实现的功能开发思路分析好
  • 然后开始编写代码实现需求
    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的兼容
      • 设计思想代码的编写上,都升级了很多
      • 生不逢时,时代变了,编程思想变了,几乎都用VueReact这样的框架开发项目
      • jQuery时代凋零

jQuery提供的方法

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

  • 获取元素
  • 事件绑定
  • 动画处理
  • 样式处理
  • 内容管理
  • DOM的增删改

  • 除了对DOM的操作,也有对数组对象操作,以及ajax数据通信

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

  • 选择器:

    • $(选择器)
    • jQuery(选择器)
  • 习惯于把基于jQuery选择器获取的内容,用基于$开头的变量存储

    • let $tabList = $tabBox.find('.options li')
  • 获取元素时,jQueryjQuery对象提供了三大筛选方法

    • 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方法
      • 补丁包 修补bugapi无新增
    • 主版本号.副版本号.补丁包 阶段的描述
      • 1.11.2-alpha.1内测」跟上技术浪潮,优先看这个,可以看到技术的发展
      • 1.11.2-beta.2公测」熟人测试有好意见就改改变还是会比较多
      • 1.11.2-rc.1预发」一般和正式差别不大
      • 1.11.2正式发版稳定了,一般无bug

进阶参考

  1. jQuery API文档
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值