前端学习札记

时间  2019-12-06
标签 前端 学习 札记 栏目 快乐工作 繁體版
原文   原文链接

学习工做中遇到的问题，和容易忘记的零碎知识，部分为摘抄，如若侵权，请告知。javascript

HTML篇

CSS篇

box-sizing：

设置盒子模型为标准模式或者IE模式。属性有三个：
1.content-box：默认值，border和padding不计算到width。
2.padding-box：padding算入width。
3.border-box：border和padding都会算入width。
4.另外标准模式下，背景实际上是包括边框的，可使用background-clip来设置。
5.同理background-origin也能够设置背景图片的位置。
6.IE盒子模型会改变css

四个边框阴影

边框阴影也能够设置透明度，这样看起来会很美观，并且还会解决没透明度会出现阴影和背景色同样的状况。前端

box-shadow: -1px 0 2px rgb(000, 000, 000, 0.2),
      0 0 0 rgb(000, 000, 000, 0.2),
      1px 0 2px rgb(000, 000, 000, 0.2), 
      0 2px 4px rgb(000, 000, 000, 0.2);

浏览器渲染原理

(不一样浏览器大同小异)
1.通常以8K单位接受请求的内容，并解析其中的HTML构建DOM Tree(display:none的元素不会渲染)。CSS构建CSS Rule Tree。
2.DOM，CSS合并生成Render Tree。根据CSS2标准，tree中每一个节点都成为box，具备width，height，margin，padding等属性。
3.浏览器根据Render Tree能够知道网页中的节点，各节点的关系或样式或位置。最后经过显卡绘制出来。java

回流(reflow)和重绘(repaint)

回流：Render Tree中一些元素尺寸布局等发生改变，页面须要从新构建，页面须要执行reflow操做。
重绘：Render Tree中一些元素外观一类的属性发生改变，不会影响布局，这会触发repaint。node

减小reflow

Dom Tree的每一个节点都有reflow方法，一个节点的reflow可能触发其余节点的reflow，reflow不可避免，难以预测。
1.将屡次的样式操做合并到一次操做，能够新建一个类选择器，将这些样式添加进来。
2.display:none不在Tree中，修改属性不会触发回流，能够先隐藏再操做，再显示。
3.DocumentFragment缓存操做，这个还没听过。
4.position设置为absolute或fixed。这样改变CSS会大大减小reflow。
5.不要使用table布局。
6.避免没必要要的复杂CSS选择器，尤为是后代选择器！react

css3动画

/*css3动画能够在css中编写*/
/*1.设置*/
@keyframes animateName {
 /*animate here,0%能够设置动画的初始状态*/
 0%{
    transform: translateX(0px);
    transform: rotate(0deg);
    opacity: 1;
 }
 50%{
    /*...css code here*/
 }
 100%{
    /*...css code here*/
 }
}
/*2.使用*/
.someEle{
/*缩写： 动画名称 执行时间 延迟时间*/
 animation: animateName 0.5s 1.5s;
/*全称
animation-name: ;
animation-duration: ;
animation-delay: ;
用来保持动画处于最后一帧的状态
animation-fill-mode: forwards;
*/
}

JavaScript篇

判断变量是否是数组：

(注意跨frame实例化对象不共享原型)ios

var a=[];
a.constructor===Array;
a instanceof Array ===true;

instanceof

用法：(object instanceof constructor)
用来检验constructor.prototype是否存在于参数object的原型链上，用于检测对象类型css3

javascript继承/原型/工厂模式

1.工厂模式ajax

  • 抽象了建立对象的过程,解决了建立多个类似对象的问题

  • 对于对象识别问题并无解决算法

    function createPerson(name,age) {
     var obj = {};
     obj.name=name;
     obj.age=age;
     obj.info=function() {
       // ...code here
     }
     return obj;
   }

2.原型

  • 咱们建立的每一个函数都有prototype(原型)属性,它是一个指针,指向一个对象(原型对象),它可使全部对象实例共享属性和方法
  • 原型对象初始会默认取得constructor属性,它是一个指针,指向原型属性所在的函数

