jontyy
jontyy

前端面试题（各种基础）

HTML

  1. Doctype的作用，标准模式和混杂模式有什么区别

    • < ! D o c t y p e>声明位于HTML文档的第一行，出在html标签的前面，告诉浏览器的解析器用什么文档标准解析这个文档，当不存在或者格式错误的时候会采用兼容模式来加载这个网页
    • 标准模式的排版和js运作模式都是以改浏览器支持的最高标准运行，在兼容模式中，页面以一种宽松的向后兼容的方式显示，模拟老师浏览器的行为以防止站点无法工作

  2. html语义化的理解

    • 用正确的标签做正确的事情
    • 让页面的内容结构化，结构更加清晰，便于对浏览器、搜索引擎解析
    • 即时没有css的情况下，也已一种文档格式显示，并且容易阅读
    • 便于seo，因为搜索引擎的爬虫是依赖于html标记来确定各个关键字的权重

  3. html5的离线存储怎么使用，工作原理

    在用户和因特网没有连接时，可以正常访问站点和应用，在用户和因特网链接的时候可以更新用户机器上的缓存文件

    原理： html5是一种基于新建一个appcache的文件的缓存机制，通过这个文件上的解析清单离线存储资源，这些资源就会响cookie一样被存储下来之后当网络处于离线状态下，浏览器会通过离线存储的数据进行页面展示

    使用：

    • 在页面头部下面加入一个mainfest的属性
    • 在cache.mainfest文件的编写先存储的资源
    • 在离线状态下，操作window.applicationCache进行需求实现。

  4. iframe有那些缺点？

    • iframe会阻塞主页面的onload事件，搜索引擎的检索程序无法解读这种页面， 会影响seo。iframe和主页面之间是共享连接池的，所以会影响页面的并行加载。
    • 为了解决这些缺点，我们需要给iframe动态加上src，这样子的话可以绕开上面的问题

  5. laber的作用是什么？要怎么用

    • laber标签定义表单控制，当用户选择该标签时，浏览器会自动吧焦点转到和标签相关的表单控件上。
    点击这里和点击输入框一样
laber>



<laber>data:laber>

  6. 对页面元素进行编辑

    • 对页面整体编辑，需要设置designMode on/off
    • 对页面元素编辑，需要设置contentEditable

  7. 实现不用border，实现1px高的线

    <div style="height:1px;overflow:hidden;background:red"></div>

  8. 行内元素和块级元素，行内元素不会换新航，块级元素会格式化为块状，会换行，行内元素不呢能设置宽度和高度，熟悉的行内元素有span,i,em等，img是行内元素，但是可以设置宽度和高度。主要原因是置换元素和非置换元素。

    置换元素和非置换元素不仅行内元素有区分，块级元素也有区分，比如iframe以及个别时候的audio和canvas也是置换元素。

    置换元素是根据标签的属性来决定元素显示的具体内容，比如img标签就是根据src属性来显示，input标签是根据type属性来显示数据框，这些元素往往没有实际内容，也就是一个空元素。但是大多数元素都是不可替换元素，比如div p，他们都把实际的内容展示出来。

    可置换元素有img|input|select|textarea|button。他们区别于一般的inline元素，这些元素拥有内在尺寸，可以设置高度和宽度，他们的性质和设置了inline-block的属性一样，

    行内置换元素设置上下padding，可以撑大父元素，而行内非置换元素设置上下padding只是范围扩大，不会影响父元素。

  9. 语义化的标签基本都是h5的，比如header footer nav article

  10. li标签之前看不见的空白间隔是什么原因引起的，有什么解决办法

行框的排列会受到中间空白(回车换行的影响）因为空格也属于字符，这些空白也会被应用样式，占据空间，把字符大小设置为0或者负边距，或者删除空白就行。

CSS

  1. w3c标准中，块元素的总宽度就是content，而ie标准盒模型中块元素的总宽度就是content+2 * padding+2 * border。导致他们采用那个标准，是html文件顶部的doctype

  2. 行内元素有 br input span b i

  3. BFC是块级格式化上下文，是css2.1的规范，决定了元素如何对其内容进行定位，以及与其他元素的关系和作用。。BFC提供了一个环境，html元素在这个环境中按照固定的规则进行布局，一个环境中的元素不会影响到其它环境的布局。浮动元素内部子元素主要受该浮动元素影响。

    触发BFC

    • display的值是table-cell ,table-caption,inline-blockk
    • overflow为hidden，反正不能visible
    • 只要元素触发了BFC，就不需要clearboth来清除浮动
    • float的值不能为none
    • position的值不是relative和static

  4. css盒子模型中的padding是透明的，可以显示背景

  5. canvas和svg的区别

    • canvas
      • 依赖分辨率
      • 不支持事件处理器
      • 弱的文本渲染能力
      • 能够以jpg和png保存图像
      • 适合图形密集的游戏
      • 挨个像素进行渲染
      • 图形完成后不会继续得到浏览器的关注
    • SVG
      • 不依赖分辨率
      • 支持时间处理器
      • 适合带有大型渲染区域的应用程序（地图）
      • 复杂度高会减慢渲染速度
      • 不适合游戏

  6. 垂直居中的方法

    • flex

      .flex {
    display : flex;
    align-items : center;
    align-items : center;
    
}

    • 单行文字垂直居中，只需要height和line-height一样高

    • 多对象的垂直居中技巧，将多个元素用一个大的div包裹起来，并且设置display是inline-block设置高度。

    • absolute + margin负值

    • absolute+ translate

    • flex+margin

  7. import和link的区别

    • link
      • 加载页面之前吧css加载完毕
      • link在老版本ie也兼容
      • 当使用javascript控制dom去改变样式的时候，只能使用link标签
    • import
      • 读完文件之后加载，所以一开始会没有css，会导致短暂的闪烁
      • 老版本不支持
      • 只能加载css
      • 不可以被dom控制

  8. position定位

    • static：默认布局，按照文档流进行排布
    • relative：相对布局，按照本身的位置进行偏移
    • absolute：绝对定位，从当前节点向上找寻第一个不是static的元素进行定位
    • fixed：固定定位，固定在页面的某个位置
    • sticky：粘性定位，==relative+fixed，先按照普通文档流进行定位，然后相对于该元素在流中的BFC和块级祖先元素定位，然后元素表现为在跨域特定阈值的时候为相对定位，之后为绝对定位，必须结合left，right，top或者bottom一个使用，可以实现导航栏那些功能。

  9. display

    • inline行内布局，表现为各元素在一行显示，比如span元素
    • block块级元素，表现为每个元素独占一行，比如p和div
    • inline-block行内块元素，表现为每个元素有自己的宽度和高度，但是他们在一行显示，会存在空白间隙现象，处理方法有负边距，font-size=0
    • flex弹性布局，可以实现动态分配宽度，比如实现双飞翼那样的布局

  10. 双飞翼和圣杯布局

圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。

  • 圣杯

    DOM:
<body>
<div id="hd">headerdiv>
<div id="bd">
  <div id="middle">middlediv>
  <div id="left">leftdiv>
  <div id="right">rightdiv>
div>
<div id="footer">footerdiv>
body>
<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#bd{
    /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
    padding:0 200px 0 180px;
    height:100px;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
    /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
    position:relative;
    left:-180px;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
    /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
    position:relative;
    right:-200px;
}
#footer{
    height:50px;
    background: #666;
    text-align: center;
}
style>

  1. 行内元素是否可以设置margin和padding

    看html8 置换元素和非置换元素的区别

  2. 清除浮动的几种方式。

    • 父级元素设置伪类

      .clearfloat{zoom:1}
