皮蛋很白
皮蛋很白

Redux学习 - 01 简介、工作流、计数器案例、核心API

Redux 简介

Redux 介绍

JavaScript 状态容器，提供可预测化的状态管理。

状态容器

  • 容器：一个 JavaScript 对象
  • 状态：容器对象中的数据，对应 web 页面中 DOM 元素的状态
const state = {
     
  modelOpen: 'yes', // 弹窗是否打开
  btnClicked: 'no', // 按钮是否被点击
  btnActiveClass: 'active', // 按钮的class
  page: 5, // 分页的页码
  size: 10 // 分页的每页展示条数
}

之前在操作页面中 DOM 元素的时候，都是通过 document.getElementById 这种方式先选择 DOM 元素，然后再去操作它。

有了状态容器，就不需要先获取 DOM 元素再操作，可以直接操作这个 DOM 元素所对应的状态对象。

显然，操作对象中的属性相比直接操作 DOM 元素方便很多。

我们可以使用框架，完成改变状态对象的属性值后的 DOM 操作，例如 React Vue Argular，它们内部都有对应的机制把状态同步到 DOM 元素中。

可预测化的状态管理

在一个大型的项目中，糟糕的状态管理通常是导致项目不可维护的重要因素。

Redux 中提供了一种科学化的状态管理的方式，通过这种方式，当状态发生变化的时候，变得可预测，使状态管理变得可维护。

可预测意味着当项目中的状态发生问题的时候，可以很容易的定位到问题出现在哪里。

Redux 核心概念及工作流程

Redux学习 - 01 简介、工作流、计数器案例、核心API_第1张图片

核心：

  • Store：存储状态的容器，JavaScript 对象
    • 所有的状态都存储到 Store 对象中
  • View：视图，HTML 页面
  • Actions：JavaScript 对象，描述对状态进行怎样的操作
    • 包含一个固定的开发人员自己定义的属性 type
  • Reducers：函数，操作状态并返回新的状态
    • 向 Store 中存储或更新状态

流程：

  1. 在 Redux 中所有状态存储在 Store 中，视图 View 是不能直接操作 Store 的。
  2. 如果 View 要操作 Store 就要触发Actions（通过调用 dispatch 方法），通过 Action 描述要对当前 Store 中存储的状态要进行怎样的操作。
  3. Action 会被 Reducer 接收，Reducer 会根据 Action 对象中的 type 对 Store 中的状态进行操作。
  4. 当 Reducer 处理完成之后要返回最新的状态来更新 Store 中的状态。
  5. 当 Store 中的状态发生更新后，再同步给 View（通过调用 subscribe 订阅的方法）。

Redux 计数器案例


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>计数器title>
  head>
  <body>
    <button id="plus">+button>
    <span id="count">0span>
    <button id="minus">-button>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/redux.min.js">script>
    <script>
      // 3. 存储默认状态
      var initialState = {
      
        count: 0
      }

      // 2. 创建 reducer 函数
      function reducer(state = initialState, action) {
      
        switch (action.type) {
      
          case 'increment':
            return {
      
              count: state.count + 1
            }
          case 'decrement':
            return {
      
              count: state.count - 1
            }
          default:
            return state
        }
      }

      // 1. 创建 store 对象，并传递 reducer 函数
      var store = Redux.createStore(reducer)

      // 4. 定义 action
      var increment = {
       type: 'increment' } // +1
      var decrement = {
       type: 'decrement' } // -1

      // 5. 获取按钮 添加点击事件
      document.getElementById('plus').onclick = function () {
      
        // 6. 触发 action
        store.dispatch(increment)
      }
      document.getElementById('minus').onclick = function () {
      
        store.dispatch(decrement)
      }

      // 7. 订阅 store
      store.subscribe(function () {
      
        // 8. 获取 store 对象中存储的状态，更新视图
        document.getElementById('count').textContent = store.getState().count
      })

    script>
  body>
html>

Redux 核心 API

// 创建 store 状态容器
const store = Redux.createStore(reducer)
// 创建用于处理状态的 reducer 函数，返回值就是 store 中要存储的状态
function reducer (state = initialState, actione) {
     }
// 获取状态
store.getState()
// 订阅状态
store.subscribe(function () {
     })
// 触发 action
store.dispatch({
      type: 'description...' })

