前端那些你必须了解的知识点

最新推荐文章于 2021-10-21 07:00:00 发布
最新推荐文章于 2021-10-21 07:00:00 发布
阅读量779 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33081841/article/details/87967795
版权

前言

作为一名前端攻城狮，记录下一些常用的方法是必不可少了。以下记录我遇到经常用到的知识。

有更好的方法及先进的技术请务必告诉下我。

 

 

目录

前言

 

一、时间格式化

二、JSON与URL参数的互转

1.json转url参数

2.url转json

三、图片--url格式和base64格式和blob格式的互转

1.url转base64

2.base64转url

3.base64转blob 

4.blob转base64

5.url转blob

6.blob转url

四、cookie操作

1.设置cookie

2.获取cookie

五、对象的深拷贝

六、前端图片压缩

七、函数的节流和防抖

八、call,apply,bind的实现原理

九、Event loop

十、闭包

十一、原型

十二、jsonp

 

一、时间格式化

/*
     * 时间格式化
     * @method GetDateTime
     * @param {Object} dateObj 时间对象 new Date()
     * @param {string} format 格式 例如 'Y-m-d h:i:s'
     * @return {string}
*/
function GetDateTime (dateObj, format) {
    if (dateObj) {
        if (typeof (dateObj) === 'string') {

            var tempIndex = dateObj.lastIndexOf('.');
            if (tempIndex > -1) {
                dateObj = dateObj.substring(0, tempIndex);
            }

            dateObj = dateObj.replace('T', ' ').replace(/\-/g, "/");
        }
        var date = new Date(dateObj);

        var obj = {
            y: date.getFullYear(),
            m: date.getMonth() + 1,
            d: date.getDate(),
            h: date.getHours(),
            min: date.getMinutes(),
            s: date.getSeconds()
        }
        for (const key in obj) {
            if (obj.hasOwnProperty(key)) {
                var element = obj[key];
                obj[key] = element < 10 ? '0' + element : element;
            }
        }
        if (format) {
            return format.replace('Y', obj.y)
                .replace('m', obj.m)
                .replace('d', obj.d)
                .replace('h', obj.h)
                .replace('i', obj.min)
                .replace('s', obj.s)
        }

        return obj.y + '-' + obj.m + '-' + obj.d + ' ' + obj.h + ':' + obj.min + ':' + obj.s; //返回时间格式
    } else
        return ''
}

GetDateTime(new Date());//"2019-02-27 10:33:58"

二、JSON与URL参数的互转

1.json转url参数

/*
     * json转url参数
     * @method parseParams
     * @param {Object} data json数据
     * @return {String} 序列化后的字符串
*/
function parseParams(data) {
    try {
        var tempArr = [];
        for (var i in data) {
            var key = encodeURIComponent(i);
            var value = encodeURIComponent(data[i]);
            tempArr.push(key + '=' + value);
        }
        var urlParamsStr = tempArr.join('&');
        return urlParamsStr;
    } catch (err) {
        return '';
    }
}

var obj = {
    name: 'zhangsan',
    age: 100
};

parseParams(obj); //"name=zhangsan&age=100"

2.url转json

