eswang
eswang

Web Component小记

前言

前端组件化可以并不基于JS框架完成吗？本质上，JS完全可以做到，真正阻碍前端组件化的是另外两个小朋友，CSS和DOM。

web component

WebComponent给出的解决思路是提供了对局部视图封装能⼒，可以让DOM、CSSOM和JavaScript运行在局部环境中，这样就使得局部的CSS和DOM不会影响到全局。这是一套技术的组合，包括自定义元素，shadow DOM和HTML模板，我们拿一段代码分析一下：


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  head>
  <body>
    <template id="headers">
      <style>
        div {
          background: #3e3;
          width: 300px;
          height: 300px;
          box-shadow: antiquewhite 10px 10px;
          color: red;
          margin: 0 auto;
          font-size: 56px;
        }
      style>
      <script>
        function foo() {
          console.log("green foo");
        }
      script>
      <div>
        this is a green div
      div>
    template>
    <script>
      class ShadowDOM extends HTMLElement {
        constructor() {
          super();
          const content = document.querySelector("#headers").content;
          const shadow = this.attachShadow({ mode: "open" });
          shadow.appendChild(content.cloneNode(true));
        }
      }
      customElements.define("header-component", ShadowDOM);
    script>
    <header-component>header-component>
    <div>this is a web componentdiv>
  body>
html>

分析一下，这段代码其实总共做了三件事，分别是构建shadow，挂载shadow，展示shadow。

首先是构建：

    <template id="headers">
      <style>
        div {
          background: #3e3;
          width: 300px;
          height: 300px;
          box-shadow: antiquewhite 10px 10px;
          color: red;
          margin: 0 auto;
          font-size: 56px;
        }
      style>
      <script>
        function foo() {
          console.log("green foo");
        }
      script>
      <div>
        this is a green div
      div>
    template>

使用template进行包裹，和其他标签一样，里面style，script或者html标签都可以写，这一段比较好理解。

第二段：

    <script>
      class ShadowDOM extends HTMLElement {
        constructor() {
          super();
          const content = document.querySelector("#headers").content;
          const shadow = this.attachShadow({ mode: "open" });
          shadow.appendChild(content.cloneNode(true));
        }
      }
      customElements.define("header-component", ShadowDOM);
    </script>

即挂载，这里定义了一个shaowDOM 类去继承HTMLELement，然后拿到template里面的content，然后使用attachShadow方法辅助构建shadow，接着只需要把content加到shadow上面即可。

最后只需要定义这个component即可，customElements.define的第一个参数即 component的名字，第二个即shadowDOM。

第三段，就和Vue、React一样直接使用即可。

但是需要注意的是，shadowDOM可以隔绝DOM和CSS，却无法隔绝JS，我们在网页直接调foo函数，可以正常调用。这部分原因大概是JS的组件化已经做的够好了，不需要画蛇添足了。

原理简要分析

当⽣成布局树的时候，渲染引擎会判断headers属性下的shadow-root元素是否是shadowDOM， 如果是，那么在shadowDOM内部元素的节点选择CSS样式的时候，会直接使⽤shadowDOM内部的CSS属性，这样最终渲染出来的效果就是影⼦DOM内部定义的样式。

