- 博客(172)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 React常见的一些坑
1、setState()是异步的this.setState()会调用render方法，但并不会立即改变state的值，state是在render方法中赋值的。所以执行this.setState()后立即获取state的值是不变的。同样的直接赋值state并不会出发更新，因为没有调用render函数。2、组件的生命周期componentWillMount，componentDidMo
2017-03-29 14:26:19
3864
1
原创 HighCharts初学____（1）
HighCharts初识1、HighCharts是一款纯Javascript图表库，让开发者很容易在Web网站、Web应用中创建交互性的图表Highcharts支持目前所有现在浏览器，包括IE6、iPhone/ipad。标准（W3C标准）的浏览器用SVG图形渲染，在遗留的IE浏览器中用VML绘图。2、Highcharts官网：http://www.highchart
2013-12-30 20:15:21
5454
2
转载 react middleware
前言react已经出来很久了，其生态圈之庞大，一锅炖不下！各种react-xx，已让我们不堪重负，github上随便一个demo，引入的模块至少都是五指之数+。看着头疼，嚼之无味……。在此建议新学者，可以从基础的核心模块学起，前期不要考虑那些数量繁多的马仔小弟，边学边写，个人感觉前期核心要学的流程大致如下：React ——> React + redux + React-redux ——>...
2018-03-15 16:39:59
1478
转载 css3 动画，animationend & transitionend
原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效 上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件； css3 的时代，css3--动画 一切皆有可能； 传统的js...
2018-03-14 11:42:15
3564
转载 原型& 原型链 Prototype
一. 普通对象与函数对象JavaScript 中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象，Object 、Function 是 JS 自带的函数对象。下面举例说明var o1 = {}; var o2 =new Object();var o3 = new f1();function f1(){}; var f2 = function(){};var f3 = new
2018-02-02 17:25:53
399
转载 JS继承的实现方式
JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。JS继承的实现方式既然要实现继承，那么首先我们得有一个父类，代码如下：// 定义一个动物类function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = func
2018-02-02 17:17:58
252
转载 深入浅出React（五）：使用Flux搭建React应用程序架构
前面几篇文章介绍了React相关的基本概念和运行原理，可以看到React是一个完全面向View的解决方案，它让我们能以一种新的思路去实现View，让很多复杂的场景可以用一种简单的方法去解决。然而在一个完整的应用程序中，除了实现View之外，我们还需要考虑如何同服务器通信、View之间如何交互以及View背后的数据模型如何去设计。那么Flux正是Facebook提出的解决这些问题的方案。简单
2018-01-05 14:51:00
849
转载 深入浅出React（四）：虚拟DOM Diff算法解析
React中最神奇的部分莫过于虚拟DOM，以及其高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面，由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。React在这一部分已经做到足够透明，在实际开发中我们基本无需关心虚拟DOM是如何运作的。然而，作为有态度的程序员，我们总是对技术背后的原理充满着好奇。理解其运行机制不仅有助于更好的理解React组件的
2018-01-05 14:50:22
567
转载 深入浅出React（三）：理解JSX和组件
通过前两篇文章的介绍，相信大家对JSX和组件已经有了一定的了解。JSX这种混合使用JavaScript和XML的语言第一眼看上去很“丑”，也很神奇，但是其语法和背后的逻辑却极其简单。相信读完本文你就可以对JSX和组件有一个全面的了解，并能够用JSX来直观的构造用户界面。什么是JSXReact的核心机制之一就是虚拟DOM：可以在内存中创建的虚拟DOM元素。React利用虚拟DOM来减
2018-01-05 14:49:37
325
转载 深入浅出React（二）：React开发神器Webpack
上一篇我们对React有了一个总体的认识，在介绍其中的技术细节之前，我们首先来了解一下用于React开发和模块管理的主流工具Webpack。称之为React开发神器有点标题党了，不过Webpack确实是笔者见过的功能最为强大的前端模块管理和打包工具。虽然Webpack是一个通用的工具，并不只适合于React，但是很多React的文章或者项目都使用了Webpack，尤其是react-hot-load
2018-01-05 14:48:50
300
转载 深入浅出React（一）：React的设计哲学 - 简单之美
自2013年Facebook发布以来，React吸引了越来越多的开发者，基于它的衍生技术，如React Native、React Canvas等也层出不穷。InfoQ精心策划“深入浅出React”系列文章，为读者剖析React开发的技术细节。React最初来自Facebook内部的广告系统项目，项目实施过程中前端开发遇到了巨大挑战，代码变得越来越臃肿且混乱不堪，难以维护。于是痛定思痛，他们
2018-01-05 14:47:54
294
转载 移动端300ms点击延迟
一、移动端300ms点击延迟一般情况下，如果没有经过特殊处理，移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。也就是说，当我们点击页面的时候移动端浏览器并不是立即作出反应，而是会等上一小会儿才会出现点击的效果。在移动WEB兴起的初期，用户对300ms的延迟感觉不明显。但是，随着用户对交互体验的要求越来越高，现今，移动端300ms的点击延迟逐渐变得明显而无法忍受。那
2017-05-11 10:26:14
418
转载 React整体流程
文章地址：http://react-china.org/t/react-redux/9072react的组件化react的一个组件很明显的由dom视图和state数据组成，两个部分泾渭分明。state是数据中心，它的状态决定着视图的状态。这时候发现似乎和我们一直推崇的MVC开发模式有点区别，没了Controller控制器，那用户交互怎么处理，数据变化谁来管理？然而这
2017-03-29 14:24:50
18153
2
转载 React生命周期
在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。实例化当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：1、getDefaultProps2、getInitialState
2017-03-27 16:40:16
370
转载 使用JS对中文字符串进行utf-8的Base64编码，使其与Java编码相同的办法
要进行编码的字符串：“select 用户名 from 用户”使用JAVA进行编码，Java程序：String sql = "select 用户名 from 用户";String encodeStr = new String(Base64.encode(sql.getBytes("UTF-8"))); // 编码System.out.println(encodeStr);得到
2017-02-24 15:46:18
1689
转载 条形码jsbarcode
GitHub地址：https://github.com/lindell/JsBarcode我的迁移地址：http://pan.baidu.com/s/1bnx6Bb5由于在项目中需要用到条形码，于是去GitHub上找，有没有现成的代码，发现了这个仓库，挺不错，记录下来，方便以后使用。引入jQuery（可选）这个插件可以用jQuery引入或者原生JS都可以实现，推荐使用原生方
2017-02-16 10:29:54
3150
1
转载 微信应用号（小程序）开发IDE配置
2016年9月22日凌晨，微信宣布“小程序”问世，当然只是开始内测了，微信公众平台对200个服务号发送了小程序内测邀请。那么什么是“小程序”呢，来看微信之父怎么说看完之后，相信大家大概都有些明白了吧，对于开发者来说或许都有些小激动吧，毕竟多关注一些新东西没什么不好。那么问题是“小程序”只有200个内测账号，怎么办？还好，天朝的人才太多了，在消息发布后的几小时内网上已经出了IDE的破
2017-01-09 19:27:26
757
原创 h5浏览器，唤起app
代码： /* * function getDeviceBrowser * @return {Object} device设备系统,browser浏览器类型 */ function _getDeviceBrowser () { var ua = window.navigator.userAgent;
2016-12-29 15:09:55
8824
2
转载 你可能不知道的5个功能强大的 HTML5 API
HTML5 新增了许多重要的特性，像 video、audio 和 canvas 等等，这些特性使得能够很容易的网页中包含多媒体内容，而不需要任何的插件或者 API。而其它的新元素，例如 section、article、header 和 nav 等则是用来丰富网页内容。另外还有很多强大的 JavaScript API，下面这5个 HTML5 API 你可能不知道，通过今天这篇文章可以了解一下。
2016-12-27 14:26:20
788
转载 angularjs $watch监听模型变化
$watch简单使用$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。$watch(watchExpression, listener, objectEquality);每个参数的说明如下：watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function()
2016-12-09 13:49:21
657
转载 React和Redux的连接react-redux
http://leozdgao.me/reacthe-reduxde-qiao-jie-react-redux/之前一直在探索React相关的东西，手上有个SPA项目，于是准备上Redux试试水。Redux本身和React并没有之间的关联，它是一个通用Javscript App模块，用做App State的管理。要在React的项目中使用Redux，比较好的方式是借助react-redux这个
2016-06-09 14:32:57
702
转载 React 组件之间如何交流
前言今天群里面有很多都在问关于 React 组件之间是如何通信的问题，之前自己写的时候也遇到过这类问题。下面是我看到的一篇不错英文版的翻译，看过我博客的人都知道，我翻译可能不会按部就班，会尽可能用中文的意思，来将作者要讲述的技术描述清楚。英文能力有限，如果有不对的地方请跟我留言，一定修改……^_^原著序处理 React 组件之间的交流方式，主要取决于组件之间的关系，然而这些
2016-06-04 10:16:04
11321
转载 Immutable 详解及 React 中实践
作者：camsong链接：https://zhuanlan.zhihu.com/p/20295971来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。有人说 Immutable 可以给 React 应用带来数十倍的提升，也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明，因为同期 React 太火，它的光芒被掩盖了。这些至
2016-06-01 16:49:47
1064
转载 ES6 模块modules
modules是ES6引入的最重要一个特性。 所以以后再写模块，直接按照ES6的modules语法来写，然后用 babel + browserify 来打包就行了。modules规范分两部分，一部分是如何导出，一部分是如何导入。基本用法命名导出(named exports)可以直接在任何变量或者函数前面加上一个 export 关键字，就可以将它导出。 这种写
2016-06-01 16:08:14
461
原创 用angularjs遇到的坑
1.双向绑定的指令，如果用ng-if去控制它的显示和隐藏。那么base 的controller中取不到值$scope.val用ng-show控制，取值ok2.ng-class控制的判断条件，如果是string变量和一个boolean变量做与和或的操作可能会出现判断不生效，这个时候可以将string变量强转为boolean变量3.指令中子scope和父sc
2016-05-12 11:20:52
956
转载 border-radius在Android下的几个BUG
一、Android 2.3 自带浏览器不支持 %通常我们实现一个正圆只需要border-radius: 50%即可，大致代码如下：.foo { width: 100px; height: 100px; border-radius: 50%; border: 1px solid blue;}然而 Android 2.3 是不支持百分比的，要兼容我们只能使用
2016-05-12 10:25:52
1339
转载 CSS清除浮动大全共8种方法
在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了，下面总结8种清除浮动的方法，测试已通过 ie chrome firefox opera，需要的朋友可以参考下清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全，共8种方法。 浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览
2016-04-25 20:48:31
8477
转载 移动端H5页面高清多屏适配方案
视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：1）首先，选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480，现在更多的是iphone6的375×667)。2）对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也
2016-04-18 14:13:54
561
转载 CSS hack
做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协，虽然这只是个别情况。今天，结合自己的经
2016-04-18 14:07:30
353
转载 CSS3 @font-face
@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体font-face语法规则 @font-face { font-family: ; src: [][, []]*; [font-weight: ]; [f
2016-04-18 10:36:00
455
转载 一些常用的前端开发规范
本文主要针对前端最常见的HTML、CSS、JS实行规范开发，减少因为代码格式命名等问题引起的Bug。我们的目标：不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。HTML语法 · 用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。 · 嵌套元素应当缩进一次（即两个空格）。
2016-03-10 11:45:56
705
转载 移动前端头部标签(HTML5 head meta)
lang="zh-cmn-Hans"> > charset='utf-8'> http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> name="description" content="不超过150个字符"/> name="keywords" conte
2016-03-08 00:26:05
531
转载 Js实现深拷贝和浅拷贝
一、数组的深浅拷贝在使用JavaScript对数组进行操作的时候，我们经常需要将数组进行备份，事实证明如果只是简单的将它赋予其他变量，那么我们只要更改其中的任何一个，然后其他的也会跟着改变，这就导致了问题的发生。var arr = ["One","Two","Three"];var arrto = arr;arrto[1] = "test";document.write
2016-02-21 22:27:57
3753
原创 nodejs Tips7
13、js的面向对象是基于原型的，并没有提供对象继承的语言特性，继承是通过原型复制来实现的。继承仅仅继承原型链上的，构造函数内定义的属性和函数没有被继承。//16.1.12.jsvar util = require('util');function Base() { this.x = 10; this.y = 5; this.add = function() {
2016-01-12 22:23:25
491
原创 nodejs Tips6
10、js中window是全局变量nodejs中global是全局变量11、Node.js 中你不可能在最外层定义变量，因为所有用户代码都是属于当前模块的，而模块本身不是最外层上下文。永远使用 var 定义变量以避免引入全局变量，因为全局变量会污染 命名空间，提高代码的耦合风险。12、__filename 输出的当前正在执行的脚本的文件名。输出的是绝对路
2016-01-11 22:45:06
382
原创 nodejs Tips5
nodejs 构建一个简单的路由//16.1.11.2.js//http 服务端 var http = require('http');var url = require("url");function start(route) { function onRequest(request, response) { response.writeHead(200, {
2016-01-11 21:53:57
321
原创 nodejs Tips4
7、模块系统原生模块加载的优先级仅次于文件模块缓存的优先级假如，你文件目录下有个http/http.js/http.node/http.json的文件夹require('http')也会从原生加载8、require方法接受以下传参a、http、fs、path等，原生模块。b、./mod或../mod，相对路径的文件模块。c、/pathtomodule/m
2016-01-11 21:09:43
362
原创 nodejs Tips3
5、EventEmitter 支持若干个事件监听器。当事件触发时，注册到这个事件的事件监听器被依次调用6、Buffer类，该类用来创建一个专门存放二进制数据的缓存区可以用buffer内容或者buff size进行初始化/*var buf = new Buffer(15);var len = buf.write('写入buff')con
2016-01-11 20:29:12
402
原创 nodejs Tips2
nodejs创建第一个应用server.jsvar http = require('http');http.createServer(function (request, response) { // 发送 HTTP 头部 // HTTP 状态值: 200 : OK // 内容类型: text/plain response.writeHead(200, {'Content-Ty
2016-01-08 16:44:36
407
原创 nodejs Tips1
Windowv 上安装Node.jsWindows 安装包(.msi) :32 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/node-v0.10.26-x86.msi64 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/x64/node-v0.10.26-x64.msi检测PAT
2016-01-08 16:40:22
378
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人