kongjunchao159-CSDN博客

原创 JS计算两个数字之和算法

问题：计算两个数字的和？分析：众所周知，Number类型的值有个上限，如果是两个极大的数字相加求和，便不能使用最简单的+方法，可以将两个数字当成字符串去处理，从最末尾开始相加，注意递进的位数，最后得到相加的字符串实现：//参数a、b均为字符串正整数，求和function add(a, b){ var aLen = a.length, bLen = b.length, max

2017-06-21 11:09:17 7670 1

原创 React组件之间的传值

父组件向子组件传值？传参，props接收子组件向父组件传值？回调函数这里重点说一下无关系组件之间的交互React中没有任何嵌套关系的组件之间如何传值？方案一：全局广播的方式，即Publish/Subscribe，需要引入PubSubJS库链接：https://github.com/mroderick/PubSubJS例子：//主容器var Main = React.c

2017-05-25 14:38:18 5039 1

原创 H5的postMessage解决跨域问题

为了解决的问题：1、页面与其它窗口的数据传递2、页面与嵌套的iframe的数据传递3、跨域数据传递HTML5引入了message的API，使用postMessage()方法可以允许来自不同域的脚本异步方式通信，可以实现跨文本档、多窗口、跨域的消息传递参数postMessage(data, origin)data:需要传递的数据，因为部分浏览器只能处理字符串类型，所以需要

2017-05-24 10:15:25 1590 2

原创多个setState方法的调用原理

React中通过使用setState来更新组件的状态，触发rendersetState被调用时发生了什么？React首先将你传递给setState函数的对象合并到当前状态中，然后创建一个React元素树，对比新旧树的差别，并根据你传递给setState函数对象的不同，计算出相应的变化部分，最终完成DOM更新因为包含了大量的工作，调用setState可能并不会立即更新你的state，为异

2017-05-22 15:44:08 4106

原创 React生命周期过程说明

React生命周期过程说明初始化：（getDefaultProps） -- 只调用一次，可以设置默认的propsgetInitialState -- 初始化state，此时可以访问this.propscomponentWillMount -- 仅执行一次rendercomponentDidMount -- 仅执行一次组件存在后，状态改变接收到

2017-05-22 14:57:59 631

原创 JS字符串的常用方法汇总

//concat方法var a = 'ABC';var b = 'DEF';a.concat(b);//ABCDEF//includes方法//返回一个布尔值，表示传入的字符串参数是否包含在字符串对象中'abcde'.includes('cd') //true'abcde'.includes('cd', 2) //true，第二个参数表示测试起始位置'abcde'.inc

2017-04-12 10:56:01 845

原创 JS中对象属性的可枚举性

在JS中，对象的属性分为可枚举和不可枚举，它是由属性的enumerable值决定的，true为可枚举，false为不可枚举JS中预定义的原型属性一般是不可枚举的，而自己定义的属性一般可枚举可以通过propertyIsEnumerable方法判断该属性是否可枚举属性的枚举性会影响以下三个函数的结果：for ... in ...Object.keys()JSON.stringi

2017-04-11 15:15:52 1471

原创 JS对象Object的常用方法汇总

//Object.assign函数//将来自一个或多个源对象中的值复制到一个目标对象var first = {name : 'kong'};var last = {age : 18};var person = Object.assign(first, last);console.log(person);//{name : 'kong', age : 18}//用于克隆对象var c

2017-04-11 15:06:13 6392

原创 React报错Warning:setState(...):Can only update a mounted or mounting component...

React项目中报错：实际在调试过程中发现，仅当在页面间快速切换的时候会出现该警告，原因是组件中的setState方法（也有一些setTimeout情况下）是异步执行的，当你在快速切换组件的时候，组件虽然已经被卸载，但是该方法还在异步调用，所以报错解决方案：组件将要被卸载的时候，会触发React中的componentWillUnmount方法，该方法是React生命周期的一部分

2017-03-23 11:57:35 6871

