Deng_gene的博客

原创 前端图片压缩和角度修正

前端图片压缩一、图片压缩前端图片压缩主要使用canvas将图片画到画布上，在图片绘制之前，先按照一定的宽高计算出要缩小的倍数，然后比较宽度和高度缩小的倍数，哪个倍数值比较大使用哪个进行压缩计算出最终的画布大小以及要绘制的图形大小；以下是图片上传代码：function clipImage(file, callback) { const canvas = doc...

原创 关于host文件与开发环境加载慢的问题（chrome下）

最近出现一个问题：给地址栏在host文件配置域名后，开发环境加载时间过长，读取内存里的JS会出现加载20s左右，向后台发请求会出现20s左右才传输到后台的情况，经过排查发现使用FireFox能正常，用127.0.0.1也能正常，只要使用域名访问就会出现加载时间过长的情况，原来是域名的IP和本机的IP不一样导致的，将IP改成本机IP以后发现能正常开发了。希望这篇文章能给前端开发的小伙伴带来帮助。...

原创 操纵浏览器的历史记录

 window 对象通过history对象提供对浏览器历史记录的访问能力。它暴露了一些非常有用的方法和属性，让你在历史记录中自由前进和后退，而在HTML5中，更可以操纵历史记录中的数据。历史记录概览EDIT可以通过back()，forward()和go()方法在用户的历史记录中前进与后退。前进与后退要历史记录中后退，只需要这样做：window.history.back();这种行动就非常像用户在浏...

转载 react

本文基本跟着官方文档把API都走一遍，但会有实例来解释应该怎么用，木有比我更详细的API文档咯。React.createClass参数：CONFIG（object）创建一个ReactClass（组件类），参数是一个对象且必须带有 render 属性方法，该方法必须返回一个封闭的容器（容器内可以有其它不限结构的容器）或 null/false（表示啥都不渲染）：var Component = Reac...

原创 关于react组件渲染两次的问题

可能会有人问，问什么我的组件明明是就让渲染一次，但是实际上却渲染两次呢？其实我也遇到了这个问题，那么下面我提出一种解决这个问题的一种方法。如果你使用了react-router低于4.x版本中的hashHistory，那么问题就来了，出现这种情况的原因是因为router中进行了一次push和一次pop，所以出现两次渲染，你只需要在shouldComponentUpdate()这个生命周期钩子中做

原创 webpack 代码压缩优化篇

Webpack 默认提供的 UglifyJS 插件，由于采用单线程压缩，速度颇慢 ；推荐采用 webpack-parallel-uglify-plugin 插件，她可以并行运行 UglifyJS 插件，更加充分而合理的使用 CPU 资源，这可以大大减少的构建时间；当然，该插件应用于生产环境而非开发环境，其做法如下，new webpack.optimize.UglifyJsPlugi

原创 关于react中阻止冒泡的方法

stopPropagation: function(e){ e.stopPropagation(); e.nativeEvent.stopImmediatePropagation();}这就可以阻止react中冒泡了

原创 图片上传及显示

简单明了的图片上传及显示$(fileId).change(function(){var objUrl = getURL(this.files[0]);if(objUrl){$("img").attr("src",objUrl);}})//获取图片路径function getURL(file){var url=null;if (wind

原创 webstorm永久注册码

按图操作即可获取webstorm的永久使用。http://idea.iteblog.com/key.php

原创 在JQ上定义滚动条插件

$.fn.definedScroll = function(direction, childId, scrollId) {var parent = $(this),child = parent.find(childId),scroll = parent.find(scrollId);var childDiffHeight = child.height() - parent.

原创 git操作指南

创建版本库 mkdir learngit --创建空目录 cd learngit --切换到新创建的目录下  pwd -- 显示当前目录git init -- 把目录变成可以Git管理的仓库  ls -ah -- 查看目录下的文件，包括隐藏文件touch readme.md --新建文件  git add readme.txt--把文件添加到

原创 关于cookie的设置，查看和删除

function setCookie(c_name, value, expiredays){  //设置cookie函数    var exdate=new Date();    exdate.setDate(exdate.getDate()+expiredays);    document.cookie=c_name+ "=" +escape(value)+    ((!expi

原创 git 删除远程文件夹

由于本地修改了文件夹大全名大小写的原因，同步到git上并不区分大小写，造成了一些文件同步不了，所以要先把git远程库上文件夹删除掉，然后再重新同步如下，我把src里的全部移除，但是本地文件还保留。git rm -r -n --cached  /build     //-n：加上这个参数，执行命令时，是不会删除任何文件，而是展示此命令要删除的文件列表预览。 git rm -r

原创 关于JS触发全屏和退出全屏的介绍

最近项目中用到了给一个div添加一个全屏模式，所以找了下关于JS的全屏触发和解除的事件来分享一下；前面写了一篇文章介绍js的全屏操作 在写判断全屏的地方有遗漏，这里单独拿出来再写一篇专门判断全屏的文章。判断浏览器是否支持requestFullscreen首先是一段判断浏览器是否支持h5全屏api（requestFullscreen）的代码，如下：

原创 面向对象之寄生组合继承

最近在使用面向对象编程，发现原型继承和构造函数继承的组合还是有点小缺陷，于是乎又把JS高级程序设计第六章面向对象又看了一遍，发现寄生组合继承确实挺好，就分享给大家。function object( o ) { function F () {}; F.prototype = o; return new F()};function inheritPrototype ( SubTy

转载 关于Cookie安全性设置的那些事

一、标题：关于Cookie安全性设置的那些事       副标：httponly属性和secure属性解析 二、引言经常有看到XSS跨站脚本攻击窃取cookie案例，修复方案是有httponly。今天写出来倒腾下...2.1首先必须的预备cookie知识。假如你第一次认识cookie,请先阅读这篇文章：js于cookies.zip、googl

转载 操纵浏览器的历史记录

window 对象通过history对象提供对浏览器历史记录的访问能力。它暴露了一些非常有用的方法和属性，让你在历史记录中自由前进和后退，而在HTML5中，更可以操纵历史记录中的数据。历史记录概览EDIT可以通过back()，forward()和go()方法在用户的历史记录中前进与后退。前进与后退要历史记录中后退，只需要这样做：window.history.ba

原创 关于react-native init <file>失败的问题

npm config set registry https://registry.npm.taobao.orgnpm config set disturl https://npm.taobao.org/dist先把镜像改了然后再初始化就好了

转载 控制浏览器全屏的事件

浏览器全屏模式的启动函数requestFullscreen仍然需要附带各浏览器的js方言前缀// 判断各种浏览器，找到正确的方法function launchFullscreen(element) {  if(element.requestFullscreen) {    element.requestFullscreen();  } else if(element.m

原创 JS判断鼠标单双击事件

"button" onclick="fn()" ondblclick="fun()" value="点我">"javascript">  var flag;  function aa(){    flag = false;    setTimeout(fn, 500);    function fn(){      if(flag != false)

原创 关于canvas画的背景图在chrome下出现闪屏的解决方案

最近在画人物关系拓扑图，当拖拽小图标的时候会出现显屏效果，百度半天没找到解决方案，最终无奈把图片转成base64编码的格式存放在数组中，就解决这个问题了，希望以后也出现这种问题的同事能很快解决这种bug；

转载 pageX、clientX、screenX、offsetX、layerX、x

参考：http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome：e.pageX——相对整个页面的坐标e.layerX——相对当前坐标系的border左上角开始的坐标e.offsetX——相对当前坐标系的border左上角开始的坐标e.clientX——相对可视区域的坐标e.x——相

转载 angular五种服务详解

在这之前angular学习笔记(十五)-module里的'服务'这篇文章里,已经大致讲解了ng中的'服务',在之后的很多地方也用到了服务,但是,所有的服务都是使用app.factory来创建的.但其实,创建服务有5种方法,这篇文章就来具体讲解ng中的五种服务类型.首先,为了举栗子,先写好如下的模型,控制器,html:html:DOCTYPE html>html ng-

转载 react 项目的一个ie8兼容性问题

时间 2016-05-30 11:28:47  阿里巴巴国际UED原文  http://www.aliued.com/?p=3240主题 React相信现在很多人在使用react+webpack做项目，然后通过babel来解决ES6/7的兼容性问题，对于ie8的兼容也有一些经验和方案。不过今天在解决汇金账房的ie8兼容过程中仍然遇到一个坑，同时发现现有资料的一些问题

原创 JavaScript中array.every()和array.some()的区别

Array.prototype.every()概述every() 方法测试数组的所有元素是否都通过了指定函数的测试。语法arr.every(callback[, thisArg])参数callback用来测试每个元素的函数。thisArg执行 callback 时使用的 this 值。描述every 方法为数组中的每个元素

原创 react 高级性能

人们首先会考虑的是 React 是能否和其他非 React 版本一样能快速和响应一个项目。重新绘制组件的整个子树来回应每一个状态变化的想法让人怀疑是否这个过程中对性能产生负面影响。React 使用几个巧妙的技巧，以减少所需的更新用户界面所需要的昂贵的文档用户模型操作的数目。避免调和文档对象模型React 使用了一个虚拟的 DOM，这是的浏览器中对于 DOM 树呈现的一个描述符。这种

原创 react 生命周期

可能刚开始的小伙伴们对react生命周期不是很了解，那我接下来为大家介绍一下什么事react生命周期和如何使用实例化首次实例化getDefaultPropsgetInitialStatecomponentWillMountrendercomponentDidMount实例化完成后的更新getInitialStatecomponentWillMountre

转载 有关fetch跨域问题

最近用fetch与后台进行数据交互出现各种问题，尤其是跨域问题很让人头疼，今天找到一篇文章，觉得不错，向大家推荐一下同源策略可谓同源？URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。浏览器的同源策略，限制了来自不同源的"document"或脚本，对当前"document"读取或设置某些属性，即从一个域上加载的脚本不允许访问另外一个域

转载 promise的用法

1、Promise的含义Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise

转载 Node.js buffer

好吧，本以为node中的Buffer只是nodeJS中挺小的一块，仔细的翻阅了一些资料之后才发现，冰川总是将其巨大的屁股藏在海平面以下的，这次也是主要简单的讲一下关于Buffer比较浅的一些东西（针对Node初学者啦~）Buffer 是什么？对于JavaScript来说，对Unicode编码的数据很容易处理的但是对于二进制数据就没什么处理方法了。但是在一些TCP数据流或者在操作一些

原创 向后台请求数据的方式

转载 react入门

本文基本跟着官方文档把API都走一遍，但会有实例来解释应该怎么用，木有比我更详细的API文档咯。React.createClass参数：CONFIG（object）创建一个ReactClass（组件类），参数是一个对象且必须带有 render 属性方法，该方法必须返回一个封闭的容器（容器内可以有其它不限结构的容器）或 null/false（表示啥都不渲染）：var Co

转载 Javascript 中的神器——Promise

Promise in js回调函数真正的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力。而 Promise 很好地解决了这一切。2015 年 6 月，ECMAScript 6 的正式版 终于发布了。ECMAScript 是 JavaScript 语言的国际标准，JavaScript 是 ECMAScript 的实现。ES6 的目标，是使

转载 欢迎使用CSDN-markdown编辑器

本文介绍用 Gulp 和 Babel 6 来将 ES6 代码转换成 ES5 代码。安装依赖 安装全局 Gulpnpm install -g gulp 安装项目中使用的 Gulpnpm install –save-dev gulp 安装 Gulp 上 Babel 的插件npm install –save-dev gulp-babel 安装 Babel 上将 ES6 转换成 ES5 的插件n

转载 Sass 中的@for的应用

在制作网格系统的时候，大家应该对 .col1~.col12 这样的印象较深。在 CSS 中你需要一个一个去书写，但在 Sass 中，可以使用 @for 循环来完成。在 Sass 的 @for 循环中有两种方式：@for $i from through @for $i from to $i 表示变量start 表示起始值end 表示结束值这两个的区别是关键字 thr

转载 数组去重的方法

面试前端必须准备的一个问题：怎样去掉Javascript的Array的重复项。据我所知，百度、腾讯、盛大等都在面试里出过这个题目。 这个问题看起来简单，但是其实暗藏杀机。 考的不仅仅是实现这个功能，更能看出你对计算机程序执行的深入理解。    我总共想出了三种算法来实现这个目的：Array.prototype.unique1 = function(){ var n = []