.clearfloat:after {
    content : '';
    display:block;
    clear:both;
    visibility:hidden;
}

/*
原理：利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：浏览器支持比较好，不容易出现兼容性问题
*/

    • 在底部添加一个空div，添加属性

      .newDiv {
    clear:both;
}
/*
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
缺点：添加了一个div，增加了dom节点
*/

    • 父级div设置高度

      /*
缺点明显，只适合固定高度的div
*/

    • 父级div设置overflow：hideen

      /*
必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
不能使用position
*/

    • 父级元素设置float

      /*
形成了bfc，浏览器会检测高度
*/

  3. 媒体查询

    @media screen and (min-width:1200px)

@media screen and (min-width:992px)

@media screen and (min-width:768px)

@media screen and (min-width:480px)

  4. 移动端开发过程中，因为手机的dpr(设备像素比不同)，需要根据dpr来修改图标的大小，判断使用@2x 图 还是 @3x 图，解决高清的适配。

    /*less，sass这类css预处理语言中的混合，可以理解成自定义了一段代码，后面可以用@include调用*/
@mixin bg-image($url) {    
      background-image: url($url + "@2x.png");    
      @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){        
            background-image: url($url + "@3x.png");    
      }
}
/*用@include调用*/
div{
  width:30px;
  height:20px;
  background-size:30px  20px;
  background-repeat:no-repeat;
  @include bg-image('../../../../static/image/map_loading');     
}



//scss
@mixin box-size($width:100px,$height:100px) {
    width: $width;
    height: $height;
}
.demo{
    @include box-size;
}

.demo2{
    @include box-size(200px,300px);
}

  5. 0.5px实现的几种方式

    • 利用渐变来做

       
      
