Web前端高级工程师培训:封装自己的库

封装自己的库

课前准备

  • 工具
    • 编辑器 VSCode
    • 浏览器 Chorme
  • 前置知识
    • Js基本知识

课堂主题

一、定义函数返还JQ对象

二、ready方法和原生节点处理

三、选择器器封装

四、封装JQ的eq方法

五、封装JQ的click方法

六、jQ中的链式操作

七、封装JQ的css方法

八、cssHooks扩展功能

知识点

  • 对象成员与类成员
  • 判断类型
  • 链式调用实现
  • 正则表达式

jquery特性说明

​ 知己知彼,百战不殆;想要知道jq功能如何实现,先要了解其特性;

###如何实现链式调用

根据对象的特性,发还jq对象;

  • 返还this对象
class Jq{click(){console.log("click...");return this;}
}
let myjq = new Jq();
myjq.click().click();
  • 返还实例化对象

处理ready和原生节点

  • 针对ready方法做兼容处理
  • 原生节点直接保存
   if (typeof arg === "string") {let els = document.querySelectorAll(arg);} else if (typeof arg === 'function') {window.addEventListener("DOMContentLoaded",arg,false);} else {if(typeof arg.length === 'undefined'){// 一个对象;this[0] = arg;this.length = 1;}else{// 对象类数组;this.addEle(arg);}}

###选择器器封装

  • $(“.box”)选择节点实现

封装jq的eq方法

​ 注意返还对象,实现链式调用

 eq(index){// 继续操作// return this[index];return new Jq(this[index],this);}

###实现end方法

返还上次操作的节点;

 end(){return this.prevObject;}

实现jq里的click方法

绑定click事件

click(fn) {for (let i = 0; i < this.length; i++) {this[i].addEventListener("click", fn, false);}}

实现on方法

和click方法类似,可以处理多个事件;

实现css方法

  • 获取样式封装

  • 设置样式封装

    • cssNumber

      {animationIterationCount: true,columnCount: true,fillOpacity: true,flexGrow: true,flexShrink: true,fontWeight: true,gridArea: true,gridColumn: true,gridColumnEnd: true,gridColumnStart: true,gridRow: true,gridRowEnd: true,gridRowStart: true,lineHeight: true,opacity: true,order: true,orphans: true,widows: true,zIndex: true,zoom: true}
      

总结

  • 类及对象

  • 链式调用

  • 对象的包装

  • 拓展功能

下节课预告

  • 异步专题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/54974.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软考《信息系统运行管理员》- 4.1信息系统软件运维概述

4.1信息系统软件运维概述 文章目录 4.1信息系统软件运维概述信息系统软件运维的概念信息系统软件的可维护性及维护类型对软件可维护性的度量可以从以下几个方面进行&#xff1a;软件维护分类&#xff1a; 信息系统软件运维的体系1.**需求驱动**2.**运维流程**3.**运维过程**4.*…

Vue 的 v-show 和 v-if 区别?

一、区别 v-show 和 v-if 是 Vue.js 中两种常用的指令&#xff0c;都可以用于控制元素的显示和隐藏&#xff0c;但它们有本质上的区别: 1)v-show 是通过控制元素的 Css display属性来显示或隐藏元素。无论条件是否为真&#xff0c;元素都会被渲染到 DOM中&#xff0c;只是通过…

斯坦福 CS229 I 机器学习 I 构建大型语言模型 (LLMs)

1. Pretraining -> GPT3 1.1. Task & loss 1.1.1. 训练 LLMs 时的关键点 对于 LLMs 的训练来说&#xff0c;Architecture&#xff08;架构&#xff09;、Training algorithm/loss&#xff08;训练算法/损失函数&#xff09;、Data&#xff08;数据&#xff09;、Evalu…

如何减少 Webpack 的打包体积

前端面试题包括ECMScript,TypeScript,Nodejs,React,Webgl,Webpack,Threejs等还在整理中&#xff0c;在线地址前端面试题&#xff0c;源码地址大家多多支持才有动力给大家分享更多好的面试题。 减少 Webpack 的打包体积是优化 Web 应用性能的重要步骤&#xff0c;尤其是在生产环…

两种方式创建Vue项目

文章目录 引言利用Vue命令创建Vue项目准备工作安装Vue CLI创建Vue项目方法一&#xff1a;使用vue init命令方法二&#xff1a;使用vue create命令启动Vue项目 利用Vite工具创建Vue项目概述利用Vite创建项目启动项目 结语 引言 大家好&#xff0c;今天我将向大家展示如何使用不…

鸿蒙富文本显示

1.使用 RichText 组件&#xff08;ArkTS&#xff09; 背景知识&#xff1a;在 ArkTS&#xff08;一种鸿蒙应用开发语言&#xff09;中&#xff0c;RichText组件提供了更强大的富文本显示功能。它允许设置不同的文本样式&#xff0c;包括字体、颜色、字号等多种属性。 Rich Te…

uniapp 如何引用icon 字体

平时使用阿里巴巴的iconfont字体需要下载字体到本地或通过网址引入字体才能使用&#xff0c;但有些情况可能不允许这么做&#xff0c;例如小程序与平常web开发中引入字体图标的方式不一样&#xff0c;必须先转为base64再引入&#xff0c;以下介绍iconfont字体转base64并引入使用…

【layui】多文件上传组件实现

插件预览效果&#xff1a; 需要引入layui的脚本文件layui.js和样式文件layui.css html代码&#xff1a; <div class"layui-input-block"><div class"layui-upload-list"><table class"layui-table"><colgroup><col…

easyexcel多sheet导出(唯一能用)

1&#xff0c;response流header, contentType等设置跟单sheet一样 2&#xff0c;上代码 Data public class SheetModel<T> { private String sheetName; private Class<T> clazz; private List<T> data; } ExcelWriter writer EasyExcel.write(resp.ge…

vue3中如何更改当前类的文件名称

首先&#xff0c;使用script指定文件名称 <template><div class"person"><h2>姓名&#xff1a;{{ name }}</h2><h2>年龄&#xff1a;{{ age }}</h2><button click"showTel">查看联系方式</button><bu…

VS2017 编译 SQLite3 动态库

首先官方下载源码: Tags sqlite/sqlite (github.com) 1.安装 VS2017 community edition 2.打开VS2017命令行工具 3.安装TCL 开发库,推荐 TCL 9.0 先下载源码: Tcl/Tk 9.0 使用vs2017编译tcl&

【STM32-HAL库】实现微秒、毫秒、纳秒延时。(STM32F4系列)(附带工程下载链接)

使用了本代码后不能使用HAL库自带的HAL_Delay函数 使用了本代码后不能使用HAL库自带的HAL_Delay函数 使用了本代码后不能使用HAL库自带的HAL_Delay函数 一、新建工程 可以参考我的新建工程系列教程 stm32-HAL库cubeMX新建工程教程&#xff08;以F103C8T6为例&#xff09;ht…

基于IDEA+SpringBoot+Vue+Uniapp的投票评选小程序系统的详细设计和实现

2. 详细视频演示 文章底部名片&#xff0c;联系我获取更详细的演示视频 3. 论文参考 4. 项目运行截图 代码运行效果图 代码运行效果图 代码运行效果图 代码运行效果图 代码运行效果图 5. 技术框架 5.1 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框…

Flink 批作业如何在 Master 节点出错重启后恢复执行进度?

摘要&#xff1a;本文撰写自阿里云研发工程师李俊睿&#xff08;昕程&#xff09;&#xff0c;主要介绍 Flink 1.20 版本中引入了批作业在 JM failover 后的进度恢复功能。主要分为以下四个内容&#xff1a; 背景解决思路使用效果如何启用 一、背景 在 Flink 1.20 版本之前&am…

问:JVM的垃圾收集算法你知道哪些,有什么区别?

GC&#xff08;垃圾回收器&#xff09;的概念 GC&#xff0c;即垃圾回收&#xff08;Garbage Collection&#xff09;&#xff0c;是计算机程序中一种自动管理内存的机制。其目的是自动回收不再被使用的对象所占用的内存空间&#xff0c;从而避免内存泄漏和内存溢出&#xff0…

帮助,有奖提问

<?php $u $_GET[“user”]; //变量获取 $v $_GET[“variable”]; //$v看flag&#xff0c;绕过正则 $flag‘flag{}; if(isset($u)&&(file_get_contents($u,‘r’)“im admin”)){//猜测data://协议 //检查u指向 echo “hello admin!<br>”; if(preg_…

extern “C“ 的作用、C++ 和 C 编译的不同、C++ 编译过程的五个主要阶段

在 C 中&#xff0c;如果需要从 C 语言导入函数或与 C 代码交互&#xff0c;需要使用 extern "C" 关键字。这是因为 C 和 C 在编译过程中的 符号命名机制&#xff08;即 "名称修饰" 或 "name mangling"&#xff09;不同。 1. extern "C&qu…

2014年国赛高教杯数学建模D题储药柜的设计解题全过程文档及程序

2014年国赛高教杯数学建模 D题 储药柜的设计 储药柜的结构类似于书橱&#xff0c;通常由若干个横向隔板和竖向隔板将储药柜分割成若干个储药槽(如图1所示)。为保证药品分拣的准确率&#xff0c;防止发药错误&#xff0c;一个储药槽内只能摆放同一种药品。药品在储药槽中的排列…

[实时计算flink]双流JOIN语句

Flink SQL支持对动态表进行复杂而灵活的连接操作&#xff0c;本文为您介绍如何使用双流JOIN语句。 背景信息 实时计算的JOIN和传统批处理JOIN的语义一致&#xff0c;都用于将两张表关联起来。区别为实时计算关联的是两张动态表&#xff0c;关联的结果也会动态更新&#xff0c…

【Bug】docker容器之间网络通讯失败

目录 报错起因报错内容解决方案 报错起因 我启动了Milvus数据库 # docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS …