### [React 中高阶组件的友好介绍](https://www.prosaas.cn/article/2526)
**Published:** 2023-09-04T06:01:09
**Author:** 5201314
**Excerpt:** 高阶组件（HOC）是 React 中一项有趣的技术，用于重构共享几乎相同逻辑的类似组件。我知道这听起来很抽象而…
高阶组件（HOC）是 React 中一项有趣的技术，用于重构共享几乎相同逻辑的类似组件。我知道这听起来很抽象而且很高级。然而，它是一种并非特定于 React 的架构模式，因此您可以使用该方法来做很多事情。
例如，您可以使用它向某个组件添加加载指示器，而无需调整原始组件，或者您可以隐藏组件的属性以使其不那么冗长。应用程序有很多，我试图在本教程中介绍其中的大部分。
还有其他几个教程可以教您有关 HOC 的知识，但其中大多数都是针对高级 React 开发人员的。当我开始学习 React 时，我很难理解高阶组件的概念以及如何将 HOC 合并到我的项目中以编写更好的代码。本文将解释您需要了解的 HOC 从头到孵化的所有内容。
## 概述
本教程分为三个部分。第一部分将介绍高阶组件的概念。在这里，我们将讨论在查看高阶函数和 HOC 之前需要了解的语法。第二部分是本系列中最令人兴奋的部分，您将看到 HOC 的实际示例。我们将使用 HOC 来创建表单、授权和许多其他事情。
在本教程的第三部分中，我们将更多地关注最佳实践以及实现高阶组件时需要考虑的事项。我们还将简要介绍 React 中代码共享的替代模式，例如 Render props。
在开始之前，最好先看看有状态组件与无状态组件的教程，以便更好地理解 React 的组件架构。
## ES6 语法备忘单
我们很快就会动手。但在此之前，我认为您应该了解一些事情。我更喜欢尽可能使用 ES6 语法，它与 HOC 配合得很好。作为初学者，HOC 有意义，但某些 ES6 语法却没有意义。因此，我建议您先浏览一遍本节，稍后您可以再回来参考。
### 箭头函数
箭头函数是常规函数表达式，但语法较短。它们最适合非方法函数，这也是我们特别感兴趣的。以下是一些帮助您入门的示例：
#### 不带参数的函数
/\* Functions without parameters \*/
function () {
return "This is a function expression";
}
// is equivalent to
() => {
return "This is an arrow function expression"
}
// or
() => "Arrow with a shorter syntax"
#### 具有单个参数的函数
/\* Function with a single parameter \*/
function (param) {
return { title: "This function accepts a parameter and returns an object",
params: param}
}
// is syntax-equivalent to
param => {
return { title: "This arrow function accepts a single parameter",
params: param }
}
#### 具有多个参数的函数
/\* Function with multiple parameters \*/
function (param1, param2) {
return { title: "This function accepts multiple parameters",
params: \[param1,param2\]}
}
// is syntax-equivalent to
(param1, param2) => {
return {title: "Arrow function with multiple parameters",
params: \[param1, param2\]
}
}
// or
(param1, param2) => ({
title: "Arrow function with multiple parameters",
params: \[param1, param2\]
})
### 函数式编程中的柯里化
虽然这个名字暗示它与流行的印度美食中的一道异国菜肴有关，但事实并非如此。柯里化可帮助您将接受多个参数的函数分解为一系列一次接受一个参数的函数。这是一个例子：
//Usual sum function
const sum = (a, b) => a + b
//Curried sum function
const curriedSum = function (a) {
return function (b) {
return a+b
}
//Curried sum function using arrow syntax
const curriedSum = a => b => a+b
curriedSum(5)(4)
//9
该函数只接受一个参数，并返回一个接受另一个参数的函数，这种情况一直持续到满足所有参数为止。
curriedSum
// (a) => (b) => a+b
curriedSum(4)
// (b) => 4+b
curriedSum(4)(5)
//4+5
一个密切相关的术语称为“部分应用”。部分应用程序通过预先填充现有函数的一些参数来创建新函数。新创建的函数的元数（即参数数量）将小于原始函数的元数。
### 传播语法
扩展运算符扩展数组、字符串或对象表达式的内容。以下是您可以使用传播运算符执行的操作的列表
#### 函数调用中的扩展语法
/\*Spread Syntax in Function Calls \*/
const add = (x,y,z) => x+y+z
const args = \[1,2,3\]
add(...args)
// 6
#### 数组文字中的扩展语法
/\* Spread in Array Literals \*/
const twoAndThree = \['two', 'three'\];
const numbers = \['one', ...twoAndThree, 'four', 'five'\];
// \["one", "two", "three", "four", "five"\]
#### 对象文字中的扩展语法
/\* Spread in Object Literals \*/
const contactName = {
name: {
first: "Foo",
middle: "Lux",
last: "Bar"
}
}
const contactData = {
email: "fooluxbar@example.com",
phone: "1234567890"
}
const contact = {...contactName, ...contactData}
/\* {
name: {
first: "Foo",
middle: "Lux",
last: "Bar"
}
email: "fooluxbar@example.com"
phone: "1234567890"
}
\*/
我个人喜欢三个点可以让您更轻松地将现有道具传递给子组件或创建新道具的方式。
#### React 中的扩展运算符
const ParentComponent = (props) => {
const newProps = { foo: 'default' };
return (
)
}
现在我们已经了解了构建 HOC 的基本 ES6 语法，让我们看看它们是什么。
## 高阶函数
什么是高阶函数？维基百科有一个简单的定义：
> 在数学和计算机科学中，高阶函数（也称为泛函、函数形式或函子）是一种接受一个或多个函数作为参数或返回一个函数作为其结果或两者兼而有之的函数。
您之前可能以某种形式在 JavaScript 中使用过高阶函数，因为这就是 JavaScript 的工作方式。将匿名函数或回调作为参数传递或返回另一个函数的函数 - 所有这些都属于高阶函数。下面的代码创建了一个本质上更高阶的计算器函数。
const calculator = (inputFunction) =>
(...args) => {
const resultValue = inputFunction(...args);
console.log(resultValue);
return resultValue;
}
const add = (...all) => {
return all.reduce( (a,b) => a+b,0) ;
}
const multiply = (...all) => {
return all.reduce((a,b)=> a\*b,1);
}
让我们更深入地了解一下这一点。 `calculator()` 接受一个函数作为输入并返回另一个函数——这完全符合我们对高阶函数的定义。因为我们使用了剩余参数语法，所以返回的函数将其所有参数收集在一个数组中。
然后，使用传递的所有参数调用输入函数，并将输出记录到控制台。所以计算器是一个柯里化的高阶函数，你可以像这样使用计算器：
calculator(multiply)(2,4);
// returns 8
calculator(add)(3,6,9,12,15,18);
// returns 63
插入一个函数，例如 `add()` 或 `multiply()` 和任意数量的参数，以及 `calculator()`将从那里拿走它。所以计算器是一个扩展了 `add()` 和 `multiply()` 功能的容器。它使我们能够在更高或更抽象的层面上处理问题。乍一看，这种方法的好处包括：
1. 代码可以在多个函数中重复使用。
2. 您可以在容器级别添加所有算术运算通用的额外功能。
3. 更具可读性，并且能更好地表达程序员的意图。
现在我们对高阶函数有了一个很好的了解，让我们看看高阶组件的能力。
## 高阶组件
高阶组件是一个接受组件作为参数并返回该组件的扩展版本的函数。
(InputComponent) => {
return ExtendedComponent
}
// or alternatively
InputComponent => ExtendedComponent
`扩展组件` _组成_ `InputComponent`。 `ExtendedComponent` 就像一个容器。它呈现 `InputComponent`，但因为我们返回一个新组件，所以它添加了一个额外的抽象层。您可以使用此层添加状态、行为甚至样式。如果您愿意，您甚至可以决定根本不渲染 `InputComponent` — HOC 能够做到这一点以及更多。
下面的图片应该可以消除混乱（如果有的话）。
理论已经讲完了，让我们开始看代码。下面是一个非常简单的 HOC 示例，它将输入组件包装在 标记周围。从这里开始，我将把 `InputComponent` 称为 `WrappedComponent`，因为这是惯例。不过，您可以随意命名它。
/\* The \`with\` prefix for the function name is a naming convention.
You can name your function anything you want as long as it's meaningful
\*/
const withGreyBg = WrappedComponent => class NewComponent extends Component {
const bgStyle = {
backgroundColor: 'grey',
};
render() {
return (
);
}
};
const SmallCardWithGreyBg = withGreyBg(SmallCard);
const BigCardWithGreyBg = withGreyBg(BigCard);
const HugeCardWithGreyBg = withGreyBg(HugeCard);
class CardsDemo extends Component {
render() {
}
}
`withGreyBg` 函数将一个组件作为输入并返回一个新组件。我们不是直接组合 Card 组件并将样式标签附加到每个单独的组件，而是创建一个 HOC 来实现此目的。高阶组件包装原始组件并在其周围添加 标签。需要注意的是，这里你必须手动将 props 分两层传递下去。我们没有做任何花哨的事情，但这就是正常的 HOC 的样子。下图更详细地演示了 `withGreyBg()` 示例。
虽然这目前看起来不是特别有用，但好处并不小。考虑这种情况。您正在使用 React 路由器，并且需要保护某些路由 - 如果用户未经过身份验证，则对这些路由的所有请求都应重定向到 `/login`。我们可以使用 HOC 来有效管理受保护的路由，而不是重复身份验证代码。好奇想知道怎么做吗？我们将在下一个教程中介绍这一点以及更多内容。
_注意：ECMAScript 中提出了一个称为装饰器的功能，可以轻松使用 HOC。但是，它仍然是一个实验性功能，因此我决定不在本教程中使用它。如果您使用的是_ **_create-react-app_**_，则需要先弹出才能使用装饰器。如果您运行的是最新版本的 Babel (Babel 7)，您所需要做的就是安装 `_babel-preset-stage-0_` _然后将其添加到_ **_webpack.config.dev.js_** _的插件列表中，如下所示。__
// Process JS with Babel.
{
test: /\\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// This is a feature of \`babel-loader\` for webpack (not Babel itself).
// It enables caching results in ./node\_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
presets: \['stage-0'\]
},
## 摘要
在本教程中，我们学习了 HOC 的基本概念。 HOC 是构建可重用组件的流行技术。我们首先讨论基本的 ES6 语法，以便您更容易习惯箭头函数并编写现代 JavaScript 代码。
然后我们了解了高阶函数及其工作原理。最后，我们接触了高阶组件并从头开始创建了 HOC。
接下来，我们将通过实际示例介绍不同的 HOC 技术。在那之前请继续关注。在评论部分分享你的想法。
以上就是React 中高阶组件的友好介绍的详细内容，更多请关注知企PROSAAS其它相关文章！
智能AI问答
PHP中文网智能助手能迅速回答你的编程问题，提供实时的代码和解决方案，帮助你解决各种难题。不仅如此，它还能提供编程资源和学习指导，帮助你快速提升编程技能。无论你是初学者还是专业人士，AI智能助手都能成为你的可靠助手，助力你在编程领域取得更大的成就。
我要提问
来源：知企PROSAAS
收藏
点赞
上一篇：Angular 服务：初学者综合指南
下一篇：获取数据的WP REST API
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
-
国星光电成功推出1.84英寸全彩Micro LED显示屏nStar Ⅲ，迎来亮眼成就
2023-12-06 09:27:12
-
中国气象局与华为加快合作，推动AI等技术在气象领域的应用
2023-12-06 08:51:34
-
Microsoft 推出必应深度搜索，提供更相关的答案，适用于复杂搜索查询
2023-12-06 08:37:43
-
传小米14系列加单40%，传索尼主机独占GTA6首发1年，知网专利可测出AI文本，蔚来收购江淮部分资产，这就是今天的其他大新闻！
2023-12-06 08:35:14
-
如何更改iPhone上的默认提示音
2023-12-06 08:27:43
-
小米金凡：澎湃 OS 的连接能力最强，没有之一
2023-12-06 08:13:16
-
美图推出 AI 模型 MiracleVision 4.0 版，可生成矢量图形
2023-12-05 20:38:14
-
一加发布AIRVOOC 50W无线闪充充电器A1，售价首发249元
2023-12-05 20:35:08
-
确保你的Apple Magic Keyboard电量充足：在macOS上查看电池状态
2023-12-05 20:15:16
-
蔚来Q3营收增长46.6%，31.6亿元成功收购江淮汽车资产
2023-12-05 18:57:16
最新问题
Laravel Cashier - Stripe 多种付款方式
我的餐厅使用LaravelCashier和Stripe。我想为我的客户使用Stripe支持的多种付款方式，但我在LaravelCashier文档中找不到有关在Stripe中使用多种...
P粉652495194来自于2023-12-11 18:56:12
0
2
212
FastAPI: 如何在HTML文件中同时渲染CSS/JS/Images？
我在FastAPI中渲染HTMl文件时遇到问题。main.py文件static\_dir=os.path.join(os.path.dirname(\_\_file\_\_),"...
P粉237125700来自于2023-12-11 17:58:49
0
1
239
老师，笔记能分享一下吗
老师，笔记能分享一下吗
手机用户3055476来自于2023-12-12 16:46:38
0
0
24
Nuxt 构建错误：TypeError：无法解构属性“nuxt”的“这个”因为它是未定义的
我想创建一个新的Nuxt项目并按照此处的说明进行操作：https://nuxtjs.org/docs/get-started/installation。基本上只是运行npminit...
P粉156415696来自于2023-12-11 16:47:40
0
2
166
CSS径向渐变到SVG径向渐变
是否可以在SVG中制作径向渐变，就像在CSS中一样http://codepen.io/A973C/pen/hnEaf（我指的是交通灯中的灯）.red{background:red;...
P粉308783585来自于2023-12-11 15:54:09
0
2
242
未定义类型“Validator”.intelephense(1009)
谁能帮我解决这个错误吗？我是Laravel新手，我正在制作一个ProductController文件，但我从Validator收到此错误：我已经调用了useValidator；我还...
P粉010967136来自于2023-12-11 15:05:11
0
1
196
Laravel 9 上未找到混合清单 - vite
当我运行npmrunbuild时遇到问题，它说找不到混合清单。当我在生产中运行时会发生这种情况。我的npm-v是9.1.2并运行laravel9，带有“php”：“^8.0.2”。...
P粉974462439来自于2023-12-11 13:40:48
0
1
217
Vue3：如何将参数发送到路由而不将它们添加到 Vue3 中的 url 中？
在Vue3中，有没有一种方法可以将属性传递给路由，而无需在url中显示值？我这样定义路线：{path:'/someRoute',name:'someRoute',component...
P粉465675962来自于2023-12-11 13:07:20
0
1
214
在JSP bean中实现动态文本框及其值的提交
我有一个带有几个预定义文本框的表单，现在除此之外我还创建了一些动态文本框，我可以用javascript来完成它（我猜）。提交表单时，如何将动态生成的文本框的值设置为bean。在be...
P粉916760429来自于2023-12-11 11:56:28
0
1
190
识别特定行具有一致值的列名
我正在尝试在mysql中进行查询以获取某一特定行具有特定值的任何列。在Mysql中，我们可以根据列的任何特定值获取行。我有一个像这样的表：+----+------------+--...
P粉738046172来自于2023-12-11 09:56:34
0
1
133
相关专题
更多>
- 
linux删除命令介绍
- 
未知错误3004解决方法
- 
什么是万维网
- 
btbook磁力搜索如何使用
- 
java是前端还是后端
- 
excel生成二维码
- 
dc.rectangle怎么使用
- 
^quxjg$c
热门推荐
-
wordpress收费么
-
WordPress 中functions.php 文件的 5 个实际应用
-
在 WordPress 中使用 Dashicons：综合指南
-
重置 WordPress 网站的指南
-
使用免费插件在WordPress中创建联系表单
-
从 WordPress 网站提取帖子的指南
-
重温 Squire：高效的 HTML5 富文本编辑器
-
创建 WordPress 登陆页面：分步指南
-
在 WordPress 中进行 A/B 测试的指南
-
修改WordPress中的特色图像大小
热门教程
更多>
相关推荐
热门推荐
最新课程
- 
phpStudy极速入门视频教程
511152次学习
收藏
- 
独孤九贱(1)\_HTML5视频教程
590293次学习
收藏
- 
独孤九贱(5)\_ThinkPHP5视频教程
1175339次学习
收藏
- 
最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)
1354332次学习
收藏
- 
独孤九贱(4)\_PHP视频教程
1175042次学习
收藏
- 
PHP实战天龙八部之仿爱奇艺电影网站
729195次学习
收藏
- 
PHP入门视频教程之一周学会PHP
1419953次学习
收藏
- 
ThinkPHP5实战之\[教学管理系统\]
690708次学习
收藏
- 
laravel和swoole连接池操作数据库的细节分析
317次学习
收藏
- 
微信小程序开发--组件篇--十天技能课堂
2101次学习
收藏
- 
ThinkPHP6.x 微实战--十天技能课堂
1509次学习
收藏
- 
Vue.js 微实战--十天技能课堂
942次学习
收藏
- 
ThinkPHP6.x API接口--十天技能课堂
992次学习
收藏
$('.wzrthreeTab>div').click(function(e){
$('.wzrthreeTab>div').removeClass('check')
$(this).addClass('check')
$('.wzrthreelist>ul').css('display','none')
$('.'+e.currentTarget.dataset.id).show()
})
(window.slotbydup = window.slotbydup || \[\]).push({
id: "u6938610",
container: "\_u9zo4aprzs",
async: true
});
最新下载
更多>
- 
- 
- 
$(document).ready(function(){
var sjyx\_banSwiper = new Swiper(".sjyx\_banSwiperwz",{
speed:1000,
autoplay:{
delay:3500,
disableOnInteraction: false,
},
pagination:{
el:'.sjyx\_banSwiperwz .swiper-pagination',
clickable :false,
},
loop:true
})
})
网站特效
网站源码
网站素材
前端模板
-
\[焦点幻灯\] js左侧分类菜单图片轮播代码
-
\[焦点幻灯\] jQuery百叶窗风格图片切换代码
-
\[焦点幻灯\] jQuery仿京东首页广告图片切换
-
\[焦点幻灯\] jQuery无缝轮播插件
-
\[焦点幻灯\] jQuery自适应三屏滚动代码
-
\[焦点幻灯\] jQuery仿今日头条图片轮播代码
-
\[焦点幻灯\] jQuery爆炸切换效果焦点图
-
\[焦点幻灯\] jQuery仿魅族大图轮播幻灯片特效
-
\[Bootstrap模板\] 有机果蔬供应商网页模板 Bootstrap5
-
\[后端模板\] Bootstrap3多功能数据信息后台管理响应式网页模板-Novus
-
\[Bootstrap模板\] 房产资源服务平台网页模板 Bootstrap5
-
\[Bootstrap模板\] 简约简历资料网页模板 Bootstrap4
-
\[Bootstrap模板\] bootstrap响应式宽屏图书教育网站模板-DREAMLIFE
-
\[后端模板\] MAC风格响应式蓝色企业CMS后台管理系统模版
-
\[后端模板\] 响应式渐变大气后台管理系统网站模板-usinessbox
-
\[Bootstrap模板\] 响应式蔬菜水果商店网站模板-Organio
-
\[网站素材\] 九个不同动作和表情的柠檬矢量素材(EPS)
-
\[网站素材\] 蓝色的世界地图矢量素材(EPS+PNG)
-
\[网站素材\] 九个手绘黑白风格的山脉矢量素材(EPS+PNG)
-
\[网站素材\] 八个不同种族和肤色的人物头像矢量素材(AI+EPS+PNG)
-
\[网站素材\] 15个水墨笔刷集合矢量素材(EPS+PNG)
-
\[网站素材\] 逼真的银色 MacBook Pro 电脑模型矢量素材(EPS+PNG)
-
\[网站素材\] 可爱的 happy birthday to you 字母矢量素材(AI+EPS+PNG)
-
\[网站素材\] 带着 VR 眼睛访问网络体验科技的人们矢量素材(EPS)
-
\[前端模板\] HTML5进出口水果公司宣传网站模板
-
\[前端模板\] 用户界面设计服务公司网站模板
-
\[前端模板\] 响应式清洁消毒家政服务网站模板
-
\[前端模板\] 我们要结婚了婚礼邀请函网页模板
-
\[前端模板\] HTML5新闻资讯分享网站模板
-
\[前端模板\] 时尚冬装在线购物商城网站模板
-
\[前端模板\] 响应式在线学习资源网站模板
-
\[前端模板\] 物流运输服务公司宣传网站模板
$('.wzrfourlTab>div').click(function(e){
$('.wzrfourlTab>div').removeClass('check')
$(this).addClass('check')
$('.wzrfourList>ul').css('display','none')
$('.'+e.currentTarget.dataset.id).show()
})
关于我们
免责申明
意见反馈
讲师合作
广告合作
技术文章
知企PROSAAS：公益在线php培训，帮助PHP学习者快速成长！
关注服务号
_
微信扫码
关注PHP中文网服务号
_
技术交流群
_
QQ扫码
加入技术交流群
_
app下载
扫描下载App
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的
Copyright 2014-2023 https://www.php.cn/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 湘ICP备2023035733号
var \_hmt = \_hmt || \[\];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56";
var s = document.getElementsByTagName("script")\[0\];
s.parentNode.insertBefore(hm, s);
})();
layui.use(\['element', 'carousel'\], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip\_invisible: false});});});
$(function() {
//直播倒计时
$(".liveitem").each(function(){
timer(this);
})
function timer(obj){
var intDiff = $(obj).data("countdown");
window.setInterval(function(){
var day=0,
hour=0,
minute=0,
second=0;//时间默认值
if(intDiff > 0){
day = Math.floor(intDiff / (60 \* 60 \* 24));
hour = Math.floor(intDiff / (60 \* 60)) - (day \* 24);
minute = Math.floor(intDiff / 60) - (day \* 24 \* 60) - (hour \* 60);
second = Math.floor(intDiff) - (day \* 24 \* 60 \* 60) - (hour \* 60 \* 60) - (minute \* 60);
}else{
$(obj).find(".phpZbktBg").remove();
return;
}
if (hour <= 9) hour = '0' + hour;
if (minute <= 9) minute = '0' + minute;
if (second <= 9) second = '0' + second;
$(obj).find('.day\_show').html(day+"");
$(obj).find('.hour\_show').html(''+hour+'');
$(obj).find('.minute\_show').html(''+minute+'');
$(obj).find('.second\_show').html(''+second+'');
intDiff--;
}, 1000);
}
});
article\_status = 887227;
var \_hmt = \_hmt || \[\];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56";var s=document.getElementsByTagName("script")\[0\];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')\[0\];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")\[0\];s.parentNode.insertBefore(bp, s);})();
var topadshow = $.cookie('phpcndatatopadshows');if(!topadshow&&1==2){$('.topimages').show();var topobj = $('.topimages').find('.time');var topobj\_day = $('.topimages .time').find('.day');var topobj\_hours = $('.topimages .time').find('.hours');var topobj\_minutes = $('.topimages .time').find('.minutes');var topobj\_second = $('.topimages .time').find('.second');var topday = parseInt(topobj\_day.html());var tophours = parseInt(topobj\_hours.html());var topminutes = parseInt(topobj\_minutes.html());var topsecond = parseInt(topobj\_second.html());setInterval(function(){if(topsecond > 0){topsecond = topsecond-1;}else{if(topminutes > 0){topminutes = topminutes-1;topsecond = 59;}else{if(tophours > 0){tophours = tophours-1;topminutes = 59;topsecond = 59;}else{if(topday > 0){topday = topday -1;tophours = 23;topminutes = 59;topsecond = 59;}else{topobj.html("
活动已结束
");}}}}topobj\_second.html(topsecond);topobj\_minutes.html(topminutes);topobj\_hours.html(tophours);topobj\_day.html(topday);},1000);}$('.topimages .layui-icon-close').click(function(){$.cookie('phpcndatatopadshows',1,{expires:7});$('.topimages').hide();});
.content img{max-width:80%;}
.copy-button {
padding: 5px 10px;
background-color: #666;
border: none;
color: #FFF;
font-size: 12px;
cursor: pointer;
border-radius: 5px;
position: relative;
top: 33px;
right: 5px;
z-index: 99;
float: right;
}
.copy-button:hover {
background-color: #fc3930;
}
$(document).ready(function(){
$('#gongzhonghao').hover(function(){
$('#gzh').show();
},function(){
$('#gzh').hide();
})
})
layui.use(\['jquery','layer'\], function(){
$('.test-iframe-handle').click(function(){
layer.open({
type: 2,
area: \['1300px', '750px'\],
content: 'https://www.php.cn/help/ask?q=React+%E4%B8%AD%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6%E7%9A%84%E5%8F%8B%E5%A5%BD%E4%BB%8B%E7%BB%8D',
fixed: true, // 不固定
//maxmin: true,
shadeClose: true,
title:"智能小助手",
btnAlign: 'c',
yes: function(index, layero){
// 获取 iframe 的窗口对象
var iframeWin = window\[layero.find('iframe')\[0\]\['name'\]\];
var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素
var value = elemMark.val();
if($.trim(value) === '') return elemMark.focus();
// 显示获得的值
layer.msg('获得 iframe 中的输入框标记值：'+ value);
}
});
})
var is\_login = "0";
var show = 0;
var ceng = getCookie('ceng');
//文章下拉弹出登录
if(is\_login == 0 && !ceng)
{
window.onscroll = function(){
var t = document.documentElement.scrollTop || document.body.scrollTop;
var top\_div = document.getElementById( "top\_div" );
if( t >= 2500 && show == 0) {
show = 1
setCookie('ceng',1,1);
$(document).trigger("api.loginpopbox");
}
}
}
//未登录复制显示登录按钮
if(is\_login == 0)
{
$(".code").hover(function(){
$(this).find('.contentsignin').show();
},function(){
$(this).find('.contentsignin').hide();
});
//不给复制
$('.code').bind("cut copy paste",function(e) {
e.preventDefault();
});
$('.code .contentsignin').click(function(){
$(document).trigger("api.loginpopbox");
})
}else
{
// 获取所有的
元素
var preElements = document.querySelectorAll('pre');
// 遍历每个
元素
preElements.forEach(function(preElement) {
// 创建复制按钮
var copyButton = document.createElement('button');
copyButton.className = 'copy-button';
copyButton.textContent = '复制';
// 添加点击事件处理程序
copyButton.addEventListener('click', function() {
// 获取当前按钮所属的
元素中的文本内容
var textContent = preElement.textContent.trim();
// 创建一个临时 textarea 元素并设置其值为
中的文本内容
var tempTextarea = document.createElement('textarea');
tempTextarea.value = textContent;
// 将临时 textarea 添加到文档中
document.body.appendChild(tempTextarea);
// 选中临时 textarea 中的文本内容并执行复制操作
tempTextarea.select();
document.execCommand('copy');
// 移除临时 textarea 元素
document.body.removeChild(tempTextarea);
// 更新按钮文本为 "已复制"
this.textContent = '已复制';
});
// 将按钮添加到
元素前面
preElement.parentNode.insertBefore(copyButton, preElement);
});
}
})
function setCookie(name,value,iDay){ //name相当于键，value相当于值，iDay为要设置的过期时间（天）
var oDate = new Date();
oDate.setDate(oDate.getDate() + iDay);
document.cookie = name + '=' + value + ';path=/;domain=.php.cn;expires=' + oDate;
}
function getCookie(name) {
var cookieArr = document.cookie.split(";");
for(var i = 0; i < cookieArr.length; i++) {
var cookiePair = cookieArr\[i\].split("=");
if(name == cookiePair\[0\].trim()) {
return decodeURIComponent(cookiePair\[1\]);
}
}
return null;
}
window.onload = function() {
// 在这里引用需要延迟加载的 JavaScript 文件
var script = document.createElement('script');
script.src = 'https://cdn.wwads.cn/js/makemoney.js';
document.body.appendChild(script);
};
function aiask(ask){
layer.open({
type: 2,
area: \['1300px', '750px'\],
content: 'https://www.php.cn/help/ask?q='+encodeURIComponent(ask),
fixed: true, // 不固定
//maxmin: true,
shadeClose: true,
title:"智能小助手",
btnAlign: 'c',
yes: function(index, layero){
// 获取 iframe 的窗口对象
var iframeWin = window\[layero.find('iframe')\[0\]\['name'\]\];
var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素
var value = elemMark.val();
if($.trim(value) === '') return elemMark.focus();
// 显示获得的值
layer.msg('获得 iframe 中的输入框标记值：'+ value);
}
});
}
登录PHP中文网，和优秀的人一起学习！
全站2000+教程免费学
微信扫码登录
.layui-fixbar{display: none;}
- 精品班
- 技术支持
- 技术咨询
- 学习群
- 会员优惠
- 返回顶部
**Categories:** WordPress
---