3.几种继承方法

  • 原型链继承：此时属性有点像java中的静态属性,没有个体之分

    function Super(name) {
         this.name=name;
       }
    Sub.prototype = new Super();
    Sub.prototype.constructor = Sub;

  • 借用构造函数：能够将属性变为实例属性,可是函数复用捉襟见肘

    function Super(name) {
     this.name=name;
   }
   function Sub(name) {
     Super.call(this,name);
   }
  • 组合继承：使用原型实现方法复用,借用构造函数实现每一个实例有本身的属性

  • 原型式继承：对传入的对象进行了浅复制,包含引用类型值得属性会共享相应的值

    function object(o) {
     function F() {}
     F.prototype=o;
     return new F();
   }
   // ES5新增Object.create()方法规范了原型式继承

  • 寄生式继承：组合继承会两次超类型构造函数,一次是建立子类型原型(new),一次是在子类型构造函数内部(call),最终实例上的属性会屏蔽原型中的同名属性,这是能够用寄生式继承解决：经过借用构造函数继承属性,经过原型链的混成形式来继承方法

    function inheritPrototype(subType,superType){
     var prototype = Object(subType.prototype); //建立对象
     prototype.constructor = subType;           //加强对象
     subType.prototype = prototype;             //指定对象
   }   
   function SuperType(name) {
         this.name=name;
       }
       function SubType(name,age) {
         Super.call(this,name);
         this.age = age
       }
       inheritPrototype(SubType,SuperType);
   // 这个例子的高效率体如今只调用了一次SuperType构造函数,同时原型链还能保持不变,能够正常的使用instanceof呵呵isPrototypeOf()

this做用域。

  • this对象是在运行时基于函数的执行环境绑定的,全局函数中为window,被做为某个对象的方法调用时,this等于那个对象
  • 每一个函数执行时都会自动取得两个特殊变量：argumens和this,内部函数搜索这两个变量时只会搜索到其活动对象位置,因此不可能直接访问外部函数中的这两个变量
  • 把外部做用域中的this对象保存在一个闭包可以访问的变量里,就可让闭包访问该对象了
var obj = {
    name:"inner",
    getName:function() {
        // 这里的this指向obj
        // 保存this
        var that = this;
      return function() {
          // 这里的this不能指向外部函数中的this
          // console.log(this.name)
          console.log(that.name);
      }
    }
    }
  • 箭头函数的this指向当前上下文，并且使用bind/apply无效，在Vue中也可能会致使一些错误，React中有时则能够很方便的绑定组件中的this

new的意思

1.建立一个新对象
2.将这个新对象的__proto__指向构造函数的prototype(即将新建立对象的隐式原型指向构造函数的显示原型)。
3.将构造函数的this指向这个新建立的对象(即将this指向这个新对象)。
4.无返回值或非对象返回则返回这个对象，不然返回这个返回的新对象。

typeof

避免XSS

(能够理解为一种js注入，既然是注入就须要对输入进行规范)
XSS方式：a.注入出如今URL中，而后又随服务器返回到浏览器b.这个注入会存储在服务端。
1.避免使用eval，new Function方法可接受字符串形式的js代码。
2.cookie的httpOnly能够阻止js读取cookie。
3.注意innerHTML,document.write方法。
4.对用户输入的数据进行HTML Entity编码。

取消冒泡

event.cancleBubble=true;这种至关于全局取消事件冒泡。

ajax实现的过程(原生的js)

// 建立对象
var http = new XMLHttpRequest();
// 设置请求详情
http.open(method, url, true);
// 发送
http.send();
// 经过事件判断请求处理结果,处理返回的数据
http.onreadystatechange = function () {
    if (http.readyState == 4 && http.status == 200) {
            // http.responseText为返回的字符串
            // code here
        
        }
    }

入口函数

