椰椰要努力-CSDN博客

原创 JS的堆与栈、深拷贝与浅拷贝（Object.assign）

var 与 let、const 的区别定义一个变量，通常是跳过检查是否已经定义了此变量，尤其在编写局部代码时，这就更加容易导致了命名引起的重复定义，导致一些核心变量被覆盖，造成系统重大破坏。let、const特性：•块级声明•不存在变量提升•不允许重复声明 let声明的变量值可更改，而const声明的变量值不可更改。...

2020-11-06 19:09:13 235

原创 js实现字节截取（可同时含有中英文）

// 字符串截取包含对中文处理function byteCut (str, n) { // str：被截取字符串；n：截取长度 if (str.replace(/[\u4e00-\u9fa5]/g, '**').length <= n) { // 如果本身传入的字符串长度小于所需截取长度，则直接返回该字符串，无需截取 return str; ...

2019-03-14 19:44:52 894

原创 vscode 小程序wxml文件代码没有颜色区分（高亮）解决办法

打开编辑器wxml文件，右下角，点击如下图部分：在上面的弹框中选择“HTML”语言模式：就可以正常显示了PS：其他语言模式也可以任意切换，就看自己需要什么格式了~...

2019-03-14 11:47:07 10373 2

原创 JS倒计时原理及实现

原理倒计时 = 现在的时间点（new Date()）/终点（new Date(/这里填终点时间/)）；最后将差值转换为想要的格式。使用setInterval(fn, 1000);每一秒执行一次就好。JS实现var timer = null;countDown();timer = setInterval(countDown, 1000);// 倒计时计算函数function countD

2017-11-21 20:28:59 3351

原创 JS中的call()和apply()

一、call()和apply()的语法、参数1.call()方法调用一个函数，其具有一个指定的this值和分别地提供的参数（参数的列表）。语法：fun.call(this.Arg, arg1, arg2, …)参数： thisArg：在fun函数运行时指定的this值。需要注意的是，指定的this值不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefi

2017-11-19 22:44:24 193

原创 TCP和UDP的区别

TCP是面向连接的协议，在收发数据前，必须和对方建立可靠连接。（三次握手、四次挥手）。 UDP是一个非连接的协议，传输数据之前源端和终端不建立连接，当它想传送时就简单地去抓取来自应用程序的数据，并尽可能快的把它扔在网络上。在发送端，UDP传送数据的速度仅仅是受应用程序生成数据的速度、计算机的能力和传输宽带的限制；在接收端，UDP把每个消息段放在队列中，应用程序每次从队列中读一个消息段。TCP提供

2017-11-15 22:47:36 243

原创 get和post的区别

get把参数包含在url中，post通过request body传递参数。get产生一个TCP数据包，post产生两个TCP数据包。对于get方式的请求，浏览器会把http header和data一并发出去，服务器响应200（返回数据）。对于post请求，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 OK（返回数据）。注：在网络环境好

2017-11-15 22:00:51 204

原创文本内容单行溢出隐藏显示省略号和两行溢出隐藏省略号方法

