- position属性值，五个！sticky：粘性布局，relative+static，在阈值（top，right、bottom、left）之前为相对定位，相对于正常文档流进行定位，超过阈值后固定定位，相对于视口进行定位。
.h-item{
width: 250px;
height: 30px;
background: royalblue;
position: sticky;
top: 0; /*top大于零时相对定位，小于零时绝对定位，top为零*/
}
- position属性：absolute相对于除static之外的第一个父元素（relative、fixed）进行定位。原因：所有元素都是static，absolute为相对定位，他需要找到相对的元素，所以要相对除static元素外的第一个父元素进行定位，如果没有则相对于根元素进行定位。
- 盒模型：两种
标准：标准盒模型下盒子的大小 = content + padding + border +margin（W3C模型）
怪异：怪异盒模型下盒子的大小=width（content + border + padding） + margin（IE盒模型）
box-sizing取值：
- content-box： 默认值，border和padding不算到width范围内，可以理解为是W3c的标准模型(default)
- border-box：border和padding划归到width范围内，可以理解为是IE的怪异盒模型
- padding-box：将padding算入width范围
-
this.$nexttick()：下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，获取更新后的 DOM，放在nextTick()回调函数中执行的应该是会对DOM进行操作的 js代码；
-
以下进行区别
function cobj(){
var a=10;
return {}
}
var b = new cobj() //返回为Object的对象，并不是cobj的对象
//
function obj(){
var a=10
}
var c = new obj() //返回为obj的对象，constructor是function obj()
-
meta标签，元数据，在head中，不显示在页面上
视口：viewport
-
doctype在H5中只有一种 ：
-
h5标签语义化目的：便于开发者阅读，维护和写出更优雅的代码，让浏览器的爬虫和辅助技术更好的解析。
-
css选择器权重计算方式
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。
1,0,0,0 > 0,99,99,99，也就是说从左往右逐个等级比较，前一等级相等才往后比
!important 的作用是提升优先级，加了这句的样式的优先级是最高的 -
flex：1的意思:让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容。
默认 flex：0， 1 ，auto （不放大，等比例缩小）（flex-grow flex-shrink flex-basic）
flex：auto（ 1，1，auto）（平均分配剩余空间，等比例缩小） ====> flex：1，第三个参数的auto是盒子按照内容多少等比例的放大和缩小。
flex：none（ 0，0， auto）（不放大，不缩小）
| Column 1 | Column 2 |
|---|---|
| flex-grow | 表示当子元素的空间小于父元素的空间时,如何处理剩余空间,默认值为0表示不占有剩余空间;当子元素都设置为1时表示平均分配剩余空间;当一个子元素为2其余子元素为1时，为2的子元素占据的剩余空间比其他子元素多一倍;当一个子元素为1其余子元素为0,为1的子元素占据全局剩余空间 |
| flex-shrink | 表示当子元素的空间大于父元素的空间时,如何缩小子元素。默认值为1表示等比缩小。当所有子元素都设置为1时所有子元素都会等比例缩小。当一个子元素为0其余子元素为1时，表示为0的子元素不缩小,其余元素缩小 |
| flex-basis | 用于设置项目占据的主轴空间,设置为auto表示项目占据的主轴大小等于项目的实际内容大小,设置为固定值表示项目占据的主轴大小等于固定值 |
- 画一个正方形
.vw {
width: 50%;
height: 50vw;
background: #ccc;
}
.placeholder {
width: 100%;
padding-bottom: 100%;/* padding百分比相对父元素宽度计算 */
height: 0;//避免被内容撑开多余的高度
}
-
clientHeight（可视部分，包含padding，不包含border）、offsetHeight（可视部分，包含padding、border）、scrollHeight（包含padding、border、水平滚动条；不包含margin）、offsetTop（不包含border高度）、scrollTop（包含border高度）
-
BigInt类型，直接在数字后面加n，或者使用BigInt()转化数字为bigint类型
-
Object.prototype.toString.call(obj)类型检测原理：我们用Object 原型上的 toString方法 作用在 传入的obj的上下文中，Object 原型上的 toString方法具有输出类型的作用。
Object.toString() //"function Object() { [native code] }" Object对象上toString方法输出为函数体
Object.prototype.toString() //"[object Object]" 原型链上toString方法返回为值类型
所有类型都有自己的toString方法，在继承Object的tostring方法时进行了改写，删除自己的toString方法，再次调用toString时便是调用对象上的toString方法,
-
手写轮播图 click
-
判断一个数字是否为整数：
1、 Number.isInteger()、
2、 Math.floor、ceil、round，转化之后是否等于本身
3、 对1求余数，结果不为0则不是整数：2.3%1=
4、和0做或位运算，举例：3 | 0 =3 011 | 000 = 011，代码：return (num | 0) === num 。一定要加括号，按位或优先级小于三等于号
5、parseInt(num)===num ,仅取整数部分 -
promise源码click
-
http请求报文格式（请求行、请求头、空行 和 请求包体）和响应报文格式（状态行、响应头部、空行 和 响应包体）click
-
Node内置模块：path、http、fs、util（弥补js不足）、events（events 模块只提供了一个对象: events.EventEmitter，EventEmitter 的核心就是事件触发与事件监听器功能的封装。）jade（用其编写html）、express（服务器）
-
h5 manifest【应用缓存资源清单】，manifest是一个后缀名为minifest的文件，在文件中定义那些需要缓存的文件，支持manifest的浏览器会将按照manifest文件的规则，像文件保存在本地，从而在没有网络链接的情况下，也能访问页面。（cache【需要缓存文件】、network【需要通过网络访问才能获得的文件】、fallback【资源无法访问时，再进行访问的页面】）
-
数组的迷幻操作
-
var 声明的标识符被约定称为"变量声明varDelcs", 并且有初始值undefined；而"let、const"则称为"词法声明(lexicalDelcs)"， 没有初始值；函数声明是varDelcs；class内部是let； import是const规则
c为函数内变量 -
js 的解析是分为两个阶段的，预编译和执行期。在预编译阶段，编译器会把所有定义的变量和方法声明全部提升到最顶部。函数提升优先级比变量提升要高，且不会被变量声明覆盖，但是会被变量赋值覆盖
alert(a)
function a(){
alert(a)
}
var a=1
alert(a)
第一次输出::
ƒ a(){
alert(a)
}
第二次输出::
1
function test(arg){
console.log(arg);
var arg = 'hello';
function arg(){
console.log('hhh')
};
console.log(arg);
}
test('hi')
//等价于
function test(arg){
var arg; //变量提升
var arg(); //函数提升
console.log(arg); //输出 提升的函数arg
var arg = 'hello'; //函数提升被赋值覆盖，所以再次输出时为hello
function arg(){
console.log('hhh')
};
console.log(arg);
}
- 自适应布局实现通过：rem、em、vh、vw
- 视口：在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口，！！！移动端采用该作为视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小。
- 1rem等于html根元素设定的font-size的px值，假如设定下面的css。html{font-size:14px}；那么后面的CSS里面的rem值则是以这个14来换算，例如设定一个div宽度为3rem,高度为2.5rem.则它换算成px为width:42px.height:35px，
- 其他单位：em（rem前身，相对大小，相对于字体的高度，默认相对16px）、dp（android单位，屏幕密度）、px、%、pt（屏幕物理长度单位，尺寸）
- ECMAScript中所有函数的参数都是按值传递的，对于参数是对象的情况，实际上也是按值传递，把传参的指针复制出一个完全独立的变量，只是存的内容和传参对象地址一摸一样。
- new绑定的优先级高于bind
执行黑色箭头时：创建一个新的实例对象bar，this默认绑定到obj，并执行foo函数，修改obj中name为foo。但并不影响原有bar对象中的name。new仅将obj复制了一份，并作修改。
遇到settimeout红任务不执行。
对象赋值是引用，改变一个就都改变。
从头至尾并没有改变window中的name：global
var name = 'global';
var obj = {
name : 'local',
foo:function(){
this.name='foo';
}.bind(window)
};
var bar = new obj.foo()
setTimeout(function(){
console.log(window.name); // 第3个输出
},0)
console.log(bar.name) // 第1个输出
var bar3 = bar2 = bar;
bar2.name = 'foo2'
console.log(bar.name); // 第2个输出
- 箭头函数没有自己的this，它的this是继承而来，默认指向在定义它时所处的对象(宿主对象)。
普通函数的this是四种：new绑定（构造函数绑定，this指向自身）> 硬绑定（显示绑定）> 隐式绑定（绑定到调用的对象）> 调用的环境（默认绑定，window），优先级依次递减。
function Person1(){
this.name = 'little bear'
this.age = 18;
(function sayHello1(){
console.log(this)
console.log('sayHello1: my name is'+this.name+' , age = '+this.age)
})(); //执行时环境分离
setTimeout(function sayHello2(){
console.log(this)
console.log('sayHello2: my name is'+this.name+' , age = '+this.age)
},0);
let _this = this;
(function sayHello3(){
console.log(this) //this指向实例化的对象
console.log('sayHello3: my name is'+_this.name+' , age = '+_this.age)
})();
}
let p1=new Person1()
- 形参和实参数量可以不相等，都有相应的处理办法。
function max() {
var max = arguments[0];
console.log(arguments) //Arguments { 0: "9", 1: 1, 2: 2, 3: 4,callee: function max(),length: 4,Symbol(Symbol.iterator): function values() }
for (val of arguments) {
if (val >= max) {
max = val;
}
}
return max;
}
var maxValue = max('9', 1, 2, 4)
console.log(maxValue) //9
修改arguments内容
- 谜一样的arguments（形参与arguments一荣俱荣，一损俱损），arguments与函数中的被形参赋值的变量（this.xxx）无关；形参也与后续被赋值变量无关。
function testargument(val1,val2){
this.val1 = val1
this.val2 = val2;
console.log('this.val1 :',this.val1,'；this.val2 :',this.val2)
console.log('val1 :',val1,'；val2 : ',val2)
console.log(arguments);
console.log('\n')
console.log("修改arguments[0]='aa'")
arguments[0]='aa';
console.log('this.val1 :',this.val1);
console.log('val1 :',val1)
console.log(arguments);
console.log('\n')
console.log("修改val2 = 'bb'")
val2 = 'bb'
console.log('this.val2 :',this.val2);
console.log('val2 :',val2);
console.log(arguments)
}
testargument('111','222')
- 类名 本质就是构造函数
var Person=function(name){
this._name=name;
}
Person.prototype.greet=function(){
console.log('Hi,myname is'+ this._name);
}
Person.prototype.greetDelay=function(time){
var _this=this;
setTimeout(function(){
console.log('Hi,my name is'+_this.name);
})
}
let pp=new Person('aa')
console.log(pp)
pp.greet()
-
函数中使用var定义变量也是函数块中的变量，不会对外部环境中同名变量造成影响，执行完成后被销毁。
执行过程中：找不到变量回去this中找
执行完成后：myfn被销毁
输出：undefined+数字=NaN；null+数字=数字本身
-
sass、less与css，sass与less都是css的扩展，使css更强大，令其具有了动态语言的特性。
sass更强大允许使用if…else、for；less更简单，不允许使用。
sass需要Ruby环境，在服务器端处理；less需要less.js处理得到css，输出到浏览器。
sass是$;less是@ -
CSS的优先级规则，a标签的伪类顺序为L-V-H-A（link、visited、hover、active）
-
input新加入的type：url、tel（手机端唤出数字键盘）、search（手机端唤出搜索键盘）、email（手机端唤出英文键盘）、color（调出颜色选择器）、number（手机端调出数字键盘）、range、month（仅有年、月）、week、date（调出日期控件）、time、datetime（输入时间，年、月、日、时、分，UTC时间）、datetime-local（输入时间，本地时间）
-
appendChild是在父元素最后位置进行添加
//父元素为body
<input type="button" id='button1' value='1' onclick="moveBtn(this)"/>
<input type = 'button' id='button2' value="2"/>
function moveBtn(obj){
var clone = obj.cloneNode(true); //拷贝一个列表项到另外一个列表，参数为true可以拷贝元素及其子元素
var parent = obj.parentNode;
parent.appendChild(clone);
parent.removeChild(obj);
}
点击之前：
点击之后：
- 正则表达式的test()方法可以测试变量是否符合正则表达式
- 作业调度（先来先服务、计算时间短作业优先、响应比高者优先、优先级调度算法、均衡调度算法）是从慢速存储设备中的后备队列中挑选作业加载到主存中。进程调度（先来先服务、最高优先级、时间片轮转）是从主存中中的就绪队列中挑选进程占用处理器运行。
- 折半查找法时间复杂度均值为log2n
- 特殊矩阵（对角矩阵、对称矩阵、上三角矩阵（下三角矩阵）），当矩阵为对称矩阵时只需要存储上三角加对角线元素，或下三角加对角线元素，需要存储的元素个数为 n*（n-1）/2
- hooks
- 类组件，类，有构造函数，每次实例化对象都要执行构造函数中的代码
- js为什么是单线程：js用来实现用户交互、dom操作，决定了只能是单线程，多个线程同时操作一个dom会引发错误，例如一个修改dom，一个删除dom。
- 面向对象三个特性：封装、继承、多态（是指一个类实例的相同方法在不同情形有不同表现形式）；五个原则：模块化、抽象、低耦合、高内聚、信息隐藏（封装）
- 删除字符串相同位置的字符：abbac=>abac
//另设一个数组！！！！，怎么这么笨呢
function removesamechar(char){
let newchar=[]
let j =0
for(let i=0;i<char.length;i++){
if(char[i]!=newchar[j]){
j++ //先加1
newchar[j]=char[i]
}
}
return newchar.join('')
}
let char = 'abbac'
console.log( removesamechar(char))
- 合并两个有序数组
function hebing(arr1,arr2){
let i=0,j=0;
let newarr=[]
console.log(arr1)
while(i<arr1.length && j<arr2.length){
if(arr1[i]<arr2[j]){
newarr.push(arr1[i])
i++
}else{
newarr.push(arr2[j])
j++
}
}
if(i<arr1.length){
newarr=newarr.concat(arr1.slice(i))
}
if(j<arr2.length){
newarr=newarr.concat(arr2.slice(j))
}
return newarr
}
let arr1=[1,2,4,5]
let arr2=[3,4,6,9]
console.log(hebing(arr1,arr2))
- canvas、svg区别
| SVG | Canvas |
|---|---|
| 使用 SVG 绘制的形状都能被记忆和操作，浏览器可以再次显示 | Canvas 则是绘制后忘记 |
| SVG 需要记录坐标，所以比较缓慢 | Canvas 更快 |
| 通过 JavaScript 来绘制 2D 图形 | 是一种使用 XML 描述 2D 图形的语言 |
| 是HTML5提供的新元素 | 历史久远，并不是HTML5转悠的标签 |
| 位图（标量图），放大或改变尺寸会失真； | 逐像素进行渲染，依赖分辨率 矢量图，放大或改变尺寸不会失真；不依赖分辨率 |
| 弱的文本渲染能力（因为放大会失真） | 最适合带有大型渲染区域的应用程序，比如谷歌地图（因为放大不会失真） |
| 能够以 .png 或 .jpg 格式保存结果图像；能够引入 .png 或 .jpg格式的图片 | 不能以 .png 或 .jpg 格式保存结果图像；不能引入 .png 或 .jpg格式的图片 |
| 不支持事件处理器（一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。） | 支持事件处理器（SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。） |
| 不能被引擎抓取 | 可以被引擎抓取 |
| — | 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） |
| 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 | 不适合游戏应用 |
- q标签：在一段内容外面加引号
- 方法原型为function，原型的原型为Object
- Canvas 可以正常的渲染跨域图片，但是在跨域图片没有设置跨域响应头或没有设置 crossOrigin = ‘anonymous’ 的时候，使用 canvas.toDataURl 会抛出错误。
- media queries实现了响应式布局
- 块级元素才有padding
- 不支持冒泡的事件：UI事件（load、unload、scroll、resize）焦点事件（blur、focus）鼠标事件（mouseleave、mouseenter）。
- 为什么不推荐多层css嵌套？浏览器解析css选择器是从内向外，会先将使用最内层样式的标签渲染一遍，再读取上一层，将该层中使用下一层样式的标签再重新渲染一遍，有几层渲染几次，相对于只有一层效率降低。
- git cherry-pick 能够把另一个分支的一个或多个提交复制到当前分支，具体使用如下：
首先git checkout 到另一个分支,然后使用git log找到想要复制的commit 的id,记录下来
切换到自己分支，使用git cherry-pick [上面记录的commit id] 回车即可! - git rebase -i / otherbrance： 将本地多次提交进行合并、将otherbranch分支合并到本地分支
- vue：自定义指令：derectives
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
//然后你可以在模板中任何元素上使用新的 v-focus property，如下：
<input v-focus>
- AO/GO
- “异步模式" 在浏览器端和node端的区别。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，"异步模式"甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。
- 聊天室是轮询的，每隔一段时间查询一下发出一个询问，了解服务器有没有最新消息，这样必须不停连接，或者http始终打开。
- websocket：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
（1）建立在 TCP 协议之上，服务器端的实现比较容易。
（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据。
（5）没有同源限制，客户端可以与任意服务器通信。
（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。
1925
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