window.onload=function(){...}和$(document).ready(function(){...})
1.js中须要等待图片等全部元素加载完毕才会执行，jq中则是等待DOM结构绘制完成便可执行。
2.js这方法只能执行一个，jq编写多个入口函数，多个都会执行。
3.若是须要等待全部元素加载完毕则使用$(window).load(function(){...}),这个至关于js中的window.onload。
4.一些问题：jq3版本js入口函数老是会先执行。jq2版本是正常顺序，3版本好像在网页资源不多的时候js的入口函数就会先执行。
5.jq可简写为$(function(){...})。

promise

首先会执行Promise里的方法，方法里会有一个resolve和result，至关于两个指针，执行到一个就会触发相应的then或者是catch，then里是一个函数，接受的参数经过resolve传入。

onmouseover/enter

onmouseover:移动到子元素也会继续触发over。
onmouseenter:子元素不会影响。

前端性能的优化

1.避免全局查找，全局查找须要涉及做用域链上的查找。
2.避免使用with一句，with会建立本身的做用域，会增长执行代码的做用域链的长度，with语句中的代码的执行时间确定会比外面的代码的执行时间长。

function test(){
  with(document.body){
  alert(tagName);
  innerHtml="Hello";
  }
}
function test(){
  var body=document.body;
  alert(body.tagName);
  body.innerHtml="Hello";
  }
}

3.几个算法复杂度的例子
O(1):var value=10;arr[1];
O(log n):二分查找，总的执行时间和值得数量有关，但并不必定要得到的每一个值。
O(n):遍历一个数组中的元素。
O(n^2):每一个值至少须要获取n次，例如插入排序。
思路：能够将屡次使用的一个复杂度高点的变量设为局部变量。
4.优化循环：
减值迭代：
优化循环体
简化终止条件：由于每次循环都会计算终止条件，而后和他比较。
使用后测试循环（do-while）：

5.展开循环：循环次数很少能够展开，减小了终止条件的判断。
思路：Duff装置，将全部循环按每八个一块儿执行。

var iterations = Math.floor(values.length/8);
var leftover = values.length&8;//处理多余的几个元素
var i=0;
/*用来处理多出来的几个元素*/
if(leftover>0){
  do{
  process(values[i++]);
  }while(--leftover>0);
}
/*余下数量为8的倍数，不用担忧下标越界*/
do{
  process(values[i++]);
  //...如下省略其他7个循环体
}while(--iterations>0);
/*简单的数组循环测试发现其实要慢不少*/

6.避免双重解释:Function(),eval();
7.原生方法快点，switch语句快点，位运算符快点，var语句能够合并，迭代能够arr[i++]，只用一条语句建立数组或对象。
8.减小js和DOM的交互，能够判断event.target的nodeName来绑定事件，利用事件冒泡的机制减小循环绑定事件。
9.访问集合元素时使用局部变量，这样不用反复遍历做用域链？因此稍微快点，过多使用hover也会影响性能

onfoucus没有冒泡

可使用onfoucusin。

浅拷贝深拷贝

参考变量的引用，深拷贝能够先建立一个空容器，而后向其中赋值实现拷贝。

node.js

npm -S和npm -D

1.

  • -S --save， 
  • -D 是 --save-dev

2.-save和save-dev能够省掉你手动修改package.json文件的步骤。

  • npm install module-name -save 自动把模块和版本号添加到dependencies部分 ，通常是项目开发到上线都会用到的包
  • npm install module-name -save-dve 自动把模块和版本号添加到devDependencies部分 ，通常是工具安装的使用

react跨域cookie

  • 服务器端:
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", req.headers.origin); //须要显示设置来源
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("Access-Control-Allow-Credentials", true); //带cookies7     res.header("Content-Type", "application/json;charset=utf-8");
  next();
});
  • 客户端使用axios:
var params = new URLSearchParams();
      params.append('username', "");
      params.append('password', "");
      params.append('nickname', "");
      axios({
          method: "post",
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
          },
          url: "http://localhost:3000/users/register",
          data: params
        }).then().catch()

这样设置，就能够在请求时加上cookie了

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程