/*
     * url转json
     * @method getParams
     * @param {String} url url数据
     * @return {Object} 转化后的json格式
*/
function getParams(url) {
    try {
        var index = url.indexOf('?');
        if(index !== -1) {
            url = url.match(/\?([^#]+)/)[1];
        }
        var obj = {}, arr = url.split('&');
        for (var i = 0; i < arr.length; i++) {
            var subArr = arr[i].split('=');
            obj[subArr[0]] = subArr[1];
        }
        return obj;
    } catch (err) {
        return null;
    }
}

var urlStr = 'http://www.xxx.com/test?name=zhangshan&age=100#hello';
var urlStr2 = 'name=zhangshan&age=100';
getParams(urlStr); //{name: "zhangshan", age: "100"}
getParams(urlStr2); //{name: "zhangshan", age: "100"}

三、图片--url格式和base64格式和blob格式的互转

1.url转base64

/*
    * url转base64格式
    * @method urlToBase64
    * @param {String} url 图片的url地址
    * @return {String} 转化后的base64格式
*/
function urlToBase64(url) {
    return new Promise ((resolve,reject) => {
        let image = new Image();
        image.onload = function() {
            let canvas = document.createElement('canvas');
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight;
            // 将图片插入画布并开始绘制
            canvas.getContext('2d').drawImage(image, 0, 0);
            // result
            let result = canvas.toDataURL('image/png')
            resolve(result);
        };
        // CORS 策略，会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
        image.setAttribute("crossOrigin",'Anonymous');
        image.src = url;
        // 图片加载失败的错误处理
        image.onerror = () => {
            reject(new Error('图片流异常'));
        }
    })
}

let imgUrL = '图片地址';

urlToBase64(imgUrL).then(res => {
    // 转化后的base64图片地址
    console.log('base64', res)
})

2.base64转url

 base64转url

base64可直接作为img的src

3.base64转blob 

/*
     * base64转blob
     * @method base64ToBlob 
     * @param {String} dataURI base64数据
     * @return {blob} blob格式
*/
function dataURItoBlob(dataURI) {
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // mime类型
    var byteString = atob(dataURI.split(',')[1]); //base64 解码
    var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
    var intArray = new Uint8Array(arrayBuffer); //创建视图

    for (var i = 0; i < byteString.length; i++) {
        intArray[i] = byteString.charCodeAt(i);
    }
    return new Blob([intArray], {type: mimeString});
}

var dataURI = 'base64';

dataURItoBlob(dataURI);

4.blob转base64

/*
     * blob转base64
     * @method blobToDataURI 
     * @param {blob} blob blob格式
     * @return {String} 转化后的base64格式
*/
function blobToDataURI(blob) {
    return new Promise(function(resolve){
        var reader = new FileReader();
        reader.onload = function (e) {
            resolve(e.target.result);
        }
        reader.readAsDataURL(blob);
    })
}

var blob = 'blob';
blobToDataURI(blob).then(dataURI => {
    console.log(dataURI)
})

5.url转blob

/*
    * url转blob格式
    * @method urlToBase64
    * @param {String} url 图片的url地址
    * @return {Blob} 转化后的blob对象
*/
function urlToBlob(url) {
    return new Promise ((resolve,reject) => {
        let image = new Image();
        image.onload = function() {
            let canvas = document.createElement('canvas');
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight;
            // 将图片插入画布并开始绘制
            canvas.getContext('2d').drawImage(image, 0, 0);
            canvas.toBlob(function(result){
                resolve(result);
            })
        };
        // CORS 策略，会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
        image.setAttribute("crossOrigin",'Anonymous');
        image.src = url;
        // 图片加载失败的错误处理
        image.onerror = () => {
            reject(new Error('图片流异常'));
        }
    })
}

var imgUrL = '图片地址';

urlToBlob(imgUrL).then(blob => {
    console.log(blob);
})

6.blob转url

var blob = 'blob';
window.URL.createObjectURL(blob);//返回结果直接作为img的src

四、cookie操作

1.设置cookie

 /**
 * 设置cookie
 * @method setCookie
 * @param {String} cname  键
 * @param {String} cvalue  值
 * @param {Number} exdays  过期时间,毫秒
 * @returns {undefined}
 */
 function setCookie(cname,cvalue,exdays){
 	var d = new Date();
 	d.setTime(d.getTime()+exdays);
 	var expires = "expires="+d.toGMTString();
 	document.cookie = cname + '=' + cvalue + '; ' + expires + ';path=/';
 }

 setCookie('key','val',1000 * 60 * 60);//一小时后过期

2.获取cookie

 /**
 * 获取cookie
 * @method getCookie
 * @param {String} cname  键
 * @returns {String}
 */
function getCookie(cname){
	var name = cname + "=";
	var ca = document.cookie.split(';');
	for(var i=0; i<ca.length; i++) {
		var c = ca[i].trim();
		if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
	}
	return null;
}

getCookie('key');

五、对象的深拷贝

/**
 * 深拷贝
 * @method copy
 * @param {Object} obj1  需要copy的对象
 * @returns {String}
 */
function copy(obj1){//复制obj1
	if(typeof obj1==='object'){//先判断传来的是不是数组或者对象
		var obj2=obj1 instanceof Array?[]:{};//判断是数组还是对象
		for(var i in obj1){
			if(typeof obj1[i]==='object'){//如果值是对象或者数组
				obj2[i]=copy(obj1[i]);//递归调用
			}else{
				obj2[i]=obj1[i];//直接赋值
			}
		}
		return obj2;
	}else{
		return obj1;
	}
}
var obj1={
	name:'user1',
	say:[0,1,2,3],
	data:{
		age:20,
		sex:['man','woman']
	}
};
var obj2=copy(obj1);
console.log(obj1.data.sex[0]);//man
console.log(obj2.data.sex[0]);//man
obj2.data.sex[0]='neutral';
console.log(obj1.data.sex[0]);//man
console.log(obj2.data.sex[0]);//neutral

六、前端图片压缩

/*
* url转base64格式
* @method urlToBase64
* @param {String} url 图片的url地址,可传图片路径,base64,blbo格式.
* @param {Object} options {
*                              width:宽度,默认原始宽度,
*                              height:高度,未指定时自动计算高度
*                              quality:压缩质量,默认0.92  取值 0~1
*                              type: 压缩后图片类型, 默认'image/jpeg'
*                           }
* @return {String} 转化后的base64格式
*/
function compress(url, options={}) {
    return new Promise ((resolve,reject) => {
        if(Object.prototype.toString.call(url) === '[object Blob]') url = window.URL.createObjectURL(url);
        if(Object.prototype.toString.call(options) !== '[object Object]') reject('请传入有效参数');
        let image = new Image();
        image.onload = function() {
            options = {
                width: options.width || this.width,
                height: options.height || this.height * (options.width || this.width) / this.width,
                quality: (isNaN(options.quality) || options.quality < 0 || options.quality>1) ? 0.92 : options.quality,
                type: options.type || 'image/jpeg'
            }
            let canvas = document.createElement('canvas');
            canvas.width = options.width;
            canvas.height = options.height;
            // 将图片插入画布并开始绘制
            canvas.getContext('2d').drawImage(image, 0, 0, canvas.width, canvas.height);
            // result
            let result = canvas.toDataURL(options.type, options.quality)
            resolve(result);
        };
        // CORS 策略，会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
        image.setAttribute("crossOrigin",'Anonymous');
        image.src = url;
        // 图片加载失败的错误处理
        image.onerror = () => {
            reject(new Error('图片流异常'));
        }
    })
}

let imgUrL = 'http://p2.music.126.net/FWiFOXMnLcc_rR8_FAWTgQ==/109951163919100565.jpg';

compress(imgUrL,{width:110}).then(res => {
    // 转化后的base64图片地址
    console.log('base64', res)
})

七、函数的节流和防抖

函数节流:当连续触发函数时,函数在n秒内只会执行一次.
函数防抖:函数频繁触发的情况下，只有函数触发的间隔超过指定间隔的时候，函数才会执行

节流
/*
 * 函数节流
 * @method debounce
 * @param {funciton} fn   需要执行的函数
 * @param {Number} wait   需要等待的时间,毫秒
 * @returns {undefined}
 */
function debounce(fn,wait){
  var timeout;
  return function(){
    var context=this;
    var args=arguments;
    if(!timeout){
      timeout=setTimeout(function(){
        timeout=null;
        fn.apply(context,args);
      },wait)
    }
  }
}

防抖
/*
 * 函数防抖
 * @method debounce
 * @param {funciton} fn   需要执行的函数
 * @param {Number} wait   需要等待的时间,毫秒
 * @returns {undefined}
 */
function debounce(fn,wait){
  var timeout;
  return function(){
    var context=this;
    var args=arguments;
    if(timeout) clearTimeout(timeout);
    timeout=setTimeout(function(){
      fn.apply(context,args);
    },wait)
  }
}

八、call,apply,bind的实现原理

call的实现原理
Function.prototype.call2=function(content){
  // 在对象身上绑定函数,使this指向改对象
  content.fn=this;
  //储存参数
  var args=[];
  for(var i=1,len=arguments.length;i<len;i++){
    args.push(arguments[i]);
  }
  //执行该函数
  var str="content.fn("+args+")";
  eval(str);
  //清空函数
  content.fn=null;
}

apply的实现原理
Function.prototype.apply2=function(content){
  // 在对象身上绑定函数,使this指向改对象
  content.fn=this;
  //储存参数
  var args=arguments[1];
  //执行该函数
  var str="content.fn("+args+")";
  eval(str);
  //清空函数
  content.fn=null;
}

bind的实现原理
Function.prototype.bind2=function(content){
  //保存当前this;
  var that=this;
  return function(){
    // 在对象身上绑定函数,使this指向改对象
    content.fn=that;
    // //执行该函数
    var str="content.fn("+Array.from(arguments)+")";
    eval(str);
    content.fn=null;
  }
}

九、Event loop

js同步和异步,宏任务和微任务

//求以下代码输入结果
setTimeout(function(){
    console.log('1')
});
new Promise(function(resolve){
    console.log('2');
    resolve();
}).then(function(){
    console.log('3')
});
console.log('4');

结果 2,4,3,1

首先执行setTimeout,将回调放入宏任务eventqueue中,再执行promise,立即输入2,
将then方法放入微任务的eventqueue中,立即输入4,同步任务执行完毕,开始执行异步任务
先执行异步微任务eventqueue,输入3,再执行异步宏任务输入1,以此循环;

总结:
1.先执行同步任务,再执行异步任务,
2.当同步任务执行完毕后,先执行微任务回调,再执行宏任务回调,
3.当异步任务执行完毕后,再执行同步任务,事件循环.

十、闭包

闭包就是能够读取其他函数内部变量的函数。
function fn(){
  var a=1;
  function b(){
    a++;
    console.log(a);
  }
  return b;
}
var c=fn();//通过闭包访问fn内部变量c的值并储存
c();//实际调用b();输出2
c();//输出3,可以储存a的值并改变

十一、原型

我另外写了一篇文章，传送门

十二、jsonp

实现原理：动态创建script标签将src设置为请求地址，并且带上参数callback（通常为callback，其实主要看服务端怎么写的），服务端去执行这个函数，并传入返回数据。

jsonp请求
//动态创建script标签
var script = document.createElement("script");
地址为请求地址,带上回调函数callback=jsonpCallback
script.src =url+'?callback=jsonpCallback';//带上回调函数
document.body.insertBefore(script, document.body.firstChild);

function jsonpCallback(res){
	console.log(res);
  
}

服务端php示例
<?php 
$data='我是jsonp的返回值';

if($_GET['callback']){//有callback表示jsonp请求
    //执行这个函数,并传入数据.
	echo "{$_GET['callback']}({$data})";
}else{
	echo $data;
}
 ?>

 

CalmHarbin
关注
专栏目录
前端知识点整理
老余的博客
10-27 1555
BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。参考链接：BOM主要对象属性方法总结。
Web前端知识框架思维导图（系统学习你需要用到它，少走弯路）
01-13
这是整理的一份Web前端框架的思维导图，如果你要系统的学习前端，你需要搞清楚你的侧重点，你的知识体系属于前端哪一块，你要做到心中有数，因此整理出这个思维导图，为前端学者尽绵薄之力！
作为前端，你必须知道的知识点！
TangelaYue的博客
03-12 1722
1、什么是W3C标准 W3C-万维网联盟标准不是指的某一个标准，而是好多好多标准的集合。网页三大组成部分：结构、表现、行为。结构化标准主要包括XML（可扩展标记语言，它为文档的创建、结构的存储和编码提供了规则）和XTML（基于XML的HTML，大约是HTML的词汇表，HTML的目的是创建结构化的文档，提供文档的语义），表现标准主要就是CSS ，行为标准主要包括W3C DOM、ECMAScript等。 补充一点： 规范标准：1、标准规范可以有效的提高搜索引擎抓取页面数据的效率，对SEO（搜索引擎优化）很有帮助
几个比较有用的前端知识点记录
wjw233333的博客
09-26 160
引言 记录一些前端知识点~ 正文 1. “===”与“==”的区别 “==”：是等值符，当两边类型相等时，比较值是否相等，当两边类型不同时，会转换成相同的类型再进行比较 “===”：是等同符，更严格的比较，不仅比较值是否相等，还比较类型，当类型不同时，直接返回：false “==”比较时的转换规则： string 与number 比较：string 会转换成 number boole...
设置cookie、获取cookie、删除cookie
qq_37292539的博客
12-13 850
当我们需要设置一个cookie时，需要像下面这样写： document.cookie="name=val;expires=toDate" 上面的代码中，我们通过字符串的 第一个等式 “name=val”，设置了一个 cookie 名为 “name” 、值为 “val” 的 cookie，它的到期时间是 “toDate”，注意 “toDate” 必须为毫秒数。如果需要获取或删除一个cookie值则需要更复杂的操作。 我们试着封装几个方法来简化对 cookie 的增删查 设置 cookie function
前端必须掌握的知识点
Heidi
05-18 4032
老司机要开车啦，拿个小板凳坐好，嗯哼… 1.webstorm是IDE(集成开发环境)，不是编辑器 编辑器:首推：VIM(windows上用的叫做GVIM),Brakets 可选：atom,sublime,phpStorm webstorm&gt;file&gt;Power Save Mode如果被选择了，就会自动关闭webstorm的智能提示 2.查看本机的ip地址：cmd ...
前端40个进阶知识点
wang_yu_shun的博客
10-21 3938
过去几年，小程序和Flutter、Weex 等跨平台开发工具的出现，React、Vue 和 Angular 等框架的完善，都展示出同一个道理：前端发展日益迅猛，其社区的活跃度和标准的更新速...
前端知识点总结前端知识点总结
08-09
在前端开发中，掌握各种知识点是至关重要的。本文将对前端开发中的关键概念进行深入的总结，主要包括HTML、CSS、JavaScript、Vue.js组件通信以及一些实用技巧。 首先，基础的前端知识包括HTML、CSS和JavaScript。...
前端知识点梳理 web前端
最新发布
05-09
以下是对"前端知识点梳理 web前端"这一主题的详细解析： 一、HTML（超文本标记语言） HTML是构成网页的基础，用于定义页面结构。它由一系列标签组成，如`<head>`、`<body>`、`<h1>`、`<p>`、`<a>`等，这些标签描述...
前端学习必经知识,你了解吗!,pdf
07-29
在CSS的学习中，弹性布局（Flexbox）是前端开发者必须掌握的知识点之一。Flexbox布局提供了一种更加高效的方式来布局、对齐和分配容器内项目间的空间，即使项目大小未知或是动态变化的，也能被完美处理。通过display...
前端面试知识点梳理
03-03
这份梳理的知识点，不仅覆盖了基础的前端技术，还深入到前端工程师在多端开发的技能要求，包括了对软技能的强调。以下将详细介绍前端面试中可能被问及的知识点。 1. **HTML + CSS 基础布局** - HTML 是网页的骨架...
图片base64与blob互转
热门推荐
水月情缘~雪飞飞
07-29 1万+
/** * base64 转 blob 对象，文件上传 * 转载自：http://blog.csdn.net/hsany330/article/details/52575459 * @param dataURI * @returns {Blob} */ function dataURItoBlob(dataURI) { var byteString = atob(dataURI.s
前端开发到底需要掌握哪些知识？ 浅谈前端开发的水有多深
u012718439的专栏
09-23 4056
 原文： 前端开发到底需要掌握哪些知识？ 浅谈前端开发的水有多深但凡从事互联网的人基本都会写几行 html，用过 Word 的人用 Dreamweaver 也能做出规整的页面，所以大部分人会很自然地认为“页面的开发没什么技术含量，很简单”。不仅有这种普遍的认知，对从业者来说也有很多疑惑：做页面前端实 现，没问题；兼容性，小 case；图片集成，一直都在用……还能有什么问题？瓶颈啊、天花板啊
高数重要知识点杂谈
calm_encode的博客
10-10 314
一 两个重要的极限 重要的极限一： 重要的极限二： 二 无穷大和无穷小 无穷小 在自变量的同一变化过程x->x。(或x->00)中，函数f(x)具有极限A的充分必要条件时f(x) = A+a，其中a是无穷小。 无穷大 无穷小与无穷大之间的关系 三 极限的运算法则 两个无穷小的和是无穷小。 有界函数与无穷小的乘积是无穷小。 常数与无穷小的乘积是无穷小。 有限个无穷小的乘积是无穷小。 ...
移动端下拉刷新，兼容ios，Android及微信浏览器
CalmHarbin的博客
09-03 4087
先看一下效果图 下拉效果的样子参考的新浪微博,滚动加载是ydui的滚动加载组件 因为滚动加载使用的ydui的组件,我这里便不再累述 首先分析下拉刷新是怎么实现的 1.页面滚动到顶部时,用户手指向下拖动 2.页面整体开始随着手指向下移动,同时出现下拉的动画 3.用户拖动超过指定长度之后松开手指,页面开始回弹并且执行加载中的动画 4.加载完成之后执行结束的动画 实现原理 一、touchstart事...
15行代码实现一个带并发数限制的fetch请求函数
CalmHarbin的博客
03-15 3659
原题 读题 批量请求 可控制并发度 全部请求结束，执行callback 解题 方案一: 递归 function sendResquest(urls, max, callback) { let urlsCopy = [... urls];//防止影响外部urls变量 function request() { function Handle () {...
eslint常用配置
CalmHarbin的博客
03-15 1779
什么是eslint? ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。 快速定位 安装 配置 如果某些代码不想使用规则怎么办？ 常用规则 安装 npm install eslint -D 配置 在项目根目录下新建一个 .eslintrc.js（注意eslintrc前面有个点） ...
瀑布流
CalmHarbin的博客
01-19 542
  什么是瀑布流? 演示效果点这里。瀑布流呢,可以有多列,每一个item(单元格)的高度可以不相同,但是宽度必须一样.排列的方式是,从左往右排列,哪一列现在的总高度最小,就优先排序把item(单元格)放在这一列.这样排完所有的单元格后,可以保证每一列的总高度都相差不大,不至于,有的列很矮,有的列很高 借鉴网上一张图 每一张图片所在位置依次为图片上的数字顺序。简单来说：哪一列高度最小就放...
前端学习到职场必备知识点总结
本资源是一份详尽的前端学习和求职过程中的知识点总结，涵盖了HTML、CSS和JavaScript的基础内容，以及一些高级特性和ES5和ES6的语法要点。以下是主要知识点的详细解读： 1. HTML基础知识： - 表格（table）元素：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值