Vin1992-CSDN博客

原创 React 较难理解的生命周期钩子函数

1. constructor在react中，class 里的constructor 方法用来初始化state和绑定事件方法其中，super作为方法执行父类的构造函数，参数为props 即接受父组件传入的props如果没有执行super, react会报错componentWillReceiveProps（nextProps）执行时间：当一个已mount的react组件接收到新的p

2017-09-26 15:39:59 2492

原创 ES6 学习之promise 基本用法

前言：回调和promise 的区别到底在哪里？ “回调真正的问题在于它们剥夺了我们对一些像return和throw的关键词的使用能力。相反，我们的程序的整个流程都会基于一些副作用。一个函数单纯的调用另一个函数。事实上，回调做了很多更加险恶的事情：它们剥夺了我们的堆栈，这些是我们在编程语言中经常要考虑的。没有堆栈来书写代码在某种程度上就好比驾车没有刹车踏板：你不会知道你是多么需要它，直到你到达了却

2017-09-25 16:31:51 547

原创 ajax readyState 5种状态

0 －（未初始化）还没有调用send()方法 1 －（载入）已调用send()方法，正在发送请求 2 －（载入完成）send()方法执行完成，已经接收到全部响应内容 3 －（交互）正在解析响应内容 4 －（完成）响应内容解析完成，可以在客户端调用了

2017-09-25 15:38:52 607

原创西山寻迹-念沁珠

其实读了庐隐先生的《象牙戒指》不到一半，就有起身赴西山游的冲动了。这周末难得有闲时候，便立刻买了园票去了。西山，是书中张沁珠和伍念秋相识的地方，也是情人约会的爱情胜地。不过从住处去西山，路上也颠簸了近两个小时，一路上的欣喜难以掩盖呢。“沁珠，西山我来了”，为了纪念沁珠凄婉的命运和爱情，也为了纪念我的故事。西山现在被政府立为国家3A级国家森林公园，园区很大，很多地方因为时间有限，难以欣赏其秀美

2017-09-03 20:07:00 658

