六石
六石

web Components 学习之路

就目前而言，纯粹的Web Components在兼容性方面还有着较为长远的路，这里做个记录总结，以纪念自己最近关于Web Components的学习道路。

参考教材

  • JavaScript 标准参考教程(alpha);

  • 跟 Web Components 打个啵;

  • argelius/favorite-star;

  • 实例源码

  • 我的博客

　　Web Components由HTML Import、Template、Custom Element、Shadow DOM四种技术规范。上面的三个文件，是我这次学习的主要参考，其中前两个教材引领我入门，学习了HTML import、Template、shadowDOM以及custom Element的相关知识;而第三个github上的资源则是一个比较完善的综合使用web Components实现的一个小例子。这里,最后，我也会给出自己学习制作的一个弹层的组件小例子。

HTML Import

  1. 作用:HTML Import将外部的html引入,引入的文档全局有效。其用途有二:一是将整个项目所有的公共的css和js引用都放在一个html页面里,需要时直接引用这个html文档即可;二是将写好的组件放入一个html文档中，需要时直接引用这个html文档;

  2. 用法: 被引用html页面不需要操作,引用页面需要加入link标签 <link rel="import" href="xxx.html" />这时被引入的文档内容只会被主文档存储起来，不会显示在页面中，需要手动添加到DOM结构中。

  3. 将被引用文档内容添加到DOM结构中，需要先获取其link值的import,再通过其获得对应子文档的DOM结构，将其引入。格式如下:


//子文档 importSub.html
<h1>hello world!</h1>

//主文档 importMain.html
<head lang="en">
 <link rel="import" href="importSub.html"/>
</head>
<body>
<script>
//获取到子文档在本文档对应的引用——即子文档在本文档的"代言人";
var s = document.querySelector('link[rel="import"]').import;
//获取子文档要被插入的DOM;
var t = s.querySelector('h1');
//插入到主文档中;
document.body.appendChild(t);
</script>
</body>

Template模板

  1. template里可以存放html,css,js;

  2. template本身及其内部的css、js、html不会被浏览器加载的,包括其中的格式;

  3. 引入的时候先获取到模板,再复制模板的content,将其插入dom结构中;模板的作用在于可重用,每次的使用都需要复制模板的content，插入DOM中;模板的复制可以采用cloneNode,也可以采用importNode,推荐importNode;格式为var x=document.importNode(content,true)或者var x = content.cloneNode(true)

  4. 移除模板 document.querySelector('template').remove();

  5. Template模板所定义的css样式和js可被外界干扰，封装性不好,通常多与shadowDOM组合;

格式


<div class="container"></div>
<template>
 <style>
 span{color:red;}
 </style>
    <span>hello</span>
 <script>
 console.log(1);
 </script>
</template>
<script>
//通过模板选择器获取到模板，再选择其内容;
 var m = document.querySelector('template').content;
//两种克隆模板内容的方法
 var s = document.importNode(m,true);
// var s = document.importNode(m,true);
//将克隆结果插入到dom结构中;
 document.querySelector('.container').appendChild(s);
</script>
</body>
</html>

shadowDOM

  1. shadowDOM,形成一个封闭的空间;将内部的html、css、js与外部隔离，不受干扰。其中,DOM结构中的元素是代言人,被爬虫爬取，而shadowDOM则是真正的DOM，用于展示内容,不会被爬取。多与template组合使用，使template内的css、js不受外界干扰。

  2. shadowDOM内的模板可以通过:host{}来修改其外部容器的css样式,在外部也可以通过选择器::shadow 选择器击穿修改shadowDOM内的css样式; 优先级依照元素选择器的优先级进行比较,来决定是否能够修改template内部的样式;

  3. 格式

    // 给class为container的div创建一个shadowDOM;
var shadow = document.querySelector('.container').createShadowRoot();
// 获取模板内容
var content = document.querySelector('template').content;
//将模板内容插入到shadowDOM中;
shadow.appendChild(content);

customElement

  1. 作用: customElement允许我们定制独有的HTMLElement元素;

  2. 生命周期:customElement在其生命周期内提供了四个回调函数createdCallback、attachedCallback、attributeChangedCallback和detachedCallback;

  3. 格式


