神奇大叔
神奇大叔

css 样式隔离

文章目录

  • BEM（Block Element Modifier）
  • CSS Modules
  • Shadow DOM
  • CSS-in-JS
  • Scoped CSS

BEM（Block Element Modifier）

  • Block：表示一个独立的、具有明确功能的实体。例如，.header 或 .nav。
  • Element：表示一个 Block 内的元素。它始终与其父 Block 相关联，并使用双下划线分隔。例如，.button__icon 或 .form__input
  • Modifier：表示 Block 或 Element 的状态、变体或特性。它使用双连字符分隔。例如，.button–primary 或 .form__input–invalid。
/* 基本 Block */
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
}

/* Element */
.button__icon {
  /* 添加 icon 的样式 */
}

/* Modifier */
.button--primary {
  background-color: #008CBA;
}

.button--danger {
  background-color: #f44336;
}

CSS Modules

  • 每个组件都有独立的 CSS 文件，并在构建过程中为每个类生成唯一的哈希值，以确保样式隔离
// 通过 css-loader 转换 hash 类名
const path = require('path');
const { getLocalIdent } = require('./css-modules');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              module: true,
              getLocalIdent: (loaderContext, localIdentName, localName, options) => {
                return getLocalIdent(loaderContext, localIdentName, localName, options);
              },
            },
          },
        ],
      },
    ],
  },
};

// 将类名转换成唯一 hash
const fs = require('fs');
const path = require('path');
const crypto = require('crypto');

function generateHashedClassName(filename, className) {
  const content = fs.readFileSync(filename, 'utf-8');
  const hash = crypto
    .createHash('md5')
    .update(content)
    .digest('base64')
    .substr(0, 5);
  
  return `${className}--${hash}`;
}

function getLocalIdent(loaderContext, localIdentName, localName, options) {
  const fileName = path.basename(loaderContext.resourcePath);
  return generateHashedClassName(loaderContext.resourcePath, localName);
}

module.exports = {
  getLocalIdent
};

Shadow DOM

  • 使用 Shadow DOM 技术，组件的 CSS 样式会被限制在组件的局部范围内，从而实现样式隔离。

详情

CSS-in-JS

  • 动态生成样式：在 CSS-in-JS 中，组件的样式可以通过 inline JavaScript 对象或模板字符串直接在组件中赋值。这意味着可以根据组件的属性和状态动态调整样式。
  • 局部作用范围：由于 CSS-in-JS 将样式直接与特定组件关联，每个组件的样式都具有局部作用范围。通过局部变量和组件生命周期钩子，可以在组件卸载时自动取消应用其样式，避免影响其他组件的样式。
  • 唯一的类名：当使用 CSS-in-JS 库（例如 styled-components）时，它们会在运行时为每个组件生成唯一的类名。这使得每个组件的样式完全分离，不会与其他组件发生命名冲突。
  • 优化渲染：CSS-in-JS 库会在组件挂载时自动将样式插入到 DOM 中。这样可以确保只有必要的样式被渲染，以提高性能和避免渲染不必要的全局样式。

核心是将唯一样式和元素关联起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-in-JS</title>
</head>
<body>
    <button id="myButton">Click me!</button>

    <script src="css-in-js.js"></script>
</body>
</html>

const myButton = document.getElementById('myButton');

// 生成唯一哈希值
function generateHash() {
  return Math.random().toString(36).substr(2, 5);
}

// 创建样式标签
function createStyleTag(css) {
  const style = document.createElement('style');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(css));
  document.head.appendChild(style);
}

// 将样式与元素关联
function cssInJs(element, styles) {
  const hashedClassName = 'css_in_js_' + generateHash();
  element.classList.add(hashedClassName);

  const css = `
    .${hashedClassName} {
      background-color: lightblue;
      color: white;
      padding: 0.5rem 1rem;
      border: none;
      font-size: 1.2rem;
      cursor: pointer;
    }
  `;
  createStyleTag(css);
}

// 应用样式
cssInJs(myButton);

Scoped CSS

  • 使用 Scoped CSS 技术来实现 CSS 隔离，每个组件的样式都会被包裹在一个特定的属性选择器中，避免样式冲突和影响。
