《锋利的jQuery》读书笔记 第7章 插件的使用和写法

本文详细介绍了jQuery插件的使用与最佳实践,包括常用插件介绍、插件种类、基本要点、闭包概念、扩展jQuery功能的方法,以及插件开发注意事项。
1.介绍了几款常用的jQuery插件:          (P208)
     1.1 Validation:jQuery表单验证插件  网址: https://github.com/jzaefferer/jquery-validation
     1.2 Form:jQuery表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax 网址: https://github.com/malsup/form/
     1.3 livequery:动态绑定事件插件,可以利用它给相应的DOM元素注册事件或者触发回调函数。不仅当前选择器匹配的元素会被绑定事件,而且后来通过JavaScript添加的元素都会被绑定事件。当元素不再和选择器匹配时,livequery会自动取消事件注册 网址: https://github.com/brandonaaron/livequery
     1.4 jQuery UI插件:主要分为交互、微件和效果库3个部分 网址: http://jqueryui.com/
     1.5 Cookie:管理Cookie(在Chrome中无效) 网址: https://github.com/carhartl/jquery-cookie

2.jQuery插件的种类:             (P240)
     2.1 封装对象方法的插件
     2.2 封装全局函数的插件
     2.3 选择器插件

3.插件的基本要点:                   (P241)
     3.1 命名推荐为:jquery.<插件名>.js
     3.2 所有的对象方法附加到jQuery.fn对象上,而所有的全局函数附加到jQuery对象本身上
     3.3 插件内部,this指向的是当前通过选择器获取的jQuery对象,而不像一般的方法那样,例如click()方法,内部的this指向的是DOM元素
     3.4 可以通过this.each来遍历所有元素
     3.5 所有的方法或函数插件,都应当以分号结尾,稳妥起见最好是插件的头部也先加上一个分号
     3.6 插件应该返回一个jQuery对象,以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量
     3.7 避免在插件内部使用$作为jQuery对象的别名,而应该使用完整的jQuery来表示。或者可以利用闭包来回避这个问题。
 
--------------------------------------------------
author: cs_cjl
website: http://blog.youkuaiyun.com/cs_cjl
--------------------------------------------------
4.闭包:                 (P241)
     允许使用内部函数,而且,这些内部函数可以访问它们所在的外部函数声明的所有局部变量、参数和声明的其他内部函数,当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。即内部函数会在外部函数返回后被执行。而当这个内部函数执行时,它仍然必须访问其外部函数的局部变量、参数以及其他内部函数。这些局部变量、参数和函数声明的值是外部函数返回时的值,但也会受到内部函数的影响。

5.jQuery提供了两个用于扩展jQuery功能的方法,即jQuery.fn.extent()方法和jQuery.extend()方法。前者用于扩展之前前面3钟插件中的第1种,后者用于扩展后两种插件。        (P243)

6.jQuery.extend()方法
          方法定义:jQuery.extend(target, obj1,...[objN])
          作用:如果提供了两个或者多余两个参数则将这些对象合并到第一个对象中,如果只提供了一个参数,则将修改应用到jQuery对象本身,这两种情况都会返回修改后的对象。

