自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(36)
  • 收藏
  • 关注

转载 前端面试之道

小册食用指南这本小册涉及的内容十分广,在这里我提供了一份小册的食用指南,帮助你更好地阅读小册。无论是你刚刚开始学习小册还是想复习小册内容,这份食用指南都能很好地帮助到你。购买前警告⚠️此小册不适合完全没有前端基础的人阅读,需要各位掌握基本的 HTML、JS,担心小册质量或者是内容是否适合自己的,请先浏览试读章节再做购买决定 小册还在预售中,所以内容是还没有完结的,但是大家不需要担...

2019-02-12 17:44:01 1836

转载 JS工具类

js 工具类/** * 判断指定名称的复选框是否被选中 * * @param {} *            chname复选框名称 */function chkCheckCha(chname) {    var obj = jQuery("[name='" + chname + "']");    var isCheck = false;    for (var i = 0; i < ob...

2018-06-29 11:11:27 358

转载 React 源码剖析系列 - 不可思议的 react diff

目前,前端领域中 React 势头正盛,使用者众多却少有能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然。React diff 作为 Virtual DOM 的加速器,其算法上的改进优化是 React 整个界面渲染的基础,以及性能提高的保障,同时也是 React 源码中最神秘、最不可思议的部分,本文从源码入手,深入剖析 React...

2018-06-19 15:56:45 217

原创 React 生命周期

前言学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助.Ract生命周期React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁初始化1、getDefaultProps()设置默认的props,也可以用dufaultProps设置组件的默认属性.2、getInitialState()在使用es6的class语法时是没有这个钩子函数的,可以直接在co...

2018-06-19 15:33:30 149

转载 JavaScript 的 this 原理

一、问题的由来学懂 JavaScript 语言,一个标志就是理解下面两种写法,可能有不一样的结果。var obj = { foo: function () {}};var foo = obj.foo;// 写法一obj.foo()// 写法二foo()上面代码中,虽然obj.foo和foo指向同一个函数,但是执行结果可能不一样。请看下面的例子。var obj = { ...

2018-06-19 11:58:16 290

原创 HTTP与HTTPS的区别

超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂其中的信息,因此,HTTP协议不适合传输一些敏感信息,比如:信用卡号、密码等支付信息。  为了解决HTTP协议的这一缺陷,需要使用另一种协议:安全套接字层超文本传输协议HTTPS,为了数据传输的安全,...

2018-05-28 17:23:37 203

原创 React props和state的区别

React中通过状态实现dom的渲染,组件状态分为两种:props和state。props props是指组件间的状态传递,由于React是单向数据流(自上而下)的,所以props从父组件传递给子组件。在组件之间通信用 组件内部的this.props属性是只读的,不能修改state state是组件内部的状态,只能通过setState来改变,用来更新组件内部

2017-11-21 17:24:41 345

转载 深度剖析:如何实现一个 Virtual DOM 算法

目录:1 前言2 对前端应用状态管理思考3 Virtual DOM 算法4 算法实现4.1 步骤一:用JS对象模拟DOM树4.2 步骤二:比较两棵虚拟DOM树的差异4.3 步骤三:把差异应用到真正的DOM树上5 结语6 References1 前言本文会在教你怎么用 300~400 行代码实现一个基本的 Virtual DOM 算法,并且尝试尽量把 Virtua

2017-11-13 17:00:23 163

原创 Flux 架构入门教程

Flux 架构入门教程过去一年中,前端技术大发展,最耀眼的明星就是React。React 本身只涉及UI层,如果搭建大型应用,必须搭配一个前端框架。也就是说,你至少要学两样东西,才能基本满足需要:React + 前端框架。Facebook官方使用的是 Flux 框架。本文就介绍如何在 React 的基础上,使用 Flux 组织代码和安排内部逻辑,使得你的应用更易于开

2017-09-27 15:20:55 219

原创 如何判断Javascript对象是否存在

如何判断Javascript对象是否存在Javascript语言的设计不够严谨,很多地方一不小心就会出错。举例来说,请考虑以下情况。现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明。用自然语言描述的算法如下:  if (myObj不存在){    声明myObj;  }你可能会觉得,写出这段代码很容易

2017-09-27 15:18:06 204

原创 Javascript面向对象编程(三):非构造函数的继承

Javascript面向对象编程(三):非构造函数的继承这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承"。今天是最后一个部分,介绍不使用构造函数实现"继承"。一、什么是"非构造函数"的继承?比如,现在有一个对象,叫做"中国人"。  var Chinese = {    nation:'中国'  };还有

2017-09-27 15:13:10 174

原创 Javascript面向对象编程(二):构造函数的继承

Javascript面向对象编程(二):构造函数的继承这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例。今天要介绍的是,对象之间的"继承"的五种方法。比如,现在有一个"动物"对象的构造函数。  function Animal(){    this.species = "动物";  }还有

2017-09-27 15:12:20 152

原创 Javascript 面向对象编程(一):封装

学习Javascript,最难的地方是什么?我觉得,Object(对象)最难。因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握。下面就是我的学习笔记,希望对大家学习这个部分有所帮助。我主要参考了以下两本书籍:《面向对象的Javascript》(Object-Oriented JavaScript)《Jav

2017-09-27 15:10:43 159

原创 npm scripts 使用指南

npm scripts 使用指南Node 开发离不开 npm,而脚本功能是 npm 最强大、最常用的功能之一。本文介绍如何使用 npm 脚本(npm scripts)。一、什么是 npm 脚本?npm 允许在package.json文件里面,使用scripts字段定义脚本命令。{ // ... "scripts": { "b

2017-09-27 14:50:21 213

原创 JavaScript 内存泄漏教程

JavaScript 内存泄漏教程一、什么是内存泄漏?程序的运行需要内存。只要程序提出要求,操作系统或者运行时(runtime)就必须供给内存。对于持续运行的服务进程(daemon),必须及时释放不再用到的内存。否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃。不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak)。

2017-09-27 14:40:14 229

转载 深入理解JavaScript中的this

定义this是执行上下文中的一个属性:activeExecutionContext = { VO: {...}, this: thisValue};这里VO是我们前一章讨论的变量对象。this与上下文中可执行代码的类型有直接关系,this值在进入上下文时确定,并且在上下文运行期间永久不变。下面让我们更详细研究这些案例:全局代码中的thi

2017-09-27 11:36:27 212

原创 React 组件基本使用(三) ---父子组件之间的通信

React 组件基本使用(三) ---父子组件之间的通信  当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信。父组件通过props 给子组件传递数据,子组件则是通过调用父组件传给它的函数给父组件传递数据。  很简单的一个例子,我们在输入框中输入温度,输入框下面显示冷和热。这里就有两

2017-09-26 17:11:56 856

原创 React 组件基本使用(二)

React 组件基本使用(二)  条件渲染  React中的条件渲染和我们平常写的js 代码一样,都是用的if else, 只不过在if else 中它的返回值是jsx, 根据不同的条件渲染不同的UI. 先写两个组件    //登录的用户显示欢迎 function UserWelcome(){ return Welcome

2017-09-26 17:10:06 298

原创 React 组件基本使用(一)

React 组件基本使用(一)  React 提供了两种方式来声明组件,一种是函数式,一种是类式,就是用es6 class, 我们所有的组件都继承自React.Component.  函数式很简单,就像我们平常写函数一个,接受一个参数作为输入,然后进行相应的输出,只不过它输出的jsx.// welcome 函数式组件。function Welcome(pr

2017-09-26 16:24:46 1865

原创 从零搭建React全家桶框架教程

写在前面当我第一次跟着项目做react项目的时候,由于半截加入的,对框架了解甚少,只能跟着别人的样板写。对整个框架没有一点了解。做项目,总是要解决各种问题的,所以每个地方都需要去了解,但是对整个框架没有一个整体的了解,实在是不行。期间,我也跟着别人的搭建框架的教程一步一步的走,但是经常因为自己太菜,走不下去。在经过各种蹂躏之后,对整个框架也有一个大概的了解,我就想把他写下来,让

2017-09-23 10:00:27 412

转载 js中的事件委托或是事件代理详解

起因:1、这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的;2、其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考;概述:那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。那这是什么意思呢?网上的各位大牛们

2017-09-08 01:59:51 191

转载 Chrome 中的 JavaScript 断点设置和调试技巧

你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容。嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题。不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了。本文主要介绍其中的 JavaScript 断点设置和调试功

2017-04-12 18:34:09 266

原创 Php中使用Select 查询语句的实例

php中要查询mysql数据库中的内容我们必须先连接mysql数据库,然后再利用sql语句进行查询,下面我们来看一些例子吧sql有许多对数据库操作的语句。但是常见和比较需要的是这么几个语句 。SELECT 语句用于从数据库中选取数据。 那么我们先来介绍第一种 SELECT语句语句1:SELECT *  FROM table_name解说:意思就是读取整个表table_n

2017-03-23 15:48:43 1181

原创 foreach

foreach(PHP 4, PHP 5, PHP 7)foreach 语法结构提供了遍历数组的简单方式。foreach 仅能够应用于数组和对象,如果尝试应用于其他数据类型的变量,或者未初始化的变量将发出错误信息。有两种语法:foreach (array_expression as $value) statementforeach (array_exp

2017-03-22 19:28:11 218

原创 JavaScript三元运算符的多种使用技巧

JavaScript三元运算符的多种使用技巧发现代码慢慢写多了的时候会不自觉的将if else 用 三元来替代,仅仅是未了让代码更简洁精辟,当然也有人说用三元可以让你有高潮的感觉。最近在写js 的时候也有这样的感觉,并且收集了一些小技巧,分享分享。大鸟请跳过下面这段,大大鸟帮忙指正 ^__^====普及线====表达式 (expr1) ? (expr2) : (

2017-03-22 13:01:42 4957

原创 javascript闭包操作

闭包,是javascript中独有的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它。因此,本文不会对闭包的概念进行大篇幅描述,直接上干货,让你分分钟学会闭包!一、闭包–爱的初体验  在接触一个新技术的时候,我首先会做的一件事就是:找它的demo code。对于码农们来说,代码有时候比自然语言更能理解一个事物。 其实

2017-03-07 19:06:50 306

原创 词法作用域

作用域域表示的就是 范围, 即 作用范围. 就是一个名字在什么地方可以被使用, 什么时候不能使用.块级作用域即块级别的作用范围 // 在 C , Java 等编程语言中, 下面的语法报错 { var num = 123; // int { console.log( num ); // => 123

2017-03-06 11:38:56 481

转载 <jsp:include page="">和<%@ include file=""%>区别总结

和区别总结1::先将top.jsp中的Java脚本和jsp指令都执行完毕以后再将top.jsp页面加入到引用页面中。2:静态读取:则是将top.jsp的整个页面不加解析(无论是脚本还是指令)统统读入到引用页面中,然后和引用页面一起进行解析(即开始执行脚本和指令)。3:区别:其实上边的两条就是区别,但是需要注意的是用的时候被引用页面中不能再出现其他网页标签和page指令了,否则会冲突

2017-02-23 12:40:17 1385

转载 webpack+react+es2015轻松环境搭建,配置,运行项目

摘要: webpack的模块化,react的组件化,以及es2015的各种新特性都很吸引人,如何将他们联合起来写出让人身心愉悦的项目代码,这是本文的中心。 本文手把手教新手搭建环境创建项目,可能有的概念描述的不清楚,但绝对是能轻松运行起来的(ps:网上大多数教程都是偏概念的,经常按着教程走到后来还是运行不起来项目或者不支持es6的语法【ps:加载器的问题】等,但真正对新手困难的还是环境的搭建和配置

2017-02-20 11:46:15 1646

转载 Git 入门学习

Git 工作流程一般工作流程如下:克隆 Git 资源作为工作目录。在克隆的资源上添加或修改文件。如果其他人修改了,你可以更新资源。在提交前查看修改。提交修改。在修改完成后,如果发现错误,可以撤回提交并再次修改并提交。下图展示了 Git 的工作流程:Git 工作区、暂存区和版本库基本概念我们先来理解下Gi

2017-02-16 16:50:22 282

原创 JavaScript中变量提升 Hoisting

一。案发现场 我们先看一段很简单的代码: 复制代码代码如下:var v='Hello World'; alert(v); 这个没有疑问吧,弹出“Hello World”。OK,我们继续。 我们在看一段Code: 复制代码代码如下:var v='Hello World'; (function(){ alert(v); 

2017-02-14 15:02:54 236

原创 Babel6.x的安装

1、首先安装babel-cli(用于在终端使用babel)    npm install -g babel-cli 2、然后安装babel-preset-es2015插件  npm install --save babel-preset-es2015  注:Babel5版本默认包含各种转换插件,然而Babel6.x相关转换插件需要自己下载,如tran

2017-02-10 12:47:30 373

原创 babel将es6转换成es5

Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持。下面是一个例子。// 转码前input.map(item => item + 1);// 转码后input.map(function (item) { return item + 1;});上

2017-02-10 11:18:26 6877

转载 json和jsonp的区别

由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能,但这两种方式都有其局限性,前者需要PhoneGap支持,后者要求用户设备必须支持WebSocke

2017-02-09 12:20:13 224

转载 ES6/ES2015核心内容(下)

在30分钟掌握ES6/ES2015核心内容(上)我们讲解了es6最常用的一些语法:  let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments  俗话说打铁要趁热,今天我们继续讲es6其他几个非常有用的新特性。 

2017-02-09 12:08:20 332

转载 掌握ES6/ES2015核心内容(上)

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。   也就是说,ES6就是ES2015。   虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6,但为了看懂别人的你也

2017-02-09 11:45:28 668

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除