- 博客(71)
- 资源 (4)
- 收藏
- 关注
RSS订阅
原创 vue项目性能优化总结
vue作为目前主流的前端框架，在github上拥有147kstar，作为vue开发大军的一员这篇文章分享一下自己使用过程中的主要针对vue项目的一些优化经验，欢迎大家一起交流(持续更新中......)一.代码优化1.v-if和v-show使用场景v-if 是条件渲染，条件为false时，不会在dom上渲染元素，条件判断的是否渲染该元素v-show 是显示与否，只是css层面上...
2018-07-05 20:01:41
3550
1
原创 Vue3.0尝鲜
前言4月21日，尤大大在B站分享了Vue.js3.0 Beta的最新进展，从2019年6月份的第一次发布的Vue3.0 Function-based API RFC，再到2019年10月份的Vue.js3.0 pre-alpha，经历一次次的更新，如果你还没有对3.0的更新内容有所了解，那么如何升职加薪，迎娶白富美，走上人生巅峰。对于有理想有追求的小伙伴不要慌，认真读完这篇文章，相信你对于V...
2020-04-27 14:14:44
1655
原创 JS原型链的理解
java作为面向对象的一门后台开发语言，有类的概念，有继承、封装、多态。但是js是基于对象，没有类，包括es6的class本质上还是对象，和java中的class并不相同。但是想一下在实际开发经常用到toString这些方法，为什么可以直接使用而不用每次都去定义，这一切都要归功于原型链构造函数构造函数其实就是一个普通函数，但是在命名上习惯采用首字母大写的方式，其次调用的时候需要使用new关...
2019-10-17 00:39:01
343
1
原创 Vue.use和Vue.prototype
import Vuex from 'vuex'Vue.use(Vuex) // vuex本质上也是vue的一个插件import utils from '../src/utils' // 工具函数Vue.prototype.$utils = utils 首先看一下概念化的区别1.不是为了vue写的插件(插件内要处理)不支持Vue.use()加载方式2.非vue官方库不支持new ...
2019-10-14 15:12:16
424
原创 display:none和visibility:hidden
先看一下在css中，能够隐藏元素的方法有哪些{ display: none; /* 不占据空间，无法点击 */ }{ visibility: hidden; /* 占据空间，无法点击 */ }{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }{ position: relative; top: -999em; /* ...
2019-10-12 13:46:41
324
原创 Web安全（二）
SQL注入基本概念SQL 注入漏洞（SQL Injection）是 Web 开发中最常见的一种安全漏洞。可以用它来从数据库获取敏感信息，或者利用数据库的特性执行添加用户，导出文件等一系列恶意操作，甚至有可能获取数据库乃至系统用户最高权限。而造成 SQL 注入的原因是因为程序没有有效的转义过滤用户的输入，使攻击者成功的向服务器提交恶意的 SQL 查询代码，程序在接收后错误的将攻击者的输入...
2019-10-11 17:25:37
200
1
原创 webpack的loader和plugin
webpack是一个模块打包器，loader和plugin可以扩展很多开箱即用的功能loaderLoader让webpack能够处理不同的文件。loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后利用webpack的打包能力，对他们进行处理。本质上，webpack loader将所有类型的文件，转换为应用程序的依赖图可以直接引用的模块。常用的loader样式...
2019-10-10 15:52:09
223
原创 ES5和ES6如何实现继承
ES5继承es5的继承方式有很多种，原型链继承、组合式继承、寄生组合继承，相比来说寄生组合式继承集组合式继承和寄生式继承的优点于一身，是ES5中，基于类型继承的最有效方式。寄生组合式继承function inserit(son, father) { var obj = Object.create(father.prototype);//创建父类原型的副本 son.protot...
2019-10-09 16:06:56
518
1
原创 JS中this、apply、call、bind
this指向记住一句：this永远指向在执行时最后调用它的对象，举几个栗子了解一下栗子1function a(){ var user = "CXK"; console.log(this.user); //undefined console.log(this); //Window}a();最后调用a()执行的地方前面没有调用对象，那就是默认全局对象win...
2019-10-09 11:06:22
188
原创 JS-装饰器模式
介绍在不改变类或对象自身的基础上，在程序的运行期间动态的添加职责。与继承相比，装饰者是一种更轻便灵活的做法。这里不要和之前讲的代理模式搞混，代理模式主要是对直接访问本体不方便或者不符合需要的时候提供一个代替者；装饰者模式主要是为对象动态添加一些行为优点可以动态的给某个对象添加额外的职责，而不会影响从这个类中派生的其它对象。实现老规矩举个栗子来解释一下：童年经典游戏魂斗罗...
2019-10-08 15:21:36
1006
原创 JS闭包与内存泄露
链式作用域：子对象会一级级地向上寻找所有父对象的变量。所以，父对象的所有变量对子对象都是可见的，反之则不成立。var n=999;function f1(){ alert(n);}f1(); // 999function f1(){ var n=999;}alert(n); // error闭包：在实际开发过程中，由于种种原因是需要能够访问其他函数内的局部...
2019-09-30 17:20:21
1648
2
原创 如何实现一个完整的深拷贝
浅拷贝和深拷贝浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。深拷贝：将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象实现1.第三方库（0分）Lodash，...
2019-09-29 15:39:10
1560
2
原创 JS-单体模式
介绍单体模式是JavaScript中比较简单的且常用的模式。单体模式思想在于保证一个特定类仅有一个实例，意味着当你第二次使用同一个类创建信对象时，应得到和第一次创建对象完全相同。优点1.可以用来划分命名空间，减少全局变量的数量2.可以被实例化，且实例化一次实现老规矩举个栗子来解释一下：页面需要一个弹窗来展示接口返回的错误信息// 实现弹窗var createWind...
2019-09-29 11:18:30
274
原创 JS-策略模式
介绍定义一系列的算法，把它们一个个封装起来，将不变的部分和变化的部分隔开，实际就是将算法的使用和实现分离出来；策略模式由两部分构成：一部分是封装不同策略的策略组，另一部分是 Context。通过组合和委托来让 Context 拥有执行策略的能力，从而实现可复用、可扩展和可维护，并且避免大量复制粘贴的工作。优点1.策略模式利用组合，委托等技术和思想，有效的避免很多if条件语...
2019-09-27 17:01:12
185
原创 JS-代理模式
介绍代理是一个对象，它可以用来控制对本体对象的访问，它与本体对象实现了同样的接口，代理对象会把所有的调用方法传递给本体对象的；代理模式最基本的形式是对访问进行控制，而本体对象则负责执行所分派的那个对象的函数或者类，简单的来讲本地对象注重的去执行页面上的代码，代理则控制本地对象何时被实例化，何时被使用；优点1. 可以保护对象，代理对象可以代替本体被实例化，并使其可以被远程访问；2. ...
2019-09-27 11:01:13
383
转载 if 我是前端团队 Leader，怎么制定前端协作规范?
万字长文，继续刷新我的文章长度记录，涉及前端开发的方方面面。本文将持续更新和完善, 文章部分观点可能比较武断或不完整，欢迎评论和补充，一起完善该文章. 谢谢笔者长期单枪匹马在前端领域厮杀(言外之意就是团队就一个人)，自己就是规范。随着公司业务的扩展，扩充了一些人员，这时候就要开始考虑协作和编码规范问题了。本文记录了笔者在制定前端协作规范时的一些思考，希望能给你们也带来一些帮助.一个人走的...
2019-09-26 18:46:29
1082
原创 JS-观察者模式
如果说，你只能掌握一种设计模式，那必须毫不犹豫的选择观察者模式，也叫发布订阅模式。es6中promise的实现、vue中双向绑定原理的实现、Node.js中的 EventEmitter事件监听器等等都应用到了观察者模式，可见其应用之广泛那接下来具体看一下观察者模式到底是什么介绍一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。优点...
2019-09-26 16:14:25
198
原创 HTTP 强缓存和协商缓存
对于客户端来说，HTTP缓存是web性能优化的重要手段。优势：减少了冗余的数据传递，节省宽带流量 减少了服务器的负担，大大提高了网站性能 加快了客户端加载网页的速度 这也正是HTTP缓存属于客户端缓存的原因。 用户体验好缺点：缓存中的数据可能与服务器的数据不一致 消耗内存浏览器缓存一般是针对静态资源（js/css/img等），我们将缓存分为强缓存和协商缓存，两者的主要区别是...
2019-09-25 14:00:48
2166
原创 async/await 详解
背景promise的出现对于异步编程是一个跨越式的提高，但是往往在实际业务中存在很多更加复杂的流程，promise还是无法满足我们的需要，这时候在ES7中提出了async函数概念async函数是Generator函数的语法糖。使用 关键字async来表示，在函数内部使用await来表示异步，await关键字只能用在async定义的函数内。async函数就是将 Generat...
2019-09-24 16:40:02
1604
原创 Promise详解
背景最早的时候我们处理一个异步网络请求，大概就是$.ajax({ url:'./a', success:function(data,status){ //alert(data); },})但是往往实际的业务需求是要根据前一个网络请求的结果，执行后续N多个的网络请求，代码就会变成$.ajax({ url:'./a', success:fun...
2019-09-23 18:46:30
1363
1
原创 Python-数据读写
os模块#系统内置模块 不需要installimport osprint(os.name) #输出正在使用平台 window-nt linux/unix-posixprint(os.getcwd()) #获取当前脚本工作目录print(os.listdir()) #获取当前路径下文件列表#os.chdir('/Users/Documents') #切换到指定路径#os.r...
2019-09-22 17:21:08
323
原创 Python-序列详解
概念序列是Python中最基本的数据结构。序列中的每个元素都分配一个数字 - 它的位置，或索引，第一个索引是0，第二个索引是1，依此类推。序列分为可变序列-列表List 和不可变序列-元祖tuple，字符串str通用操作1.成员资格判断值是否属于序列lst = [1,2,3,4,5]st = 'xyz' print(1 in lst)print('x' in lst...
2019-09-21 15:02:31
1889
原创 module.exports和exports和export和export default的区别
module.exports和exports是nodeJs中的模块导出方式在一个 node 执行一个文件时，会给这个文件内生成一个 exports 和 module 对象， 而module又有一个 exports 属性。他们都指向一块{}内存区域。exports = module.exports = {};具体验证一下// hello.jsconst hello = func...
2019-09-19 18:48:46
1145
原创 require和import的区别
遵循规范–require 是 AMD规范引入方式–import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法调用时间–require是运行时调用，所以require理论上可以运用在代码的任何地方–import是编译时调用，所以必须放在文件开头本质–require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把req...
2019-09-19 18:44:14
621
原创 前端模块化规范（CommonJs,AMD和CMD）
CommonJSCommonJS是服务器端模块的规范，由Node推广使用，webpack也采用这种规范编写commonJs规范：CommonJS模块规范主要分为三部分：模块定义、模块标识、模块引用。模块定义：module对象：在每一个模块中，module对象代表该模块自身。 export属性：module对象的一个属性，它向外提供接口。输出模块变量的最好方法是使用module.ex...
2019-09-19 18:36:14
779
原创 专门面向前端开发的网址导航
程序员导航轮子工厂各种语言的在线运行工具：http://jsrun.pro/js代码保护：http://www.jshaman.com/protect.html图片压缩：https://www.sojson.com/image/compress.html...
2019-09-19 14:13:26
619
原创 前端跨域之CORS详解
CORS：跨源资源分享Cross-Origin Resource Sharing。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没...
2019-09-19 11:17:27
6272
原创 CSS 伪类和伪元素的用法和区别
伪类伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。简单说就是弥补常规CSS选择器的不足，具体都有哪些伪类对于大部分人来说，用到最多的就是状态和结构化的，简单使用就不多做介绍了，下面看一个比较有意思的栗子.list li:nth-last-child(n+4) ~ li,.list li:nth-last-child(n+4...
2019-09-18 17:33:20
1145
原创 一行JS实现时间戳转日期格式
function time(time = +new Date()) { var date = new Date(time + 8 * 3600 * 1000); // 增加8小时 return date.toJSON().substr(0, 19).replace('T', ' ');}time(); // "2019-09-17 17:38:26"function g...
2019-09-17 18:29:54
670
原创 DOM事件流
DOM事件流所描述的就是从页面中接受事件的顺序，有三个阶段事件捕获阶段（Capture Phase）事件的第一个阶段是捕获阶段。事件从文档的根节点出发，随着 DOM 树的结构向事件的目标节点流去。途中经过各个层次的 DOM 节点，并在各节点上触发捕获事件，直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径，在冒泡阶段，事件会通过这个路径回溯到文档跟节点。目标阶段（Target P...
2019-09-17 15:06:22
610
原创 Web安全（一）
在 Web 安全领域中，XSS 和 CSRF 是最常见的攻击方式。xss攻击基本概念XSS，即 Cross Site Script，中译是跨站脚本攻击；其原本缩写是 CSS，但为了和层叠样式表(Cascading Style Sheet)有所区分，因而在安全领域叫做 XSS。XSS 攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，...
2019-09-15 23:27:48
693
原创 CSS之 重绘和回流
浏览器渲染机制浏览器使用流式布局模型 (Flow Based Layout)所有的浏览器渲染引擎工作流程大致分为5步：创建DOM树 —> 创建Style Rules-> 构建Render树 —> 布局Layout-—> 绘制Painting。第一步，构建 DOM 树：用 HTML 分析器，分析 HTML 元素，构建一棵 DOM 树；第二步，...
2019-09-09 19:03:00
1260
原创 CSS之BFC详解
概念BFC（Block Formatting Context）直译为“块级格式化范围”，也可称为“格式化上下文”。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用 当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境...
2019-09-07 19:21:41
827
原创 前端跨域之JSONP详解
为什么会产生跨域首先，跨域是针对客户端而言的，服务端是不存在跨域安全限制的。由于浏览器同源策略(同一协议，同一域名，同一端口号)的限制，非同源下的请求，都会产生跨域问题。JSONP处理跨域的一种解决方案，那jsonp是如何突破同源策略限制实现跨域的呢1.jsonp原理在平时的开发工作中，不管是script标签的src还是img标签的src，或者说link标签的href都可以...
2019-09-07 19:21:04
1065
原创 Vue之虚拟DOM
虚拟DOM的概念是随着react的出现，以其卓越的性能被人所接受。到vue2.0也引入了虚拟DOM真实DOM了解虚拟dom之前，先回顾一下真实dom和它的解析流程先看下webkit渲染引擎流程图所有的浏览器渲染引擎工作流程大致分为5步：创建DOM树 —> 创建Style Rules-> 构建Render树 —> 布局Layout-—> 绘...
2019-09-06 16:05:40
826
原创 前端跨域之PostMessage详解
window.postMessage()方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数Document.domain设置为相同的值) 时，这两个脚本才能相互通信。otherWindow.postMessage(message, targetOrigin,...
2019-09-05 18:51:37
3188
1
原创 JS经典面试题-下面代码输出什么
for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1);}for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1);}结果 3 3 3and0 1 2解析：由于JavaScript中的事件执...
2019-08-28 18:57:29
2647
原创 vue3.0为何弃用Object.defineProperty而选择Proxy
说到vue 双向绑定原理是少不了的知识点，对于vue新版本有关注的小伙伴应该知道尤大大已经宣称在3.0中 双向绑定将会使用Proxy来代替2.x版本的Object.defineProperty，那么我们来看一下Proxy对比defineProperty优势在哪首先这两种都是基于数据劫持实现的双向绑定什么是数据劫持当访问或者设置对象的属性的时候，触发相应的函数，并且返回或者设置属性的值。...
2019-08-27 19:56:09
4320
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人