7.jQuery.fn.extend()在本书中只看到只有一个参数,查官方文档没找到资料。
<think> 我们正在讨论Vue 3中的`procy?download()`写法。根据用户提供的引用问题,我们可以分析如下: 1. 引用[3]提到,在Vue项目中需要使用ES7的可选链操作符(`?.`)时,需要安装并配置Babel插件。这说明`?.`是ES7的特性,在Vue项目中可能需要额外配置才能使用。 2. 用户询问的`procy?download()`写法,看起来是在使用可选链操作符(`?.`)。在JavaScript中,可选链操作符用于访问可能为`null`或`undefined`的对象的属性或调用其方法,而无需显式检查该对象是否存在。 3. 具体到`procy?download()`,它的含义是: - 如果`procy`存在(即不是`null`或`undefined`),则调用`procy.download()`方法。 - 如果`procy`不存在,则整个表达式返回`undefined`,而不会抛出错误。 4. 在Vue 3中,由于Vue 3默认支持ES6+,并且通常使用较新的JavaScript特性,因此可选链操作符在Vue 3中更容易使用。但是,根据引用[3]的说明,在Vue 2中需要配置Babel插件才能使用,而Vue 3可能已经内置支持或者配置更简单。 5. 关于Vue 3中使用可选链操作符的方法: - 如果你的构建环境(如Vue CLI创建的项目)已经支持可选链(Vue CLI默认会配置支持),则可以直接使用。 - 如果不支持,可能需要配置Babel(通常Vue CLI创建的项目已经包含必要的插件,但有时需要手动添加)。 - 在Vue 3的模板中,也可以直接使用可选链操作符,因为Vue 3的模板编译器支持现代JavaScript语法。 6. 使用示例: - 在JavaScript代码中: ```javascript let result = procy?.download(); ``` - 在Vue模板中: ```html <button @click="procy?.download()">下载</button> ``` 7. 注意事项: - 使用可选链操作符可以避免因为对象不存在而导致的运行时错误,使代码更简洁。 - 但是,如果`procy`不存在,则`download`方法不会被调用,也不会报错。因此,如果这个方法调用是必须的,那么需要确保`procy`存在,或者使用其他方式处理。 8. 引用[2]中提到,在Vue 2中,如果要在模板中使用链式调用的方法,可以将其挂载到Vue原型上。但在Vue 3中,由于组合式API的引入,推荐使用`setup`函数ref/reactive等响应式API来组织代码,因此直接使用可选链操作符在模板中更为方便。 因此,在Vue 3中,`procy?download()`是一种使用可选链操作符安全调用`procy`对象的`download`方法的方式。它避免了当`procy`为`null`或`undefined`时出现的错误。 根据上述分析,我们可以回答用户的问题,并生成相关问题。 §§相关问题§§ 1. Vue 3中还支持哪些ES6+的新特性? 2. 在Vue 3的模板中,如何处理可能不存在的对象属性的访问? 3. 如何配置Vue 3项目以支持可选链操作符? </think> 在 Vue 3 中,`procy?.download()` 这种写法使用了 JavaScript 的可选链操作符(Optional Chaining),这是 ES2020 引入的特性。以下是详细解析: ### 含义 1. **可选链操作符 `?.`**: - 用于安全访问嵌套对象属性或方法 - 当 `procy` 为 `null` 或 `undefined` 时,整个表达式直接返回 `undefined` 而不会报错 - 等价于:`procy && procy.download()` 2. **`download()` 方法调用**: - 表示尝试执行 `procy` 对象的 `download` 方法 - 仅当 `procy` 存在且具有 `download` 方法时才会执行 ### 使用方法 ```javascript // Vue 3 组件中 export default { methods: { startDownload() { // 安全调用:procy不存在时不会报错 procy?.download() } } } ``` ```html <!-- 模板中直接使用 --> <button @click="procy?.download()">下载文件</button> ``` ### 配置要求(Vue 3) 1. **默认支持**: - Vue CLI 创建的项目默认支持 ES2020 语法 - 无需额外配置即可使用 `?.` 操作符 2. **特殊场景配置**: ```javascript // babel.config.js (仅需手动配置旧项目) module.exports = { plugins: ["@babel/plugin-proposal-optional-chaining"] } ``` ### 与 Vue 2 的区别 | 特性 | Vue 3 | Vue 2 | |--------------|---------------------------|---------------------------| | 原生支持 | ✅ 默认支持 | ❌ 需手动配置 Babel 插件[^3] | | 模板中使用 | ✅ 直接可用 | ❌ 需挂载到 Vue 原型[^2] | | 构建要求 | 无需额外依赖 | 需安装 `@babel/plugin-proposal-optional-chaining`[^3] | ### 适用场景 1. API 返回数据层级不确定时: ```javascript apiData?.user?.contact?.phone ``` 2. 插件/第三方库方法调用: ```javascript this.$thirdParty?.init() ``` 3. 条件触发事件: ```html <button @click="optionalHandler?.()"> 安全调用 </button> ``` > 提示:可选链操作符能显著减少防御性代码(如 `if (obj && obj.method)`),推荐在异步数据操作中使用[^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值