const myButton = document.getElementById('myButton');
const styleElement = document.getElementById('css');

// 生成唯一哈希值
function generateHash() {
  return Math.random().toString(36).substr(2, 5);
}

// 添加唯一属性
function addScopedAttribute(element, attributeName) {
  element.setAttribute(attributeName, '');
}

// 创建 Scoped CSS 的样式
function createScopedCSS(attributeName, css) {
  // 将应用到组件的原始选择器类名替换成属性选择器
  // .myButton {...} 类样式将变为 .myButton[data-scoped-abcdef] {...}
  const scopedCSS = css.replace(/(\.\w+)/g, `$1[${attributeName}]`);
  styleElement.textContent += scopedCSS;
}

// 实现 Scoped CSS
function scopedCSS(element, styles) {
  const uniqueAttribute = `data-scoped-${generateHash()}`;
  // 将唯一属性设置到元素上，从而能通过属性选择器匹配
  addScopedAttribute(element, uniqueAttribute);
  createScopedCSS(uniqueAttribute, styles);
}

// 定义样式
const buttonStyles = `
  .myButton {
    background-color: lightblue;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
  }
`;

// 应用样式
scopedCSS(myButton, buttonStyles);

你可能感兴趣的:(css,css,前端,javascript)

  • Vue源码深度解析：从2.x到3.x的架构演进与核心原理剖析 旧味清欢| Vuevue.js架构前端
    Vue源码深度解析：从2.x到3.x的架构演进与核心原理剖析一、框架演变：从Vue2到Vue3的跨越1.1革命性升级Vue3的发布标志着前端框架进入新纪元，其核心改进体现在三个方面：性能飞跃：包体积减少41%，初始渲染提速55%，更新性能提升133%开发体验：CompositionAPI带来更好的逻辑复用能力未来兼容：完善的TypeScript支持与渐进式升级策略1.2兼容性设计通过@vue/co
  • 基于Spring Boot+vue技术的导游系统设计与实现 除了菜一无所有！ springbootvue.js后端
    论文下载【免费】基于SpringBoot+vue技术的导游系统设计与实现资源-CSDN文库摘要本研究背景主要聚焦于当前旅游业信息化、智能化的发展趋势。随着移动互联网的普及和人们出行方式的多样化，导游系统作为旅游服务的重要组成部分，亟需进行技术革新以提升用户体验和服务效率。本研究旨在利用SpringBoot后端框架与Vue前端框架，构建一个功能丰富、交互友好的导游系统。研究内容主要包括系统需求分析、
  • 前端面试：如何标准化处理线上用户反馈的问题？ returnShitBoy 前端面试javascript
    在前端开发中，标准化处理线上用户反馈的问题是确保持续改进产品质量和用户体验的重要步骤。以下是一个有效的标准化处理流程，结合实际工作经验，以便更好地收集、分析和解决用户反馈问题。1.建立反馈渠道首先，需要为用户提供明确的反馈渠道。可以通过以下方式实现：反馈按钮：在应用的每个页面或关键功能上添加反馈按钮，方便用户随时提交意见。支持邮箱：提供专门的支持邮箱，用户可以通过此邮箱发送详细的问题描述。在线聊天
  • 《前端监控与性能优化全景指南：构建企业级高性能应用》 前端极客探险家 前端性能优化sentryprometheusgrafana
    文章目录前言技术栈覆盖范围一、监控体系架构设计1.1全链路监控系统组成1.2核心监控指标清单二、性能数据采集实战2.1增强版性能采集器2.2用户行为轨迹录制三、深度性能优化策略3.1构建阶段优化（Webpack5示例）3.2运行时优化技巧四、错误监控与智能诊断4.1增强型错误边界4.2网络请求监控五、生产环境调优指南5.1Nginx极致配置5.2CDN策略优化六、自动化质量保障体系6.1CI/CD
  • Vue2与Vue3：深入比较与迁移指南 布兰妮甜 #Vuevue2vue3迁移指南
    文章目录前言一、响应式系统的进化二、组合式API的引入三、生命周期钩子的变化四、新特性与优化五、迁移指南六、实际案例结语前言Vue.js自从2014年首次发布以来，凭借其简洁的语法、灵活的组件化架构以及高效的性能，迅速成为了最受欢迎的前端框架之一。随着技术的不断进步，Vue.js也在不断地迭代和优化，Vue3就是在这样的背景下诞生的。Vue3不仅带来了许多新特性和性能优化，还在API设计和开发者体
  • Java Web开发核心内容全解析（上） 风铃儿~ javaservletmybatis
    一、JavaWeb概述JavaWeb是指使用Java技术来解决相关web互联网领域的技术总和。在当今数字化时代，JavaWeb在构建企业级应用、电子商务平台、社交网络等方面发挥着至关重要的作用。（一）JavaWeb的体系结构JavaWeb应用的体系结构主要分为客户端层、表示层、业务逻辑层和数据访问层。1.客户端层-这是用户与Web应用交互的最前端。主要包括用户浏览器，它可以接收并显示从服务器端发送
  • 前端面试：ajax 和 xhr 是什么关系？ returnShitBoy 前端面试ajax
    在前端开发中，AJAX（AsynchronousJavaScriptandXML）和XHR（XMLHttpRequest）是两个密切相关但有些不同的概念。以下是对这两者的详细解释及其关系：1.AJAX定义：AJAX是一个用于创建异步web应用程序的技术。它允许网页在不完全重新加载整页的情况下，与服务器交换数据并更新部分网页内容。主要特征：异步操作：AJAX使得页面可以在后台与服务器进行数据交换，用
  • axios在前后端分离的仓储管理系统中的作用 PLJJ685 前后端分离的仓库管理系统前端vue.js
    在前后端分离的仓储管理系统中，axios是一个非常重要的工具，用于在前端（通常是Vue.js、React等框架）和后端（通常是SpringBoot、Node.js、Django等框架）之间进行HTTP通信。以下是axios在仓储管理系统中的作用和具体应用场景：1.前后端分离架构在前后端分离的架构中：前端：负责页面的渲染和用户交互。后端：负责数据处理、业务逻辑和数据库操作。通信方式：前后端通过HTT
  • 构建AngularJS动态Web应用的示例教程 你这人真狗
    本文还有配套的精品资源，点击获取简介：AngularJS是一个由Google支持的前端JavaScript框架，用于创建动态Web应用程序。本文将通过一个名为“angular-sample-app”的示例应用程序，详细介绍AngularJS的核心特性，包括双向数据绑定、控制器、指令系统、服务与依赖注入、表单处理、路由与导航、模板和局部存储以及其他高级特性。通过这个示例应用的深入剖析，开发者可以学习
  • 【css酷炫效果】纯CSS实现3D翻转卡片动画 冰夏之夜影 web前端css前端
    【css酷炫效果】纯CSS实现3D翻转卡片动画缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90490472缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构正面内容背面内容...css样式/*容器设置透视*/.card-containe
  • CSS语言的数论算法 宇瞳月 包罗万象golang开发语言后端
    CSS语言的数论算法引言数论作为数学的一个重要分支，主要研究整数及其性质。数论的基本问题包括素数的性质、最大公约数、最小公倍数、同余等，同时数论在密码学、计算机科学等领域具有广泛的应用。而CSS（层叠样式表）本身是一种样式表语言，用于控制HTML文档的样式和布局，虽然CSS本身并不能直接进行复杂的数论运算，但它可以和JavaScript等编程语言结合使用，实现数论算法的可视化与交互。本文将探讨数论
  • 【开原宝藏】30天学会CSS - DAY1 第一课 hikktn 开源宝藏css前端
    下面提供一个由浅入深、按步骤拆解的示例教程，让你能从零开始，逐步理解并实现带有旋转及悬停动画的社交图标效果。为了更简单明了，以下示例仅创建四个图标（Facebook、Twitter、Google+、LinkedIn），并在每一步都附带代码展示和讲解。第0步：项目结构说明先准备两个文件：index.htmlHTML的主体结构style.css样式代码，控制图标外观与动画目录结构如下：project/
  • 轻量级模块化前端框架：快速构建强大的Web界面 小杰~ 前端框架前端
    轻量级模块化前端框架：快速构建强大的Web界面在当今快节奏的Web开发环境中，选择一个高效且灵活的前端框架至关重要。UIkit是一个轻量级的模块化前端框架，旨在帮助开发者快速构建功能强大且响应迅速的Web界面。UIkit提供了丰富的组件和工具，使开发者能够轻松实现现代化的设计效果。无论是构建复杂的用户界面还是简单的网页布局，UIkit都能提供出色的支持。其模块化设计使得开发者可以根据项目需求灵活选
  • 解决MybatisPlus updateById更新数据时将没传的数据也更新成了null 善我 后端java
    首先，MybatisPlus在调用自带的更新接口updateById时，如果没加任何配置，默认是不会将前端没传的数据也更新成null的。即MyBatisPlus不会更新传入实体中为null的字段，只会更新设置了不为null的值。如果发现没传的也更新成null了的话，可以看看问题是否出在以下几个方面。可能原因1、后端定义的字段类型是否为包装类型？比如应该定义成Integer，结果你定义的是int，那
  • GTP生成UI代码 酒江 ui人工智能深度学习
    使用GPT生成UI代码，通常是指利用GPT模型生成前端界面的代码，例如HTML、CSS、JavaScript等。GPT可以帮助开发人员快速创建界面元素的代码，减少手动编写的工作量。下面是一些关键步骤，详细说明如何用GPT生成UI代码：1.明确UI需求和设计界面元素：首先明确需要哪些UI元素。例如：按钮、输入框、表单、表格等。布局：确定页面的布局结构，例如：一栏布局、两栏布局、响应式设计等。交互功能
  • let const var 底层区域别，es6还有AO 对象和GO对象吗 新茶十九 #学习javascriptes6前端ecmascript
    在JavaScript中，var、let、const的底层行为差异与作用域规则和变量存储机制密切相关。ES6引入了块级作用域和词法环境（LexicalEnvironment），改变了原有的AO和GO的实现方式，但核心逻辑仍然保留。以下是详细解释：一、var、let、const`的底层区别特性varletconst作用域函数作用域或全局作用域块级作用域块级作用域变量提升提升并初始化为undefine
  • 云贝餐饮独立连锁版v3源码 扫码点餐毕业设计参考好选择 可二开 DeepinThinks 源码分享课程设计php小程序
    云贝V3最新版，采用PHP语言和Laravel9框架，前端使用VUE3和小程序uniapp开发。️云贝V3特点：全开源：提供完整的源代码，无版权纠纷。免授权：无需支付额外授权费用。可二开：支持二次开发，满足个性化需求。技术支持：提供开发者技术支持，确保项目顺利进行。最新版本号：V1.7.9新增会员价显示会员价开关(设置-订单设置-商品设置)新增异地外卖下单开关(门店-业务设置-外送设置)新增套餐固
  • ES6-01-01day CodeDoge javascript开发语言ecmascript
    ECMAScript和javascript的关系是，前者是后者的规格，后者是前者的一种实现。ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。不存在变量提升var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。为了纠正这种现象，
  • 下载 CSS 文件阻塞，会阻塞构建 DOM 树吗？会阻塞页面的显示吗？ liangshanbo1215 前端性能css前端
    下载CSS文件会对页面的渲染过程产生影响，具体是否阻塞DOM树的构建和页面的显示，取决于浏览器的渲染机制。1.CSS文件下载是否会阻塞DOM树的构建？一般情况下，CSS文件下载不会阻塞DOM树的构建：DOM树的构建是由HTML解析器完成的，解析器会逐行解析HTML并构建DOM树。即使CSS文件正在下载，HTML解析器仍然会继续工作，构建DOM树。但如果JavaScript访问了样式，CSS文件下载
  • 《突破性能瓶颈，用 Rust + WASM 实现浏览器端FFT加速300%实战》 煜bart 人工智能机器人
    引言：当JavaScript遇上硬核计算**“为什么我的音频分析页面卡到崩溃？”这是前端工程师在实现实时频谱可视化时最常见的噩梦。传统JavaScript的FFT计算在万级数据点时就会引发严重卡顿，但今天我们将用**Rust+WebAssembly**的组合拳，在浏览器中实现**零依赖、300%加速的傅里叶变换**。无需WebGL黑魔法，直接上硬核代码！---###**一、血腥现场：JS的Type
  • 鸿蒙（HarmonyOS）性能优化—Web开发常见问题 码牛程序猿 HarmonyOS鸿蒙工程师鸿蒙harmonyos华为HarmonyOS鸿蒙应用开发鸿蒙系统鸿蒙鸿蒙开发
    H5页面如何与ArkTS交互(API10)问题现象目前javaScriptProxy仅支持同步调用，异步调用无法获取执行结果。解决措施对javaScriptProxy和runJavaScript封装，实现JSBridge通信方案。适用于H5调用原生侧函数。使用Web组件javaScriptProxy将原生侧接口注入到H5的window对象上，通过runJavaScript接口执行JS脚本到H5中，
  • Flexbox 布局详细笔记 .毅晨. html5cssvue.jshtmles6npm笔记
    Flexbox布局详细笔记Flexbox（弹性盒子布局）是CSS3中用于实现高效、灵活的页面布局的模块，特别适合处理一维布局（行或列）。以下是核心知识点和常见用法：一、Flexbox基础概念容器（FlexContainer）通过display:flex;或display:inline-flex;将一个元素定义为Flex容器。其直接子元素自动成为Flex项目（FlexItems）。主轴（MainAx
  • 【JSON-RPC】 python+JSON-RPC示例与入门 魔都吴所谓 jsonrpcpython
    JSON-RPC是一种无状态的、轻量级的远程过程调用（RPC）协议。它定义了几种数据结构及其处理规则。它使用JSON（JavaScriptObjectNotation）作为数据格式，允许实现相同功能的程序以松散耦合的方式跨网络通信。以下是一个简单的JSON-RPC使用Python的示例。我们将使用jsonrpclib这个库来创建一个JSON-RPC服务端和一个客户端。首先，你需要安装jsonrpc
  • 芯片制造、汽车制造行业网站，如何用插件增强富文本编辑器的WORD粘贴功能？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 金融行业网页编辑器对WORD图文混排有哪些特殊需求？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • HTML编辑器CKEDITOR支持哪些格式的WORD内容导入？ 2501_90699640 html编辑器wordckeditor粘贴wordckeditor导入wordckeditor导入pdfckeditor导入ppt
    要求：开源，免费，技术支持编辑器：ckeditor前端：vue2,vue3.vue-cli后端：asp,java,jsp,springboot,php,asp.net,.netcore功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,Ubuntu,CentO
  • 金融行业Vue应用如何利用wangEditor实现WORD文档高效上传？ 2501_90699640 金融vue.jswordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • Cool Admin5(Go版)后台管理系统开发框架搭建使用记录 后青春期的诗go 经验分享golang开发语言后端go
    一、环境说明nodejs建议版本：18二、安装安装框架github下载最新的zip压缩包，然后解压。#进入解压缩后的目录cdcool-admin5#直接修改go.mod里面的模块名（或删除原go.mod文件，重新初始化：Gomodinitcool-admin5）#根据需要调整man.go文件里的导入路径#安装依赖gomodtidy#运行后端项目Gorun.#进入前端目录Cdfrontend#安装依
  • 计算机专业的就业方向 LTPP 人工智能gitjavac++开发语言面试考研
    计算机专业的就业方向亲爱的新生们，欢迎你们踏上计算机科学的旅程！作为一名计算机专业的学生，你们即将进入一个充满无限可能的领域。今天，我将为大家介绍计算机专业的一些主要就业方向，帮助你们了解未来的职业选择。1.软件开发软件开发是计算机专业学生最常见的就业方向之一。软件开发涉及编写、测试、维护应用程序、系统软件等。根据工作性质的不同，软件开发可以进一步细分为以下几个方向：前端开发：前端开发主要负责设计
  • Node.js和webpack入门-个人学习笔记 ksmswq node.jswebpack学习
    Node.js-入门Node.js基础概念Node.js是一个跨平台JavaScript运行环境，是开发者可以搭建服务器端的JavaStript应用程序。作用1.编写服务端程序2.编写数据接口，提供网页浏览资源等等3.实现“前端工程化”，为Vue和React等框架做铺垫前端工程化-概念开发项目直到上线，过程中集成的所有工具和技术。（Node.js是前端工程化的基础（因为Node.js可以主动读取前
  • SAX解析xml文件 小猪猪08 xml
    1.创建SAXParserFactory实例 2.通过SAXParserFactory对象获取SAXParser实例 3.创建一个类SAXParserHander继续DefaultHandler，并且实例化这个类 4.SAXParser实例的parse来获取文件     public static void main(String[] args) { //
  • 为什么mysql里的ibdata1文件不断的增长？ brotherlamp linuxlinux运维linux资料linux视频linux运维自学
    我们在 Percona 支持栏目经常收到关于 MySQL 的 ibdata1 文件的这个问题。 当监控服务器发送一个关于 MySQL 服务器存储的报警时，恐慌就开始了 —— 就是说磁盘快要满了。 一番调查后你意识到大多数地盘空间被 InnoDB 的共享表空间 ibdata1 使用。而你已经启用了 innodbfileper_table，所以问题是： ibdata1存了什么？ 当你启用了 i
  • Quartz-quartz.properties配置 eksliang quartz
    其实Quartz JAR文件的org.quartz包下就包含了一个quartz.properties属性配置文件并提供了默认设置。如果需要调整默认配置，可以在类路径下建立一个新的quartz.properties，它将自动被Quartz加载并覆盖默认的设置。   下面是这些默认值的解释 #-----集群的配置 org.quartz.scheduler.instanceName =
  • informatica session的使用 18289753290 workflowsessionlogInformatica
    如果希望workflow存储最近20次的log，在session里的Config  Object设置，log  options做配置，save  session log :sessions  run  ;savesessio log for  these runs:20 session下面的source 里面有个tracing 
  • Scrapy抓取网页时出现CRC check failed 0x471e6e9a != 0x7c07b839L的错误 酷的飞上天空 scrapy
    Scrapy版本0.14.4 出现问题现象： ERROR: Error downloading <GET http://xxxxx  CRC check failed   解决方法   1.设置网络请求时的header中的属性'Accept-Encoding': '*;q=0'   明确表示不支持任何形式的压缩格式，避免程序的解压
  • java Swing小集锦 永夜-极光 java swing
    1.关闭窗体弹出确认对话框   1.1   this.setDefaultCloseOperation (JFrame.DO_NOTHING_ON_CLOSE);   1.2   this.addWindowListener ( new WindowAdapter () { public void windo
  • 强制删除.svn文件夹 随便小屋 java
              在windows上，从别处复制的项目中可能带有.svn文件夹，手动删除太麻烦，并且每个文件夹下都有。所以写了个程序进行删除。因为.svn文件夹在windows上是只读的，所以用File中的delete()和deleteOnExist()方法都不能将其删除，所以只能采用windows命令方式进行删除
  • GET和POST有什么区别？及为什么网上的多数答案都是错的。 aijuans get post
        如果有人问你，GET和POST，有什么区别？你会如何回答？ 我的经历      前几天有人问我这个问题。我说GET是用于获取数据的，POST，一般用于将数据发给服务器之用。     这个答案好像并不是他想要的。于是他继续追问有没有别的区别？我说这就是个名字而已，如果服务器支持，他完全可以把G
  • 谈谈新浪微博背后的那些算法 aoyouzi 谈谈新浪微博背后的那些算法
    本文对微博中常见的问题的对应算法进行了简单的介绍，在实际应用中的算法比介绍的要复杂的多。当然，本文覆盖的主题并不全，比如好友推荐、热点跟踪等就没有涉及到。但古人云“窥一斑而见全豹”，希望本文的介绍能帮助大家更好的理解微博这样的社交网络应用。 微博是一个很多人都在用的社交应用。天天刷微博的人每天都会进行着这样几个操作：原创、转发、回复、阅读、关注、@等。其中，前四个是针对短博文，最后的关注和@则针
  • Connection reset 连接被重置的解决方法 百合不是茶 java字符流连接被重置
    流是java的核心部分,,昨天在做android服务器连接服务器的时候出了问题,就将代码放到java中执行,结果还是一样连接被重置   被重置的代码如下;   客户端代码; package 通信软件服务器; import java.io.BufferedWriter; import java.io.OutputStream; import java.io.O
  • web.xml配置详解之filter bijian1013 javaweb.xmlfilter
    一.定义 <filter> <filter-name>encodingfilter</filter-name> <filter-class>com.my.app.EncodingFilter</filter-class> <init-param> <param-name>encoding<
  • Heritrix Bill_chen 多线程xml算法制造配置管理
    作为纯Java语言开发的、功能强大的网络爬虫Heritrix，其功能极其强大，且扩展性良好，深受热爱搜索技术的盆友们的喜爱，但它配置较为复杂，且源码不好理解，最近又使劲看了下，结合自己的学习和理解，跟大家分享Heritrix的点点滴滴。 Heritrix的下载（http://sourceforge.net/projects/archive-crawler/）安装、配置，就不罗嗦了，可以自己找找资
  • 【Zookeeper】FAQ bit1129 zookeeper
    1.脱离IDE，运行简单的Java客户端程序 #ZkClient是简单的Zookeeper~$ java -cp "./:zookeeper-3.4.6.jar:./lib/*" ZKClient    1. Zookeeper是的Watcher回调是同步操作，需要添加异步处理的代码 2. 如果Zookeeper集群跨越多个机房，那么Leader/
  • The user specified as a definer ('aaa'@'localhost') does not exist 白糖_ localhost
    今天遇到一个客户BUG，当前的jdbc连接用户是root，然后部分删除操作都会报下面这个错误：The user specified as a definer ('aaa'@'localhost') does not exist 最后找原因发现删除操作做了触发器，而触发器里面有这样一句 /*!50017 DEFINER = ''aaa@'localhost' */  原来最初
  • javascript中showModelDialog刷新父页面 bozch JavaScript刷新父页面showModalDialog
    在页面中使用showModalDialog打开模式子页面窗口的时候，如果想在子页面中操作父页面中的某个节点，可以通过如下的进行：       window.showModalDialog('url',self,‘status...’); // 首先中间参数使用self       在子页面使用w
  • 编程之美-买书折扣 bylijinnan 编程之美
    import java.util.Arrays; public class BookDiscount { /**编程之美 买书折扣 书上的贪心算法的分析很有意思，我看了半天看不懂，结果作者说，贪心算法在这个问题上是不适用的。。 下面用动态规划实现。 哈利波特这本书一共有五卷，每卷都是8欧元，如果读者一次购买不同的两卷可扣除5%的折扣，三卷10%，四卷20%，五卷
  • 关于struts2.3.4项目跨站执行脚本以及远程执行漏洞修复概要 chenbowen00 strutsWEB安全
    因为近期负责的几个银行系统软件，需要交付客户，因此客户专门请了安全公司对系统进行了安全评测，结果发现了诸如跨站执行脚本，远程执行漏洞以及弱口令等问题。 下面记录下本次解决的过程以便后续 1、首先从最简单的开始处理，服务器的弱口令问题，首先根据安全工具提供的测试描述中发现应用服务器中存在一个匿名用户，默认是不需要密码的，经过分析发现服务器使用了FTP协议， 而使用ftp协议默认会产生一个匿名用
  • [电力与暖气]煤炭燃烧与电力加温 comsci
          在宇宙中,用贝塔射线观测地球某个部分,看上去,好像一个个马蜂窝,又像珊瑚礁一样,原来是某个国家的采煤区.....       不过,这个采煤区的煤炭看来是要用完了.....那么依赖将起燃烧并取暖的城市,在极度严寒的季节中...该怎么办呢?   &nbs
  • oracle O7_DICTIONARY_ACCESSIBILITY参数 daizj oracle
    O7_DICTIONARY_ACCESSIBILITY参数控制对数据字典的访问.设置为true,如果用户被授予了如select any table等any table权限,用户即使不是dba或sysdba用户也可以访问数据字典.在9i及以上版本默认为false,8i及以前版本默认为true.如果设置为true就可能会带来安全上的一些问题.这也就为什么O7_DICTIONARY_ACCESSIBIL
  • 比较全面的MySQL优化参考 dengkane mysql
    本文整理了一些MySQL的通用优化方法，做个简单的总结分享，旨在帮助那些没有专职MySQL DBA的企业做好基本的优化工作，至于具体的SQL优化，大部分通过加适当的索引即可达到效果，更复杂的就需要具体分析了，可以参考本站的一些优化案例或者联系我，下方有我的联系方式。这是上篇。   1、硬件层相关优化   1.1、CPU相关   在服务器的BIOS设置中，可
  • C语言homework2，有一个逆序打印数字的小算法 dcj3sjt126com c
    #h1#   0、完成课堂例子 1、将一个四位数逆序打印 1234 ==> 4321 实现方法一： # include <stdio.h> int main(void) { int i = 1234; int one = i%10; int two = i / 10 % 10; int three = i / 100 % 10;
  • apacheBench对网站进行压力测试 dcj3sjt126com apachebench
       ab 的全称是 ApacheBench ， 是 Apache 附带的一个小工具 ， 专门用于 HTTP Server 的 benchmark testing ， 可以同时模拟多个并发请求。前段时间看到公司的开发人员也在用它作一些测试，看起来也不错，很简单，也很容易使用，所以今天花一点时间看了一下。 通过下面的一个简单的例子和注释，相信大家可以更容易理解这个工具的使用。
  • 2种办法让HashMap线程安全 flyfoxs javajdkjni
    多线程之--2种办法让HashMap线程安全 多线程之--synchronized 和reentrantlock的优缺点 多线程之--2种JAVA乐观锁的比较( NonfairSync VS. FairSync)     HashMap不是线程安全的,往往在写程序时需要通过一些方法来回避.其实JDK原生的提供了2种方法让HashMap支持线程安全.  
  • Spring Security（04）——认证简介 234390216 Spring Security认证过程
    认证简介 目录 1.1     认证过程 1.2     Web应用的认证过程 1.2.1    ExceptionTranslationFilter 1.2.2    在request之间共享SecurityContext   1
  • Java 位运算 Javahuhui java位运算
    // 左移( << ) 低位补0 // 0000 0000 0000 0000 0000 0000 0000 0110 然后左移2位后，低位补0： // 0000 0000 0000 0000 0000 0000 0001 1000 System.out.println(6 << 2);// 运行结果是24 // 右移( >> ) 高位补"
  • mysql免安装版配置 ldzyz007 mysql
    1、my-small.ini是为了小型数据库而设计的。不应该把这个模型用于含有一些常用项目的数据库。 2、my-medium.ini是为中等规模的数据库而设计的。如果你正在企业中使用RHEL,可能会比这个操作系统的最小RAM需求(256MB)明显多得多的物理内存。由此可见，如果有那么多RAM内存可以使用，自然可以在同一台机器上运行其它服务。 3、my-large.ini是为专用于一个SQL数据
  • MFC和ado数据库使用时遇到的问题 你不认识的休道人 sqlC++mfc
    =================================================================== 第一个 =================================================================== try{ CString sql; sql.Format("select * from p
  • 表单重复提交Double Submits rensanning double
    可能发生的场景： *多次点击提交按钮 *刷新页面 *点击浏览器回退按钮 *直接访问收藏夹中的地址 *重复发送HTTP请求（Ajax） （1）点击按钮后disable该按钮一会儿，这样能避免急躁的用户频繁点击按钮。 这种方法确实有些粗暴，友好一点的可以把按钮的文字变一下做个提示，比如Bootstrap的做法： http://getbootstrap.co
  • Java String 十大常见问题 tomcat_oracle java正则表达式
    　1.字符串比较，使用“==”还是equals()? 　　"=="判断两个引用的是不是同一个内存地址(同一个物理对象)。 　　equals()判断两个字符串的值是否相等。 　　除非你想判断两个string引用是否同一个对象，否则应该总是使用equals()方法。 　　如果你了解字符串的驻留(String Interning)则会更好地理解这个问题。 　 　
  • SpringMVC 登陆拦截器实现登陆控制 xp9802 springMVC
    思路，先登陆后，将登陆信息存储在session中，然后通过拦截器，对系统中的页面和资源进行访问拦截，同时对于登陆本身相关的页面和资源不拦截。   实现方法： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他