day027-twenty-seven-20230314-原生JavaScript开发思路-DOM自定义属性-JavaScript编程思想-匿名函数具名化-jQuery
原生JavaScript开发思路
涉及页面的原生js开发
分析
想要做什么
- 想
操作谁
就先获取谁
- 给
DOM
绑定事件
- 写
事件
传统的项目开发思想
- 首先
分析项目的需求
,把需要实现的功能
和开发思路
都分析好
! - 然后
开始编写代码
实现需求
想要操作谁
就先获取谁
,一般是DOM元素对象
- 注意:获取元素
要精准
,不要多获取其它元素
或少获取想要的元素
- 写类名这类
最好用ctrl-C复制 ctrl-V粘贴
- 完成事件绑定
- 基于
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)]
循环的作用
无外乎做相同的事
- 基于
- 最后
按照需求
,修改元素
的样式
或内容
- 给
元素的某个事件
绑定方法
,当事件触发
,绑定的方法
执行,方法中的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); //函数本身 })();
-
- 在
-
函数表达式
- 把
函数
作为值
,赋值
给变量
或事件
进行绑定
,或者作为回调函数
- 把
-
选项卡进阶阶段
- 进阶阶段
正常写
,命令式编程 - 先实现效果,更灵活函数式编程
- 语法更规范,流程更标准和清晰使用闭包
- 减少DOM对象上多余的属性
,防止外界访问
或修改到内部逻辑
- 使用
事件委托
-效率更高
封装
成插件
- 自定义组件,更方便复用
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文档