前端零散笔记

作者: 酥枫 | 来源:发表于2018-10-14 13:25 被阅读0次

js中，调用Object.prototype.toString.call(a)和调用a.toString()结果不同，除非a是一个对象。

解构赋值

let {a,b,...c}={a:1,b:2,u:3,v:4};
console.log(c);//{u:3,v:4}

...

var a=(function(x){
    delete x;
    return x;
})(2);
console.log(a);//2

...

var a=1;
console.log(global.a);//undefined
console.log(delete a);//false
console.log(typeof a);//number
console.log(a);//1
/*原因：使用var声明的变量有一个名为[[Configurable]]的特性，
且被设置为false，因此不能通过delete操作符删除，会返回false*/

a=1;
console.log(global.a);//1
console.log(delete a);//true
console.log(typeof a);//undefined
console.log(a);//ReferenceError: a is not defined

...
```
var a={},
    b={key:'b'},
    c={key:'c'};
a[b]=123;
a[c]=456;
console.log(a[b]);//456
console.log(a);//Object {[object Object]: 456}
```
原因：a[variable]相当于给对象a添加了一个属性，而属性的key就是variable.toString()的结果，Object类型的b和c的b.toString()和c.toString()的结果均为"[object Object]"，所以a[c]就会把a[b]覆盖
在任何值上调用Object原生的toString()方法，都会返回一个"[object NativeConstructorName]"格式的字符串。每个类在内部都有一个[[Class]]属性，这个属性中就指定流量上述字符串中的构造函数名。（与第一点中的照应）。
在对非数值应用一元加操作符时，该操作符会像Number()转型函数一样对这个值执行转换。
Number()转型函数规则
添加动态脚本
①document.write()，接收一个字符串，且<script>...</script>要写成<script>...<\/script>
②创建<script>元素，指定src（或者script.appendChild(document.createTextNode("js代码"))），document.body.appendChild()
添加动态样式
①创建<link>元素，指定href(或者创建style元素style.appendChild(document.createTextNode("css代码"))），document.head.appendChild()
②
有关添加、删除、获取属性的四种方式
①ele.getAttribute("name") setAttribute("class") remove...
②通过HTML属性如ele.id、ele.title、ele.style、ele.className
③通过ele.attributes属性获得NodeList，ele.attributes.getNamedItem("id").nodeValue OR ele.attributes["id"].nodeValue
④
```
var attr=document.createAttribute("name");
attr.value="aaaaa";
ele.setAttributeNode(attr);
```
返回NodeLIst（包括NodeList、HTMLCollection、NamedNodeMap）的方法：childNodes、getElementsByTagName()、getElementsByName()、element.attributes、getElementsByClassName()、children、form.elements

为单例对象创建私有变量

var sigleton=function(){
    var privateVar=10;
    function privateFunc(){
        return false;
    }

    return{
        publicVar:"hahaha",
        publicFunc:function(){
            privateVar++;
            return privateFunc;
        }
    }
}();
console.log(sigleton.privateVar);//undefined
console.log(sigleton.publicVar);//"hahaha"
console.log(sigleton.publicFunc()());//false

惰性载入函数两种方法：

在函数第一次执行时将函数重新覆盖为一个适当的函数（在第一次执行时损失性能）

function createXHR(){
    if(xxx){
        createXHR=function(){
            //...
        };
    }else if(yyy){
        createXHR=function(){
            //...
        };
    }else{
        createXHR=function(){
            //...
        };
    }
    return createXHR();
}

在函数第一次声明函数时就指定适当的函数（在第一次加载时损失性能）

var createXHR=function(){
    if(xxx){
        return function(){
            //...
        }
    }else if(yyy){
        return function(){
            //...
        }
    }else{
        return function(){
            //...
        }
    }
}();

函数柯里化
函数绑定

Object.create()的内部实现：

function object(o){
    function F(){}
    F.prototype=o;
    return new F();
}

除此之外，Object.create()还有一个可选的第二个参数，一个对象，表示新对象的可选属性。e.g.

var aPerson=Object.create(Person.prototype,{
    name:{
        value:"Xiaoming"
    }
});

创建对象的方式
- 工厂模式
- 构造函数模式
- 原型模式
- 组合使用构造函数模式和原型模式
- 动态原型模式
- 字面量
- Object.create()
继承方式
1. 原型链继承
2. 构造函数继承
3. 组合继承（原型链+构造函数）
4. 原型式继承
5. 寄生组合式继承
e.getAttribute(propName)和e.propName的区别和联系
- e.getAttribute()返回值是源文件中设置的值，类型是字符串或者null（有的实现返回""）
- e.propName返回值可能是字符串、布尔值、对象、undefined等（尤其是对于style属性和函数）
- 大部分attribute与property是一一对应关系，修改其中一个会影响另一个，如id，title等属性
- opacity:0：视觉隐藏，占据布局，可以交互
- visibility:hidden：视觉隐藏，占据布局，屏蔽交互
- display:none：真正隐藏，真正渲染，屏蔽过渡效果，可以通过dom访问
...
1. 页面重绘（repaint）和页面回流（reflow）：
  - 重绘(repaint)：当render tree中的一些元素需要更新属性，单这些属性只会影响元素的外观，风格，而不会影响到元素的布局，此类的页面渲染叫作页面重绘。
  - 回流(reflow)：当render tree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而引起的页面重新渲染。可以看出，回流必将引起重绘，而重绘不一定会引起回流。
2. 引发回流的事件：
  - DOM树发生变化
  - 元素尺寸的改变
  - 由于内容改变引发的尺寸变化
  - 浏览器窗口大小改变（resize事件触发）
3. 改善由dom操作引起的回流：
  - 使用DocumentFragment进行缓存操作,引发一次回流和重绘
  - 使用display:none技术，只引发两次回流和重绘
  - 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘。
输入URL到显示界面中发生了什么
发生内存泄露的情况
- 被遗忘的计时器
- 脱离dom的引用
- 闭包
- 循环引用（IE中）
cookie、sessionStorage、localStorage区别
- 都会在浏览器端保存，有大小限制，同源限制
- cookie会在请求时发送到服务器，作为会话标识，服务器可修改cookie；web storage不会发送到服务器
- cookie有path概念，子路径可以访问父路径cookie，父路径不能访问子路径cookie
- 有效期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效，localStorage长期有效，直到用户删除
- 共享：sessionStorage不能共享，localStorage在同源文档之间共享，cookie在同源且符合path规则的文档之间共享
- localStorage的修改会促发其他文档窗口的update事件
- cookie有secure属性要求HTTPS传输
- 浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。web stora e大小支持能达到5M
CSS中position四个值的区别（static、relative、absolute、fixed）
- static
  static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
- relative
  relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。
  定位为relative的元素遵循常规流，参照自身在常规流中的位置进行移动，但其原先在文本流中的位置依然存在。
- absolute
  absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
  定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在。
- fixed
  生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
ES新特性：
- promise√
- 箭头函数√
- let、const和块级作用域
  没有变量提升
- Symbol√
- Set和Map√
- class和继承√
Git基本操作
数组去重、数组乱序、深拷贝、浅拷贝
transition、transform、translate
- transition：过渡，一个CSS属性，定义元素从一种状态到另一种状态的过渡，例如淡入淡出，它是transition-property、transition-duration、transition-timing-function、transition-delay这四个属性的简写。分别代表应用过渡效果的CSS属性的名称（如opacity或者all）、完成过渡效果需要多少秒或毫秒、过渡效果的速度曲线、过渡效果何时开始。
- transform：转换，一个CSS属性，定义元素的旋转、缩放、移动或倾斜等，是静态的。有多个值，包括translate(x,y)、translateX(x)、scale(x,y)、rotate(angle)等。
- translate：移动，是transform属性的一个值，定义元素在x，y轴上平移的距离。
- animation：动画，一个CSS属性，定义应用到元素上的动画，是animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction这六个属性的简写。分别代表动画名称（即需要绑定到选择器的 keyframe 名称）、动画效果时间、动画的速度曲线、在动画开始之前的延迟、动画播放的次数、是否反向播放动画
npm install --save-dev和npm install --save都是局部安装，但是前者表示是开发环境会用到的依赖，会修改package.json的devDependencies，后者表示是生产环境中会用到（开发环境中也会用到）的依赖，会修改package.json的dependencies。详细见https://www.cnblogs.com/limitcode/p/7906447.html和https://blog.csdn.net/qq_30378229/article/details/78463930
拷贝一个项目（或者clone下来）之后，只需要npm install即可安装所有依赖项

前端零散笔记

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读