默默@85
默默@85

css之ShadowDOM

shadow-root 是用来表示一个元素的 Shadow DOM 根节点。Shadow DOM 是 Web 组件技术的一部分，它提供了一个封装的 DOM 和样式范围，使元素的内部结构和样式不会影响到外部文档，也不会被外部文档所影响。例如video标签.

定义

Shadow DOM 允许你创建一个与主文档 DOM 分离的 “影子” 树，这个树中的节点是完全封装的。这种封装提供了以下几个好处：

  1. 样式隔离：Shadow DOM 内部的样式和主文档的样式相互隔离。
  2. DOM 隔离：Shadow DOM 内部的 DOM 节点与主文档的 DOM 节点隔离，不会相互干扰。
  3. 可复用性：可以创建可复用的、自包含的组件。

当你在开发者工具中查看一个带有 Shadow DOM 的元素时，你会看到一个 #shadow-root 标记。这表示该元素有一个关联的 Shadow DOM。Shadow DOM 的内容会显示在 #shadow-root 的子树下。

创建shadowDom

步骤

  1. 定义一个自定义元素：使用 ES6 类继承 HTMLElement。
  2. 附加 Shadow DOM：在自定义元素的构造函数中使用 this.attachShadow({ mode: 'open' }) 或 { mode: 'closed' } 创建 Shadow DOM。
  3. 添加内容到 Shadow DOM：将元素和样式插入 Shadow DOM。

示例代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shadow DOM Exampletitle>
head>
<body>
    
    <my-element>my-element>
    <script>
        // 定义一个新的类，继承自 HTMLElement
        class MyElement extends HTMLElement {
            constructor() {
                super();
                // 创建一个开放模式的 Shadow DOM
                const shadowRoot = this.attachShadow({ mode: 'open' });

                // 创建并添加样式到 Shadow DOM
                const style = document.createElement('style');
                style.textContent = `
                    .text {
                        color: red;
                        font-size: 20px;
                    }
                `;
                shadowRoot.appendChild(style);

                // 创建并添加内容到 Shadow DOM
                const div = document.createElement('div');
                div.className = 'text';
                div.textContent = 'Hello, Shadow DOM!';
                shadowRoot.appendChild(div);
            }
        }

        // 将自定义元素注册为一个新标签
        customElements.define('my-element', MyElement);
    script>
body>
html>

  1. 定义类：

    • 使用 class MyElement extends HTMLElement 定义了一个新的自定义元素类。

  2. 构造函数：

    • 在构造函数中调用 super() 以确保正确继承。
    • 使用 this.attachShadow({ mode: 'open' }) 创建一个开放模式（open）的 Shadow DOM。
    • mode: 'open' 表示 Shadow DOM 是开放的，可以通过 JavaScript 进行访问。
    • mode: 'closed' 表示 Shadow DOM 是关闭的，无法通过 JavaScript 直接访问。

  3. 添加样式：

    • 创建一个 style 元素，并将其添加到 Shadow DOM 中，以定义 Shadow DOM 内部元素的样式。

  4. 添加内容：

    • 创建一个 div 元素，设置其文本内容和样式类，然后将其添加到 Shadow DOM 中。

  5. 注册自定义元素：

    • 使用 customElements.define('my-element', MyElement) 将自定义元素注册为一个新标签 。

修改shadowDom样式

修改内联样式

document.addEventListener('DOMContentLoaded', () => {
	//获得shadowDom 的容器元素(宿主节点)
    const shadowHost = document.querySelector('your-shadow-host');
    //获得shadowDom 的根节点
    const shadowRoot = shadowHost.shadowRoot;
    //获得shadowDom 的内部子节点
    const targetElement = shadowRoot.querySelector('.my-element');
    
    if (targetElement) {
    	//修改样式
        targetElement.style.color = 'red';
        targetElement.style.backgroundColor = 'yellow';
    } else {
        console.error('Element not found in shadow DOM.');
    }
});

::part伪元素

只适用于 元素上已有 part 属性标记的暴露给外部样式表的部分
自定义的shadowDom使用::part,需要与part属性一起使用

示例代码

<style>
    /* 使用 ::part 选择器样式化 shadow DOM 内部的元素 */
    my-element::part(title) {
        color: blue;
        font-size: 24px;
    }
    my-element::part(content) {
        background-color: lightgrey;
        padding: 10px;
        border: 2px solid black;
    }