原创 React项目中Fetch无法向后端传递参数

问题：React项目中使用fetch向后端传递数据，POST请求时，发现把参数装进一个对象传递，后端并不能获取到数据，拼接成字符串加在URL中传递也不行（当然，GET请求可以）解决：使用FormData传递参数let formData = new FormData();formData.append('name', 'kong');formData.append('age', '1

2017-03-22 13:57:11 15441

原创 JS数组Array的全部方法汇总

//constructor属性var arr = [];arr.constructor === Array//true//prototype属性Array.prototype.max = function(){ var max = this[0]; for(var i = 1; i < this.length; i++){ if(this[i] > max){ max

2017-03-22 13:36:58 6202

原创 data、attr、prop的一些坑

在一个项目中使用jquery的data方法和attr方法操作元素的属性时遇到了一些坑，特此整理下data、attr、prop的区别问题来源：某个元素具有data-key属性，js使用xx.attr('data-key')操作该元素，在chrome开发者工具中查看Elements，该元素的data-key属性确实更改为新赋予的值，但是在用xx.data('key')取值的时候，发现还是原先最

2017-03-22 11:20:42 557

原创火狐浏览器表单自动填充问题

问题：在含有表单元素的页面中，如input，有时候浏览器（火狐）会自动记录表单值，在刷新过后，将你填过的值自动填充进去解决：如果需要禁止这种行为，可以使用autocomplete="off"属性，与其对应的是autocomplete="on"注意，该属性仅适用于和，且Chrome浏览器暂未发现会自动填充的问题参考链接：http://www.w3school.com.cn/tags/

2017-03-22 10:29:34 6611

原创 jquery的trigger方法

trigger方法：可以手动触发通过on或其它方式绑定到某元素的事件，例如click、change、submit等例子：$('#id').on('click', function(){})$('#id').trigger('click')triggerHandler方法：类似于trigger，但是不会触发元素的默认行为，例如a标签的跳转行为，submit的提交行为等

2017-03-15 22:31:17 1417

原创 JS中的bind()方法

Function.prototype.bind()方法bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()第一个参数的值，例如，f.bind(obj)，实际上可以理解为obj.f()，这时，f函数体内的this自然指向的是obj例子var a = { b : function(){ var func = f

2017-03-01 17:59:17 29985 4

原创 Array.prototype.slice.call将NodeList转换为Array

NodeList对象是一个节点的集合，一般是由Node.childNodes和document.querySelectorAll返回的注意，NodeList对象不是一个数组，因此并没有数组拥有的一些方法，比如forEach和map等，普通数组的原型链是：myArray --> Array.prototype --> Object.prototype --> null（想要获得一个对象的

2017-02-27 15:04:08 887

原创 ES6中的Object.is()判断对象是否相等

在JS中，常常需要判断两个对象是否相等，常见的方法有==，===，!=，!==ES6中，新增了一个方法Object.is(a, b)，用于判断两个值是否相等，但是在某些情况下会和上述的判断符有些差异Object.is('foo', 'foo') //trueObject.is(window, window) //trueObject.is([], []) //false

2017-02-07 10:21:08 21872 1

原创 JS中的Symbol数据类型

最初JS的6种数据类型：null，undefined，boolean，number，string，object注意：实际上，array和function都是属于object的子类ES6中，新增了一种数据类型Symbol，现在共7种数据类型判断：typeof Symbol() === 'symbol'特点：Symbol('key') !== Symbol('key') /

2017-02-06 18:57:31 7988

原创 JS对象中的watch方法

object.watch(prop, handle)概述：监听一个对象的某个属性是否发生变化，如果发生了变化，则立即执行回调函数object.unwatch(prop)概述：取消监听事件例子：var a = {name : 'kong'};a.watch("name", function(id, oldVal, newVal){ console.log(id + '属性由'

2017-01-23 17:41:24 6928

原创使用for in遍历数组

使用for in遍历对象和数组使用for in遍历数组的时候，要注意会把原型属性也同样遍历出来，导致错误，如下var arr = ['k', 'j', 'c'];Array.prototype.name = 'kong';for(var i in arr){ console.log(i + '--' + arr[i]);}//输出0--k 1--j 2--c name--kong

2017-01-23 11:44:44 2278

原创 jQuery的isEmptyObject方法判断对象是否为空

jQuery判断对象是否为空，即没有属性使用$.isEmptyObject({...})方法，为空对象返回true，否则返回false原理，通过for in循环遍历所有属性function isEmptyObject(obj){for(k in obj){return false;}return true;}

2017-01-23 10:56:15 4899

原创 vue加载时闪现模板语法

问题：使用VUE时，页面加载瞬间，会闪现模板语法，例如{{ item.name }}等解决办法：1、可以通过VUE内置的指令v-cloak解决这个问题（推荐）具体实现：{{ item.name }}CSS中添加[v-cloak]{ display: none; }2、可以在需要编译的元素前后加上关于详解http://www.zhangxinxu.

2017-01-13 17:15:04 4742

原创 JS中的this指向相关

关于JS中this的问题JS中的函数调用有4种方式：1、作为普通函数调用2、作为对象方法调用3、作为构造函数调用4、使用call或者apply全局执行：首先，我们尝试全局执行下console.log(this);浏览器会输出window对象注意，如果在严格模式下执行'use strict'，则输出的会是undefined第一种情况：作为普通函数调用

2017-01-03 17:28:00 293

原创 intermediate value is not a function报错解决方法

在一个项目中引入了多个JS文件，最开始并没有问题，实际上线时，用到了gulp将其JS文件合并压缩，结果报错，如下(intermediate value)(intermediate value)(...) is not a function这是glup配置相关合并压缩的代码片段这里，合并JS文件的顺序是base.js - zepto.min.js - index.js导致

2016-12-26 18:29:18 15392

原创 Git常用命令汇总

2016-12-23 14:59:57 255

原创如何将本地代码上传至Github

如何将本地代码上传至Github？第一步下载并安装Git，地址：https://git-scm.com/downloads第二步注册Github账号，点击创建项目填写相关信息第三步本地生成SSH文件，因为Github是通过SSH加密传输，需要生成密钥打开Git Shell，输入以下命令ssh-keygen -C '[email protected]'

2016-12-23 11:41:50 477

原创 NodeJS搭建本地服务器环境

第一步：创建server.js和mine.js文件server.jsvar http = require('http'), url = require('url'), fs = require('fs'), path = require('path'), mine = require('./mine').types, PORT = 3000;var server = http

2016-11-18 11:17:49 1613

原创 React项目中的一些问题

React项目报错：Warning: Each child in an array or iterator should have a unique "key" prop.原因：性能问题，这个是和React的dom-diff算法相关的，react对dom做遍历的时候，会根据data-reactid生成虚拟dom树，如果没有手动的添加key值的话，react是无法记录你的dom操作的

2016-10-25 10:26:36 10187

原创 animation阶跃函数step详解

首先，我们用CSS3的animation完成一个进度条动画 *{margin: 0; padding: 0;} .div-1{width: 200px; height: 20px; background-color: gray; position: relative;} .div-1::after{content: ''; background-color: red

2016-10-18 11:30:08 3412

原创 CSS实现多行文本溢出显示省略号

单行文本溢出显示省略号，可以直接使用text-overflow:ellipsis; white-space:nowrap; *{margin: 0; padding: 0;} div{width: 200px; height: 40px; line-height: 20px; border: 1px solid red; margin-top: 100px; mar

2016-10-17 19:02:30 722

原创 margin负值实现左右固定中间自适应布局

布局需求左右两列宽度固定（像素单位），中间自适应可以使用负的margin值实现该布局 *{margin: 0; padding: 0;} .main{width: 100%; float: left;} .main .main-box{margin: 0 200px; height: 200px; background-color: red;} .lef

2016-10-17 17:43:36 601

原创 margin-bottom负值实现多列等高布局

什么是多列等高布局？经常会有这样的需求，一个父容器中，存在多列子容器，这些子容器的高度是不固定的，正常情况下，父容器的高度会随着其子容器最高的那个容器的高度而变化伸缩，但其它子容器的高度并不会变化，导致如下结果显然，这并不是我们想要的，我们需要左侧和右侧的高度共同变化，这时，就可以使用margin-bottom负边距实现padding补偿法首先，给子容器设置padding-

2016-10-17 17:01:52 1587

原创 CSS绘制三角形

使用css绘制三角形，主要利用了盒模型的border属性，当盒子内容的宽度和高度远小于盒子边框的宽度时，边框会显示为等腰梯形，由此，可以通过设置盒子宽度和高度为0，再利用透明边框来实现，代码如下 *{margin:0; padding:0;} body{padding:30px;} .san-1{width:0; height:0; border-left:50px

2016-09-07 15:56:31 483

原创 canvas裁剪clip()函数

在canvas中，可以使用clip()函数裁剪区域，设定裁剪区域后，只有在区域内的图像才能显示，其余部分会被屏蔽掉未使用裁剪绘制一个圆 *{margin:0; padding:0;} html, body{width:100%; height:100%; overflow:hidden; background-color:#AFAFAF;} va

2016-08-08 15:58:43 4958

原创 Mac中的Homebrew工具

Homebrew是Mac OSX上的软件包管理工具，能在Mac中方便的安装软件或者卸载软件，运行在Mac的终端程序中1、安装Homebrew在Mac终端中执行脚本/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"2、使用Homebrew安

2016-07-15 16:39:08 274

原创 requestAnimationFrame实现动画

requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态的话，动画会自动暂停，有效节省了CPU开销可以直接通过requestAnimationFrame(callback)调用，接收一个函数作为回调，返回一个ID，通过把该ID传给window.cancelAnimationFrame()可以取消该动画兼容性解决

2016-07-11 16:49:58 318

原创使用gulp-uglify压缩js文件

1、全局安装gulpnpm install -g gulp2、项目下安装gulp和gulp-uglifycmd切换到项目目录，执行npm install gulp和npm install gulp-uglify3、安装完毕后，项目的gulp文件夹下，新增文件gulpfile.js（注意该文件名不可更改），并在gulpfile.js文件中写入如下代码var gulp = requ

2016-07-08 16:01:02 7823

原创使用base64编码

什么是base64编码：base64编码是一种用于传输8bit字节代码的编码方式之一，可用于在HTTP环境下传递较长的标识信息base64编码的优势：正常情况下，我们在网页上看到的每一张图片，都需要消耗一个HTTP请求下载而来，当然，可以使用CSS SPRITES技术减少请求量，从而达到优化目的，而如果将图片转换为base64编码格式，则可以节省一个HTTP请求，因为它可以随着HTML

2016-07-05 12:10:42 393

原创 PHP页面上输出空白隐形字符65279解决办法

在某些情况下，PHP会在页面输出空白隐形字符65279，也有可能是一段空白，导致页面布局错乱的问题，实际上，65279字符是PHP用来标记文件是UTF-8编码的，输出的时候会一起输出到客户端UTF-8编码的文件可以分为无BOM和BOM两种格式如果要在PHP中使用UTF-8编码，必须使用不带BOM头的UTF-8文件，否则将会导致上述问题大部分编码软件会自动保存为无BOM格式的，但也有一部

2016-06-30 12:07:25 3162

原创 JS异常missing ) after argument list

JS异常报错 missing ) after argument list在使用JS拼接DOM元素时，有这种情况发生，''，直接这样写会报错，应使用反斜杠 \ 转义一下即可正确写法''

2016-06-28 11:32:12 7824

空空如也

空空如也