//创建一个自定义DOM元素，继承自HTML.prototype;
var MyButton = Object.create(HTMLElement.prototype);
//增加自定义方法
MyButton.say = function(){
    console.log('hello');
};
//增加生命周期方法
MyButton.createdCallback = function(){
   this.innerHTML = 'hello,I\'m customElement!'
}
//将创建的DOM元素注册到DOM结构;这里的注册名字必须是带 '-'的写法;返回一个构造函数;

var myButton = document.registerElement('my-button',{
   prototype:MyButton,
   extends:'div',
//不加extends属性则为 <my-button></my-button>格式,加extends则为<div is="my-button"></div>格式
});
//接下来可以什么也不写,直接在页面中创建<div is="my-button"></div>;也可以执行下面的方法,自动添加;

var meButton =new myButton();
document.body.appendChild(meButton);

//获取加入的me-button
var s = document.querySelector('div[is="me-button"]');
s.say();        //output:hello;

总结

　　我理解的Web Components开发组件是customElement做外壳，在其中建立shadowDOM,将模板放到shadowDOM中,形成一个html页面，使用时通过HTML Import引入。

　　学习Web Components碰到最多问题是事件方面,很多问题都是由于真正的DOM结构里没有对应的元素，可以在元素被插入到DOM结构中再绑定事件,引以为戒！

　　在学习web Components的时候，想像着自己封装的一个个组件，将整个页面通过组件像"搭积木"一样搭起来，挺有意思!

　　实例源码

　　我的博客

