- 博客(31)
- 收藏
- 关注
RSS订阅原创 VUE验证码组件
VUE验证码组件组件源码组件使用组件源码identify.vue<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></tem...
2019-08-07 14:45:28
355
原创 双向数据绑定原理
1. 利用Object.defineProperty<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> // 1、首先实现一个整体的...
2019-06-20 22:14:16
726
原创 React高阶组件
React组件的生命周期React高阶组件1. 高阶函数函数可以被作为参数传递// 时间函数的应用 setTimeout() setInterval()// ajax的应用 $.get(url, handle)// 数组的应用 some(), every(), filter(), map(), forEach()函数可以被作为返回值输出2. 高阶组件定义：接受...
2019-05-30 19:57:00
245
原创 时隔一年多，重拾起前端
从2018年毕业到现在，工作快一年的时间了。工作后，涉及到的编程语言大多是C++、Java，从一个菜鸟前端“华丽”转变为菜鸟后端。这一年，几乎很少关注前端知识，工作上能接触到的也几乎是很简单的js开发，用的是公司自研框架（难用无比），几度有想法转后端，从此放弃前端的学习。虽说是工作上的原因，迫使自己学习后端语言，但同时自己也学到了很多东西（像多线程、面向对象、数据库等等自己现在也能说个皮...
2019-05-23 00:30:57
280
原创 GIT代码上库
GIT代码上库第一步 将自己修改过的代码存到栈区第二步 将远程master分支pull本地第三步 解决冲突第四步 将本地分支push到master在多人协作开发一个项目时的过程中，往往会多个人同时修改或操作项目代码，这时可以采用如下合并分支的办法：注：在本地分支下操作代码上库之前先编译通过！！！！！！！！！！！！！！第一步 将自己修改过的代码存到栈区git status // 查看...
2018-10-22 15:46:25
1293
原创 JavaScript设计模式
JavaScript设计模式简介1. 设计模式的概念设计模式是一套被反复使用、思想成熟、经过分类和无数实战设计经验的总结的。 目的：让系统代码可重用、可扩展、可解耦、更容易被人理解且能保证代码可靠性。使代码开发真正工程化。2. 设计原则设计模式存在根本原因是为了代码复用，增加可维护性。有入学原则：开闭原则：对扩展开放，对修改关闭里氏转换原则：子类继承父类，单独调完全可以运行依赖倒转原则：引用
2017-10-10 22:08:21
227
原创 JS的运行机制与event-loop
参考阮一峰前辈的日志一.单线程的JavaScript为什么JavaScript不能有多个线程呢？ 与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？所以，为了避免复
2017-09-18 11:23:38
412
原创 jQuery的ready方法和原生load的区别
DOM文档加载的步骤为：解析HTML结构。加载外部脚本和样式表文件。解析并执行脚本代码。DOM树构建完成。//DOMContentLoade加载图片等外部文件。页面加载完毕。//loadjQuery的ready方法：仅当DOM加载完成，不包括样式表，图片，flash 原生load ：页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。 总结： ready事件先于l
2017-09-18 11:12:40
965
原创 深入双向数据绑定原理
首先附上一篇好文 Vue的双向数据绑定的原理是什么呢，首先讲一下ES5的这个修改属性的方法Object.defineProperty()
2017-09-18 10:06:58
540
原创 动态规划算法经典案例 JS
动态规划算法案例一动态规划算法难点：从实际问题中抽象出动态规划表dp，dp一般是一个数组，可能是一维的也可能是二维的，也可能是其他的数据结构。关键点：最优化原理，也就是最优子结构性质。这指的是一个最优化策略具有这样的性质，无论过去状态和决策如何，对前面的决策所形成的状态而言，余下的决策必须构成最优策略，简单来说就是一个最优化策略的子策略总是最优的，如果一个问题满足最优化原理，就称其有最优子结构
2017-08-28 10:31:18
1919
原创 JQurey源码分析
JQurey：基于面向对象的程序设计(function(window,undefined){ ...})(window)window:方便压缩；undefined:避免外部对undefined进行赋值；//函数自执行，外部不能访问函数内部变量、属性和方法，可以防止冲突。 行号 说明 作用 （21~94） 定义了一些变量和函数jQuery = function(){}
2017-08-24 17:16:04
268
原创 对 MVC MVP MVVM 的理解
MVCMVC是一种架构型模式，它本身并不引入新的功能，只是用来指导我们改善应用程序的架构，使得应用的模型和视图相分离，从而得到更好的开发和维护效率。 MVC 是一种使用 MVC（Model View Controller 模型-视图-控制器）设计创建 Web 应用程序的模式：Model（模型）表示应用程序核心（比如数据库记录列表），是应用程序中用于处理应用程序数据逻辑的部分，负责在数据库中存取
2017-08-24 16:59:39
398
原创 JavaScript中的深拷贝与浅拷贝
浅拷贝：复制对象的地址，并没有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会改变；深拷贝： 开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。//实现深拷贝的方法var cloneObj = function(obj){ var str, newobj = obj.construct
2017-08-18 11:07:50
159
转载 打开一个新窗口
点击查看原文，里面有精彩的效果展示。 在新窗口中打开连接的两种方法： 直接a标签加上target=”_blank”属性 使用js进行window.open(url)搞定。 安全问题一个叫opener的全局对象：如果父页面和新开窗口中的页面是不同域名的，浏览器会禁止新窗口访问opener中的内容。但是有一个操作除外：可以通过window.opener.location =
2017-08-17 17:51:07
352
原创 Vue-深入
响应式原理过渡效果响应式原理JS对象传给Vue实例的dataVue遍历该对象的属性并使用Object.defineProperty转为getter／setterwatcher监听setter：当setter被调用时，会通知watcher重新计算，更新组件由此可知，data对象上的属性才是响应的过渡效果
2017-08-16 22:28:41
224
转载 vue-cli构建项目 npm run build打包后怎么在本地查看效果
点击查看原文 本文以vue官方脚手架vue-cli构建的项目为例。运行npm run dev以开发模式打开调试好了你的案例程序；你还不满足于仅仅把代码放在github上，想把项目打包，然后在本地预览或者放在个人博客上供大家直接看效果学习。这时如果直接运行npn run build是可以运行并打包你的代码的，不会报任何异常或错误，但是会看到打包完成有这样一句提示：看到这里第一感觉：不是警告色，应
2017-08-09 18:06:56
12542
3
原创 vue2+webpack2 初始化项目
准备工作下载并安装node.js安装vue cli脚手架npm install --g vue-cli项目初始化官网给出了两个模板： webpack-simple 和 webpack 。区别在于webpack-simple 没有包括Eslint 等检查功能，所以普通项目基本用webpack-simple 就足够了。于是我用webpack-simple 初始化的项目，运行之后，页面能正常显示，但
2017-08-09 10:48:41
1309
原创 文档对象模型DOM
节点层次Node类型Document类型Element类型Text类型Comment类型DOM操作技术动态脚本动态样式操作表格使用NodeList插入标记文本节点层次1.Node类型除IE外，所有浏览器都可以访问到这个类型（Node接口）//将类数组转化成数组Array.prototype.slice.call(nodeList,0);nodename：元素的标签名节点关系
2017-08-02 16:05:56
237
原创 浏览器对象模型BOM
windows全局作用域窗口关系及框架窗口位置窗口大小导航和打开窗口location对象查询字符串位置操作navigator对象检测插件screen对象history对象windowsBOM的核心对象，表示浏览器的一个实例，既是JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的global对象。1.全局作用域全局变量不能通过delete操作符删除，w
2017-08-01 22:10:45
243
原创 服务器实时推送
基于Ajax的短轮询浏览器定时向服务器发送请求，看看又没更新数据。缺点：轮询的间隔过长，会导致用户不能及时接收到更新的数据；轮询的间隔过短，会导致查询请求过多，增加服务器端的负担。Comet基于Ajax的长轮询：浏览器发出XMLHttpRequest 请求，服务器端接收到请求后，会阻塞请求直到有数据或者超时才返回，浏览器JS在处理请求返回信息（超时或有效数据）后再次发出请求，重新建立连接。在此期间
2017-08-01 20:48:28
328
原创 关于跨域
注意：只要协议、域名、端口有任何一个不同，都被当作是跨域 关于同源策略 前端解决跨域问题的几种方法原文中有代码CORS(Cross-Qrigin Resource Sharing，跨域源资源共享)使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还应该失败。比如使用get/post发送的请求，需要给它一个附加的Origin头部，如果服务器认为这个请求可接受
2017-08-01 15:00:39
226
原创 前端经典面试题---Ajax篇
GET和POST的区别何时使用POSTGET和POST的区别，何时使用POSTGET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符；POST：一般用于修改服务器上的资源，对所发送的信息没有限制。GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，
2017-08-01 10:16:05
1694
原创 前端经典面试题---网络篇
一个页面从输入 URL 到页面加载显示完成这个过程中都发生了什么HTTP状态码cookiessessionStorage 和 localStorage 的区别一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？在浏览器地址栏输入URL；浏览器查看缓存： a. 如果资源未缓存，发起新请求； b. 如果已缓存且足够新鲜，直接提供给客户端，否则与服务器进行验证。 检验
2017-08-01 10:11:54
280
原创 前端经典面试题---CSS篇
清楚浮动的8种方式清楚浮动的8种方式父级div定义height。父级div定义伪类:after和zoom。（推荐）父级div定义overflow:hidden。父级div定义overflow:auto。父级div也浮动，需要定义宽度。父级div定义display:table。结尾处加空div标签clear:both。结尾处加br标签clear:both。
2017-08-01 10:10:06
498
1
原创 Webpack入门
webpack1.版 webpack2.版（在1.上改进） 2.版的语法有所改进，建议结合官网学习当下的版本简介为什么要使用Webpack什么是WebpackWebPack和Grunt以及Gulp相比有什么特性开始使用Webpack创建packagejson文件安装Webpack创建项目文件打包通过配置文件来使用Webpack更快捷的执行打包任务Webpack的强大功能
2017-07-31 19:24:10
284
原创 网站性能优化
css方面将样式表放到页面顶部不使用CSS表达式使用不使用@import不使用IE的FilterJavascript方面将脚本放到页面底部将javascript和css从外部引入压缩javascript和css删除不需要的脚本减少DOM访问合理设计事件监听器图片方面优化图片：根据实际颜色需要选择色深、压缩优化css精灵不要在HTML中拉伸图片保证favicon.ico
2017-07-31 19:05:45
156
原创 对https的基本认识
为什么需要https由于http是明文传输，所以在发送端与接收端的任意节点（路由器，代理服务器）都知道传输的内容。当用户登陆账号和密码时，密码很容易被这些节点盗取，就算在发送端进行加密，别人仍然可以用加密后的账号密码登陆。https是如何保障安全的https实际上是secure http，即http的安全升级版。http是应用层协议，位于http协议之下的就是传输层tcp，http定义了数据如何包装
2017-07-31 09:46:06
311
原创 前端经典面试题---JS篇
JS阻塞与CSS阻塞闭包如何阻止事件冒泡和默认事件HTML5为什么只需要写 DOCTYPE HTMLlink和import有什么区别介绍一下你对浏览器内核的理解IE和DOM事件流的区别JavaScript如何实现继承JS阻塞与CSS阻塞 JS阻塞特性：由于浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以在下载JS的时候浏览器会阻止其它一切活动，比如其它资源的下载
2017-07-28 13:02:01
409
原创 Mac node.js安装express中间件
1.安装node.js如果已经安装可以跳过这一步，安装方法点我2.安装express打开终端，创建一个工作目录，并进入该目录 $ mkdir myapp $ cd myapp创建一个 package.json 文件$ npm init之后，将要求你输入几个参数，例如此应用的名称和版本。 可以直接按“回车”键接受默认设置即可。下面这个除外：输入当前应用的入口文件的名称，如：app.js（默认：ind
2017-05-05 14:28:47
377
原创 Mac node.js安装和环境配置
Mac node.js安装和环境配置1. 安装node进入node.js官网，下载最新的Nodejs版本，选择稳定版开始下载 下载完成后按照默认的安装步骤安装即可，会自动安装node和npm。可以用node -v，npm -v验证是否安装正确。2.环境配置打开Mac 终端，配置全局环境变量$ vim .bash_profile打开之后添加一行以下代码，（Mac的node，npm可执行文件都在/u
2017-05-05 10:15:27
20681
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人