你可能感兴趣的:(H5C3)

  • H5C3提高（1） 象更 前端javascripthtmlcss
    div对搜索引擎来说没有语义。H5新增标签语义化标签头部标签导航标签内容标签定义文档某个区域侧边栏标签尾部标签可以多次使用，建议在移动端使用视频标签尽量用MP4格式格式：属性值描述autoplayautoplay自动播放（谷歌需要加muted解决）controlscontrols向用户显示播放控件widthpx播放器宽heightpx播放器高looploop播放完是否继续，循环播放posterim
  • pc端网站代码 不哭不闹不炫耀123
    技术栈：html结构+css布局+h5c3动画目录结构：图片文件夹：img样式文件夹：css产品类图片文件：upload字体类文件夹：fonts脚本文件夹：js样式文件的分类：初始化css（cssreset）让浏览器风格统一，把常用的初始化语句放入base.css里面，把一些公共的样式，放入common.css里面1、网站ico图标1）：使用ico图标首先把favicon.ico这个图标放到根目录
  • 查漏补缺说明 anjing529
    因为之前是自学，没有形成一个完整的体系，主要学习了以下部分的知识点：1.HTML2.CSS3.javascript(ECMA-262)4.jQuery5.Ajax6.Vue在学习Vue.js时，跟随Bilibili视频学Vue，看这个就够了学习，此黑马讲师水平1024！！！学习过程中，发现之前学习体系有遗漏，例如H5C3，Node.js，PHP，等部分。遂跟随黑马全套学习视频，把之前遗漏或者没理解
  • H5C3练习心得 2024.01.03（文字加载动画效果）--transition,动画渲染，遮罩层 瑶瑶南波万 html5javascriptcss3前端前端框架xhtml
    （一）transition（过渡效果）1.详解通常将css的属性值更改后，浏览器会立即更新新的样式，例如在鼠标悬停在元素上时，通过:hover选择器定义的样式会立即应用在元素上。在CSS3中加入了一项过渡功能，通过该功能您可以将元素从一种样式在指定时间内平滑的过渡到另一种样式，类似于简单的动画，但无需借助flash或JavaScript。2.属性transition-property：设置元素中参
  • H5C3练习心得12.20 （音乐排行榜效果）--表格,col,:nth-child()和:nth-of-type(),not() 瑶瑶南波万 html5javascriptcss前端
    （一）html表格看这个博主写的-----http://t.csdnimg.cn/p4Qzn写得很清楚元素定义表格行，元素定义表头，元素定义表格单元。代码示例：设置单元格之间无间隔，代码如下：table{width:100%;/*border:2pxsolid#000;*/border-spacing:0;border-collapse:collapse;}（二）colgroup和col1.作用用
  • H5C3练习心得12.18（时间轴效果）--linear-gredient,border-radius 瑶瑶南波万 html前端
    (一)linear-gradient1.定义linear-gradient()函数用于创建两种或多种颜色线性渐变的图片2.方法background-image:linear-gradient(direction,color-stop1,color-stop2,...)它实际上不是颜色，而是背景图片。也就是说，它并不是color的属性值，而是background的属性值。direction:表示渐变
  • H5C3练习总结12.14（小米商城右侧悬浮菜单）--firstchild,定位，选择器 瑶瑶南波万 html5css前端前端框架
    关于CSS的选择器:first-child和:last-child(一)我遇到的问题：在制作小米商城右侧悬浮菜单时，需要的成果图如左侧图，我做到的地方如右侧图：可以看出我做的是每个盒子外边距等间距的，而需要的结果是最后一个盒子的上边距较大。我需要对最后一个盒子进行样式调整。我看到官方代码如下：.sidebarulli:last-child{margin-top:20px;}可是在下面的html代码
  • H5C3练习总结12.12--外边距的合并，弹性盒子 瑶瑶南波万 html前端
    1.外边距实现盒子居中对齐让一个盒子水平居中需要满足以下条件：.必须是块级元素.盒子必须设置宽度给左右外边距都设置auto就可以实现盒子水平居中.header{width:960px;margin:0auto;}2.外边距的合并（1）相邻块元素垂直外边距的合并当上下两个相邻的块元素相遇时，如果上面那个块元素设置了margin-bottom而下面那个块元素设置了margin-top，则它们两个块元素
  • H5C3练习心得（小米商城）12.11 瑶瑶南波万 csshtmlcss3
    1.为什么要清除浮动？浮动的定义：非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面影响布局。这种现象被称为浮动（溢出）。为了防止溢出，所以要清除浮动。固定格式如下：.clearfix::after{/*清除浮动*/content:"";display:block;clear:both;}2.为什么要设置内边距和外边距为0？（其实还不太清楚）默认情况下，
  • h5c3最全版总结 飞不起来的飞机耶耶耶 前端javajavascript
    day011.H5新增标签头部导航栏侧边栏文章区域底部2.H5常用新属性placeholder：占位符提示信息autofocus：自动获取焦点multiple:支持多文件上传autocomplete:当提交过表单内容之后规定某个表单控件的提示内容关闭和打开required:必填项tabindex:指定表单控件获取焦点的顺序用户名：密码：手机号：邮箱：日期：文件：3.input新增type类型ema
  • H5C3新语义标签 选择器 不正经开发者
    1、常用的新语义标签：headernavmainasidesectionarticlefooter等。所有的浏览器都支持main标签，只有ie不支持，开发时不能使用main标签。移动端的浏览器兼容性比较好，不用考虑兼容性问题，所有新标签都能使用。2、h5标签在ie8是显示不出来的，但如果由js动态创建的，就可以显示。html5shiv.js默认帮我们处理了ie8的兼容性问题，原理就是使用js来创建
  • h5c3笔记 cj_jax
    1-私有前缀谷歌、苹果浏览器：-webkit--webkit-transform:rotate(45deg);火狐浏览器：-moz--moz-transform:rotate(45deg);IE浏览器：-ms--ms-transform:rotate(45deg);欧朋浏览器：-o--o-transform:rotate(45deg);2-元素选择器idid选择器class类选择器标签标签选择器*
  • HTML5 + CSS3 高频面试题合集 疾风小蜗牛 面试前端html5css3前端
    目录H5C3和Html，css相比有什么变化Html5新增特性CSS3新特性标签元素分类和特点行内元素spanbstronguinsdel…块状元素divph1-h6headerfooter…行内块元素imgaudioinputbutton…圣杯布局（双飞翼布局）有哪几种实现方式浮动定位弹性盒模型弹性盒模型有哪些属性和属性值，什么效果常见的盒子模型有哪些，有什么区别标准盒模型怪异盒模型（怪异盒模型
  • H5C3和js练习题 小小小萌新12138 前端csshtml5
    H5C3H5C3和Html，css相比有什么变化H5新特性：拖拽释放(Drapanddrop)APIondrop拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在HTML5中，拖放是标准的一部分，任何元素都能够拖放。自定义属性data-id语义化更好的内容标签(header,nav,footer,aside,article,section)音频,视频(audio,video)如果浏览器不支持自
  • 那么你面试必须知道的H5C3知识点 东方青云、 html5css3
    目录1、rem和em的区别2、如何关闭IOS键盘首字母自动大写3、什么是语义化标签4、::before和:after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。5、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉6、：webkit表单输入框placeholder的颜色值能改变吗？7、禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片8、禁止ios和androi
  • 2023最新八股文前端面试题 (css、js、h5c3) lipenghao111 前端htmlcss
    HTML+CSS1.说一下css的盒模型在HTML页面中的所有元素都可以看成是一个盒子盒模型的组成：是由内容、内边距、边框、外边距组成的盒模型的类型：标准盒模型margin+border+padding+contentIE盒模型margin+content（border+padding）box-sizing:content-box(默认值，标准盒模型)、border-box（IE盒模型）2.CSS
  • 黑马pink老师前端从入门到精通教程汇总（附源码+配套资料） 骨灰级收藏家 CSS前端JavaScript前端javascriptechartsHTMLcss
    本篇内容主要是PINK老师教程汇总（主要内容如下）1.web端布局：先讲解HTML5常用标签，接着讲解CSS3常见样式增加的H5C3新特性，新语法，最后讲解PC端品优购项目。以及CSS3动画2d3d效果2.移动端布局：主要讲解视口、二倍图、流失布局，flex布局，rem布局，响应式布局，还会增加摹客使用等工具。3.JavaScript基础从变量的定义与使用、流程控制语句、数组、函数、构造函数、内置
  • 面试题 sunstaotao
    H5C3新特性标签.属性.操作DOM的方法querySelectAll.document.getElementByClassNamehistory.go(n)拖拽事件等事件委托原理事件冒泡→动态生成标签问题普通的事件冒泡和事件绑定区别!普通事件在同一个元素上注册会覆盖事件绑定:addEventListener注册多个不会覆盖作用域链问题!响应式和自适应的区别?响应式:根据屏幕大小不同显示不同的页面
  • web-入门* 东瀛神兽Kawasaki
    PC端-web开发_HTML1.目的:精通网页布局为后面学习Javascirpt打基础基础学习路线。HTML5基础CSS3基础H5C3提高项目实战1.1.HTML导读能够说出网页的基本组成能够说出什么是HTML能够说出常用的浏览器能够说出Web标准的三大组成部分1.1.1网页:网页的相关概念什么是网页?网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合网页是网站中
  • 2021-05-06 H5C3加强 黑云
    语义化标签头部标签导航标签内容标签定义文档某个区域侧边栏标签尾部标签多媒体标签video音频标签-audio1.音频标签和视频标签使用方式基本一致2.浏览器支持情况不同3.谷歌浏览器把音频和视频自动播放禁止了4.我们可以给视频标签添加muted属性来静音播放视频，音频不可以（可以通过JavaScript解决）5.视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性新
  • H5C3,js,ES6面试高频考点 qq_53694927 csscss3html
    H5C3H5C3和Html，css相比有什么变化HTML5中的一些有趣的新特性：用于绘画的canvas元素用于媒介回放的video和audio元素对本地离线存储的更好的支持新的特殊内容元素，比如article、footer、header、nav、section新的表单控件，比如calendar、date、time、email、url、search基本选择器属性选择器伪类选择器CSS3边框与圆角CS
  • 重温前端基础（一） HTML、CSS、H5C3 ←か淡定☆ ヾ 前端htmlhtml5css3javascriptjquery
    目录0.WEB标准构成1.HTML1.1HTML概念1.2超文本含义1.3页面语言1.4字符集1.5标签语义化1.6常用标签1.7图像标签img1.8链接标签1.9锚点定位1.10base标签1.11特殊字符1.12XHTML1.13HTML和XHTML之间的区别1.14表格1.14.1表格属性1.14.2表头单元格标签th1.14.3表格标题-caption1.14.4合并单元格1.14.5表格
  • 前端基础搬运工-H5C3模块 我家媳妇蠢蠢哒
    八、H5C3模块基础部分1.CSS3有哪些新特性？-[]1.CSS3实现圆角（border-radius），阴影（box-shadow），2.对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）3.transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);//旋
  • 回归
    前段时间因为一些事情耽误确实这个事情苦恼了我很久我第一次感受到就是我很想十分努力的去学习去改变自己但是一种力不从心的感觉一种不给你机会的感觉如果后面有机会我会专门发一篇随笔来写这几个月我在干嘛还真是讽刺前面才说梦开始的地方结果就戛然而止了哈哈哈现在回来了回来过后先是开始复习我觉得所以这几天都在复习两天时间就把h5c3移动端布局复习完了确实现在再去看一看以前学的更加得心应手了能够自己完成一些静态页面
  • H5C3新特性简单总结 南风_思学 htmlcsshtml5
    H5C3新特性简单总结CSS3新特性：1.颜色：新增RGBA，HSLA模式2.文字阴影（text-shadow）3.边框：圆角（border-radius）边框阴影：box-shadow4.盒子模型：box-sizing5.背景：background-size设置背景图片的尺寸background-origin设置背景图片的原点background-clip设置背景图片的裁切区域，以”，”分隔可以
  • 前端知识点随记 ←か淡定☆ ヾ 前端htmlcsscss3javascriptjquery
    （前端笔记补充，备忘录使用。）1.HTML/CSS/H5C3知识点1.1鼠标样式|十字|1.2css半透明样式1.3CSS3transform属性1.3.1旋转1.3.2缩放1.4特殊写法\91.5解决video标签在谷歌不能自动播放1.6\标签-提示文字1.7placeholder-自定义占位文本1.8去除input默认边框2.Javascript知识点2.1创建节点2.2插入节点2.3修改元素
  • H5C3基础学习总结之定位堆叠顺序及定位特殊性 程序猿tu HTML/CSScsshtmlhtml5
    定位堆叠顺序在使用定位布局的时候，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后持续。（参考为坐标轴的Z轴）语法：选择器{z-index:1;}注意细节：数字可以是正整数、负整数或是0，默认为auto。数字越大，盒子越靠山。如果属性值相同，则按照书写顺序，后来居上。数字后面不加单位。（表示等级的意思）只有定位的盒子才有z-index属性代码示例：定位的堆叠顺序.box{po
  • H5C3基础学习总结之CSS3盒子阴影 程序猿tu HTML/CSScss3csshtml5
    CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。语法：box-shadow:h-shadowv-shadowblurspreadcolorinset;值描述h-shadow必须。水平阴影的位置。允许负值。v-shadow必须。锤子阴影的位置。允许负值。blur可选。模糊距离。spread可选。阴影的尺寸。color可选。阴影的颜色。inset可选。将外部阴影（outs
  • H5C3基础学习总结之元素的显示与隐藏 程序猿tu HTML/CSScss3css前端
    类似于网站广告，点击关闭就不见了，刷新页面会重新出现。本质：让一个元素在页面中隐藏或者显示出来。display属性display属性用于设置一个元素如何显示代码作用display:none;隐藏对象display:block;除了转换为块级元素之外，同时还有显示元素的意思。注意细节：display隐藏元素之后，不再占有原来的位置。搭配JS可以做很多的网页特效。visibility可见性visibi
  • 【微信小程序】post接口示例 汤圆小丸叽 前端Vue微信小程序小程序前端
    先展示页面样例：这是一个填写表单，在确认提交里写提交表单post接口。api：H5C3：page{background-color:#f3f4f6;}.uni-input-placeholder{font-size:26rpx;line-height:30rpx;padding-bottom:18rpx;}.uni-textarea-placeholder{font-size:26rpx;}.le
  • 桌面上有多个球在同时运动，怎么实现球之间不交叉，即碰撞？ 换个号韩国红果果 html小球碰撞
    稍微想了一下，然后解决了很多bug，最后终于把它实现了。其实原理很简单。在每改变一个小球的x y坐标后，遍历整个在dom树中的其他小球，看一下它们与当前小球的距离是否小于球半径的两倍？若小于说明下一次绘制该小球（设为a）前要把他的方向变为原来相反方向（与a要碰撞的小球设为b），即假如当前小球的距离小于球半径的两倍的话，马上改变当前小球方向。那么下一次绘制也是先绘制b，再绘制a，由于a的方向已经改变
  • 《高性能HTML5》读后整理的Web性能优化内容 白糖_ html5
    读后感         先说说《高性能HTML5》这本书的读后感吧，个人觉得这本书前两章跟书的标题完全搭不上关系，或者说只能算是讲解了“高性能”这三个字，HTML5完全不见踪影。个人觉得作者应该首先把HTML5的大菜拿出来讲一讲，再去分析性能优化的内容，这样才会有吸引力。因为只是在线试读，没有机会看后面的内容，所以不胡乱评价了。  
  • [JShop]Spring MVC的RequestContextHolder使用误区 dinguangx jeeshop商城系统jshop电商系统
        在spring mvc中，为了随时都能取到当前请求的request对象，可以通过RequestContextHolder的静态方法getRequestAttributes()获取Request相关的变量，如request, response等。         在jshop中，对RequestContextHolder的
  • 算法之时间复杂度 周凡杨 java算法时间复杂度效率
          在 计算机科学 中， 算法 的时间复杂度是一个 函数 ，它定量描述了该算法的运行时间。这是一个关于代表算法输入值的 字符串 的长度的函数。时间复杂度常用 大O符号 表述，不包括这个函数的低阶项和首项系数。使用这种方式时，时间复杂度可被称为是 渐近 的，它考察当输入值大小趋近无穷时的情况。 这样用大写O()来体现算法时间复杂度的记法，
  • Java事务处理 g21121 java
    一、什么是Java事务 通常的观念认为，事务仅与数据库相关。 事务必须服从ISO/IEC所制定的ACID原则。ACID是原子性（atomicity）、一致性（consistency）、隔离性（isolation）和持久性（durability）的缩写。事务的原子性表示事务执行过程中的任何失败都将导致事务所做的任何修改失效。一致性表示当事务执行失败时，所有被该事务影响的数据都应该恢复到事务执行前的状
  • Linux awk命令详解 510888780 linux
    一.  AWK 说明   awk是一种编程语言，用于在linux/unix下对文本和数据进行处理。数据可以来自标准输入、一个或多个文件，或其它命令的输出。它支持用户自定义函数和动态正则表达式等先进功能，是linux/unix下的一个强大编程工具。它在命令行中使用，但更多是作为脚本来使用。    awk的处理文本和数据的方式：它逐行扫描文件，从第一行到
  • android permission 布衣凌宇 Permission
    <uses-permission android:name="android.permission.ACCESS_CHECKIN_PROPERTIES" ></uses-permission>允许读写访问"properties"表在checkin数据库中，改值可以修改上传 <uses-permission android:na
  • Oracle和谷歌Java Android官司将推迟 aijuans javaoracle
    北京时间 10 月 7 日，据国外媒体报道，Oracle 和谷歌之间一场等待已久的官司可能会推迟至 10 月 17 日以后进行，这场官司的内容是 Android 操作系统所谓的 Java 专利权之争。本案法官 William Alsup 称根据专利权专家 Florian Mueller 的预测，谷歌 Oracle 案很可能会被推迟。　　该案中的第二波辩护被安排在 10 月 17 日出庭，从目前看来
  • linux shell 常用命令 antlove linuxshellcommand
    grep [options] [regex] [files] /var/root # grep -n "o" * hello.c:1:/* This C source can be compiled with:
  • Java解析XML配置数据库连接(DOM技术连接 SAX技术连接) 百合不是茶 sax技术Java解析xml文档dom技术XML配置数据库连接
        XML配置数据库文件的连接其实是个很简单的问题,为什么到现在才写出来主要是昨天在网上看了别人写的,然后一直陷入其中,最后发现不能自拔 所以今天决定自己完成 ,,,,现将代码与思路贴出来供大家一起学习   XML配置数据库的连接主要技术点的博客; JDBC编程 : JDBC连接数据库 DOM解析XML:  DOM解析XML文件 SA
  • underscore.js 学习（二） bijian1013 JavaScriptunderscore
            Array Functions 所有数组函数对参数对象一样适用。1.first   _.first(array, [n])   别名: head, take       返回array的第一个元素，设置了参数n，就
  • plSql介绍 bijian1013 oracle数据库plsql
    /* * PL/SQL 程序设计学习笔记 * 学习plSql介绍.pdf * 时间：2010-10-05 */ --创建DEPT表 create table DEPT ( DEPTNO NUMBER(10), DNAME NVARCHAR2(255), LOC NVARCHAR2(255) ) delete dept; select
  • 【Nginx一】Nginx安装与总体介绍 bit1129 nginx
    启动、停止、重新加载Nginx nginx 启动Nginx服务器，不需要任何参数u nginx -s stop 快速(强制)关系Nginx服务器 nginx -s quit 优雅的关闭Nginx服务器 nginx -s reload 重新加载Nginx服务器的配置文件 nginx -s reopen 重新打开Nginx日志文件  
  • spring mvc开发中浏览器兼容的奇怪问题 bitray jqueryAjaxspringMVC浏览器上传文件
        最近个人开发一个小的OA项目,属于复习阶段.使用的技术主要是spring mvc作为前端框架,mybatis作为数据库持久化技术.前台使用jquery和一些jquery的插件.     在开发到中间阶段时候发现自己好像忽略了一个小问题,整个项目一直在firefox下测试,没有在IE下测试,不确定是否会出现兼容问题.由于jquer
  • Lua的io库函数列表 ronin47 lua io
    1、io表调用方式：使用io表，io.open将返回指定文件的描述，并且所有的操作将围绕这个文件描述 　　io表同样提供三种预定义的文件描述io.stdin,io.stdout,io.stderr 　　2、文件句柄直接调用方式,即使用file:XXX()函数方式进行操作,其中file为io.open()返回的文件句柄 　　多数I/O函数调用失败时返回nil加错误信息,有些函数成功时返回nil
  • java-26-左旋转字符串 bylijinnan java
    public class LeftRotateString { /** * Q 26 左旋转字符串 * 题目：定义字符串的左旋转操作：把字符串前面的若干个字符移动到字符串的尾部。 * 如把字符串abcdef左旋转2位得到字符串cdefab。 * 请实现字符串左旋转的函数。要求时间对长度为n的字符串操作的复杂度为O(n)，辅助内存为O(1)。 */ pu
  • 《vi中的替换艺术》-linux命令五分钟系列之十一 cfyme linux命令
    vi方面的内容不知道分类到哪里好，就放到《Linux命令五分钟系列》里吧！ 今天编程，关于栈的一个小例子，其间我需要把”S.”替换为”S->”(替换不包括双引号)。 其实这个不难，不过我觉得应该总结一下vi里的替换技术了，以备以后查阅。   1 所有替换方案都要在冒号“:”状态下书写。 2 如果想将abc替换为xyz，那么就这样 :s/abc/xyz/ 不过要特别
  • [轨道与计算]新的并行计算架构 comsci 并行计算
         我在进行流程引擎循环反馈试验的过程中，发现一个有趣的事情。。。如果我们在流程图的每个节点中嵌入一个双向循环代码段，而整个流程中又充满着很多并行路由，每个并行路由中又包含着一些并行节点，那么当整个流程图开始循环反馈过程的时候，这个流程图的运行过程是否变成一个并行计算的架构呢？      
  • 重复执行某段代码 dai_lm android
    用handler就可以了 private Handler handler = new Handler(); private Runnable runnable = new Runnable() { public void run() { update(); handler.postDelayed(this, 5000); } }; 开始计时 h
  • Java实现堆栈（list实现） datageek 数据结构——堆栈
    public interface IStack<T> { //元素出栈，并返回出栈元素 public T pop(); //元素入栈 public void push(T element); //获取栈顶元素 public T peek(); //判断栈是否为空 public boolean isEmpty
  • 四大备份MySql数据库方法及可能遇到的问题 dcj3sjt126com DBbackup
    一：通过备份王等软件进行备份前台进不去？ 用备份王等软件进行备份是大多老站长的选择，这种方法方便快捷，只要上传备份软件到空间一步步操作就可以，但是许多刚接触备份王软件的客用户来说还原后会出现一个问题：因为新老空间数据库用户名和密码不统一，网站文件打包过来后因没有修改连接文件，还原数据库是好了，可是前台会提示数据库连接错误，网站从而出现打不开的情况。 解决方法：学会修改网站配置文件，大多是由co
  • github做webhooks：[1]钩子触发是否成功测试 dcj3sjt126com githubgitwebhook
    转自: http://jingyan.baidu.com/article/5d6edee228c88899ebdeec47.html github和svn一样有钩子的功能，而且更加强大。例如我做的是最常见的push操作触发的钩子操作，则每次更新之后的钩子操作记录都会在github的控制板可以看到！ 工具/原料 github 方法/步骤
  • ">的作用" target="_blank">JSP中的作用 蕃薯耀
    JSP中<base href="<%=basePath%>">的作用 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  • linux下SAMBA服务安装与配置 hanqunfeng linux
    局域网使用的文件共享服务。 一.安装包： rpm -qa | grep samba samba-3.6.9-151.el6.x86_64 samba-common-3.6.9-151.el6.x86_64 samba-winbind-3.6.9-151.el6.x86_64 samba-client-3.6.9-151.el6.x86_64 samba-winbind-clients
  • guava cache IXHONG cache
    缓存，在我们日常开发中是必不可少的一种解决性能问题的方法。简单的说，cache 就是为了提升系统性能而开辟的一块内存空间。 　　缓存的主要作用是暂时在内存中保存业务系统的数据处理结果，并且等待下次访问使用。在日常开发的很多场合，由于受限于硬盘IO的性能或者我们自身业务系统的数据处理和获取可能非常费时，当我们发现我们的系统这个数据请求量很大的时候，频繁的IO和频繁的逻辑处理会导致硬盘和CPU资源的
  • Query的开始--全局变量,noconflict和兼容各种js的初始化方法 kvhur JavaScriptjquerycss
    这个是整个jQuery代码的开始，里面包含了对不同环境的js进行的处理，例如普通环境，Nodejs，和requiredJs的处理方法。 还有jQuery生成$, jQuery全局变量的代码和noConflict代码详解  完整资源： http://www.gbtags.com/gb/share/5640.htm jQuery 源码：   (
  • 美国人的福利和中国人的储蓄 nannan408
       今天看了篇文章，震动很大，说的是美国的福利。    美国医院的无偿入院真的是个好措施。小小的改善，对于社会是大大的信心。小孩，税费等，政府不收反补，真的体现了人文主义。    美国这么高的社会保障会不会使人变懒？答案是否定的。正因为政府解决了后顾之忧，人们才得以倾尽精力去做一些有创造力，更造福社会的事情，这竟成了美国社会思想、人
  • N阶行列式计算(JAVA) qiuwanchi N阶行列式计算
    package gaodai; import java.util.List; /** * N阶行列式计算 * @author 邱万迟 * */ public class DeterminantCalculation { public DeterminantCalculation(List<List<Double>> determina
  • C语言算法之打渔晒网问题 qiufeihu c算法
    如果一个渔夫从2011年1月1日开始每三天打一次渔，两天晒一次网，编程实现当输入2011年1月1日以后任意一天，输出该渔夫是在打渔还是在晒网。 代码如下：   #include <stdio.h> int leap(int a) /*自定义函数leap()用来指定输入的年份是否为闰年*/ { if((a%4 == 0 && a%100 != 0
  • XML中DOCTYPE字段的解析 wyzuomumu xml
    DTD声明始终以!DOCTYPE开头,空一格后跟着文档根元素的名称,如果是内部DTD,则再空一格出现[],在中括号中是文档类型定义的内容. 而对于外部DTD,则又分为私有DTD与公共DTD,私有DTD使用SYSTEM表示,接着是外部DTD的URL. 而公共DTD则使用PUBLIC,接着是DTD公共名称,接着是DTD的URL.   私有DTD <!DOCTYPErootSYST
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他