.bd-t       {
    position:relative;
}
.bd-t :after {
    content : '';
    position : absolute;
    top:0;
    left:0;
    width:100%;
    height:1px;
     background-image: linear-gradient(0deg, transparent 50%, #e0e0e0 50%);
}

/*
为了实现盒子顶部边框0.5px的伪代码：border-top：0.5px solid #e0e0e0; 的效果，使用after，作为一个钩子，宽度100%，高度1px,背景渐变，一半透明，一半有颜色，这么干是可以的。
*/

    • 使用缩放

      
.bd-t       {
    position :relative;
}
.bt-d:after {
    content:'';
    position ；absolute;
    left:0;
    top:0;
    width:100%;
    height:1px;
    transform:scaleY(0.5);
    background:black;
    /*或者
    border-top 1px solid black;
    */
}

    • 使用缩放解决四边都是0.5

      
.bd-t       {
    position:relative;
}
.bd-t:after {
    content:"";
    position:absolute;
    z-index:-1;
	width:200%;
    height:200%;
    transform:sacle(0.5,0.5);
    border:1px solid black;
}

    • 使用background-img

      

      
.bd-t       {
    position:relative;
}
.bd-t:after {
    content : '';
    position: position;
    left:0;
    top:0;
    width:100%;
    border-top:1px solid transparent;
    border-image: url('pic.png') 2 1 1 1 stretch; 
}

    • 使用同周边相似的浅色，利用视觉效果，让用户产生错觉。

  6. 在浏览器中我们可以开启硬件加速，使得gpu发挥作用。cssanimations,transform,transitions不会自动开启gpu加速，而是由浏览器的缓慢的软件渲染引擎来执行。现代浏览器检测到页面中某个dom元素应用了某些css规则的时候就会开启，显著的是元素的3d变换，我们可以欺骗浏览器开启硬件加速。

    transform:translateZ(0);

  7. jquery和css3做动画的区别

    • css3动画和过度都是基于css实现机制的，没有任何语言操作，效率高于jquery，兼容性不好
    • jquery的animate函数可以简单的理解为css样式的逐桢动画，是css样式不同状态快速切换的结果，兼容性好
    • css3使用gpu加速，jquery使用cpu，所以css3更加的流畅
    • css 动画建议transoform，而不是单独计算width等，因为tansform会吧元素独立出来单独计算。
     $("p").animate({"bottom":p*9},3000,function(){
                    // 回调函数
                $("p").animate({"bottom":-p},6000);
                
                
                
//css3
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

  8. 不可以继承的， display，margin，padding，border，backgroud，height，width，position等

  9. css多列等高是如何实现的。

    利用padding-bottom（+）和marin-bottom(-)正负相抵。设置父容器overflow：hidden，这样父容器的高度就是它里面子元素没有设定padding-boddom的高度，当里面的任何一列高度增加了，那么父容器的高度就被撑到里面最高的那列的高度了。 其它的比这列矮的列会用他们的padding-bottom补偿这份高度差

  10. 全屏滚动的原理

    比如要显示五个页面，可以设置高度为500%； 然后只显示100%；通过transform来使用

  11. 响应式布局就是一个网站可以兼容多个终端，而不是为每一个终端写一个版本，有点事面对不同分辨率设备灵活性强。但是他会工作量大，而且效率有点低，代码累赘，加载时间长。可以通过媒体查询来做

    @media 设备名 only(选取条件) not(选取条件) and(选取条件)

  12. 视觉感动就是网页向下滑动的时候，控制背景的移动速度比前景移动速度慢来创建出令人惊叹的3d效果。可以用css实现

  13. ::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

    单冒号是用于css伪类，双冒号是css微元素， ：：befare就是一个子元素的存在，定义在元素主体内容之前的一个微元素，并不存在dom中， after生成的会比before的靠后。

  14. 修改chrome记住密码之后自动填充表单的黄色背景，第一种情况是针对文本框是纯色背景的

    input:-webkit-autofill, textarea:-webkit-autofill, select: -webkit-autofill {
  background-color:rgb(250, 255, 189);
  background-image :none,
    color:rgb(0,0,0);
}
/*
设置背景色为白色
*/

    还有一种情况是，input使用背景图片，图片不复杂的情况下可以使用第一种情况解决，纯色内阴影覆盖，

  15. line-height

    行高是只一行文字的高度，具体说的是两行文字极限之间的距离，css起高度作用的主要是height和line-height，一个没有定义height属性，最终表现一定是line-height。单行文本垂直居中只需要吧line-height设置为何height一样高。多行文本垂直居中需要设置display为inline-block

  16. 设置元素浮动之后，他的display的值会自动变成block，ie出现双边框设置inline就可以解决bug

  17. position：fixed在安卓中无效怎么办。

    fixed的元素是相对整个页面固定位置的，你在屏幕上滑动只是移动站合格所以的viewport，但是原来的网页还好好的在哪里，fixed的内容也没有变化位置，。需要在head中加入代码

    <meta name="viewport" content="width=device-width, initial-scale=1.0, 
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

  18. 如果要手写动画，最小的时间间隔。

    因为大多数显示器的默认分辨率是60hz，也就是1s刷新60次，所以莅临赏最小的时间间隔是1/60*1000 也就是16.7ms

  19. 有一个高度自适应的div，里面有两个div，一个高度是100px；希望另一个填满剩下的高度，

    .con {
  height: auto;
}
.top {
  width:100%;
  height:100px;
  backgroun:red;
}
.bottom {
  position: absolute;
  top:100px;
  width:100%;
  bottom:0;
  left:0;
  right:0;
  
}

  20. png, jpg, gif

    png是无损的，压缩比高，色彩好，透明

    jpg是针对相片的失真压缩，会皮怀的，

    gif是一种位图格式，可以有动画

  21. cookie隔离，看下面的cookie优化

  22. 移动端最小触控区域时44px*44px

  23. css强制不换行，超出部分用省略号

    {
  white-space: nowrap; //文本强制不换行；
  text-overflow:ellipsis; //文本溢出显示省略号；
  overflow:hidden; //溢出的部分隐藏；
}

  24. 颜色渐变

    background: linear-gradient(to right, dodgerBlue, skyBlue);
-webkit-background-clip: text;

  25. rem实现页面兼容

    例如：设计稿宽度是750px，有一个元素设计稿上的宽度是50px，设备物理宽度是375px,那么我们在页面上应该设置宽度为 width:50rem，相当于宽度是：50*（375/750）=25px；这里能正确算出在375px的设备上刚好占一半,其实可以想象为 rem=（375/750）。

    2.一般浏览器的最小字体是12px，如果html的font-size=（375/750）px，相当于font-size=0.5px，那么这个数值就小于12px，会造成一些计算的错误，和一些奇怪的问题，*100后，font-size是50px，就可以解决这种字体小于12px的问题。

    1. 为了计算方便 我们后面把比率乘以了100，（375/750）*100，那么相对应这个元素在设置数值的时候就需要除以100了（50/100）,这样可以保证最后出来的数值不变.

    在header中写标签设置font-size的大小。

    <script type="text/javascript">
	document.documentElement.style.fontSize = document.documentElement.clientWidth / 750*100 + 'px';
</script>

​

js

  1. 移动端ios开发和andriod的区别

    • 物理返回andriond会刷新，ios不会刷新

    • ios和安卓对json对象遍历的顺序相反

    • ios弹出键盘的时候，viewport的高度并不会边，但是安卓变，所以iosfixed在底部的元素显示不出来。

    • ios自带的浏览器是有双击缩放功能的。比如用户在ios里面点击了一个连接，由于用户可以进行双击缩放和双击滚动的操作，浏览器并不能确定用户是要打开这个链接还是要放大，所以需要等待三百ms来判断用户是判断用户是否再次点击。 所以就有了300ms延迟

    • 解决方法有

      • 添加viewpoint meta标签，不允许缩放
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
      • 使用fastclick代码

      移动端事件触发的顺序是，touchstart-》touchmove-》touchend-》click，所以fastclick的原理就是检测到touch事件的时候，通过dom自定义事件立即模拟click事件，同时把300ms之后的事件阻止掉

    • 与之相关的还有点击穿透事件，比如页面有两个元素a和b，b元素在a元素的上面，我们在b元素的touchstart事件上注册了一个回调函数，这个回调函数的作用是隐藏b元素，我们发现，当点击b元素的时候，b被隐藏了，同时a元素触发了click事件。这是因为事件的处理顺序，click有300ms的延迟，touchstart是立即发生的，然后300ms之后，浏览器触发了click事件，但是这时候b已经没了，那就触发了a事件，同样用fastclick解决

  2. 移动端为什么用zepto而不是jquery

    • 因为jquery适用于桌面环境，桌面环境更加复杂，jquery需要考虑的因素非常多，尤其是在兼容性上面，相对于pc端，移动端的复杂度就比不上pc端了，pc端下载jquery只需要1-3s，但是移动端就慢了很多，zepto比jquery小很多，只有不到10k，表现也不比jquery差很多

  3. cookie，sessionStorage，localStorage的区别

    • cookie是网站为了标识用户身份而存储在用户本地终端上的数据，通常是加密的。是由服务器生成的。
    • cookie的数据始终在同源的http请求中携带，即使不需要，也就是说他们会在浏览器和服务器之间来回传递
    • localstorage和sessionstorage仅仅在本地保存，不会发给服务器
    • cookie的大小是4kb，sessionStorage和loaclStorage虽然也有大小限制，但是他们比cookie要大得多，可以达到5m
    • localStorage可以永久保存数据，浏览器关闭之后不会丢失的，除非主动删除
    • sessionStroage 数据在当前浏览器窗口关闭之后自动删除
    • cookie 设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭
    • http-only属性标识一个客户端jas能否操作改cookie
    • max-age属性表示缓存时间，单位为秒，domain设置可以访问该cookie的域名
    • cookie的优化方案有
    • 去除没有必要的cookie，如果页面不需要cookie就完全禁用
    • 将ciikie的大小减少到最小，由于cookie在访问对应于明霞的资源时候都会通过http请求发送到服务器，所以减少cookie的代销，可以减少http请求报文的大小，提高相应速度。
    • 设置合适的过期时间，较长的过期时间可以提高访问速度。
    • 通过不同的domain来减少cookie的使用，在访问js，css和图片是，大多数cookie是多余的，可以使用不同的domain来存储这些静态资源，这样访问这些资源时就不会发送多余的cookie，从而提高响应速度举个例子来说，我们的主网站是 w w w . sunrobin.com/default.aspx，那么图片类的静态文件应该放到w w w.sunrobinimg.com域名下边。而且这两个域名其实最终可以指向同一个server，但是浏览器发送cookie的原则只是根据域名是否一样，不关心最终在哪个server,而且还有一种方式，就是使用CDN
    • 那么是cookie的名称，value是cookie的值，domian字段设置cookie的域名，path字段可以访问cookiede页面路径

  4. 获取鼠标点击的位置

    • 相对于屏幕 event.screenX
    • 相对于浏览器窗口 event.clientX
    • 相对于文档 event.pageX ||event.clientX + event.scrollX

  5. 判断一个对象是不是数组

    • typeof一定不行，会返回一个object
    • instanceof判断一个变量是否是某个对象的实例
    • Object.prototype.toString.call(obj) ===’[object Array]’
    • es5 有个isArray（）方法

  6. ajax请求数据的流程

    • 创建ajax对象
    • 发送http请求
    • 接受服务器返回的数据
    • 更新网页数据

  7. 浏览器事件

    事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间，可以用监听器来监听事件。部分不支持冒泡的事件有

    • ui事件
      • load
      • unload
      • scroll
      • resize
    • 焦点事件
      • blur
      • focus
    • 鼠标事件
      • mouseleave
      • mouseenter

  8. 事件冒泡会从当前触发的目标事件一级一级向上传递，依次触发，知道document为止，事件捕获会从document开始触发，一级一级向下传递，依次触发，直到真正到目标为止

    我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？

    会执行两次，先捕获，后冒泡

    事件触发的顺序是事件捕获-> 事件触发 -> 事件冒泡

    • 事件冒泡的用处有很多，比如可以给ui标签里面每一个li标签绑定事件，也可以给ul绑定事件，监听li标签，增加效率
    • 有些时候需要阻止冒泡，比如一个模态框，框里有一个按钮，我点击按钮需要跳转页面，点击模态框没有反应，点击模态框外面的需要把模态框给藏起来，这个时候就需要阻止冒泡，要不然点击模态框会导致隐藏。。。
    • 阻止冒泡的方法。dom中提供stopProgpagation方法，ie不支持这个方法，所以ie需要用cancelbubble方法，默认为false，当设置为true的时候就可以阻止冒泡了，也就是用event对象在事件函数中调用。
    • 取消默认事件，在w3c中时preventDefault，ie是设置e.returnValue= true

  9. js基本数据类型有 null，undefined，string number boolean symbol

  10. 复杂数据类型 array object function

  11. 延迟js的运行，需要加上在script中加上defer属性

  12. 日期类转换到原始值能使用什么方法，toString

  13. typeof Date.now() 的返回值是number

  14. oxff^33 是异或的意思。

  15. client是content+ 2*padding。 offset是content+ 2 * padding + 2 * border

  16. scrollheight是真实的高度，自身高度加上滑动高度

  17. [] == 0; [1]==1; [0] == 0

  18. a标签不跳转有三种方式，第一种src=#，第二种 onclick函数return false，第三种href= javascript:void(0)

  19. parseInt(string，radix)有两个参数，第一个参数是要解析的字符串，第二个参数是要解析的基数， 这个值在2-36之间， 省略的话会当做10来处理，小于2或者大于36会NaN

  20. javascript有许多保留字不嫩用作标识符，比如arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield

  21. 事件循环队列的只是，是主线任务完成后，会完成所有微队列内的异步任务(promise)，再去处理宏队列的任务，settimeout

  22. 每个对象都会在其内部初始化一个属性也就是prototype，当我们范文正对对象属性时，如果这个对象内部不存在这个属性，那么它就会去prototype中去找这个属性，这个prototype也会有自己的prototype。于是这样一直找下去，就是我们说的原型链的概念， instance.constructot.prototype = instance.proto

  23. window对象是指浏览器打开的窗口，document对象时document对象的一个制度引用，是window对象的一个属性

  24. 全局函数无法查看局部函数，但是局部函数可以查看全局函数，当需要从局部函数查找某一属性和方法的时候，如果当前作用域没有找到，就会上诉到上层作用域查找，直到全局函数，这就是作用域链

  25. 上下文是基于对象的，上下文总是关键字this的值，this总是指向函数的直接调用者，当函数作为对象的方法被调用，this指向调用方法的对象 、 如果有new创建一个对象的实例的时候，那么this就指向new出来的这个对象，当调用一个未绑定函数，this默认指向全局上下文或者浏览器的window对象，如果在严格模式下，this指向undefined，当对象调用属性的时候，this指向调用的对象。call，bind，apply可以改变this的指向

  26. 当函数执行的时候，会创建一个称为执行上下文的内部对象，不是25的上下文，一个执行上下文就定义了一个函数执行时的环境，函数每次执行时对应的执行上下文都是独一无二的，所以多次调用同一个函数会导致创建多个执行上下文， 当js代码被浏览器载入后，默认最先进入的是一个全局的执行上下文，当在全局上下文中调用一个执行函数的时候，程序流就进入了该调用函数内，此时，引擎就会为该函数新建一个执行上下文，并且将其压入执行栈顶部，(作用域链)浏览器总是执行位于执行栈顶部的执行上下文，一旦执行完毕，该执行上下文就会从执行栈顶部弹出，并且控制权进入下一个执行上下文，这样子，执行栈中的指向上下文就会被一次执行并且弹出， 直到回到全局的执行上下文。

  27. 作用域链其实就是我们访问对象的属性和方法，当找不到的时候，就会通过scope，进行查找，scope连存储的执行上下文的集合，这个集合呈现链式连接，我们称之为作用域链

  28. 原型链就是我找一个属性首先会在f.proto中找，如果找不到，就去f.protot.proto中去找，直到找到null位置，这个串起来的链就是原型链

  29. 什么是闭包，为什么要用

    闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

  30. javaScript中hasOwnProperty函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。
    使用方法：
    object.hasOwnProperty(proName)
    其中参数object是必选项。一个对象的实例。
    proName是必选项。一个属性名称的字符串值。
    如果 object 具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回 true，反之则返回 false。

  31. [].forEach.call($$(""),function(a){a.style.outline=“1px solid #”+(~~(Math.random()(1<<24))).toString(16)}) 给页面每一个dom元素加上一个彩色border

  32. 防抖和节流

    针对响应跟不上触发频率这种问题的两种解决方案， 再给dom绑定事件的时候，有些时间我们是无法控制频率的。如鼠标移动事件，滚动事件onscroll，窗口大小改变事件onresize，瞬间的操作都会导致这些事件被高频触发。如果事件的回调函数较为复杂， 就会导致响应跟不上触发，出现页面卡顿、假死现象。针对这种连续触发和不可控的高频触发问题，可以用去抖动和节流。防抖的方法是，当时间触发的时候，设定一个周期延迟执行，若期间又被触发，那么重新设定周期，直到周期结束，执行动作。如果周期内有事件发生，那么周期就重新设定。节流的方法是固定周期内，只执行一次动作，如果有新的事件触发，那么就不执行，周期结束之后，执行动作。

    • 去抖方法一，有新事件触发，就清除旧定时器

      
// 暴力版： 定时器期间，有新操作时，清空旧定时器，重设新定时器
var debounce = (fn, wait) => {
	let timer, timeStamp=0;
	let context, args;
 
	let run = ()=>{
		timer= setTimeout(()=>{
			fn.apply(context,args);
		},wait);
	}
	let clean = () => {
		clearTimeout(timer);
	}
 
	return function(){
		context=this;
		args=arguments;
		let now = (new Date()).getTime();
 
		if(now-timeStamp < wait){
			console.log('reset',now);
			clean();  // clear running timer 
			run();    // reset new timer from current time
		}else{
			console.log('set',now);
			run();    // last timer alreay executed, set a new timer
		}
		timeStamp=now;
 
	}
 
}

    • 方法二周期内有新事件触发时，重置定时器开始时间撮，定时器执行时，判断开始时间撮，若开始时间撮被推后，重新设定延时定时器

      / 优化版： 定时器执行时，判断start time 是否向后推迟了，若是，设置延迟定时器
var debounce = (fn, wait) => {
	let timer, startTimeStamp=0;
	let context, args;
 
	let run = (timerInterval)=>{
		timer= setTimeout(()=>{
			let now = (new Date()).getTime();
			let interval=now-startTimeStamp
			if(interval<timerInterval){ // the timer start time has been reset, so the interval is less than timerInterval
				console.log('debounce reset',timerInterval-interval);
				startTimeStamp=now;
				run(timerInterval-interval);  // reset timer for left time 
			}else{
				fn.apply(context,args);
				clearTimeout(timer);
				timer=null;
			}
			
		},timerInterval);
	}
 
	return function(){
		context=this;
		args=arguments;
		let now = (new Date()).getTime();
		startTimeStamp=now;
 
		if(!timer){
			console.log('debounce set',wait);
			run(wait);    // last timer alreay executed, set a new timer
		}
		
	}
 
}

//简单版
function debounce(fn) {
     let timeout = null; // 创建一个标记用来存放定时器的返回值
     return function () {
       clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
       timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
         fn.apply(this, arguments);
       }, 500);
     };
   }
   function sayHi() {
     console.log('防抖成功');
   }

   var inp = document.getElementById('inp');
   inp.addEventListener('input', debounce(sayHi)); // 防抖

    • 节流方法一

      简单版： 定时器期间，只执行最后一次操作
var throttling = (fn, wait) => {
	let timer;
	let context, args;
 
	let run = () => {
		timer=setTimeout(()=>{
			fn.apply(context,args);
			clearTimeout(timer);
			timer=null;
		},wait);
	}
 
	return function () {
		context=this;
		args=arguments;
		if(!timer){
			console.log("throttle, set");
			run();
		}else{
			console.log("throttle, ignore");
		}
	}
 
}

//另一种简单版
function throttle(fn) {
     let canRun = true; // 通过闭包保存一个标记
     return function () {
       if (!canRun) return; // 在函数开头判断标记是否为 true，不为 true 则 return
       canRun = false; // 立即设置为 false
       setTimeout(() => { // 将外部传入的函数的执行放在 setTimeout 中
         fn.apply(this, arguments);
         // 最后在 setTimeout 执行完毕后再把标记设置为 true(关键) 表示可以执行下一次循环了。当定时器没有执行的时候标记永远是 false，在开头被 return 掉
         canRun = true;
       }, 500);
     };
   }
   function sayHi(e) {
     console.log(e.target.innerWidth, e.target.innerHeight);
   }
   window.addEventListener('resize', throttle(sayHi));

    • 节流方法二

      /// 增加前缘
var throttling = (fn, wait, immediate) => {
	let timer, timeStamp=0;
	let context, args;
 
	let run = () => {
		timer=setTimeout(()=>{
			if(!immediate){
				fn.apply(context,args);
			}
			clearTimeout(timer);
			timer=null;
		},wait);
	}
 
	return function () {
		context=this;
		args=arguments;
		if(!timer){
			console.log("throttle, set");
			if(immediate){
				fn.apply(context,args);
			}
			run();
		}else{
			console.log("throttle, ignore");
		}
	}
 
}

  33. 创建，移除，移动，复制，查找节点

    • 创建新节点
      • createDocumentFragment()创建一个dom片段
      • createElement创建元素
      • createTextNode创建一个文本节点
    • 添加，移除，替换，插入
      • appendChild()
      • removeChild()
      • replaceChild()
      • insertBefore()
    • 查找
      • getElementsByTagName()
      • getElementsByName()
      • getElementById()

  34. Document.write会导致重绘整个页面，innerHTML只重绘页面的一部分

  35. 不在任何函数里定义的变量就具有全局作用域，js有一个全局对象window，全局作用域的变量实际上就是被绑定到window上的一个属性，window对象的内置属性都有全局作用域。 在一个函数里定义的变量就只对这个函数内部可见，这就是函数(局部)作用域

  36. 判断两个对象相等， 可以用遍历来做，也可以转换为字符串

		Json.strungify(obj) == Json,Stringify(obj2);

  5. 用户验证

你可能感兴趣的:(web-demo,Javascript,CSS/CSS3,web组件,计算机网络,C++)

  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
  • c++ 的iostream 和 c++的stdio的区别和联系 黄卷青灯77 c++算法开发语言iostreamstdio
    在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • Google earth studio 简介 陟彼高冈yu 旅游
    GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
  • PHP环境搭建详细教程 好看资源平台 前端php
    PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 利用LangChain的StackExchange组件实现智能问答系统 nseejrukjhad langchainmicrosoft数据库python
    利用LangChain的StackExchange组件实现智能问答系统引言在当今的软件开发世界中，StackOverflow已经成为程序员解决问题的首选平台之一。而LangChain作为一个强大的AI应用开发框架，提供了StackExchange组件，使我们能够轻松地将StackOverflow的海量知识库集成到我们的应用中。本文将详细介绍如何使用LangChain的StackExchange组件
  • 在一台Ubuntu计算机上构建Hyperledger Fabric网络 落叶无声9 区块链超级账本Hyperledgerfabric区块链ubuntu构建hyperledgerfabric
    在一台Ubuntu计算机上构建HyperledgerFabric网络Hyperledgerfabric是一个开源的区块链应用程序平台，为开发基于区块链的应用程序提供了一个起点。当我们提到HyperledgerFabric网络时，我们指的是使用HyperledgerFabric的正在运行的系统。即使只使用最少数量的组件，部署Fabric网络也不是一件容易的事。Fabric社区创建了一个名为Cello
  • 关于城市旅游的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：做与用户的交互行为文章目录前端学习路线
  • git - Webhook让部署自动化 大猪大猪
    我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时
  • 【JS】执行时长(100分) |思路参考+代码解析（C++） l939035548 JS算法数据结构c++
    题目为了充分发挥GPU算力，需要尽可能多的将任务交给GPU执行，现在有一个任务数组，数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。假设GPU最多一次执行n个任务，一次执行耗时1秒，在保证GPU不空闲情况下，最少需要多长时间执行完成。题目输入第一个参数为GPU一次最多执行的任务个数，取值范围[1,10000]第二个参数为任务数组长度，取值范围[1,10000]第三个参数为任务数组，数字范围
  • 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的运行
  • 基于CODESYS的多轴运动控制程序框架：逻辑与运动控制分离，快速开发灵活操作 GPJnCrbBdl python开发语言
    基于codesys开发的多轴运动控制程序框架，将逻辑与运动控制分离，将单轴控制封装成功能块，对该功能块的操作包含了所有的单轴控制（归零、点动、相对定位、绝对定位、设置当前位置、伺服模式切换等等）。程序框架由主程序按照状态调用分归零模式、手动模式、自动模式、故障模式，程序状态的跳转都已完成，只需要根据不同的工艺要求完成所需的动作即可。变量的声明、地址的规划都严格按照C++的标准定义，能帮助开发者快速
  • C++ | Leetcode C++题解之第409题最长回文串 Ddddddd_158 经验分享C++Leetcode题解
    题目：题解：classSolution{public:intlongestPalindrome(strings){unordered_mapcount;intans=0;for(charc:s)++count[c];for(autop:count){intv=p.second;ans+=v/2*2;if(v%2==1andans%2==0)++ans;}returnans;}};
  • C++菜鸟教程 - 从入门到精通 第二节 DreamByte c++
    一.上节课的补充(数据类型)1.前言继上节课,我们主要讲解了输入,输出和运算符,我们现在来补充一下数据类型的知识上节课遗漏了这个知识点,非常的抱歉顺便说一下,博主要上高中了,更新会慢,2-4周更新一次对了,正好赶上中秋节,小编跟大家说一句:中秋节快乐!2.int类型上节课,我们其实只用了int类型int类型,是整数类型,它们存贮的是整数,不能存小数(浮点数)定义变量的方式很简单inta;//定义一
  • ES聚合分析原理与代码实例讲解 光剑书架上的书 大厂Offer收割机面试题简历程序员读书硅基计算碳基计算认知计算生物计算深度学习神经网络大数据AIGCAGILLMJavaPython架构设计Agent程序员实现财富自由
    ES聚合分析原理与代码实例讲解1.背景介绍1.1问题的由来在大规模数据分析场景中，特别是在使用Elasticsearch（ES）进行数据存储和检索时，聚合分析成为了一个至关重要的功能。聚合分析允许用户对数据集进行细分和分组，以便深入探索数据的结构和模式。这在诸如实时监控、日志分析、业务洞察等领域具有广泛的应用。1.2研究现状目前，ES聚合分析已经成为现代大数据平台的核心组件之一。它支持多种类型的聚
  • 「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验 张风捷特烈 iderust开发语言后端
    theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www
  • JVM、JRE和 JDK：理解Java开发的三大核心组件 Y雨何时停T Javajava
    Java是一门跨平台的编程语言，它的成功离不开背后强大的运行环境与开发工具的支持。在Java的生态中，JVM（Java虚拟机）、JRE（Java运行时环境）和JDK（Java开发工具包）是三个至关重要的核心组件。本文将探讨JVM、JDK和JRE的区别，帮助你更好地理解Java的运行机制。1.JVM：Java虚拟机（JavaVirtualMachine）什么是JVM？JVM，即Java虚拟机，是Ja
  • Java面试题精选：消息队列(二) 芒果不是芒 Java面试题精选javakafka
    一、Kafka的特性1.消息持久化：消息存储在磁盘，所以消息不会丢失2.高吞吐量：可以轻松实现单机百万级别的并发3.扩展性：扩展性强，还是动态扩展4.多客户端支持：支持多种语言（Java、C、C++、GO、）5.KafkaStreams（一个天生的流处理）:在双十一或者销售大屏就会用到这种流处理。使用KafkaStreams可以快速的把销售额统计出来6.安全机制：Kafka进行生产或者消费的时候会
  • Python神器！WEB自动化测试集成工具 DrissionPage 亚丁号 python开发语言
    一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
  • Java爬虫框架（一）--架构设计 狼图腾-狼之传说 java框架java任务html解析器存储电子商务
    一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
  • Java：爬虫框架 dingcho Javajava爬虫
    一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分
  • MongoDB知识概括 GeorgeLin98 持久层mongodb
    MongoDB知识概括MongoDB相关概念单机部署基本常用命令索引-IndexSpirngDataMongoDB集成副本集分片集群安全认证MongoDB相关概念业务应用场景：传统的关系型数据库（如MySQL），在数据操作的“三高”需求以及应对Web2.0的网站需求面前，显得力不从心。解释：“三高”需求：①Highperformance-对数据库高并发读写的需求。②HugeStorage-对海量数
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • C++ lambda闭包消除类成员变量 barbyQAQ c++c++java算法
    原文链接：https://blog.csdn.net/qq_51470638/article/details/142151502一、背景在面向对象编程时，常常要添加类成员变量。然而类成员一旦多了之后，也会带来干扰。拿到一个类，一看成员变量好几十个，就问你怕不怕？二、解决思路可以借助函数式编程思想，来消除一些不必要的类成员变量。三、实例举个例子：classClassA{public:...intfu
  • uniapp map组件自定义markers标记点 以对_ uni-app学习记录uni-appjavascript前端
    需求是根据后端返回数据在地图上显示标记点，并且根据数据状态控制标记点颜色，标记点背景通过两张图片实现控制{{item.options.labelName}}exportdefault{data(){return{storeIndex:0,locaInfo:{longitude:120.445172,latitude:36.111387},markers:[//标点列表{id:1,//标记点idin
  • 基于STM32与Qt的自动平衡机器人：从控制到人机交互的的详细设计流程 极客小张 stm32qt机器人物联网人机交互毕业设计c语言
    一、项目概述目标和用途本项目旨在开发一款基于STM32控制的自动平衡机器人，结合步进电机和陀螺仪传感器，实现对平衡机器人的精确控制。该机器人可以用于教育、科研、娱乐等多个领域，帮助用户了解自动控制、机器人运动学等相关知识。技术栈关键词STM32单片机步进电机陀螺仪传感器AD采集电路Qt人机界面实时数据监控二、系统架构系统架构设计本项目的系统架构设计包括以下主要组件：控制单元:STM32单片机传感器
  • iOS http封装 374016526 ios服务器交互http网络请求
    程序开发避免不了与服务器的交互，这里打包了一个自己写的http交互库。希望可以帮到大家。   内置一个basehttp，当我们创建自己的service可以继承实现。   KuroAppBaseHttp *baseHttp = [[KuroAppBaseHttp alloc] init]; [baseHttp setDelegate:self]; [baseHttp
  • lolcat ：一个在 Linux 终端中输出彩虹特效的命令行工具 brotherlamp linuxlinux教程linux视频linux自学linux资料
      那些相信 Linux 命令行是单调无聊且没有任何乐趣的人们，你们错了，这里有一些有关 Linux 的文章，它们展示着 Linux 是如何的有趣和“淘气” 。 在本文中，我将讨论一个名为“lolcat”的小工具 – 它可以在终端中生成彩虹般的颜色。 何为 lolcat ? Lolcat 是一个针对 Linux，BSD 和 OSX 平台的工具，它类似于 cat 命令，并为 cat
  • MongoDB索引管理（1）——[九] eksliang mongodbMongoDB管理索引
    转载请出自出处：http://eksliang.iteye.com/blog/2178427 一、概述       数据库的索引与书籍的索引类似，有了索引就不需要翻转整本书。数据库的索引跟这个原理一样，首先在索引中找，在索引中找到条目以后，就可以直接跳转到目标文档的位置，从而使查询速度提高几个数据量级。       不使用索引的查询称
  • Informatica参数及变量 18289753290 Informatica参数变量
    下面是本人通俗的理解，如有不对之处，希望指正 info参数的设置：在info中用到的参数都在server的专门的配置文件中（最好以parma）结尾 下面的GLOBAl就是全局的，$开头的是系统级变量，$$开头的变量是自定义变量。如果是在session中或者mapping中用到的变量就是局部变量，那就把global换成对应的session或者mapping名字。 [GLOBAL] $Par
  • python 解析unicode字符串为utf8编码字符串 酷的飞上天空 unicode
    php返回的json字符串如果包含中文，则会被转换成\uxx格式的unicode编码字符串返回。 在浏览器中能正常识别这种编码，但是后台程序却不能识别，直接输出显示的是\uxx的字符，并未进行转码。   转换方式如下   >>> import json >>> q = '{"text":"\u4
  • Hibernate的总结 永夜-极光 Hibernate
    1.hibernate的作用,简化对数据库的编码,使开发人员不必再与复杂的sql语句打交道   做项目大部分都需要用JAVA来链接数据库，比如你要做一个会员注册的 页面，那么 获取到用户填写的 基本信后，你要把这些基本信息存入数据库对应的表中，不用hibernate还有mybatis之类的框架，都不用的话就得用JDBC，也就是JAVA自己的，用这个东西你要写很多的代码，比如保存注册信
  • SyntaxError: Non-UTF-8 code starting with '\xc4' 随便小屋 python
    刚开始看一下Python语言，传说听强大的，但我感觉还是没Java强吧！ 写Hello World的时候就遇到一个问题，在Eclipse中写的，代码如下 ''' Created on 2014年10月27日 @author: Logic ''' print("Hello World!");  运行结果 SyntaxError: Non-UTF-8
  • 学会敬酒礼仪 不做酒席菜鸟 aijuans 菜鸟
    俗话说，酒是越喝越厚，但在酒桌上也有很多学问讲究，以下总结了一些酒桌上的你不得不注意的小细节。 细节一：领导相互喝完才轮到自己敬酒。敬酒一定要站起来，双手举杯。 细节二：可以多人敬一人，决不可一人敬多人，除非你是领导。 细节三：自己敬别人，如果不碰杯，自己喝多少可视乎情况而定，比如对方酒量，对方喝酒态度，切不可比对方喝得少，要知道是自己敬人。 细节四：自己敬别人，如果碰杯，一
  • 《创新者的基因》读书笔记 aoyouzi 读书笔记《创新者的基因》
    创新者的基因   创新者的“基因”，即最具创意的企业家具备的五种“发现技能”：联想，观察，实验，发问，建立人脉。   第一部分破坏性创新，从你开始 第一章破坏性创新者的基因 如何获得启示： 发现以下的因素起到了催化剂的作用：(1) -个挑战现状的问题；(2)对某项技术、某个公司或顾客的观察；(3) -次尝试新鲜事物的经验或实验；(4)与某人进行了一次交谈，为他点醒
  • 表单验证技术 百合不是茶 JavaScriptDOM对象String对象事件
    js最主要的功能就是验证表单,下面是我对表单验证的一些理解,贴出来与大家交流交流  ,数显我们要知道表单验证需要的技术点, String对象,事件,函数   一:String对象;通常是对字符串的操作;   1,String的属性;   字符串.length;表示该字符串的长度; var str= "java"
  • web.xml配置详解之context-param bijian1013 javaservletweb.xmlcontext-param
    一.格式定义： <context-param> <param-name>contextConfigLocation</param-name> <param-value>contextConfigLocationValue></param-value> </context-param> 作用：该元
  • Web系统常见编码漏洞（开发工程师知晓） Bill_chen sqlPHPWebfckeditor脚本
    1.头号大敌：SQL Injection 原因：程序中对用户输入检查不严格，用户可以提交一段数据库查询代码，根据程序返回的结果， 获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入。 本质: 对于输入检查不充分，导致SQL语句将用户提交的非法数据当作语句的一部分来执行。 示例： String query = "SELECT id FROM users
  • 【MongoDB学习笔记六】MongoDB修改器 bit1129 mongodb
    本文首先介绍下MongoDB的基本的增删改查操作，然后，详细介绍MongoDB提供的修改器，以完成各种各样的文档更新操作  MongoDB的主要操作 show dbs 显示当前用户能看到哪些数据库 use foobar 将数据库切换到foobar show collections 显示当前数据库有哪些集合 db.people.update，update不带参数，可
  • 提高职业素养，做好人生规划 白糖_ 人生
      培训讲师是成都著名的企业培训讲师，他在讲课中提出的一些观点很新颖，在此我收录了一些分享一下。注：讲师的观点不代表本人的观点，这些东西大家自己揣摩。   1、什么是职业规划：职业规划并不完全代表你到什么阶段要当什么官要拿多少钱，这些都只是梦想。职业规划是清楚的认识自己现在缺什么，这个阶段该学习什么，下个阶段缺什么，又应该怎么去规划学习，这样才算是规划。  
  • 国外的网站你都到哪边看？ bozch 技术网站国外
    学习软件开发技术，如果没有什么英文基础，最好还是看国内的一些技术网站，例如：开源OSchina，csdn，iteye,51cto等等。 个人感觉如果英语基础能力不错的话，可以浏览国外的网站来进行软件技术基础的学习，例如java开发中常用的到的网站有apache.org 里面有apache的很多Projects,springframework.org是spring相关的项目网站,还有几个感觉不错的
  • 编程之美-光影切割问题 bylijinnan 编程之美
    package a; public class DisorderCount { /**《编程之美》“光影切割问题” * 主要是两个问题： * 1.数学公式（设定没有三条以上的直线交于同一点）： * 两条直线最多一个交点，将平面分成了4个区域； * 三条直线最多三个交点，将平面分成了7个区域； * 可以推出：N条直线 M个交点，区域数为N+M+1。
  • 关于Web跨站执行脚本概念 chenbowen00 Web安全跨站执行脚本
    跨站脚本攻击(XSS)是web应用程序中最危险和最常见的安全漏洞之一。安全研究人员发现这个漏洞在最受欢迎的网站,包括谷歌、Facebook、亚马逊、PayPal,和许多其他网站。如果你看看bug赏金计划,大多数报告的问题属于 XSS。为了防止跨站脚本攻击,浏览器也有自己的过滤器,但安全研究人员总是想方设法绕过这些过滤器。这个漏洞是通常用于执行cookie窃取、恶意软件传播,会话劫持,恶意重定向。在
  • [开源项目与投资]投资开源项目之前需要统计该项目已有的用户数 comsci 开源项目
            现在国内和国外,特别是美国那边,突然出现很多开源项目,但是这些项目的用户有多少,有多少忠诚的粉丝,对于投资者来讲,完全是一个未知数,那么要投资开源项目,我们投资者必须准确无误的知道该项目的全部情况,包括项目发起人的情况,项目的维持时间..项目的技术水平,项目的参与者的势力,项目投入产出的效益.....
  • oracle alert log file（告警日志文件） daizj oracle告警日志文件alert log file
    The alert log is a chronological log of messages and errors, and includes the following items: All internal errors (ORA-00600), block corruption errors (ORA-01578), and deadlock errors (ORA-00060)
  • 关于 CAS SSO 文章声明 denger SSO
    由于几年前写了几篇 CAS 系列的文章，之后陆续有人参照文章去实现，可都遇到了各种问题，同时经常或多或少的收到不少人的求助。现在这时特此说明几点： 1.  那些文章发表于好几年前了，CAS 已经更新几个很多版本了，由于近年已经没有做该领域方面的事情，所有文章也没有持续更新。 2. 文章只是提供思路，尽管 CAS 版本已经发生变化，但原理和流程仍然一致。最重要的是明白原理，然后
  • 初二上学期难记单词 dcj3sjt126com englishword
    lesson 课 traffic 交通 matter 要紧；事物 happy 快乐的，幸福的 second 第二的 idea 主意；想法；意见 mean 意味着 important 重要的，重大的 never 从来，决不 afraid 害怕 的 fifth 第五的 hometown 故乡，家乡 discuss 讨论；议论 east 东方的 agree 同意；赞成 bo
  • uicollectionview 纯代码布局, 添加头部视图 dcj3sjt126com Collection
    #import <UIKit/UIKit.h> @interface myHeadView : UICollectionReusableView { UILabel *TitleLable; } -(void)setTextTitle; @end #import "myHeadView.h" @implementation m
  • N 位随机数字串的 JAVA 生成实现 FX夜归人 javaMath随机数Random
    /** * 功能描述 随机数工具类<br /> * @author FengXueYeGuiRen * 创建时间 2014-7-25<br /> */ public class RandomUtil { // 随机数生成器 private static java.util.Random random = new java.util.R
  • Ehcache（09）——缓存Web页面 234390216 ehcache页面缓存
    页面缓存 目录 1       SimplePageCachingFilter 1.1      calculateKey 1.2      可配置的初始化参数 1.2.1     cach
  • spring中少用的注解@primary解析 jackyrong primary
    这次看下spring中少见的注解@primary注解，例子 @Component public class MetalSinger implements Singer{ @Override public String sing(String lyrics) { return "I am singing with DIO voice
  • Java几款性能分析工具的对比 lbwahoo java
    Java几款性能分析工具的对比 摘自：http://my.oschina.net/liux/blog/51800   在给客户的应用程序维护的过程中，我注意到在高负载下的一些性能问题。理论上，增加对应用程序的负载会使性能等比率的下降。然而，我认为性能下降的比率远远高于负载的增加。我也发现，性能可以通过改变应用程序的逻辑来提升，甚至达到极限。为了更详细的了解这一点，我们需要做一些性能
  • JVM参数配置大全 nickys jvm应用服务器
    JVM参数配置大全 /usr/local/jdk/bin/java -Dresin.home=/usr/local/resin -server -Xms1800M -Xmx1800M -Xmn300M -Xss512K -XX:PermSize=300M -XX:MaxPermSize=300M -XX:SurvivorRatio=8 -XX:MaxTenuringThreshold=5 -
  • 搭建 CentOS 6 服务器(14) - squid、Varnish rensanning varnish
    （一）squid 安装 # yum install httpd-tools -y # htpasswd -c -b /etc/squid/passwords squiduser 123456 # yum install squid -y 设置 # cp /etc/squid/squid.conf /etc/squid/squid.conf.bak # vi /etc/
  • Spring缓存注解@Cache使用 tom_seed spring
    参考资料 http://www.ibm.com/developerworks/cn/opensource/os-cn-spring-cache/ http://swiftlet.net/archives/774   缓存注解有以下三个： @Cacheable      @CacheEvict     @CachePut
  • dom4j解析XML时出现"java.lang.noclassdeffounderror: org/jaxen/jaxenexception"错误 xp9802
    java.lang.NoClassDefFoundError: org/jaxen/JaxenExc 关键字: java.lang.noclassdeffounderror: org/jaxen/jaxenexception 使用dom4j解析XML时，要快速获取某个节点的数据，使用XPath是个不错的方法，dom4j的快速手册里也建议使用这种方式 执行时却抛出以下异常： Exceptio