### [React 中高阶组件的友好介绍](https://www.prosaas.cn/article/14878)
**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
作者最新文章
-
快手宣布停止商业投放第三方微短剧小程序，计划在年底前实施
2023-12-15 19:30:44
-
豪华的跨界之旅即将开启：荣耀 Magic6 保时捷版震撼登场！
2023-12-15 19:30:36
-
大历史视野下的新周期：生成式AI能否让PC再次伟大？
2023-12-15 19:09:40
-
七部门：实施 4K / 8K 超高清入户行动，鼓励 4K / 8K 电视等产品入户
2023-12-15 18:57:18
-
AI如何改变机器人：陈润泽的新变化、新苗头和新转向
2023-12-15 18:44:07
-
索尼VR "足球体互动"专利获批：利用脚部控制球体互动
2023-12-15 18:36:00
-
联想阿木：AI PC时代，每个人都可拥有自己的分身
2023-12-15 18:29:59
-
商场进入AI时代：银泰商业陈晓东的见解
2023-12-15 18:27:26
-
上海交大团队利用深度学习进行运动评估，促进脑瘫早期筛查
2023-12-15 18:21:23
-
英伟达打脸AMD：H100在软件加持下，AI性能比MI300X快47%！
2023-12-15 18:15:12
最新问题
从来源“https://example.com”访问即使我允许 https://example.com/ 也被阻止
我有一个使用React、Node.js和Socket.io制作的应用程序我将Node后端部署到heroku，前端部署到Netlify我知道CORS错误与服务器有关，但无论我添加什么...
P粉805922437来自于2023-12-14 16:39:45
0
2
201
Vue - 高级 Cropper（未捕获类型错误：this.$refs.cropper.getResult 不是函数）
我有一个VueAdvancedCropper的裁剪功能，如下所示：crop(){const{canvas}=this.$refs.cropper.getResult();if(ca...
P粉054616867来自于2023-12-14 15:01:09
0
2
197
传递给 Illuminate\\Database\\Grammar::parameterize() 的参数 1 必须是数组类型，给定字符串，在
foreach($request->perbaikan\_laporanas$key=>$value){Perbaikan\_laporan::create(\["...
P粉366946380来自于2023-12-14 09:50:33
0
1
276
Laravel 紧凑()
我有一个有趣的问题，关于PHP中的紧凑和Laravel中的紧凑。以PHP中的紧凑示例为例：$banana="yellow";$apple="red&q...
P粉697408921来自于2023-12-13 23:50:03
0
1
193
Laravel Livewire 在传输到运行 nginx 的实时服务器后无法工作
当我将项目传输到生产服务器时遇到问题，livewire停止工作。服务器正在运行nginx。当我在组件内触发wire:click事件（单击按钮）时，我在响应中收到错误：Symfony...
P粉043470158来自于2023-12-13 22:47:38
0
1
188
如何使用 Laravel 的服务提供程序进行外部 API 使用（利用基于用户的凭据）
所以我正在开发一个Laravel管理应用程序，它使用外部API，我们称之为PlatformAPI。平台的工作方式是，我的应用程序的用户在平台上有一个帐户。我的Laravel应用程序...
P粉465675962来自于2023-12-13 21:03:48
0
1
151
如何避免运行此命令 'sudo amazon-linux-extras install -y lamp-mariadb10.2-php7.2 php7.2'？
我正在关注本教程：https://aws.amazon.com/getting-started/hands-on/deploy-wordpress-with-amazon-rds/...
P粉938936304来自于2023-12-13 19:01:43
0
1
162
Google Analytics Data API v1：执行 runReport 并仅检索 JSON 数据
目前我正在尝试使用GoogleAnalyticsDataAPIv1从GA4获取json数据。但是，返回的响应不是纯json数据，相反，如果我只是使用PHP打印它，它会给我{}。但是...
P粉356361722来自于2023-12-13 17:37:47
0
1
158
Chrome浏览器中的Laravel中的Dump and Die函数返回了无法加载响应数据的错误：没有找到给定标识符的资源
{dd($request->all());die;}为什么dd不返回结果，只显示chrome浏览器中无法加载响应数据：没有带有给定标识符的资源？
P粉752826008来自于2023-12-13 16:33:09
0
1
253
如果产品未设置，则在保存时添加属性：WooCommerce
保存产品时，我想检查该产品是否具有特定属性。就我而言，pa\_region。如果没有，我想将属性集和属性术语添加到产品中。如果属性pa\_region已设置，我不想更新/更改它。我看到...
P粉555682718来自于2023-12-13 15:49:42
0
1
223
相关专题
更多>
- 
spotlight搜索是什么
- 
正则表达式中如何匹配数字
- 
待机快捷键
- 
网络连不上是什么原因
- 
mysql query error错误怎么解决
- 
latex双引号怎么打
- 
网络拓扑结构
- 
nozoomer
热门推荐
-
wordpress收费么
-
WordPress 中functions.php 文件的 5 个实际应用
-
在 WordPress 中使用 Dashicons：综合指南
-
重置 WordPress 网站的指南
-
使用免费插件在WordPress中创建联系表单
-
从 WordPress 网站提取帖子的指南
-
重温 Squire：高效的 HTML5 富文本编辑器
-
创建 WordPress 登陆页面：分步指南
-
在 WordPress 中进行 A/B 测试的指南
-
修改WordPress中的特色图像大小
热门教程
更多>
相关推荐
热门推荐
最新课程
- 
phpStudy极速入门视频教程
511219次学习
收藏
- 
独孤九贱(1)\_HTML5视频教程
590441次学习
收藏
- 
独孤九贱(5)\_ThinkPHP5视频教程
1175671次学习
收藏
- 
最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)
1354766次学习
收藏
- 
独孤九贱(4)\_PHP视频教程
1175383次学习
收藏
- 
PHP实战天龙八部之仿爱奇艺电影网站
729404次学习
收藏
- 
PHP入门视频教程之一周学会PHP
1420652次学习
收藏
- 
ThinkPHP5实战之\[教学管理系统\]
690956次学习
收藏
- 
swoole进程树解析
36次学习
收藏
- 
laravel和swoole连接池操作数据库的细节分析
350次学习
收藏
- 
微信小程序开发--组件篇--十天技能课堂
2185次学习
收藏
- 
ThinkPHP6.x 微实战--十天技能课堂
1755次学习
收藏
- 
Vue.js 微实战--十天技能课堂
996次学习
收藏
$('.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远程教育服务机构网站模板
-
\[前端模板\] 数字解决方案增长机构网站模板
-
\[前端模板\] IT业务服务公司网站模板
-
\[前端模板\] 桌椅办公家具公司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 | php.cn | 湘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
---