AngularJS orderBy 使用要点总结：　　1，书写格式基本应用格式为：ng-repeat=”item in itemList | orderBy:p1:p2” 参数p1可以是字段名或自定义函数，p2指是否逆序，默认是false举例：假设$scope中有$scope.itemList=[{id:201,name:’abc’,amount:100},{id:100,name:’zdb’,a

2017-08-28 13:49:02 1625

转载 js正则表达式那些事儿

正则表达式，名字听上去就没有吸引力，我发现很多前端对正则表达式都很难做到如数家珍，每次能够运行全凭运气，更有甚者完全靠复制粘贴，其实这样并不好正则表达式其实并不难，语法就那么多，而且一旦掌握在某些时候能够给解决问题提供捷径，更重要的是面试可能会被问到，要是不会那就尴尬了本文主要介绍正则表达式的语法部分，下面将正则表达式简称为正则正则是啥？同学你可以出门右转了，下面是我自己的理解正则就是用有限的符号，

2017-08-26 16:03:52 347

转载 React 之ref 详解

ref顾名思义我们知道，其实它就可以被看座是一个组件的参考，也可以说是一个标识。作为组件的属性，其属性值可以是一个字符串也可以是一个函数。其实，ref的使用不是必须的。即使是在其适用的场景中也不是非用不可的，因为使用ref实现的功能同样可以转化成其他的方法来实现。但是，既然ref有其适用的场景，那也就是说ref自有其优势。关于这一点和ref的适用场景，官方文档中是这样说的：在从 render

2017-08-22 23:18:29 1620

转载 angularJS的$watch失效问题的解决方案

$watch方法，它可以帮助我们在每个scope中监视其中的变量。$watch 单一的变量对于普通的变量时，如数字，字符串等，直接如下写是可以监视到变量的变化，并执行相应的函数的。$scope.count=1;$scope.$watch('count',function(){...});12341234$watch 多个变量对于多个变量的监视变化，执行同一

2017-08-08 09:28:14 1802

转载小tip: base64:URL背景图片与web页面性能优化

一、base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，可用于在HTTP环境下传递较长的标识信息。某人：唉，我彻底废柴了，为何上面明明是中文，洒家却看不懂嘞，为什么？~~好吧，我也不喜欢专业术语的解释。你只要知道，base64编码就是长得像下面这样子的代码： thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3Nsb

2017-07-09 11:58:37 406

转载 React 数据流与状态控制－props与sate的区别

React 基于状态实现对DOM控制和渲染。组件状态分为两种：一种是组件间的状态传递、另一种是组件的内部状态，这两种状态使用props和state表示。props用于从父组件到子组件的数据传递。组件内部也有自己的状态：state，这些状态只能在组件内部修改。数据流与Props 1.1 设置props 1.2 JSX语法中的属性设置 1.3 props的传递组件内部状态与state Pro

2017-07-09 11:16:11 345

原创 js短路运算&& 和 ||

在js函数中我们经常会使用到短路运算符，主要是逻辑与（&&）和逻辑或（||）1、逻辑与 && 的运算方式var a = 5 && 6;console.log(a); //返回的结果为 6如果逻辑与运算符左边的值布尔转换后为true，那么返回右边的值（不管右边的值是真还是假）。var a = false && 6;console.log(a); //返回的结果为 false如果逻辑与运算符左边的值

2017-06-29 18:52:44 1575

原创 react学习-受控组件（controlled components）

一、问题背景一般的html表单元素对于访问用户输入的数据和表单提交的事件监听处理函数表现平平，而在React中的受控组件可以让这些表单的“天生不足”规避掉。在React受控组件中，所有的html表单都具有统一的value属性，textarea也不例外。这让我们在处理用户输入数据有了极大便利。示例代码：class EssayForm ext

2017-06-28 00:13:18 538

原创 React学习-列表循环中的特殊属性key

一、key的作用 1. key 帮助react确定list中哪些item已更改，添加或删除。 2. 便于在dom变化后，对比新旧DOM具体哪些item已变化，加快虚拟dom渲染和性能提升二、key的使用注意事项 1. 使用数组下标做key是不被推荐的，如果遇到数组排序的情况下，将降低渲染性能。const todoItems = todos.map((todo,

2017-06-25 19:41:46 9500

原创爷爷奶奶也老了

为什么这个世界上爱我的亲人都将慢慢老去。。。

2017-06-24 11:47:50 586

原创 nginx 下 angular应用出现错误状态码问题总结

404 场景1： angular restful 风格路由 nginx服务器无法识别解决办法：三步： a 入口html文件头部添加base标签 b 配置angular路由（ui-router）需指定html5Mode $locationProvider.html5Mode(true).hashPrefix(“!”); c nginx.conf 文件下添加如下配置

2017-06-07 15:52:04 1087

原创 angular的依赖注入笔记

一、依赖注入：依赖注入是一种设计模式，可以自动事先查找依赖关系，在目标需要的时候立即注入进去。AngularJS使用$injetor（注入器服务）来管理依赖关系的查询和实例化。事实上，$injetor负责实例化AngularJS中所有的组件，包括应用的模块、指令和控制器等。二、依赖注入的方式：推断式注入声明：如：app.controller('myController'

2017-06-03 11:23:24 447

转载 angular的uiRouter 嵌套路由学习总结

嵌套状态的方法:状态和状态之间可以互相嵌套,状态的嵌套共有以下几种方式:1.使用'.state()'进行嵌套. 比如 .state('contact',{}).state('contact.list',{})2.使用 ui-router.stateHelper 来创建状态嵌套树. 这种方式需要另外引入依赖,所以很少被使用.也就不具体详解了3.定义状态的'pare

2017-06-01 14:01:11 1116

原创 angularjs 路由使用html5风格具体解决方案

1.angular主模块的.config 配置app.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) { $locationProvider.html5Mode(true); /*angular路由为兼容低版本浏览器，路由会默认使用标签模式（hashbang

2017-05-31 13:58:42 1646

原创 nginx 启动或关闭后出现 pid 找不到或者 pid 非法解决方案

一、pid 找不到windows 下在 logs/新建一个nginx.pid 文件，之后运行 nginx -c /serviceroot/conf/nginx.conf 二、pid 非法运行 nginx -c /serviceroot/conf/nginx.conf

2017-05-31 09:38:59 7869 1

原创 nginx 配置中文详解

2017-05-30 19:18:51 433

转载 Angular 通过注入 $location 获取与修改当前页面URL

以下获取与修改的 URL 以 ( http://172.16.0.88:8100/#/homePage?id=10&a=100 ) 为例【一】获取 (不修改URL)[javascript] view plain copy //1.获取当前完整的url路径 var absurl = $location.absUrl(); //http://172.16.0.88:8100/#/homePag

2017-05-30 16:59:19 574

转载理解Angular的作用域

原文链接：Understanding Scopes在AngularJS中，子作用域通常会原型继承于父作用域。这种情况的唯一例外是当一个指令设置了scope:{ ... } -- 这会创建一个孤立的作用域，该作用域不会进行原型继承。这种设置通常用于创建可复用组件。在指令中，默认情况下直接使用父作用域，这意味着，你在指令中作的任何改动都会同时改变父作用域。如果你设置scope:true（而

2017-05-28 17:56:53 509

转载总结移动端页面开发时需要注意的一些问题

1、防止手机中网页放大和缩小，这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport有些手机网站我们看到如下声明：DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">设置了

2017-05-21 11:35:53 626

转载移动端适配方案总结

背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：1）首先，选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480，现在更多的是iphone6的375×

2017-05-14 19:34:57 5143 1

转载从NPM到CNPM

引用NPM网站上的一句话：npm loves you !NPM是Nodejs的包管理工具，目前NPM社区包的数量已超越C、C++，已然成为全球最大的代码工厂;安装Nodejs后即可开始NPM之旅了，新建一个package.json或者通过npm init，来更好的为NPM服务；配置package.json的dependencies属性和devDependencies属性，指定生产环

2017-05-13 07:56:04 492

原创面试总结

es6 let var const 的区别 let var 区别： let具有块级作用域 var 没有; let不能变量提升 var可以；let不能重复声明；var可以。 let const 区别：let 声明变量，读写均可；const声明常量，只读；联系：二者只在声明的块级作用域内有效；二者都不能变量提升；在保存标量类型的时候，二者相似，但在保存对象数组复合类型，cons

2017-05-06 10:39:01 338

转载移动端界面标注：如何理清标注的思路？

写的很好，这里转载一下，收藏起来。解决问题的工序与方法、清晰的逻辑思维….这些才是你最需要掌握的东西，但它们需要你不停的总结与分析，再多的资源与文章那都不是你的，千万不要用表面的积极去掩盖思想的懒惰！授人以鱼不如授人以渔，我写文章的目的并不是让大家完全按照我的方法来做，而是希望我们都能提高自己的思维方式，因为现在网上的方法与经验实在太多（又不能确定都是正确的），你的大脑永远无法承载整个互联网的信

2017-04-28 20:30:02 1134

转载 document.documentElement和document.body的区别

js 中 documentElement和body的区别

2017-04-22 18:02:35 721

转载分步骤详细解说：H5性能优化方案

H5性能优化意义对于一个H5的产品，功能无疑很重要，但是性能同样是用户体验中不可或缺的一环。原本H5的渲染性能就不及native的app，如果不把性能优化做起来，将极大地影响用户使用产品的积极性。用户感受当用户能够在1-2秒内打开H5页面，看到信息的展示，或者能够开始进行下一步的操作，用户会感觉速度还好，可以接受；而页面如果在2-5秒后才进入可用的状态，用户的耐心会逐渐丧失；而如果一个界面超过5

2017-04-20 21:21:49 2117

转载 Gulp和webpack的区别，是一种工具吗？

背景：最近收到很多童鞋的问题：gulp和webpack 什么关系，是一种东西吗？可以只用gulp，不用webpack吗或者反过来？基于此问：我简单归结了一下区别和概念，让需要的同学阅读理解，从而不把时间浪费到这种模糊不清的选择问题上！gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译替代手工实现自动化工作1.构建工具2.自动化3.提高效率用webpack是文件

2017-04-19 19:08:20 411

转载 atom无法安装插件解决方法

atom通过setting中无法下载插件，通过apm也无法下载插件，可能是网络、config配置的问题，不好解决。下面的方法全手动，基本属于万金油方法：1，在atom的setting页面中点击open config folder进入到atom的配置项目，然后转到该项目下的windows窗口进入package文件夹，这将是我们放置插件包的地方。 2，打开https://atom.io/pack

2017-04-01 11:26:16 9256 1

转载 vue-cli#2.0 webpack 配置分析

2017-03-31 11:43:50 864

原创细节决定成败

用flex 写一个简单的响应式多栏布局，自己写的和demo里写的一模一样，但是就是看不到想要的效果。那一刻，我心里有一万只草泥马奔腾而过，开始严重怀疑自己的智商是否低级到照猫画猫的事情都做不了！ what the F**K！憋住心里的复杂的心情，点了一支烟，默默抽完。回来之后，继续复查，把所有代码删了重写再写了一遍，这次却意外成功了！我擦，看来世界上没有鬼！最后，我把错误揪出来了，

2017-03-30 00:01:27 484

转载 Javascript对象中关于setTimeout和setInterval的this介绍

在Javascript里，setTimeout和setInterval接收第一个参数是一个字符串或者一个函数，当在一个对象里面用setTimeout延时调用该对象的方法时复制代码代码如下:function obj() { this.fn = function() { alert(“ok”); console.log(this); setTimeout(this.fn, 100

2017-03-29 22:36:14 238

原创 js高级技巧---函数绑定

使用场景：把一个含有this的函数作为值传入另一个函数中运行，此时造成this指向错误的对象。主要出现在事件处理程序以及setTimeout(),setInterval() 使用中。如何绑定？ECMAScript5 定义了bind()原生方法，解决此问题。 bind() 函数意在将函数的执行环境原封不动的同被传函数传入到另一个函数中。<!DOCTYPE html><html lang="e

2017-03-29 21:42:29 440

原创 CSS3弹性盒布局总结（二）

昨天发现flex属性的总结（一）里的属性和w3cschool里的flex属性有很多都是重复的功能。今天翻了一篇w3cplus里的一篇文章：戳这里，发现其实是flex语法的两个不同的版本。昨天那个比较老，今天总结的是最新的语法标准。

2017-03-28 13:15:31 393

原创 CSS3过渡和动画

随想：为什么要写博客，原因之一：写博客也是大脑缓存的一种方式。可以把写博客看做是将知识碎片整理并写入一个“缓存文件”，当每次需要使用这个知识点的时候，直接回头看博客，而不用转动大脑搜索知识碎片，而且大多是不完整的，碎片化的，无法系统的连接起来，博客也一定程度上起到了缓解CPU（大脑）的运行压力。有意思正题： CSS3 过渡和动画，区别这两个概念，有助于记忆其属性。过渡：一点到另一点；没有完成时间

2017-03-28 12:55:50 757

原创 JavaScript之原型对象学习总结

一、原型是什么？男孩子应该不少人都玩过经典单机游戏《虐杀原型》，说实话，也是这款游戏让我对单机游戏情有独钟，游戏的剧情设定，人物刻画以及游戏本身的精彩，哈哈，意犹未尽。转入正题，游戏的大致剧情，主角Alex（好像是这个名字）是一名退伍军人，后来被军方某神秘生化实验室抓去，做了一些特殊的二次改造，后来拥有超凡能力，后来家人被杀。Alex便开始追杀凶手，凶手正是Alex的“原

2017-03-25 22:20:00 268

原创 CSS3 弹性盒布局总结（一）

一、css3弹性盒是什么？一种提供响应式布局的解决方案，与传统的CSS2盒模型在子元素表现上有很大不同。具体不同是在盒子会自动随着外部元素的宽度或者设备宽度不同而动态分配宽度。二、布局结构：父元素+n个子元素父元素以box-开头的相关属性：1. display:flex 声明弹性盒布局2. box-orient（horizontal|ve

2017-03-25 13:45:32 1091

原创对面向对象的再学习之总结

在写之前，突然想到了一句话：程序员也要有程序员的高风亮节和骨气，不拿来主义，不做伸手党，最没节操的就是拿来之后直接压箱底儿了。闲言少叙，正题。一、对象是什么？为什么要面向它？对象，说白了就是键值对的一个集合，而其中的值又可以是数据或者函数而已。面向对象，实际是一种程序设计的方式。上古时代的编程一般都是面向过程式的，想到一行写一行，除了if else 就是无穷的一个接一

2017-03-24 18:11:11 928

空空如也

空空如也