小知识点汇总
Programmer boy
学无止境
展开
-
SaaS、PaaS、IaaS的区别
我们从SaaS、PaaS、IaaS的定义、工业应用以及具体案例几方面来介绍他们之间的区别一、定义层面的区别SaaS、PaaS、IaaS简单的说都属于云计算服务,也就是云计算+服务。我们对于云计算的概念,维基百科有以下定义:Cloud computing is a new form of Internet-based computing that provides shared computer processing resources and data to computers and othe转载 2021-12-15 19:32:15 · 47665 阅读 · 2 评论 -
普通函数和箭头函数的区别
综述:知道他俩的区别,但是有很多细节的区别不了解,总结一下普通函数在es5中就有了,箭头函数是es6中出现的函数形式,当然也可以继续用普通函数。普通函数大家知道:形式基本一致来看看箭头函数:开发时根据实际情况可以省略一些东西单条处理可以省略return和{大括号}单个参数可以省略(小括号)箭头函数不能作为构造函数 不能new。会报错箭头函数不绑定arguments,但是可使用…rest参数这是普通函数arguments,可以使用这是箭头函数的,用了会报错。但是可以这.转载 2020-12-10 08:38:35 · 346 阅读 · 0 评论 -
js实现Promise,call,apply,bind
1.原生js实现Promise? // 判断变量否为function const isFunction = variable => typeof variable === 'function' // 定义Promise的三种状态常量 const PENDING = 'PENDING' const FULFILLED = 'FULFILLED' const REJEC...原创 2020-11-17 21:45:44 · 719 阅读 · 0 评论 -
常见跨域解决方案总结
1.cors方案CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的原创 2020-11-17 21:57:57 · 261 阅读 · 0 评论 -
对前端深浅拷贝的思考
综述:一个简单的问题,其实有些细节需要好好总结下1.浅拷贝的方法es6 扩展运算符... Object.assign() 只能实现对象第一层级的浅拷贝 直接使用等号只能实现基本数据类型的浅拷贝2.深拷贝的几种方式JSON.parse(JSON.stringify(obj)),当obj中存在new Date 时,会转成一个字符串时间, 函数对象时,也会转成一个新的字符串, 正则表达式时也会转成字符串,会存在bug。 使用lodash库的deepClone方法 自己写一个深拷贝方法...原创 2020-10-30 14:33:42 · 203 阅读 · 0 评论 -
前端国际化方案总结
综述:总结下再国际化方案实践中遇到的问题,加深理解1.项目背景描述 目前项目是使用ant design vue 来开发的,需要引入国际化方案,研究后决定使用I18n方案。2.需要修改的代码块3.目前还需要考虑的问题默认语言是否可以通过获取当前地理位置信息,帮助用户自主选择?还是做一个语言选择提示窗? 如果引入数十种语言,各种语言占用的文本空间是不同的,怎样保证良好的可读性?在多种ui组件中都能适应?4....原创 2020-06-16 15:28:25 · 872 阅读 · 0 评论 -
基于canvas实现一个多分支流程图组件
综述:使用canvas实现了一个多分支流向图,总结下主要的实现思路,有需要的朋友可直接使用,假设如果不使用canvas来绘制,使用svg来绘制该怎样来实现?1.效果展示2.实现思路解析需求分析一个流程图,主要由横线,空心圆,空心圆中的实心圆三部分组成,并且随着状态的变化能控制其颜色可以支持多分支,多分支中还包括奇数个分支和偶数个分支,实现思路上两者稍微不同核心思路说明...原创 2019-06-07 17:47:15 · 5429 阅读 · 8 评论 -
拖拽和拉伸div元素功能分析与实现
综述:综合考察对于元素的拖动相关API的使用和逻辑思维能力,非常有用的一个实现思路,后期可以将其封装成一个可以复用的组件积累下来1.实现拖拽和四个方向拉伸元素的实现方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>j...原创 2019-05-08 20:51:37 · 2367 阅读 · 0 评论 -
Service Worker 简介
背景:如何让网页的用户体验做到极致随着 Web 的快速发展,用户对站点的体验期望值越来越高,前端工程师有时候为了几十毫秒的速度优化而费劲心思,消耗大量时间。想要让自己的产品在无数产品中脱颖而出,就必须提升产品的性能和体验。在时间成本高昂的今天,响应速度的提升是开发者不得不面对的话题。前端工程师有很多性能优化的手段,包括 CDN、CSS Sprite、文件的合并压缩、异步加载、资源缓存等等。...转载 2019-04-29 17:31:38 · 486 阅读 · 0 评论 -
如何渲染几万条数据但不卡主页面之 requestAnimationFrame
综述:window.requestAnimationFrame API在动画方面有非常大的应用价值,当初fangjing在做动画组件的时候,就是使用的这个API实现的,效果还是不错的,百灵中的歌词实现动画使用setInterval()循环遍历实现,在性能不好的盒子上动画顺滑度并不好,使用这个方法实现动画的话,效果是否会更好呢?这里给提供了一种可以借鉴的思路。1.如何渲染几万条数据并不卡主页...原创 2019-04-29 17:20:31 · 1715 阅读 · 0 评论 -
基于Vue实现音乐APP项目资料分享
综述:挺好的资料,分享下共同提高1、从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理:https://juejin.im/post/5a6547d0f265da3e283a1df71.262、Front-end-Web-Development-Interview-Question:https://github.com/paddingme/Front-end-Web-Develo...原创 2019-08-28 20:54:47 · 1314 阅读 · 1 评论 -
JWT(JSON WEB TOKEN)介绍及与session认证方式的异同分析
什么是JWTJson web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO)场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息,以便于从资源服务器获取资源,也可以增加一些额外的其它业务逻辑所必须的声明信息,该token也可直...原创 2019-04-26 18:35:00 · 278 阅读 · 0 评论 -
在线模拟ajax请求—fastmock平台(mock神器)
综述:一个挺好用的模拟ajax请求的平台,对于开发有极大的帮助作用官方说明文档:http://fmdocs.fastmock.site/book/1.要解决的问题fastmock可以让你在没有后端程序的情况下能真实地在线模拟ajax请求,你可以用fatmock实现项目初期纯前端的效果演示,也可以用fastmock实现开发中的数据模拟从而实现前后端分离。在使用fastmock之前,你...原创 2019-06-02 16:24:59 · 6858 阅读 · 0 评论 -
对于后端同事的几个vue问题的解答
前言:开始学习vue,后端同事问了几个问题,在这里总结一下,谈谈自己的理解,针对人人开源的那个网站的前端demo文件进行说明,人人网是一个非常好的前后端模板下载网站演示地址:http://fast.demo.renren.io 账号密码:admin/admin 前端下载地址:https://github.com/daxiongYang/renren-fast-vue 前端部署文档:h...原创 2019-05-30 17:24:08 · 460 阅读 · 0 评论 -
前端各阶段应掌握的技能(学习方向指导)
转载链接:https://www.zhihu.com/question/39721183/answer/83536633综述:当不知道自己的学习方向时,可以看看这个进阶路线,比较推荐的学习过程应该是以兴趣为驱动的,用搜索做辅助:1. 我想做一个个人网站,或者给我们团队或者小组做一些介绍页面。怎么做?搜索发现要学习:HTML、CSS。2. 发现一个网站设计的好漂亮,交互真赞,动画效...转载 2019-06-10 09:20:37 · 460 阅读 · 0 评论 -
前端异常监控实现方案介绍
综述:前端页面是最贴近用户的,异常监控并上报很重要参考文档:https://cdc.tencent.com/2018/09/13/frontend-exception-monitor-research/ https://juejin.im/post/5b53218cf265da0f9313a3deJS 异常处理对于 Javascript 而言...原创 2019-06-04 09:47:18 · 1481 阅读 · 0 评论 -
全局替换对象中的特定字符的方法总结
1.使用JSON.stringify(data,replacer)函数处理方法 const ifNullReplacer = function (key, value) { if (value === 'IFNULL') { value = '' } return value } const tes...原创 2019-06-21 11:43:40 · 494 阅读 · 0 评论 -
一个问题引起对正则表达式的思考?
综述:将一个大位数,三位加一个逗号实现1.不了解正则的话只能当做字符串处理了,十分繁琐2.实际的正确答案是Number.prototype.formatNum = function() { const str = this.toString(); const reg = /(?=(\B)(\d{3})+$)/g return str.repla...原创 2019-09-29 21:06:29 · 126 阅读 · 0 评论 -
CI/CD-持续集成/持续交付介绍
在最好的时候创建用户喜欢的高质量应用程序并不是件容易的事情。更何况,要怎样做才能更快地创建用户喜欢的高质量应用程序并且能够不断改进它们呢?这就是需要引入持续集成和持续交付(CI / CD)的地方。持续集成(CI)什么是持续集成?那么,持续集成(CI)究竟是什么呢?它是软件工程师每天频繁地将更新代码的副本传递到共享位置的过程。所有的开发工作都在预定的时间或事件中进行集成,然后自动测试和构...原创 2019-04-26 18:04:08 · 346 阅读 · 0 评论 -
对于post方式向后台传sql语句遇到转意问题的思考
综述:今天使用post方式向后台传递sql语句,别莫名的转移了,空格变成了加号,还多了别的符号,但是通过get方式就没有问题,将思考记录下来;1.本来是想在前端写sql语句,然后通过ajax将查询语句传给后端,后端去执行查询操作。但是发现使用post请求,但是被转意的问题:输入的sql:select * from myDbajax发送出去的sql:select%%*fr...原创 2019-04-03 17:23:13 · 1128 阅读 · 0 评论 -
开发jQuery插件方法总结
综述:在开发tip小组件的时候的思考,对核心点进行总结,加深理解1.核心知识点总结$.extend()用于给$类添加方法,另一个用于给jquery对象添加方法,就是通过$获取到的对象 var defaultAttr={ opacity:0.9, content:'', size:'medium', position:...原创 2018-10-31 09:05:30 · 130 阅读 · 0 评论 -
阿里云OSS服务
核心:阿里云对象存储服务(Object Storage Service,简称OSS)为您提供基于网络的数据存取服务。使用OSS,您可以通过网络随时存储和调用包括文本、图片、音频和视频等在内的各种非结构化数据文件。1.阿里云OSS将数据文件以对象(object)的形式上传到存储空间(bucket)中。您可以进行以下操作: 创建一个或者多个存储空间,向每个存储空间中添加一个或多个文件。...原创 2018-08-28 15:41:28 · 573 阅读 · 0 评论 -
bootstrap使用一套css适配多个终端原理分析
综述:bootstrap响应式的核心是媒体查询+百分比机制1.在页面的最外层有一个container最大的容器,然后再分很对row(行),在行内再定义column(列),在row内可以再嵌套一个栅格系统,实现自适应系统中嵌套Bootstrap响应式布局是利用其栅格系统,对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板,PC端都能使用,而不用考虑使用媒体查询(针对不同...原创 2018-08-22 14:54:59 · 3351 阅读 · 0 评论 -
对于深拷贝和浅拷贝的思考
先从一个问题开始说起,请问foo.x的值是? //常见的面试题,考虑垃圾回收机制 var a={n:1}; a.x=a={n:2}; console.log(a.x); //undefined console.log(a); //{n:2} var a={n:1}; a.x={n:2}; ...原创 2018-08-13 20:34:20 · 212 阅读 · 0 评论 -
ES6高频知识点
目标:es6的目的是让javascript功能更加强大,使其可以开发企业级大型软件目录1.解构赋值2.异步编程Promise()3.let和cons来代替var4.模块化解决方案,impot/export5.Class类的引入6.es6中的箭头函数,箭头函数的this的指向问题?7.es6中的默认形参8.两种新的数据结构Set和Map9.第七种数据类型S...原创 2018-05-24 23:45:23 · 2213 阅读 · 0 评论 -
移动端Web页面常见问题与解决方案(yuyan)
一、meta标签1、利用meta标签对viewport进行控制<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>如果你不这样的设定的话,那就会使用那个比屏幕宽的默认viewport,也就是说会出现横向滚动条。Wi...原创 2018-05-24 23:16:48 · 1766 阅读 · 0 评论 -
从输入URL到页面渲染出来的过程?(搭建知识体系)
这是一个面试高频问题,也是查看前端人员技术深度的问题,回答的越详细越好: 首先略去那些键盘输入、和操作系统交互、以及屏幕显示原理、网卡等硬件交互之类的(前端向中,很多硬件原理暂时略去。。。) 对浏览器模型有整体概念,知道浏览器是多进程的,浏览器内核是多线程的,清楚进程与线程之间得区别,以及输入url后会开一个新的网络线程 对从开启网络线程到发出一个完整的http请求中间的...原创 2018-07-30 16:15:02 · 860 阅读 · 0 评论 -
三种JavaScript类的实现方法(es5和es6)
前言:以toast组件为例子,通过三种方法实现toast类,希望对组件化开发的同学能有启发,学习代码组织的方式;对于组件化代码的开发大有裨益;1.通过构造函数+原型实现类1.1代码实现 //构造函数,默认大写开头 function Toast(option){ this.prompt = ''; //toast中的内容 this....原创 2018-07-25 21:01:03 · 5517 阅读 · 0 评论 -
JavaScript多线程编程介绍
综述:两种JavaScript多线程编程的方法,在以后的具有大量的数据计算的业务场景下可能会使用到1.背景介绍JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。随着电脑计算能力的增强,尤其是多核 CPU 的出现,单线程带来很大的不便,无法充分发挥计算机的计算能力。2.多线程方案一Web ...原创 2018-10-31 09:31:23 · 263 阅读 · 0 评论 -
百度echarts使用经验总结
综述:SF项目中,大量使用百度地图API和echarts数据可视化相关内容,但是在渲染全国区级网点时,遇到了下面的问题1.echarts的特性丰富的数据可视化类型 多种数据格式无需转换直接使用 千万的数据前端展示(websocket和数据分块加载) 移动端优化 多渲染方案,跨平台使用2.echarts存在的问题var boundary = new BMap.Bounda...原创 2018-10-31 18:45:16 · 858 阅读 · 0 评论 -
浏览器http缓存机制剖析
综述:浏览器缓存机制对于前端工程师来说十分重要,使用缓存会极大提高页面性能,减少请求1.浏览器对于请求资源, 拥有一系列成熟的缓存策略. 按照发生的时间顺序分别为存储策略, 过 期策略, 协商策略, 其中存储策略在收到响应后应用, 过期策略, 协商策略在发送请求前应用. 流程图 如下所示:2.缓存策略分类key 描述 存储策略 过期策略 协商策略 C...原创 2019-03-25 17:31:16 · 185 阅读 · 0 评论 -
使用js对象formData+ajax方法实现文件的上传
综述:对这个方法进行总结,在文件上传中还是很有用处的DOM<inputtype="file"id="file">一、创建FormData放入待上传文件//准备FormData对象var formData = new FormData(), uploadFile = document.getElementById('file'); /...原创 2019-04-03 16:22:01 · 493 阅读 · 0 评论 -
面向切面(AOP)和面向对象编程(OOP)
综述:挺常见的两个概念,温习一些1.面向对象编程面向对象编程(Object Oriented Programming,OOP,面向对象程序设计)是一种计算机编程架构。OOP 的一条基本原则是计算机程序是由单个能够起到子程序作用的单元或对象组合而成。OOP 达到了软件工程的三个主要目标:重用性、灵活性和扩展性。为了实现整体运算,每个对象都能够接收信息、处理数据和向其它对象发送信息。O...原创 2019-04-08 19:24:13 · 3549 阅读 · 0 评论 -
sh文件、shell、shell脚本、bat文件、bat脚本
综述:对于各个系统不太理解,这几个文件在日常的工作,记录下加深认识1.shell(壳)shell是一个shell脚本解释器,是一个运行在Linux系统下的批处理脚本解释器,通过这个窗口建立用户和Linux系统底层提供的一系列方法的交互;.sh就是一种运行在Linux系统下的文件,文件中存储的shell脚本;2.batch(批处理)个人理解,batch和shell类似,只不过...原创 2019-03-25 17:52:09 · 7352 阅读 · 1 评论 -
使用node.js实现对javascript代码合并,压缩
综述:实现多个js文件合并,压缩,以达到性能优化的目的,以件量预测页面为例,提高约40%加载速度1.合并功能代码var fs=require('fs');var fileder="F:/eos-ops/ops-weber/webolder/WebRoot";//需要监听的文件路径fs.readdir(fileder,function (ev,file) { //不需要判断是否有...原创 2019-03-20 18:45:07 · 1284 阅读 · 4 评论 -
Promise 对象使用
综述:ES6中解决回调地狱问题的解决方案转自阮一峰老师:http://javascript.ruanyifeng.com/advanced/promise.html来自《JavaScript 标准参考教程(alpha)》,by 阮一峰目录概述 Promise 对象的状态 Promise 构造函数 Promise.prototype.then() then() 用法辨析...转载 2019-03-11 19:56:07 · 94 阅读 · 0 评论 -
jQuery的deferred对象详解
综述:非常好的内容,可以和ES6的promise结合起来使用转载自阮一峰老师:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html一、什么是deferred对象?开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作...转载 2019-03-11 19:47:30 · 162 阅读 · 0 评论 -
关于jQuery选择器的第二个参数的解读
关于jQuery()方法的第二个参数,有下面这几种用法:1.jQuery(selector, [context])这种用法,相当于 $(context).find(selector) 或者 context.find(selector)2.jQuery(html, [ownerDocument])文档对ownerDocument的解释是:“创建DOM元素所在的文档”也就是说,如果...原创 2019-03-19 17:58:49 · 3156 阅读 · 0 评论 -
利用GitHub搭建自己专属的网站
综述:利用github搭建自己专属的网站方法分享,比如个人的电子版简历,特别提醒,该方法只针对public仓库,从2019-01月后,github支持免费创建私有仓库,不过最多只能三个人协同开发1.首先需要一个github账号,并建立一个GitHub仓库,仓库中存放网站源码2.在创建的仓库下的setting-> Github pages 中进行项目路径设置即可,如下2图所示,还可...原创 2019-01-08 21:42:57 · 643 阅读 · 0 评论 -
大公司里怎样开发和部署前端代码?
综述:一片不错的博文,记录下来作者:张云龙链接:https://www.zhihu.com/question/20790576/answer/32602154这是一个非常有趣的 非主流前端领域,这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题,入行到现在一直在学习和实践中。在我的印象中,facebook是这个领域的鼻祖,有兴趣、有梯子的同学可以去看看faceboo...转载 2018-12-18 14:07:32 · 181 阅读 · 0 评论