你可能感兴趣的:(react)

  • 19.0-《超越感觉》-说服他人 SAM52
    Becausethoughtfuljudgmentsdeservetobeshared,andthewaytheyarepresentedcanstronglyinfluencethewayothersreacttothem.因为经过深思熟虑的判断值得分享，而这些判断的呈现方式会强烈影响其他人对它们的反应。Bylearningtheprinciplesofpersuasionandapplying
  • 全面解析：Spring Gateway如何优雅处理微服务的路由转发？ 万猫学社 gatewayjavaspring
    SpringGateway简介SpringGateway，这是一个基于Spring5、SpringBoot2和ProjectReactor的API网关。它旨在为微服务架构提供一个简单、有效的统一的API路由、限流、熔断等功能。在微服务的世界里，SpringGateway就像一个交通警察，负责指挥和引导各个微服务之间的交通。相较于其他的网关技术，比如Nginx、Zuul等，SpringGateway
  • 从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
    作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：[email protected]各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是
  • Vue3组合API初体验 DTcode7 Vue实战指南VUEHTMLwebvue框架前端
    Vue3组合API初体验基本概念与作用说明示例一：使用ref创建响应式数据示例二：使用reactive创建响应式对象示例三：使用computed计算属性示例四：使用watch监听数据变化示例五：使用provide/inject进行父子组件间通信功能使用思路与实际开发技巧1.何时使用ref与reactive？2.如何在组合式API中保持逻辑的清晰？3.如何处理异步操作？随着Vue3的发布，组合式AP
  • 第七篇 快速开始-序 深圳都这么冷
    快速开始欢迎使用React文档！本页将向您介绍您每天会用到的80%的React概念。本章内容预告如何创建和嵌套组件如何添加标记和样式如何显示数据如何渲染条件表达式和列表表达式如何响应事件和更新屏幕如何在组件之间共享数据创建和嵌套组件React应用程序由组件组成。组件是UI（用户界面）的一部分，具有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。React组件是返回标记的JavaScri
  • maven指定子项目打包
    Maven多个mudule只编译、打包指定module在多module的maven项目中，如果每次打包整个工程显得有些冗余和笨重。例如A,B,P的继承关系为P|—–A|—–B即P包含A,B的module，每次打包P都会将A,B都打包。假如我只修改了A模块，那么每次都要将B都一块打包吗？当然不是，maven提供了自定义参数：-pl,--projectsBuildspecifiedreactorpro
  • React组件中的this指向问题
    在React组件中，函数定义方式影响this指向的核心原因是箭头函数与普通函数的作用域绑定规则不同，具体差异如下：1.普通函数（function定义）需要手动bind(this)的原因当用function在组件内定义方法时：classMyComponentextendsReact.Component{handleClick(){console.log(this);//若未绑定，此处this为und
  • Rust 全栈应用框架 Dioxus：从前端到桌面再到 WASM 的统一开发体验 掘金安东尼 字节阿里rust前端wasm
    如果你正在寻找一个能用Rust写前端、桌面应用、移动应用甚至WebAssembly的统一框架，Dioxus是目前生态中最具潜力的选择之一。为什么需要Dioxus？随着WebAssembly（WASM）与Rust的发展，越来越多开发者开始思考：Rust是否能做“全栈”？是否能有像React一样的组件模型？是否可以用Rust写桌面GUI，甚至Web前端？Dioxus正是这个愿景下的产物。它是一个受Re
  • IntelliJ IDEA 高效开发指南：从基础操作到高级技巧 zqmgx13291 intellij-ideajavaide
    一、IDEA概述与环境配置1.1IDEA的核心优势智能代码辅助：基于上下文的代码补全（Ctrl+Space）、方法参数提示、错误实时检测全栈开发支持：内置Java/Python/JavaScript等20+语言支持，框架集成（SpringBoot/Vue/React）工具链集成：版本控制（Git/SVN）、数据库（MySQL/PostgreSQL）、容器（Docker/K8s）一站式开发性能优化：
  • react class和function 如何模拟vue中的 双向绑定 监听 computed的方式
    在React中，类组件和函数组件的写法有所不同。你提到的「双向绑定」、「监听」和「computed（计算属性）」这几个概念，原本来源于Vue，但在React中我们也可以通过特定方式实现类似功能。下面我将分别介绍：1.类组件中的双向绑定在类组件中，要实现双向绑定（如表单输入），我们通常使用state和onChange：importReactfrom'react';classMyFormextends
  • PostGIS面试题及详细答案120道之 （021-030 ） 还是大剑师兰特 大剑师postgis面试题
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录21.为什么要在PostGIS中使用空间索引？22.PostGIS支持哪些类型的
  • Java面试题及详细答案120道之（081-100） 还是大剑师兰特 前后端面试题大剑师java面试题
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录81.Java中的`ConcurrentHashMap`与`HashMap`在并
  • Openlayers 面试题及答案180道（41-60） 还是大剑师兰特 #前后端面试题大剑师Openlayers面试题Openlayers示例Openlayers教程
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录41.如何在OpenLayers中加载WFS数据？42.在OpenLayers中
  • CSS面试题及详细答案140道之（41-60） 还是大剑师兰特 前后端面试题css前端大剑师CSS面试CSS示例
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录41.如何在不使用额外标记的情况下隐藏文本但保留其可访问性？42.解释`text
  • 2025年02月13日 · Go生态洞察：可扩展的 WebAssembly 应用 猫头虎 #Go生态洞察golangwasm开发语言后端go1.19gobeego
    2025年02月13日·Go生态洞察：可扩展的WebAssembly应用摘要大家好，我是猫头虎。本篇文章将带领大家深入剖析Go1.24在WebAssembly（Wasm）领域的最新特性：go:wasmexport指令、WASIReactor构建模式、丰富类型支持及其限制，并通过示例代码演示如何在实际项目中灵活运用。关键词：WebAssembly、WASI、Go1.24、go:wasmexport、
  • 每天一个前端小知识 Day 17 - 微前端架构实战与 Module Federation
    微前端架构实战与ModuleFederation为什么要微前端？✅传统SPA的问题：问题描述构建时间越来越长单体应用构建缓慢，难以增量部署多团队协作困难不同业务线互相依赖紧耦合技术栈难以迁移老项目技术债，无法局部替换✅微前端目标：像微服务一样拆前端系统各子应用独立开发、独立部署、独立运行支持多技术栈共存（React+Vue+原生）核心架构方案一览架构方式技术实现适用场景iframe方式每个子应用独
  • 你的一个箭头函数让我找了几天 JsLin_
    同事的h5的相关内容给我接手了，上线后发现好多手机浏览器不显示内容，就是这个问题断断续续找了有两个星期的时间，迫使我把他的h5相关的内容用react重构了一遍，重构完又发现一大堆事情。先抱怨下吧首先，一个网站的域名竟然不指定首页？大图片资源不压缩？找了一段时间，没找到原因，迫使我把它的代码用react重构了，也正好练练手。重构完了之后，发现运维那里的以前的工程nginx部署没有指定主页，才发现官网
  • 面试复盘：为什么Vue2的data数据量大时内存开销大？ neon1204 前端面试面试前端javascriptvue.js
    背景描述今天前端技术面试中，面试官针对Vue2的源码和性能方面提问：“当data中存储大量数据时，为什么内存开销显著增加？”。本文复盘梳理我的回答思路：一、核心机制：Object.defineProperty的递归与闭包Vue2的响应式系统通过递归遍历data中的每个属性，将其转换为getter/setter。这一过程在源码中由defineReactive函数实现，其内存开销主要来自以下三点：1.
  • React入门指南——指北指南（第二节） 逢着 react.js前端前端框架
    React实践：创建你的第一个待办事项列表在前面的章节中，我们学习了React的核心概念（组件、Props、State等）。本节将通过一个实际案例——创建待办事项列表（TodoList），帮助你巩固这些概念，并掌握React中处理用户交互、动态数据的基本方法。案例目标我们将构建一个简单但功能完整的待办事项应用，包含以下功能：输入框中输入文本，点击按钮添加新的待办项；显示所有待办项的列表；点击单个待
  • React入门学习——指北指南（第三节） 逢着 react.js学习前端
    React组件在前面的内容中，我们了解了React的基础知识和入门案例。本节将深入探讨React中最核心的概念之一——组件。组件是构建React应用的基础，理解组件的工作原理和使用方法，对于掌握React开发至关重要。什么是组件？在React中，组件是具有独立功能和UI的可复用代码块。可以将组件看作是构建用户界面的“积木”，通过组合不同的组件，能够搭建出复杂的页面。组件就像一个函数，它可以接收输入
  • Java面试题及详细答案120道之（041-060） 还是大剑师兰特 前后端面试题大剑师java面试题
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录41.什么是工厂模式？简单工厂、工厂方法、抽象工厂的区别？42.Java中的泛型
  • 快速梳理遗留项目 lixzest pythonjavac++
    梳理一个别人写的代码项目是开发者常遇到的任务，尤其是接手遗留项目或团队协作时。以下是系统化的步骤和技巧，帮助快速理解项目结构和逻辑：1.了解项目背景项目目标：与产品经理或前任开发者沟通，明确项目用途（如电商系统、数据分析工具等）。技术栈：确认语言（Python/Java/Go等）、框架（Spring/Django/React等）、数据库（MySQL/MongoDB等）。文档检查：优先阅读READM
  • 如何实现零成本裂变?微信推客带货小程序开发功能模式全解析 开发加微信：hedian116 微信
    引言在当今社交电商蓬勃发展的背景下，微信推客系统作为一种基于社交关系的分销模式，其技术实现和架构设计值得开发者深入探讨。本文将从技术角度分析微信推客系统的核心组件和实现原理，避免商业营销，专注于技术层面的分享。一、微信推客系统的基本架构1.1前端架构微信推客系统通常采用混合开发模式：小程序前端：使用WXML+WXSS+JavaScript技术栈H5页面：Vue.js或React框架实现跨平台兼容原
  • React Native启动android报错 Failed to install the app. Command failed with exit code 1: gradlew.b（亲测有效） 安心不心安 ReactNative学习笔记reactnativeandroidreact.js
    一、原因react-nativerun-android或npxreact-nativestart命令的默认行为是：编译APK（通过Gradle）。安装APK到设备（通过adbinstall）。启动应用（通过adbshellamstart）。如果模拟器未提前启动：adb可能找不到设备，导致安装步骤失败。错误可能表现为Noconnecteddevices!或INSTALL_FAILED。二、解决方法注
  • 算法在前端框架中的集成
    引言算法是前端开发中提升性能和用户体验的重要工具。随着Web应用复杂性的增加，现代前端框架如React、Vue和Angular提供了强大的工具集，使得将算法与框架特性（如状态管理、虚拟DOM和组件化）无缝集成成为可能。从排序算法优化列表渲染到动态规划提升复杂计算效率，算法的集成能够显著改善应用的响应速度和资源利用率。本文将探讨如何将常见算法（排序、搜索和动态规划）集成到前端框架中，重点介绍框架特性
  • React Native 双向无限滚动组件教程
    ReactNative双向无限滚动组件教程项目介绍react-native-bidirectional-infinite-scroll是一个基于ReactNative的FlatList组件扩展库，旨在实现双向无限滚动功能，并保持平滑的滚动体验。该组件允许用户在列表的顶部和底部进行无限滚动加载，适用于需要大量数据展示的应用场景。项目快速启动安装首先，通过npm或yarn安装react-native-
  • 1、云原生开发：Go 与 React 构建之路 sea99 云原生开发Go语言React框架
    云原生开发：Go与React构建之路1.香港天际线与海港之景香港以其壮观的天际线和海港闻名。据相关数据，香港拥有315座高度至少150米的建筑，数量超过全球任何其他城市。近四分之三的摩天大楼为住宅，这也解释了为何香港居住在14层以上的居民比其他城市更多。香港最高的建筑是国际商业中心，高达484米，比帝国大厦尖顶还高出40多米。在天气良好的夜晚，游客可以欣赏到“幻彩咏香江”灯光音乐汇演，这场灯光和激
  • Rails：为什么这个“过气”框架还能让你爽到飞起？(Web开发老炮的真心话) datadreamer 前端服务器数据库其他
    文章目录伙计们，聊聊Rails吧！RubyonRails。这名字，在如今React、Vue、各种微服务满天飞的时代，听起来是不是有点…**复古**？我第一次接触Rails还是十几年前（暴露年龄了！），当时就被它惊到了：**“写Web应用还能这么爽？！”**这么多年过去，经历各种技术浪潮冲刷，Rails不仅没死，反而活得挺滋润？为啥？因为它抓住了开发者的**核心痛点**——**效率**和**愉悦感*
  • Java面试题及详细答案120道之（021-040） 还是大剑师兰特 前后端面试题大剑师java面试题
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录21.对象在java中如何序列化？22.Java中的try…catch是用于异常
  • 前端 JavaScript 跨端开发框架对比 AI实战架构笔记 AI架构开发实战前端javascript开发语言ai
    前端JavaScript跨端开发框架对比关键词：JavaScript、跨端开发、ReactNative、Flutter、Weex、Taro、Uni-app、性能优化摘要：本文深入对比了当前主流的JavaScript跨端开发框架，包括ReactNative、Flutter、Weex、Taro和Uni-app。我们将从架构原理、性能表现、开发体验、生态支持和实际应用场景等多个维度进行全面分析，帮助开发
  • jQuery 键盘事件keydown ,keypress ,keyup介绍 107x jsjquerykeydownkeypresskeyup
    本文章总结了下些关于jQuery 键盘事件keydown ,keypress ,keyup介绍，有需要了解的朋友可参考。 一、首先需要知道的是： 1、keydown() keydown事件会在键盘按下时触发. 2、keyup()  代码如下 复制代码 $('input').keyup(funciton(){      
  • AngularJS中的Promise bijian1013 JavaScriptAngularJSPromise
    一.Promise         Promise是一个接口，它用来处理的对象具有这样的特点：在未来某一时刻（主要是异步调用）会从服务端返回或者被填充属性。其核心是，promise是一个带有then()函数的对象。         为了展示它的优点，下面来看一个例子，其中需要获取用户当前的配置文件： var cu
  • c++ 用数组实现栈类 CrazyMizzz 数据结构C++
    #include<iostream> #include<cassert> using namespace std; template<class T, int SIZE = 50> class Stack{ private: T list[SIZE];//数组存放栈的元素 int top;//栈顶位置 public: Stack(
  • java和c语言的雷同 麦田的设计者 java递归scaner
    软件启动时的初始化代码，加载用户信息2015年5月27号 从头学java二 1、语言的三种基本结构：顺序、选择、循环。废话不多说，需要指出一下几点：      a、return语句的功能除了作为函数返回值以外，还起到结束本函数的功能，return后的语句 不会再继续执行。      b、for循环相比于whi
  • LINUX环境并发服务器的三种实现模型 被触发 linux
    服务器设计技术有很多，按使用的协议来分有TCP服务器和UDP服务器。按处理方式来分有循环服务器和并发服务器。 1  循环服务器与并发服务器模型 在网络程序里面，一般来说都是许多客户对应一个服务器，为了处理客户的请求，对服务端的程序就提出了特殊的要求。 目前最常用的服务器模型有： ·循环服务器：服务器在同一时刻只能响应一个客户端的请求 ·并发服务器：服
  • Oracle数据库查询指令 肆无忌惮_ oracle数据库
    20140920   单表查询 -- 查询************************************************************************************************************ -- 使用scott用户登录   -- 查看emp表   desc emp  
  • ext右下角浮动窗口 知了ing JavaScriptext
    第一种 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
  • 浅谈REDIS数据库的键值设计 矮蛋蛋 redis
    http://www.cnblogs.com/aidandan/ 原文地址：http://www.hoterran.info/redis_kv_design 丰富的数据结构使得redis的设计非常的有趣。不像关系型数据库那样，DEV和DBA需要深度沟通，review每行sql语句，也不像memcached那样，不需要DBA的参与。redis的DBA需要熟悉数据结构，并能了解使用场景。
  • maven编译可执行jar包 alleni123 maven
    http://stackoverflow.com/questions/574594/how-can-i-create-an-executable-jar-with-dependencies-using-maven <build> <plugins> <plugin> <artifactId>maven-asse
  • 人力资源在现代企业中的作用 百合不是茶 HR 企业管理
    //人力资源在在企业中的作用人力资源为什么会存在，人力资源究竟是干什么的 人力资源管理是对管理模式一次大的创新，人力资源兴起的原因有以下点： 工业时代的国际化竞争，现代市场的风险管控等等。所以人力资源 在现代经济竞争中的优势明显的存在，人力资源在集团类公司中存在着 明显的优势(鸿海集团)，有一次笔者亲自去体验过红海集团的招聘，只 知道人力资源是管理企业招聘的 当时我被招聘上了，当时给我们培训 的人
  • Linux自启动设置详解 bijian1013 linux
    linux有自己一套完整的启动体系，抓住了linux启动的脉络，linux的启动过程将不再神秘。 阅读之前建议先看一下附图。 本文中假设inittab中设置的init tree为： /etc/rc.d/rc0.d /etc/rc.d/rc1.d /etc/rc.d/rc2.d /etc/rc.d/rc3.d /etc/rc.d/rc4.d /etc/rc.d/rc5.d /etc
  • Spring Aop Schema实现 bijian1013 javaspringAOP
    本例使用的是Spring2.5 1.Aop配置文件spring-aop.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmln
  • 【Gson七】Gson预定义类型适配器 bit1129 gson
    Gson提供了丰富的预定义类型适配器，在对象和JSON串之间进行序列化和反序列化时，指定对象和字符串之间的转换方式，   DateTypeAdapter   public final class DateTypeAdapter extends TypeAdapter<Date> { public static final TypeAdapterFacto
  • 【Spark八十八】Spark Streaming累加器操作（updateStateByKey) bit1129 update
    在实时计算的实际应用中，有时除了需要关心一个时间间隔内的数据，有时还可能会对整个实时计算的所有时间间隔内产生的相关数据进行统计。 比如： 对Nginx的access.log实时监控请求404时，有时除了需要统计某个时间间隔内出现的次数，有时还需要统计一整天出现了多少次404，也就是说404监控横跨多个时间间隔。   Spark Streaming的解决方案是累加器，工作原理是，定义
  • linux系统下通过shell脚本快速找到哪个进程在写文件 ronin47
    一个文件正在被进程写 我想查看这个进程 文件一直在增大 找不到谁在写 使用lsof也没找到 这个问题挺有普遍性的，解决方法应该很多，这里我给大家提个比较直观的方法。 linux下每个文件都会在某个块设备上存放，当然也都有相应的inode, 那么透过vfs.write我们就可以知道谁在不停的写入特定的设备上的inode。 幸运的是systemtap的安装包里带了inodewatch.stp，位
  • java-两种方法求第一个最长的可重复子串 bylijinnan java算法
    import java.util.Arrays; import java.util.Collections; import java.util.List; public class MaxPrefix { public static void main(String[] args) { String str="abbdabcdabcx";
  • Netty源码学习-ServerBootstrap启动及事件处理过程 bylijinnan javanetty
    Netty是采用了Reactor模式的多线程版本，建议先看下面这篇文章了解一下Reactor模式： http://bylijinnan.iteye.com/blog/1992325 Netty的启动及事件处理的流程，基本上是按照上面这篇文章来走的 文章里面提到的操作，每一步都能在Netty里面找到对应的代码 其中Reactor里面的Acceptor就对应Netty的ServerBo
  • servelt filter listener 的生命周期 cngolon filterlistenerservelt生命周期
    1. servlet    当第一次请求一个servlet资源时，servlet容器创建这个servlet实例，并调用他的 init(ServletConfig config)做一些初始化的工作，然后调用它的service方法处理请求。当第二次请求这个servlet资源时，servlet容器就不在创建实例，而是直接调用它的service方法处理请求，也就是说
  • jmpopups获取input元素值 ctrain JavaScript
    jmpopups 获取弹出层form表单 首先，我有一个div，里面包含了一个表单，默认是隐藏的，使用jmpopups时，会弹出这个隐藏的div，其实jmpopups是将我们的代码生成一份拷贝。 当我直接获取这个form表单中的文本框时，使用方法：$('#form input[name=test1]').val()；这样是获取不到的。 我们必须到jmpopups生成的代码中去查找这个值，$(
  • vi查找替换命令详解 daizj linux正则表达式替换查找vim
    一、查找 查找命令 /pattern<Enter> ：向下查找pattern匹配字符串 ?pattern<Enter>：向上查找pattern匹配字符串 使用了查找命令之后，使用如下两个键快速查找： n：按照同一方向继续查找 N：按照反方向查找 字符串匹配 pattern是需要匹配的字符串，例如： 1:  /abc<En
  • 对网站中的js,css文件进行打包 dcj3sjt126com PHP打包
    一，为什么要用smarty进行打包 apache中也有给js,css这样的静态文件进行打包压缩的模块，但是本文所说的不是以这种方式进行的打包，而是和smarty结合的方式来把网站中的js,css文件进行打包。 为什么要进行打包呢，主要目的是为了合理的管理自己的代码 。现在有好多网站，你查看一下网站的源码的话，你会发现网站的头部有大量的JS文件和CSS文件，网站的尾部也有可能有大量的J
  • php Yii: 出现undefined offset 或者 undefined index解决方案 dcj3sjt126com undefined
    在开发Yii 时，在程序中定义了如下方式：        if($this->menuoption[2] === 'test')，那么在运行程序时会报：undefined offset:2，这样的错误主要是由于php.ini 里的错误等级太高了，在windows下错误等级
  • linux 文件格式（1） sed工具 eksliang linuxlinux sed工具sed工具linux sed详解
    转载请出自出处： http://eksliang.iteye.com/blog/2106082 简介       sed 是一种在线编辑器，它一次处理一行内容。处理时，把当前处理的行存储在临时缓冲区中，称为“模式空间”（pattern space），接着用sed命令处理缓冲区中的内容，处理完成后，把缓冲区的内容送往屏幕。接着处理下一行，这样不断重复，直到文件末尾
  • Android应用程序获取系统权限 gqdy365 android
    引用 如何使Android应用程序获取系统权限         第一个方法简单点，不过需要在Android系统源码的环境下用make来编译：         1. 在应用程序的AndroidManifest.xml中的manifest节点
  • HoverTree开发日志之验证码 hvt .netC#asp.nethovertreewebform
    HoverTree是一个ASP.NET的开源CMS，目前包含文章系统，图库和留言板功能。代码完全开放，文章内容页生成了静态的HTM页面，留言板提供留言审核功能，文章可以发布HTML源代码，图片上传同时生成高品质缩略图。推出之后得到许多网友的支持，再此表示感谢！留言板不断收到许多有益留言，但同时也有不少广告，因此决定在提交留言页面增加验证码功能。ASP.NET验证码在网上找，如果不是很多，就是特别多
  • JSON API：用 JSON 构建 API 的标准指南中文版 justjavac json
    译文地址：https://github.com/justjavac/json-api-zh_CN 如果你和你的团队曾经争论过使用什么方式构建合理 JSON 响应格式， 那么 JSON API 就是你的 anti-bikeshedding 武器。 通过遵循共同的约定，可以提高开发效率，利用更普遍的工具，可以是你更加专注于开发重点：你的程序。 基于 JSON API 的客户端还能够充分利用缓存，
  • 数据结构随记_2 lx.asymmetric 数据结构笔记
    第三章 栈与队列 一．简答题 1. 在一个循环队列中，队首指针指向队首元素的  前一个    位置。  2.在具有n个单元的循环队列中，队满时共有  n-1  个元素。  3. 向栈中压入元素的操作是先  移动栈顶指针&n
  • Linux下的监控工具dstat 网络接口 linux
    1) 工具说明dstat是一个用来替换 vmstat,iostat netstat,nfsstat和ifstat这些命令的工具, 是一个全能系统信息统计工具. 与sysstat相比, dstat拥有一个彩色的界面, 在手动观察性能状况时, 数据比较显眼容易观察; 而且dstat支持即时刷新, 譬如输入dstat 3, 即每三秒收集一次, 但最新的数据都会每秒刷新显示. 和sysstat相同的是,
  • C 语言初级入门--二维数组和指针 1140566087 二维数组c/c++指针
    /* 二维数组的定义和二维数组元素的引用 二维数组的定义： 当数组中的每个元素带有两个下标时，称这样的数组为二维数组； (逻辑上把数组看成一个具有行和列的表格或一个矩阵); 语法： 类型名 数组名[常量表达式1][常量表达式2] 二维数组的引用： 引用二维数组元素时必须带有两个下标，引用形式如下： 例如： int a[3][4];  引用：
  • 10点睛Spring4.1-Application Event wiselyman application
    10.1 Application Event Spring使用Application Event给bean之间的消息通讯提供了手段 应按照如下部分实现bean之间的消息通讯 继承ApplicationEvent类实现自己的事件 实现继承ApplicationListener接口实现监听事件 使用ApplicationContext发布消息
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他