有这么一个p标签：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文本内容超出后溢出隐藏</title> <style> p { width: 300px; height: 30px; line-h

2017-08-21 18:29:52 414

优化图像前端开发人员添加到页面上的每一张图片都需要用户从开发者的服务器下载到他们的电脑上。这无疑增加了页面的加载时间，因此很可能让用户离开你的网站。所以，优化图像是非常必要的。过大的图像需要的下载时间更多，因此要确保图像尽可能的小。可以使用图像处理工具如PS来减小颜色深度、剪切图像到合适的尺寸等。去掉不必要的插件开发者安装的每个插件都需要服务器处理，从而增加了页面加载时间，所以禁用和删除不必要的插

2017-08-17 13:01:54 606

原创 CSS常用选择器及优先级、一些易混淆选择器的区别

几个常用不易混淆的选择器就简单介绍一下，就不再赘述了：通配选择器：*（获取所有标签）；类型选择器：如div、p;class选择器：class，可以允许多个元素使用同一个class名；id选择器：id，每个id名只能允许一个元素使用；群组选择器：如div,p（中间用逗号隔开，表示选择所有div元素和所有p元素）;包含选择器：如div p（中间用空格隔开，表示选择div元素内部的所有p元素）

2017-08-17 01:24:58 357

原创块状元素和内联元素的区别

内联元素、块状元素、内联块的转换：内联元素->块状元素：display:block;块状元素->内联元素：display:inline;元素->内联块状元素：display:inline-block;块状元素（div、ul、ol、dl、li、p、h1~h6、table、form等）：独占一行；支持所有样式；不设置宽度时宽度为父元素宽度；换行符不解析。内联元素（span、a、stro

2017-08-16 23:13:50 495

原创 inline-block布局产生间隙的原因及解决办法（水平、垂直）

布局的一种方法是使用display:inline-block;它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以可以置身于inline水平的元素中。但是在使用display:inline-block列表布局经常会遇到“换行符/空格间隙问题”。如下：<!DOCTYPE htm

2017-08-16 22:18:43 19510 4

原创 href和src的区、link和@import的区别

href和src的区别：href(Hypertext Reference)：超文本引用，常用的标签有link、a等，用来链接引用的外部资源。在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系，如：<link href="style.css" rel="stylesheet" />src(source)：引入资源，引入的src的内容是页面必不可少的一部分。引入的内容

2017-08-16 11:39:58 939

原创 JS性能优化

自己查看博客、书籍和自己平时写JS代码时总结的关于js代码性能优化的知识点。避免全局查找，尽量使用局部变量在一个函数中会用到全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些。function search() { // 使用当前页面地址和主机域名 alert(window.location.href + window.l

2017-08-15 22:34:47 549

原创三栏布局

圣杯和双飞翼布局在另一篇有讲到，这里就不再赘述了，链接：圣杯布局和双飞翼布局一：float + box-sizing + background-clip 重点：main的border、background-clip、box-sizing，left和right的margin-left。<!DOCTYPE html><html lang="en"><head> <meta charset=

2017-08-13 14:05:37 326

原创圣杯布局和双飞翼布局

一：圣杯布局重点：content的padding，left的margin-left和left值，right的margin-left和right值：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圣杯布局</title> <style> * { t

2017-08-11 18:29:59 249

原创 overflow:hidden可以清除浮动原因

W3C上定义overflow属性是：规定当内容溢出元素框时发生的事情。 hidden值：内容会被修剪，并且其余内容是不可见的。那为什么overflow:hidden可以清楚浮动呢？ overflow除了(visible)会建立新的块级格式（BFC）给他的子元素（在没有给父元素高度的情况下，给父元素设置overflow: hidden时，就要计算父级块的全部高度才能确定在什么位置hid

2017-08-10 14:50:20 707

原创谈对BFC布局的理解

BFC（Block formatting context）：块级格式上下文，是一个独立的渲染区域，与区域外部毫不相干。 BFC布局规则： - 内部的Box会在垂直方向，一个接一个地放置； - Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠； - 每个元素的margin box的左边，与包含块border box的左边相接

2017-08-10 13:41:00 557

原创 CSS浮动常遇问题及解决方法

在给元素设置为浮动后并没有出现预期的效果：这个问题是编程过程中常见问题，特别是对于初学者来说。我就自己平时出现的问题说一下可解办法：可能问题一：两个同级元素需要并排显示，却以为只给第二个元素设置浮动就会达到效果，结果出现下图所示效果：（即和原效果没什么不同）其实这还是对浮动理解不深的缘故。如果第一个元素不是浮动，第二个浮动，两个元素是不会显示在一行的，只有第一个元素浮动，第二个浮动也浮

2017-02-10 00:22:07 1052

原创关于CSS浮动

关于浮动理解浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。div的顺序是HTML代码中div的顺

2017-02-08 23:51:58 202

原创关于CSS中的居中方法

文字居中【水平居中】代码：text-align: center;【垂直居中】使行高的高度等于整个块级元素的高度（有局限性：文字只有一行时适用）代码：height: 20px;line-height: 20px;块级元素方法一：使用margin属性的auto来自动水平居中。（有局限性：只有子元素的宽度比父元素的宽度小才生效）代码： margin: 0 auto; /*前提：该块

2017-02-08 22:45:52 187

gladys_1111的博客