前端安全之xss和csrf（待完成）

2020-03-15

什么是xss攻击

XSS攻击（cross-site-script）跨站脚本攻击。本质上就是向客户端注入一段恶意的代码，阻碍用户正常使用网站的脚本攻击。

XSS分为哪几类？

反射型
储存型
基于DOM

反射型

展开全文 >>

变量提升的几种情况

2020-03-15

什么是变量提升

所有的声明都会提升到作用域的最顶上去。
一个变量可以先使用再声明

注意的是，函数的优先级高于变量的优先级。

例子

变量的提升

1
2
3

num = 1;
var num;
console.log(num) //1

函数的提升

test()
function test(){
    console.log(1);
}

函数优先级高于变量优先级

func(); // 1
var func;
function func() {
  console.log(1);
}
func = function() {
  console.log(2);
}

但是如果变量没有提升，结果会完全不同

var func;
function func() {
  console.log(1);
}
func = function() {
  console.log(2);
}
func();

(Noticed)JavaScript only hoists declarations, not initializations. If a variable is declared and initialized after using it, the value will be undefined. For example:

1
2
3

console.log(num); // Returns undefined 
var num;
num = 6;

But

1
2
3

num = 6;
console.log(num); // returns 6
var num;

牢记这三点：

只有声明本身会被提升，而赋值操作不会被提升。
变量会提升到其所在函数的最上面，而不是整个程序的最上面。
函数声明会被提升，但函数表达式不会被提升。

js变量提升面试题解析

https://www.jianshu.com/p/df11f3ba355c

展开全文 >>

彻底理解浏览器的缓存机制

2020-03-15

页面的性能优化，设置缓存是个效果非常好的点，一定要学会。

HTTP请求(Request)报文，报文格式为：请求行 – HTTP头(通用信息头，请求头，实体头) – 请求报文主体(只有POST才有报文主体)

HTTP响应(Response)报文，报文格式为：状态行 – HTTP头(通用信息头，响应头，实体头) – 响应报文主体

more >>

展开全文 >>

优秀的数组去重方法

2020-03-15

奇妙的数组去重

方法一，用filter
去除重复元素依靠的是indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。

let r
	arr = ['apple', 'banana', 'grape', 'orange', 'apple', 'banana', 'grape', 'orange'];

r = arr.filter((cv,i,self)=>{
	return self.indexOf(cv) === i;  
})

r //["apple", "banana", "grape", "orange"]

方法二：用set函数
接上面

1	let newArr = [...new Set(arr)]; //["apple", "banana", "grape", "orange"]

展开全文 >>

自动生成新闻摘要的小机器人

2020-03-14

项目介绍：

这是一个关于NLP的项目，会根据输入的文章内容提炼出新闻摘要。

前端：

前端页面部署在服务器http://www.wuqin.tech/wq/上
采用bootstrap快速布局，自适应移动和PC端
使用Jquery的库，ajax发送http请求。
存在跨域请求，设置了RequestHeader(“Access-Control-Allow-Origin”, “*”)

文本预处理

训练词向量需要用到两个语料库：维基百科中文语料库和汉语新闻语料库。

more >>

展开全文 >>

数组的深拷贝

2020-03-14

数组的深拷贝，支持对象是数组或者是对象。

let a = [1,2,3,[2,5],{
  b:1
}]

console.log(Object.prototype.toString.call(a[4]))


function deepClone(obj){
  let result = Object.prototype.toString.call(obj) === '[object Object]'?{}:[];
  if( obj && typeof(obj)==='object'){
     for(key in a){
        if(obj.hasOwnProperty(key)){
           if(obj[key] && typeof(obj[key] === 'object')){
             result[key] = deepClone(obj[key]);
           }else{
             result[key] = obj[key];
           }
        }
     }
  }
  return result;
}

let c = deepClone(a);
c[4].b = 4;
console.log(a)

更多内容可以查看github

展开全文 >>

应用Promise封装Ajax实践

2020-03-13

axios在项目中经常使用，我们来看看如何把axios封装成好用的promise吧！

what is axios?

Promise based HTTP client for the browser and node.js

咦? Promise based http？ where is promise?

源码中查看：axios/lib/adapters/xhr.js有这样一段让我眼前一亮：

module.exports = function xhrAdapter(config) {
 return new Promise(function dispatchXhrRequest(resolve, reject) {
 })
}

展开全文 >>

有趣javascript的this指向

2020-03-12

this其实就是隐式的传参

今天来看一道面试题，彻底弄明白this

let length = 10;
function fn() {
    console.log(this.length);
}
 
let obj = {
  length: 5,
  method: function(fn) {
    fn();
    arguments[0]();
  }
};
 
obj.method(fn, 1);//输出是什么？