你可能感兴趣的:(web Components 学习之路)

  • docker-compose install nginx(解决fastgpt跨区域) CIAS deepseekdockerdeepseekfastgpt
    CORS前言CORS（Cross-OriginResourceSharing，跨源资源共享）是一种安全措施，它允许或拒绝来自不同源（协议、域名、端口任一不同即为不同源）的网页访问另一源中的资源。它的主要作用如下：同源策略限制：Web浏览器的同源策略限制了从一个源加载的文档或脚本如何与另一个源的资源进行交互。这意味着默认情况下，浏览器会阻止一个源（例如，http://example.com）的网页向
  • libwebsockets实现异步websocket客户端，服务端异常断开可重连 jbjhzstsl websocket
    libwebsocketswebsocket客户端基本流程网上都有，我只额外优化了重连机制。在服务器异常断开时不触发LWS_CALLBACK_CLOSED或LWS_CALLBACK_CLIENT_CONNECTION_ERROR，导致无法自动重连通过定时检查链接是否可写入判断链接是否有效//判断wsi是否可用if((std::chrono::duration_cast(std::chrono::s
  • Angular 18：从模块化到独立组件的转变 t0_54coder 编程问题解决手册angular.js前端javascript个人开发
    随着Angular17的发布，Angular18继续推动开发者走向更简化的架构模式——独立组件（StandaloneComponents）。在这篇博客中，我们将探讨如何将一个使用模块化（NgModule）的Angular应用转变为使用独立组件的架构，并以一个具体的案例来说明这个过程。为什么选择独立组件？Angular18鼓励使用独立组件，主要有以下几个原因：减少冗余代码：不再需要为每个组件创建独立
  • Telegram bot教程：通过BotFather设置Telegram bot的命令菜单 鲲志说 Web3相关业界资讯telegrambot经验分享笔记twitterTelegramBot
    最近在研究Telegrambot嘛，总有些小细节可以记录了，今天就记录一个通过BotFather设置Telegrambot的命令菜单功能➡️【好看的灵魂千篇一律，有趣的鲲志一百六七！】-欢迎认识我～～作者：鲲志说（公众号、B站同名，视频号：鲲志说996）科技博主：极星会星辉大使后端研发：java、go、python、TS，前电商、现web3主理人：COC杭州开发者社区主理人、周周黑客松杭州主理人、
  • JavaScript基础-事件基础 難釋懷 javascript开发语言
    在现代Web开发中，交互性是网站用户体验的重要组成部分。通过使用JavaScript，我们可以捕获用户的操作并作出响应，实现动态网页效果。这一切都离不开事件（Events）的概念。本文将介绍JavaScript中事件的基础知识，包括事件类型、如何绑定事件处理器以及一些常见的实践技巧。一、什么是事件？在浏览器环境中，事件是由浏览器生成的通知，表明某种情况已经发生。这些情况可能是用户交互（如点击按钮）
  • Python,C++开发餐饮后厨环境远程管理APP Geeker-2025 pythonc++
    开发一款用于**餐饮后厨环境远程管理**的App，结合Python和C++的优势，可以实现高效的后端数据处理、实时的环境监控以及用户友好的前端界面。以下是一个详细的开发方案，涵盖技术选型、功能模块、开发步骤等内容。##技术选型###后端（Python）-**编程语言**：Python-**Web框架**：Django或Flask-**数据库**：PostgreSQL或MySQL-**实时通信**：
  • ESP8266 与 ARM7 接口-LPC2148 创建 Web 服务器以控制 LED David WangYang ESP8266项目服务器运维
    ESP8266与ARM7接口-LPC2148创建Web服务器以控制LEDESP8266Wi-Fi收发器提供了一种将微控制器连接到网络的方法。它被广泛用于物联网项目，因为它便宜、体积小且易于使用。在本教程中，我们将ESP8266Wi-Fi模块与ARM7-LPC2148微控制器连接，并创建一个Web服务器来控制连接到LPC2148的LED。工作流程将如下所示：从LPC2148向ESP8266发送AT命
  • SvelteKit 最新中文文档教程（6）—— 状态管理
    前言Svelte，一个语法简洁、入门容易，面向未来的前端框架。从Svelte诞生之初，就备受开发者的喜爱，根据统计，从2019年到2024年，连续6年一直是开发者最感兴趣的前端框架No.1：Svelte以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级Web项目。为了帮助大家学习Svelte，我同时搭建了Svelte最新的中文文档站点。如果需要进阶学习，也可以入手我
  • #Python 项目：实现功能——使用钉钉“自定义”机器人在群中发送文字消息 Window Unlock 钉钉python机器人
    （目前还是新手，程序难免有废话代码，请大家耐心看__比心）第一步：创建群聊机器人，参考官方手册官方链接：自定义机器人的创建和安装-钉钉开放平台此步骤可以得到两个关键参数：Webhook（机器人的通信网址）：https://oapi.dingtalk.com/robot/send?############（如这样）secret（加签未解密密钥）：SECe2######################
  • Hyperlane：Rust 生态中的轻量级高性能 HTTP 服务器库，助力现代 Web 开发 LTPP rusthttp服务器开发语言后端前端面试
    Hyperlane：Rust生态中的轻量级高性能HTTP服务器库，助力现代Web开发在Rust生态系统中，Hyperlane是一个备受关注的HTTP服务器库，以其轻量级、高性能和易用性脱颖而出。无论你是想快速构建一个高效的Web服务，还是需要支持实时通信的现代应用，Hyperlane都能成为你的理想选择。它不仅简化了网络服务的开发，还提供了强大的功能支持，如HTTP请求解析、响应构建、TCP通信，
  • 信息收集综合 只不过是胆小鬼罢了 信息收集phpweb安全安全
    1《应用服务器资产分析与角色定性详解》在网络安全领域，对应用服务器的资产分析与角色定性是至关重要的工作。通过对服务器的操作系统、IP资产、端口资产等方面进行详细分析，可以更好地了解服务器的特性与用途，从而为网络安全防护提供有力支持。本文将从多个维度深入探讨应用服务器的资产分析与角色定性方法。一、操作系统分析1.Web大小写敏感性在分析应用服务器的操作系统时，Web大小写敏感性是一个重要的参考因素。
  • 【算法学习之路】12.DFS 零零时 算法学习之路深度优先算法学习c++开发语言数据结构全排列
    DFS前言一.DFS简介二.思路三.缺点四.三种类型五.题目1.2前言我会将一些常用的算法以及对应的题单给写完，形成一套完整的算法体系，以及大量的各个难度的题目，目前算法也写了几篇，题单正在更新，其他的也会陆陆续续的更新，希望大家点赞收藏我会尽快更新的！！！一.DFS简介1.深度优先搜索，是一种用于遍历或搜索树或图的算法。所谓深度优先，就是说每次搜尝试向更深的节点走。2.在搜索算法中，该DFS常常
  • Linux虚拟机安装Redis lllsure Redislinux运维服务器redis
    1.前提准备安装好虚拟机，这里使用Centos7演示；安装好Xshell，Xftp，一个用来远程登录虚拟机，一个用来远程传输文件。Xshell，Xftp下载地址：家庭/学校免费-NetSarangWebsiteRedis源码包，下载地址：Indexof/releases/2.将安装包通过Xftp传到虚拟机上并解压解压指令：tar-zxvfredis-6.2.6.tar.gz3.引入gcc依赖因为R
  • 印度、马来股票K线接口与实时数据对接文档 金融数据出海 数据分析金融python3.11数据库
    概述本文档旨在为开发者提供关于如何使用StockTVAPI获取特定股票或指数的K线数据（即OHLCV数据，包括开盘价、最高价、最低价、收盘价以及成交量），以及如何通过WebSocket(WS)获取实时市场数据的详细指南。通过本文档，您将了解到如何构造请求URL，解析返回的数据，以及一些实用的应用场景示例。K线接口说明请求方法GET请求URLhttps://api.stocktv.top/stock
  • 列出0 racle Forms配置文件？思维导图 代码示例（java 架构) 用心去追梦 java架构开发语言
    OracleForms配置文件OracleForms应用程序的配置涉及到多个文件，这些文件用于定义运行时环境、数据库连接、安全设置等。以下是与OracleForms相关的常见配置文件：1.formsweb.cfg位置：通常位于/forms/server/formsweb.cfg或WebLogic域中的指定目录。用途：此文件包含启动Forms应用所需的各种参数和属性，如表单模块名称、数据库连接字符串
  • HTML音频、视频--课后作业实践 Heetun html5
    浅学了web一段时间，用浅显的知识做了一个小小的实践，各位大佬们多多包涵，指正。主要知识重现：标记语法：src:设置媒体文件的路径width、height:设置媒体文件的宽度、高度autostart:逻辑值，true为自动播放；false为不自动播放loop:逻辑值，true自动循环播放；false不循环播放2.CSS的内部样式表选择器1{属性1：属性值1；属性2：属性值2；......}选择器2
  • 如何创建HTML自定义元素：使用 Web Component 的最佳实践 乐闻x WebComponent学习记录前端htmlwebcomponent
    什么是WebComponent？WebComponent是一组允许开发者创建可复用、自定义HTML元素的技术。它们使得我们可以像原生HTML标签一样使用这些自定义元素，从而提升代码的模块化和复用性。WebComponent的核心技术有以下三部分：CustomElements（自定义元素）：允许开发者定义自己的HTML标签。ShadowDOM（影子DOM）：为元素提供封装的DOM和样式，让组件内部的
  • 创建在线工具来测量 PDF图纸 程序员
    在线处理PDF文件时，能够直接在浏览器中测量尺寸和内容可以显著提高工作效率。本指南将引导您完成使用ComPDFKit的WebSDK构建在线PDF测量工具的简单过程。先决条件首先，您需要访问我们的“WebSDK指南”页面来检查您是否满足这些要求：Node.js的最新稳定版本。与npm兼容的包管理器。应用许可证密钥如何获取30天免费许可证ComPDFKit为每个人提供30天免费许可证密钥，以测试他们的
  • Websoft9 开源软件实操平台：快速积累企业级软件技能，深入理解真实业务场景 开源创业
    引言：打破“纸上谈兵”的实训困境当前高校技术教育普遍面临一个矛盾：学生对开源工具的理论知识掌握充分，但在真实业务场景中常因环境配置复杂、工具链割裂而难以落地。例如，部署一套完整的电商系统需协调数据库、服务器、安全策略等多环节，传统虚拟机环境难以模拟企业级复杂度。Websoft9作为开源软件自动化部署工具，通过预集成200+企业级应用模板（如GitLab、Odoo、Jenkins）和全流程管理能力，
  • 飞书自定义机器人消息接入指南 师小师 飞书机器人
    操作流程第一步邀请自定义机器人入群：进入你的目标群组，打开会话设置，找到群机器人，并点击添加机器人，选择自定义机器人加入群聊。为机器人输入一个合适的名字和描述，也可以为机器人设置一个合适的头像，然后点击下一步。第二部：配置webhook获取该机器人的webhook地址，格式如下：https://open.feishu.cn/open-apis/bot/v2/hook/xxxxxxxxxxxxxxx
  • deepseek 对于 Web 前端过去，现在，未来的看法！称未来可能不叫前端工程师... CoderBin_ 与deepseek的对话前端
    一、你对于过去的web前端有什么看法？对早期的Web前端开发（大致在2000年代至2010年代初），可以总结出以下几个关键看法：1.技术原始，但充满探索精神基础技术简单：主要依赖HTML、CSS和原生JavaScript，缺乏现代框架和工具链的支持。兼容性噩梦：不同浏览器（尤其是IE6/7）的渲染差异极大，开发者需要大量Hack代码（如条件注释、CSS滤镜）来适配。创新萌芽：AJAX（2005年）
  • web端 -- RPC - 通用方案 扁舟·TF 爬虫爬虫
    背景当一个目标站加密字段特别多，而且我们对其并不需要大规模爬取时，考虑到时间成本，我们就可以使用RPC来获取加密数据。原理：搭建一个后端服务器，然后在浏览器中hook加密函数，注册到web.js端中，最后通过client端来回调加密函数，实现rpc远程调用以上就是整个RPC获取加密数据的流程。自己封装了一个通用框架，使用时只需修改一个点就行：自定义client端的type自定义web端typecl
  • 【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现跨平台二维码扫描应用 金枝玉叶9 程序员知识储备1程序员知识储备2程序员知识储备3rust开发语言后端
    《一起学Rust|Tauri2.0框架》是一个结合Rust语言与Tauri框架开发跨平台应用的教程。Tauri2.0是一个非常适合构建跨平台桌面应用的框架，它让开发者可以使用Web技术（如HTML、CSS、JavaScript）来创建前端，同时利用Rust编写后端逻辑，确保应用运行高效且轻量。在这个教程中，开发者可以学习如何使用Rust与Tauri2.0框架实现一个跨平台二维码扫描应用。具体步骤可
  • create-react-app创建的项目中设置webpack配置 沃野_juededa react.jswebpack前端
    create-react-app创建的项目默认使用的是react-scripts（存在于node_modules文件夹中）来处理开发服务器和构建，它内置了一些webpack相关配置。一般不会暴露出来给开发者，但是在有些情况下我们需要修改下webpack默认配置，如修改outputPath、sourcemap方案等，但由于eject是不可逆的，所以craco插件应运而生，为我们提供了更好的解决方案。
  • SAP-ABAP：SAP外网接口调用技术全景指南 爱喝水的鱼丶 VIP详情查看专栏SAP业务学习捷径SAP-ABAP开发基础详解SAPABAPERP开发运维运维HTTP接口调用
    SAP外网接口调用技术全景指南1.核心调用方式对比矩阵方法类型协议支持适用场景开发复杂度维护成本典型应用案例HTTPClientREST/HTTP通用API集成★★☆低调用第三方支付接口SOAPProxySOAP/WSDL标准化Web服务★★★中银行系统对接ODataClientODataSAP生态集成★★☆低Fiori应用数据扩展PI/PO中间件多协议转换企业级复杂集成★★★★高跨系统业务流程编
  • 能否在编辑器中一键导入Word文档？ 2501_90646763 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现生物识别（指纹识别）应用 广龙宇 Tauri2应用开发一起学Rustrust开发语言后端
    前言Tauri，作为一个新兴的跨平台应用开发框架，允许开发者使用Web前端技术构建界面，并利用Rust的高性能和安全性编写后端逻辑。这种架构巧妙地结合了Web的灵活性和原生应用的性能，为开发者提供了一种构建高效、跨平台应用的全新选择。而生物识别技术，如指纹识别、面部识别等，则为应用安全提供了更高级别的保障。将生物识别技术集成到Tauri应用中，可以提升用户体验，增强应用安全性。试想一下，用户只需轻
  • Spring相关面试题 kevindanglu 面试springjavaspringboot
    目录Spring中常用的注解有哪些SpringBoot中@RestController和@Controller注解有什么区别？Spring的注解@requestBody和@responseBody的区别说说@Bean和@componentscan的区别简单介绍一下springbootSpringBoot有哪些常用的Starter依赖？说说springboot的启动过程Sprintboot自动装配原
  • VSCode PDF Viewer 项目教程 卓炯娓
    VSCodePDFViewer项目教程vscode-pdfviewerShowPDFpreviewinVSCode.项目地址:https://gitcode.com/gh_mirrors/vs/vscode-pdfviewer1.项目目录结构及介绍vscode-pdfviewer/├──.vscode/│├──extensions.json│└──launch.json├──lib/│├──web
  • WebRTC、WebSocket、EasyRTC嵌入式音视频SDK：技术差异与应用场景详细对比 EasyCVR RTCwebrtcwebsocket音视频javascript网络开发语言
    WebRTC和WebSocket是两种常用于实时通信的技术，尽管它们都支持实时数据传输，但在设计目标、技术实现和应用场景上存在显著差异。一、概述1）WebRTCWebRTC是一个开源项目，旨在通过简单的API实现浏览器之间的实时音视频通信和数据传输。它支持点对点（P2P）通信，主要应用于音视频通话、屏幕共享、文件传输等场景。2）WebSocketWebSocket是一种基于TCP的通信协议，提供了
  • tomcat基础与部署发布 暗黑小菠萝 Tomcat java web
    从51cto搬家了，以后会更新在这里方便自己查看。 做项目一直用tomcat，都是配置到eclipse中使用，这几天有时间整理一下使用心得，有一些自己配置遇到的细节问题。 Tomcat：一个Servlets和JSP页面的容器，以提供网站服务。 一、Tomcat安装     安装方式：①运行.exe安装包      &n
  • 网站架构发展的过程 ayaoxinchao 数据库应用服务器网站架构
    1.初始阶段网站架构：应用程序、数据库、文件等资源在同一个服务器上 2.应用服务和数据服务分离：应用服务器、数据库服务器、文件服务器 3.使用缓存改善网站性能：为应用服务器提供本地缓存，但受限于应用服务器的内存容量，可以使用专门的缓存服务器，提供分布式缓存服务器架构 4.使用应用服务器集群改善网站的并发处理能力：使用负载均衡调度服务器，将来自客户端浏览器的访问请求分发到应用服务器集群中的任何
  • [信息与安全]数据库的备份问题 comsci 数据库
          如果你们建设的信息系统是采用中心-分支的模式,那么这里有一个问题   如果你的数据来自中心数据库,那么中心数据库如果出现故障,你的分支机构的数据如何保证安全呢?    是否应该在这种信息系统结构的基础上进行改造,容许分支机构的信息系统也备份一个中心数据库的文件呢?  &n
  • 使用maven tomcat plugin插件debug关联源代码 商人shang mavendebug查看源码tomcat-plugin
    *首先需要配置好'''maven-tomcat7-plugin'''，参见[[Maven开发Web项目]]的'''Tomcat'''部分。 *配置好后，在[[Eclipse]]中打开'''Debug Configurations'''界面，在'''Maven Build'''项下新建当前工程的调试。在'''Main'''选项卡中点击'''Browse Workspace...'''选择需要开发的
  • 大访问量高并发 oloz 大访问量高并发
    大访问量高并发的网站主要压力还是在于数据库的操作上，尽量避免频繁的请求数据库。下面简 要列出几点解决方案： 01、优化你的代码和查询语句，合理使用索引 02、使用缓存技术例如memcache、ecache将不经常变化的数据放入缓存之中 03、采用服务器集群、负载均衡分担大访问量高并发压力 04、数据读写分离 05、合理选用框架，合理架构(推荐分布式架构)。
  • cache 服务器 小猪猪08 cache
    Cache   即高速缓存.那么cache是怎么样提高系统性能与运行速度呢？是不是在任何情况下用cache都能提高性能？是不是cache用的越多就越好呢？我在近期开发的项目中有所体会，写下来当作总结也希望能跟大家一起探讨探讨，有错误的地方希望大家批评指正。 　　1.Cache   是怎么样工作的? 　　Cache   是分配在服务器上
  • mysql存储过程 香水浓 mysql
    Description:插入大量测试数据 use xmpl; drop procedure if exists mockup_test_data_sp; create procedure mockup_test_data_sp( in number_of_records int ) begin declare cnt int; declare name varch
  • CSS的class、id、css文件名的常用命名规则 agevs JavaScriptUI框架Ajaxcss
      CSS的class、id、css文件名的常用命名规则     (一)常用的CSS命名规则 　　头：header 　　内容：content/container 　　尾：footer 　　导航：nav 　　侧栏：sidebar 　　栏目：column 　　页面外围控制整体布局宽度：wrapper 　　左右中：left right
  • 全局数据源 AILIKES javatomcatmysqljdbcJNDI
    实验目的：为了研究两个项目同时访问一个全局数据源的时候是创建了一个数据源对象，还是创建了两个数据源对象。 1：将diuid和mysql驱动包（druid-1.0.2.jar和mysql-connector-java-5.1.15.jar）copy至%TOMCAT_HOME%/lib下；2：配置数据源，将JNDI在%TOMCAT_HOME%/conf/context.xml中配置好,格式如下：&l
  • MYSQL的随机查询的实现方法 baalwolf mysql
    MYSQL的随机抽取实现方法。举个例子，要从tablename表中随机提取一条记录，大家一般的写法就是：SELECT * FROM tablename ORDER BY RAND() LIMIT 1。但是，后来我查了一下MYSQL的官方手册，里面针对RAND()的提示大概意思就是，在ORDER BY从句里面不能使用RAND()函数，因为这样会导致数据列被多次扫描。但是在MYSQL 3.23版本中，
  • JAVA的getBytes()方法 bijian1013 javaeclipseunixOS
        在Java中，String的getBytes()方法是得到一个操作系统默认的编码格式的字节数组。这个表示在不同OS下，返回的东西不一样！      String.getBytes(String decode)方法会根据指定的decode编码返回某字符串在该编码下的byte数组表示，如： byte[] b_gbk = "
  • AngularJS中操作Cookies bijian1013 JavaScriptAngularJSCookies
            如果你的应用足够大、足够复杂，那么你很快就会遇到这样一咱种情况：你需要在客户端存储一些状态信息，这些状态信息是跨session(会话)的。你可能还记得利用document.cookie接口直接操作纯文本cookie的痛苦经历。         幸运的是，这种方式已经一去不复返了，在所有现代浏览器中几乎
  • [Maven学习笔记五]Maven聚合和继承特性 bit1129 maven
    Maven聚合   在实际的项目中，一个项目通常会划分为多个模块，为了说明问题，以用户登陆这个小web应用为例。通常一个web应用分为三个模块： 1. 模型和数据持久化层user-core, 2. 业务逻辑层user-service以 3. web展现层user-web， user-service依赖于user-core user-web依赖于user-core和use
  • 【JVM七】JVM知识点总结 bit1129 jvm
      1. JVM运行模式 1.1 JVM运行时分为-server和-client两种模式，在32位机器上只有client模式的JVM。通常，64位的JVM默认都是使用server模式，因为server模式的JVM虽然启动慢点，但是，在运行过程，JVM会尽可能的进行优化 1.2 JVM分为三种字节码解释执行方式：mixed mode, interpret mode以及compiler
  • linux下查看nginx、apache、mysql、php的编译参数 ronin47
    在linux平台下的应用，最流行的莫过于nginx、apache、mysql、php几个。而这几个常用的应用，在手工编译完以后，在其他一些情况下（如：新增模块），往往想要查看当初都使用了那些参数进行的编译。这时候就可以利用以下方法查看。 1、nginx [root@361way ~]# /App/nginx/sbin/nginx -V nginx: nginx version: nginx/
  • unity中运用Resources.Load的方法？ brotherlamp unity视频unity资料unity自学unityunity教程
    问：unity中运用Resources.Load的方法？ 答：Resources.Load是unity本地动态加载资本所用的方法,也即是你想动态加载的时分才用到它,比方枪弹,特效,某些实时替换的图像什么的,主张此文件夹不要放太多东西,在打包的时分,它会独自把里边的一切东西都会集打包到一同,不论里边有没有你用的东西,所以大多数资本应该是自个建文件放置 1、unity实时替换的物体即是依据环境条件
  • 线段树-入门 bylijinnan java算法线段树
    /** * 线段树入门 * 问题：已知线段[2,5] [4,6] [0,7]；求点2,4,7分别出现了多少次 * 以下代码建立的线段树用链表来保存，且树的叶子结点类似[i,i] * * 参考链接：http://hi.baidu.com/semluhiigubbqvq/item/be736a33a8864789f4e4ad18 * @author lijinna
  • 全选与反选 chicony 全选
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>全选与反选</title>
  • vim一些简单记录 chenchao051 vim
    mac在/usr/share/vim/vimrc linux在/etc/vimrc   1、问：后退键不能删除数据，不能往后退怎么办？       答：在vimrc中加入set backspace=2   2、问：如何控制tab键的缩进？       答：在vimrc中加入set tabstop=4 (任何
  • Sublime Text 快捷键 daizj 快捷键sublime
    [size=large][/size]Sublime Text快捷键：Ctrl+Shift+P：打开命令面板Ctrl+P：搜索项目中的文件Ctrl+G：跳转到第几行Ctrl+W：关闭当前打开文件Ctrl+Shift+W：关闭所有打开文件Ctrl+Shift+V：粘贴并格式化Ctrl+D：选择单词，重复可增加选择下一个相同的单词Ctrl+L：选择行，重复可依次增加选择下一行Ctrl+Shift+L：
  • php 引用(&)详解 dcj3sjt126com PHP
    在PHP 中引用的意思是：不同的名字访问同一个变量内容. 与Ｃ语言中的指针是有差别的．Ｃ语言中的指针里面存储的是变量的内容在内存中存放的地址 变量的引用 PHP 的引用允许你用两个变量来指向同一个内容  复制代码代码如下: <?  $a="ABC";  $b =&$a;  echo
  • SVN中trunk,branches,tags用法详解 dcj3sjt126com SVN
    Subversion有一个很标准的目录结构，是这样的。比如项目是proj，svn地址为svn://proj/，那么标准的svn布局是svn://proj/|+-trunk+-branches+-tags这是一个标准的布局，trunk为主开发目录，branches为分支开发目录，tags为tag存档目录（不允许修改）。但是具体这几个目录应该如何使用，svn并没有明确的规范，更多的还是用户自己的习惯。
  • 对软件设计的思考 e200702084 设计模式数据结构算法ssh活动
    软件设计的宏观与微观    软件开发是一种高智商的开发活动。一个优秀的软件设计人员不仅要从宏观上把握软件之间的开发，也要从微观上把握软件之间的开发。宏观上，可以应用面向对象设计，采用流行的SSH架构，采用web层，业务逻辑层，持久层分层架构。采用设计模式提供系统的健壮性和可维护性。微观上，对于一个类，甚至方法的调用，从计算机的角度模拟程序的运行情况。了解内存分配，参数传
  • 同步、异步、阻塞、非阻塞 geeksun 非阻塞
    同步、异步、阻塞、非阻塞这几个概念有时有点混淆，在此文试图解释一下。   同步：发出方法调用后，当没有返回结果，当前线程会一直在等待（阻塞）状态。 场景：打电话，营业厅窗口办业务、B/S架构的http请求-响应模式。   异步：方法调用后不立即返回结果，调用结果通过状态、通知或回调通知方法调用者或接收者。异步方法调用后，当前线程不会阻塞，会继续执行其他任务。 实现：
  • Reverse SSH Tunnel 反向打洞實錄 hongtoushizi ssh
    實際的操作步驟： # 首先，在客戶那理的機器下指令連回我們自己的 Server，並設定自己 Server 上的 12345 port 會對應到幾器上的 SSH port ssh -NfR 12345:localhost:22 [email protected] # 然後在 myhost 的機器上連自己的 12345 port，就可以連回在客戶那的機器 ssh localhost -p 1
  • Hibernate中的缓存 Josh_Persistence 一级缓存Hiberante缓存查询缓存二级缓存
    Hibernate中的缓存   一、Hiberante中常见的三大缓存：一级缓存，二级缓存和查询缓存。 Hibernate中提供了两级Cache，第一级别的缓存是Session级别的缓存，它是属于事务范围的缓存。这一级别的缓存是由hibernate管理的，一般情况下无需进行干预；第二级别的缓存是SessionFactory级别的缓存，它是属于进程范围或群集范围的缓存。这一级别的缓存
  • 对象关系行为模式之延迟加载 home198979 PHP架构延迟加载
    形象化设计模式实战     HELLO!架构   一、概念 Lazy Load：一个对象，它虽然不包含所需要的所有数据，但是知道怎么获取这些数据。 延迟加载貌似很简单，就是在数据需要时再从数据库获取，减少数据库的消耗。但这其中还是有不少技巧的。     二、实现延迟加载 实现Lazy Load主要有四种方法：延迟初始化、虚
  • xml 验证 pengfeicao521 xmlxml解析
    有些字符，xml不能识别，用jdom或者dom4j解析的时候就报错 public static void testPattern() { // 含有非法字符的串 String str =       "Jamey&#52828;&#01;&#02;&#209;&#1282
  • div设置半透明效果 spjich css半透明
    为div设置如下样式：   div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}        说明： 1、filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认2、-moz-opaci
  • 你真的了解单例模式么？ w574240966 java单例设计模式jvm
        单例模式，很多初学者认为单例模式很简单，并且认为自己已经掌握了这种设计模式。但事实上，你真的了解单例模式了么。   一，单例模式的5中写法。（回字的四种写法，哈哈。）     1，懒汉式           （1）线程不安全的懒汉式 public cla
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他