style>
<body>
    
    <my-element>my-element>
    <script>
        class MyElement extends HTMLElement {
            constructor() {
                super();
                const shadowRoot = this.attachShadow({ mode: 'open' });
                const style = document.createElement('style');
                //使用part属性,暴露给外部样式表
                style.textContent = `
                    .title {
                        part: title;
                        font-weight: bold;
                    }
                    .content {
                        part: content;
                    }
                `;
                shadowRoot.appendChild(style);

                const title = document.createElement('div');
                title.className = 'title';
                title.textContent = 'This is the Title';
                shadowRoot.appendChild(title);
                
                const content = document.createElement('div');
                content.className = 'content';
                content.textContent = 'This is the content of the custom element.';
                shadowRoot.appendChild(content);
            }
        }
        // 注册自定义元素
        customElements.define('my-element', MyElement);
    script>
body>

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

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • css2中的透明 琪33
    .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
    Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
    爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
    点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • HTML中"bgcolor"与"background-color"的区别 Sardar_ html
    bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou
  • 2019-05-29 vue-router的两种模式的区别 Kason晨
    1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
  • 清除 Conda 缓存 Dmatteratall conda缓存
    清除Conda缓存：cssCopycodecondaclean--allcondaclean--all命令将会清除Conda缓存和临时文件，而不会删除已经安装的软件包和环境。它主要用于清理不必要的缓存和临时文件以释放磁盘空间。
  • electron多标签页模式更像客户端 diygwcom electronjavascript前端
    Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
  • Enum 枚举 120153216 enum枚举
    原文地址：http://www.cnblogs.com/Kavlez/p/4268601.html Enumeration 于Java 1.5增加的enum type...enum type是由一组固定的常量组成的类型，比如四个季节、扑克花色。在出现enum type之前，通常用一组int常量表示枚举类型。比如这样： public static final int APPLE_FUJI = 0
  • Java8简明教程 bijian1013 javajdk1.8
            Java 8已于2014年3月18日正式发布了，新版本带来了诸多改进，包括Lambda表达式、Streams、日期时间API等等。本文就带你领略Java 8的全新特性。  一.允许在接口中有默认方法实现         Java 8 允许我们使用default关键字，为接口声明添
  • Oracle表维护 快速备份删除数据 cuisuqiang oracle索引快速备份删除
    我知道oracle表分区，不过那是数据库设计阶段的事情，目前是远水解不了近渴。 当前的数据库表，要求保留一个月数据，且表存在大量录入更新，不存在程序删除。 为了解决频繁查询和更新的瓶颈，我在oracle内根据需要创建了索引。但是随着数据量的增加，一个半月数据就要超千万，此时就算有索引，对高并发的查询和更新来说，让然有所拖累。 为了解决这个问题，我一般一个月会进行一次数据库维护，主要工作就是备
  • java多态内存分析 麦田的设计者 java内存分析多态原理接口和抽象类
          “  时针如果可以回头，熟悉那张脸，重温嬉戏这乐园，墙壁的松脱涂鸦已经褪色才明白存在的价值归于记忆。街角小店尚存在吗？这大时代会不会牵挂，过去现在花开怎么会等待。       但有种意外不管痛不痛都有伤害，光阴远远离开，那笑声徘徊与脑海。但这一秒可笑不再可爱，当天心
  • Xshell实现Windows上传文件到Linux主机 被触发 windows
    经常有这样的需求，我们在Windows下载的软件包，如何上传到远程Linux主机上？还有如何从Linux主机下载软件包到Windows下；之前我的做法现在看来好笨好繁琐，不过也达到了目的，笨人有本方法嘛； 我是怎么操作的： 1、打开一台本地Linux虚拟机，使用mount 挂载Windows的共享文件夹到Linux上，然后拷贝数据到Linux虚拟机里面；（经常第一步都不顺利，无法挂载Windo
  • 类的加载ClassLoader 肆无忌惮_ ClassLoader
    类加载器ClassLoader是用来将java的类加载到虚拟机中，类加载器负责读取class字节文件到内存中，并将它转为Class的对象（类对象），通过此实例的 newInstance()方法就可以创建出该类的一个对象。   其中重要的方法为findClass(String name)。   如何写一个自己的类加载器呢？ 首先写一个便于测试的类Student
  • html5写的玫瑰花 知了ing html5
    <html> <head> <title>I Love You!</title> <meta charset="utf-8" /> </head> <body> <canvas id="c"></canvas>
  • google的ConcurrentLinkedHashmap源代码解析 矮蛋蛋 LRU
    原文地址： http://janeky.iteye.com/blog/1534352 简述 ConcurrentLinkedHashMap 是google团队提供的一个容器。它有什么用呢？其实它本身是对 ConcurrentHashMap的封装，可以用来实现一个基于LRU策略的缓存。详细介绍可以参见 http://code.google.com/p/concurrentlinke
  • webservice获取访问服务的ip地址 alleni123 webservice
    1. 首先注入javax.xml.ws.WebServiceContext, @Resource private WebServiceContext context; 2. 在方法中获取交换请求的对象。 javax.xml.ws.handler.MessageContext mc=context.getMessageContext(); com.sun.net.http
  • 菜鸟的java基础提升之道——————>是否值得拥有 百合不是茶
    1，c++，java是面向对象编程的语言，将万事万物都看成是对象；java做一件事情关注的是人物，java是c++继承过来的，java没有直接更改地址的权限但是可以通过引用来传值操作地址，java也没有c++中繁琐的操作，java以其优越的可移植型，平台的安全型，高效性赢得了广泛的认同，全世界越来越多的人去学习java，我也是其中的一员      java组成：
  • 通过修改Linux服务自动启动指定应用程序 bijian1013 linux
    Linux中修改系统服务的命令是chkconfig (check config)，命令的详细解释如下: chkconfig 功能说明：检查，设置系统的各种服务。 语　　法：chkconfig [ -- add][ -- del][ -- list][系统服务] 或 chkconfig [ -- level  <</SPAN>
  • spring拦截器的一个简单实例 bijian1013 javaspring拦截器Interceptor
    Purview接口 package aop; public interface Purview { void checkLogin(); } Purview接口的实现类PurviesImpl.java package aop; public class PurviewImpl implements Purview { public void check
  • [Velocity二]自定义Velocity指令 bit1129 velocity
    什么是Velocity指令 在Velocity中，#set,#if, #foreach, #elseif, #parse等，以#开头的称之为指令，Velocity内置的这些指令可以用来做赋值，条件判断，循环控制等脚本语言必备的逻辑控制等语句，Velocity的指令是可扩展的，即用户可以根据实际的需要自定义Velocity指令   自定义指令(Directive)的一般步骤 &nbs
  • 【Hive十】Programming Hive学习笔记 bit1129 programming
    第二章 Getting Started 1.Hive最大的局限性是什么？一是不支持行级别的增删改(insert, delete, update)二是查询性能非常差(基于Hadoop MapReduce）,不适合延迟小的交互式任务三是不支持事务2. Hive MetaStore是干什么的？Hive persists table schemas and other system metadata.
  • nginx有选择性进行限制 ronin47 nginx 动静　限制
    http { limit_conn_zone $binary_remote_addr zone=addr:10m; limit_req_zone $binary_remote_addr zone=one:10m rate=5r/s;... server {... location ~.*\.(gif|png|css|js|icon)$ {
  • java-4.-在二元树中找出和为某一值的所有路径 . bylijinnan java
    /* * 0.use a TwoWayLinkedList to store the path.when the node can't be path,you should/can delete it. * 1.curSum==exceptedSum:if the lastNode is TreeNode,printPath();delete the node otherwise
  • Netty学习笔记 bylijinnan javanetty
    本文是阅读以下两篇文章时： http://seeallhearall.blogspot.com/2012/05/netty-tutorial-part-1-introduction-to.html http://seeallhearall.blogspot.com/2012/06/netty-tutorial-part-15-on-channel.html 我的一些笔记 ===
  • js获取项目路径 cngolon js
    //js获取项目根路径，如： http://localhost:8083/uimcardprj function getRootPath(){     //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp     var curWwwPath=window.document.locati
  • oracle 的性能优化 cuishikuan oracleSQL Server
       在网上搜索了一些Oracle性能优化的文章，为了更加深层次的巩固[边写边记]，也为了可以随时查看，所以发表这篇文章。     1.ORACLE采用自下而上的顺序解析WHERE子句，根据这个原理，表之间的连接必须写在其他WHERE条件之前，那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾。（这点本人曾经做过实例验证过，的确如此哦！
  • Shell变量和数组使用详解 daizj linuxshell变量数组
    Shell 变量 定义变量时，变量名不加美元符号（$，PHP语言中变量需要），如： your_name="w3cschool.cc" 注意，变量名和等号之间不能有空格，这可能和你熟悉的所有编程语言都不一样。同时，变量名的命名须遵循如下规则： 首个字符必须为字母（a-z，A-Z）。 中间不能有空格，可以使用下划线（_）。 不能使用标点符号。 不能使用ba
  • 编程中的一些概念，KISS、DRY、MVC、OOP、REST dcj3sjt126com REST
    KISS、DRY、MVC、OOP、REST （1）KISS是指Keep It Simple,Stupid（摘自wikipedia），指设计时要坚持简约原则，避免不必要的复杂化。 （2）DRY是指Don't Repeat Yourself（摘自wikipedia），特指在程序设计以及计算中避免重复代码，因为这样会降低灵活性、简洁性，并且可能导致代码之间的矛盾。 （3）OOP 即Object-Orie
  • [Android]设置Activity为全屏显示的两种方法 dcj3sjt126com Activity
    1. 方法1：AndroidManifest.xml 里，Activity的 android:theme  指定为" @android:style/Theme.NoTitleBar.Fullscreen" 示例:   <application      
  • solrcloud 部署方式比较 eksliang solrCloud
    solrcloud 的部署其实有两种方式可选，那么我们在实践开发中应该怎样选择呢？ 第一种：当启动solr服务器时，内嵌的启动一个Zookeeper服务器，然后将这些内嵌的Zookeeper服务器组成一个集群。  第二种：将Zookeeper服务器独立的配置一个集群，然后将solr交给Zookeeper进行管理   谈谈第一种：每启动一个solr服务器就内嵌的启动一个Zoo
  • Java synchronized关键字详解 gqdy365 synchronized
    转载自：http://www.cnblogs.com/mengdd/archive/2013/02/16/2913806.html 多线程的同步机制对资源进行加锁，使得在同一个时间，只有一个线程可以进行操作，同步用以解决多个线程同时访问时可能出现的问题。 同步机制可以使用synchronized关键字实现。 当synchronized关键字修饰一个方法的时候，该方法叫做同步方法。 当s
  • js实现登录时记住用户名 hw1287789687 记住我记住密码cookie记住用户名记住账号
    在页面中如何获取cookie值呢? 如果是JSP的话,可以通过servlet的对象request 获取cookie,可以 参考:http://hw1287789687.iteye.com/blog/2050040 如果要求登录页面是html呢?html页面中如何获取cookie呢? 直接上代码了 页面:loginInput.html 代码: <!DOCTYPE html PUB
  • 开发者必备的 Chrome 扩展 justjavac chrome
    Firebug：不用多介绍了吧https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench ChromeSnifferPlus：Chrome 探测器，可以探测正在使用的开源软件或者 js 类库https://chrome.google.com/webstore/detail/chrome-sniffer-pl
  • 算法机试题 李亚飞 java算法机试题
           在面试机试时，遇到一个算法题，当时没能写出来，最后是同学帮忙解决的。        这道题大致意思是：输入一个数，比如4,。这时会输出：           &n
  • 正确配置Linux系统ulimit值 字符串 ulimit
    在Linux下面部 署应用的时候，有时候会遇上Socket/File: Can’t open so many files的问题；这个值也会影响服务器的最大并发数，其实Linux是有文件句柄限制的，而且Linux默认不是很高，一般都是1024，生产服务器用 其实很容易就达到这个数量。下面说的是，如何通过正解配置来改正这个系统默认值。因为这个问题是我配置Nginx+php5时遇到了，所以我将这篇归纳进
  • hibernate调用返回游标的存储过程 Supanccy2013 javaDAOoracleHibernatejdbc
    注：原创作品，转载请注明出处。     上篇博文介绍的是hibernate调用返回单值的存储过程，本片博文说的是hibernate调用返回游标的存储过程。     此此扁博文的存储过程的功能相当于是jdbc调用select 的作用。 1，创建oracle中的包，并在该包中创建的游标类型。 ---创建oracle的程
  • Spring 4.2新特性-更简单的Application Event wiselyman application
    1.1 Application Event Spring 4.1的写法请参考10点睛Spring4.1-Application Event 请对比10点睛Spring4.1-Application Event 使用一个@EventListener取代了实现ApplicationListener接口,使耦合度降低; 1.2 示例 包依赖 <p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他