Javascript
关注
分享
扫一扫
文章平均质量分 93
Evan_Gu
专注大数据可视化和可视分析相关的理论、方法与技术，探索行业中最佳实践与应用。
展开
-
Warning: setState(...): Can only update a mounted or mounting component. This usually means you call
类似这个错误 出现这个错误，大部分是因为使用了fetch获取数据，并在then中调用了setState()class Overall extends Component { componentDidMount() { this.fetchData(); } fetchData(){ fetch(url).then(() =&...原创 2018-03-13 20:42:29 · 1994 阅读 · 0 评论 -
Javascript中event对象的clientX，LayerX，offsetX, pageX
废话不多说，下面分别检测各个浏览器下的e.pageX e.layerX e.offsetX e.clientX e.screenX e.x 属性；测试浏览器：FF9/Chrome15/opera11.52/safari5(win)/IE6/7/8/9测试代码：View Code 图示：测试结果如下：chrome：e.pageX——相对整个页面的坐标 e.layerX——相对当前选转载 2017-02-11 15:58:13 · 2794 阅读 · 0 评论 -
CSS Module
CSS 是前端领域中进化最慢的一块。由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展，CSS 被远远甩在了后面，逐渐成为大型项目工程化的痛点。也变成了前端走向彻底模块化前必须解决的难题。CSS 模块化的解决方案有很多，但主要有两类。一类是彻底抛弃 CSS，使用 JS 或 JSON 来写样式。Radium，jsxstyle，react-style 属于转载 2017-02-20 14:00:31 · 3724 阅读 · 0 评论 -
ECharts应用在React
ECharts 是一个纯JS开源图形库，最大的特点是操作简单，数据配置方便，支持数据动态展示。由百度开发，并持续维护，目前已经开发到第三版。官方文档 http://echarts.baidu.com/index.html github：https://github.com/ecomfe/echarts在html中使用方法<!DOCTYPE html><html><head> <meta原创 2017-01-19 18:00:03 · 5715 阅读 · 0 评论 -
WEB的用户安全登录功能
转自：http://coolshell.cn/articles/5353.html你会做Web上的用户登录功能吗？Web上的用户登录功能应该是最基本的功能了，可是在我看过一些站点的用户登录功能后，我觉得很有必要写一篇文章教大家怎么来做用户登录功能。下面 的文章告诉大家这个功能可能并没有你所想像的那么简单，这是一个关系到用户安全的功能，希望大家能从下面的文章中能知道什么样的方转载 2017-02-17 20:09:12 · 1936 阅读 · 0 评论 -
html5 canvas drawImage图片模糊
问题：当使用如下设置时，图片显示模糊 javascriptvar img=new Image();img.src="http://www.w3school.com.cn/i/eg_tulip.jpg";img.addEventListener('load', function(){var cvs=$("#cvs")[0];var ctx = cvs.getContext('2d');ct原创 2017-02-17 16:06:58 · 6978 阅读 · 0 评论 -
Fetch 与 Promise
Fetchjavascript 异步请求 具体标准参考如下 点击这里 FetchAPI基本用法(ES6 语法)： fetch(url,option) .then((response) => { // do something });其中const option = { method: 'POST', head: { Accept: 'applicat原创 2017-01-12 20:45:59 · 6666 阅读 · 0 评论 -
Uncaught (in promise) TypeError: __webpack_require__.i(...) is not a function
利用Webpack包管理，React 项目错误 错误原因 可在npm中查看原创 2017-01-11 09:56:38 · 29370 阅读 · 5 评论 -
React-redux项目最好示例
http://react-redux.herokuapp.com/This starter boilerplate app uses the following technologies:Isomorphic Universal rendering Both client and server make calls to load data from separate API server R原创 2017-01-10 22:11:10 · 1718 阅读 · 0 评论 -
JS流程图库
JointJS JointJS is a JavaScript diagramming library. It can be used to create either static diagrams or fully interactive diagramming tools and application builders.Here are some of its features转载 2017-01-10 09:31:25 · 4281 阅读 · 0 评论 -
Html中button标签设置background问题
在设置button的background样式时，会出现如下问题<html><head><style type="text/css"> .b{ width:100px; height:200px; background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; }<原创 2017-02-11 20:38:03 · 11342 阅读 · 0 评论 -
Javascript创建文件下载
前端很多项目中，都有文件下载的需求，特别是JS生成文件内容，然后让浏览器执行下载操作（例如在线图片编辑、在线代码编辑、iPresst等）。但受限于浏览器，很多情况下我们都只能给出个链接，让用户点击打开-》另存为。如下面这个链接：file.js用户点击这个链接的时候，浏览器会打开并显示链接指向的文件内容，显然，这并没有实现我们的需求。HTML5中给a标签增加了转载 2017-02-11 21:53:19 · 830 阅读 · 0 评论 -
【Web渲染性能优化】渲染管道
现如今很多移动设备的屏幕刷新频率达到60fps（60次/每秒），为了使用户的在浏览Web网页时有非常好的交互体验，浏览器需要满足这些设备的刷新频率。这意味着，每一帧只有16ms（1 / 60 = 16.66ms）的时间可供使用，然而，浏览器在这个时间段内还有处理其他的工作要处理，因此，留给我们前端程序执行每一帧渲染的时间在10ms内，当时间花费超过这个时间范围，那么屏幕上的内容变换非常抖动、不流畅，原创 2017-04-26 11:23:26 · 1027 阅读 · 0 评论 -
Canvas与SVG
CanvasCanvas最初由苹果在Mac操作系统上用Safari浏览器渲染用户界面组件和其他图形而开发的。Canvas是一个底层、立即模式（immediate mode）的应用程序编程接口（API）： 底层 画布提供快速但相当基本的功能集。例如 矩形是仅有的原生形状 立即模式 当画布绘图被指令调用时，就立即被执行。这与SVG在绘图原创 2017-05-02 21:13:40 · 2391 阅读 · 0 评论 -
【fetch跨域请求】cors
当使用fetch 发起跨域请求时，CORS（跨域资源共享Cross-origin resource sharing）请求fetch const body = {name:"Good boy"}; fetch("http://localhost:8000/API",{ headers:{ 'content-type':'application/json' }原创 2017-03-26 21:03:51 · 36422 阅读 · 5 评论 -
React中使用ECharts地图扩展
ECharts 结合百度地图API可以展示非常炫丽的地图动画。正如官网示例点击这里。那么，在React中如何实现这样交通动态图呢？1 React 组件首先，我们需要引入echarts, 以及 echarts的地图扩展 bmap (地图扩展，这个很关键，如果不引入，程序运行后会出现“unknown coordinateSystem bmap”的错误)。下面是React Component中构建含有bm原创 2017-01-22 21:27:24 · 9043 阅读 · 3 评论 -
JSON.stringify(value[, replacer [, space]])
转自：https://segmentfault.com/a/1190000000485428 1.只提供第一个参数简单的序列化对象为JSON字符串var object = {'a':1,'b':2,'c':3};JSON.stringify(object)"{"a":1,"b":2,"c":3}"2. 提供第二个参数，主要作用过滤序列化输出的内容,第二个参数可以是数组转载 2017-02-13 10:05:38 · 765 阅读 · 0 评论 -
Webpack载入loader，imports-loader,exports-loader,expose-loader
Webpack有几个和模块化相关的loader，imports-loader,exports-loader,expose-loader，比较容易混淆。今天，我们来理一理。webpack中引入第三方库非npm包，可以采用exports-loader 的方法引入imports-loaders文档介绍的是：用于向一个模块的作用域内注入变量（Can be used to injec转载 2017-02-13 09:25:57 · 1402 阅读 · 0 评论 -
【NPM】Packages与Modules
什么是Package一个Package可以是一下任何一种： -a) 一个由package.json描述的文件或文件夹 -b) 一个gzip压缩包，包含a) -c) 一个指向b)的url -d) 一个发布到仓库的含有c) 的<name>@<version> -e) 一个指向d)的<name>@<tag> -f) 一个<name>有最新的tag，并满足条件e) -g) 一个giturl，原创 2017-01-22 15:56:05 · 652 阅读 · 0 评论 -
React受控组件与非受控组件
背景React内部分别使用了props, state来区分组件的属性和状态。props用来定义组件外部传进来的属性, 属于那种经过外部定义之后, 组件内部就无法改变。而state维持组件内部的状态更新和变化, 组件渲染出来后响应用户的一些操作,更新组件的一些状态。如果组件内部状态不需要更新,即没有调用过this.setState, 全部通过props来渲染也是没问题的, 不过这种情况不转载 2017-01-22 12:06:00 · 1335 阅读 · 0 评论 -
Webpack 入门
大概算是一份教程吧, 只不过效果肯定不如视频演示之类的好..Webpack 最近在英文社区上经常看到, 留了心, 但进一步了解是通过下边的视频:视频: How Instagram.com Works, Peter HuntPeter Hunt 也是 React 的传教士, 我由于对 React 的关注因此细看了视频再后来是出现 React Hot Loader 这样的开发神器, 我转载 2017-02-12 18:59:29 · 610 阅读 · 0 评论 -
Facebook Yarn 包管理器，类似npm
在 JavaScript 社区中，工程师们互相分享成千上万的代码，帮助我们节省大量编写基础组件、类库或框架的时间。每个代码包可能都依赖于其他代码，而代码间的依赖关系则由包管理器负责维护。目前最流行的 JavaScript 包管理器是 npm 客户端，在 npm 仓库中提供了多达 30 万的软件包。据统计，已有超过 500 万的工程师使用 npm 仓库，其软件包下载量达到了 50 亿次/月。转载 2017-01-13 13:58:30 · 636 阅读 · 0 评论 -
Uncaught (in promise) TypeError: Super expression must either be null or a function
React 项目中出现错误定位错误文件 index.js 这个错误一般是 某个地方 书写不对例如 React.Components // 多了 一个 sReact.component // 首字母应该大写相关参考： http://stackoverflow.com/questions/30116430/reactjs-giving-error-uncaught-typeerr原创 2017-01-06 17:14:14 · 9754 阅读 · 0 评论 -
React用ESLint代码检测 常见问题
在package.json中 添加 ESLint依赖，"eslint": "3.9.0", "eslint-config-airbnb": "12.0.0", "eslint-plugin-import": "2.0.1", "eslint-plugin-jsx-a11y": "2.2.3", "eslint-plugin-react": "6.4.1", "原创 2017-01-05 22:18:26 · 33847 阅读 · 0 评论 -
Angular框架中当前页面跳转
我们在使用 $routeProvider后，想在当前页面中跳转连接，往往得不到正确的跳转。例如： test.html<a href="#faq-1">Question 1</a><a href="#faq-2">Question 2</a><a href="#faq-3">Question 3</a><h3 id="faq-1">Question 1</h3><h3 id="faq-2">原创 2016-07-02 19:50:14 · 5164 阅读 · 0 评论 -
【OpenLayer3】Feature设置不同颜色技巧
如何在同一个图层中添加 不同颜色的要素？ var highlightLayer = new ol.layer.Vector({ source: new ol.source.Vector() }); var highllightSource = highlightLayer.getSource(); var colorSet = ['#1fca04','#cf5a34','#原创 2016-07-12 22:25:07 · 17590 阅读 · 2 评论 -
理解Javascript中的Function
函数是 JavaScript 中的基本数据类型，在函数这个对象上定义了一些属性和方法，下面我们逐一来介绍这些属性和方法，这对于理解Javascript的继承机制具有一定的帮助。属性(Properties)arguments获取当前正在执行的 Function 对象的所有参数，是一个类似数组但不是数组的对象，说它类似数组是因为其具有数组一样的访问性质及方式，可以由argument转载 2016-07-12 11:31:32 · 580 阅读 · 0 评论 -
Angular自定义directive 根据父DOM动态修改大小
在进行Angular编程时，往往会自己定义directive命令。情景： 我们在利用jQuery-ui的sortable 方法移动组件时，需要动态调整被移动组件的大小，即标签的width 和 height。方法： 我试过了很多种方法,向元素中添加监听resize事件，然而，resize事件是在当浏览器窗口变化时才会被激发，单纯移动一个元素并不会激发此事件。sortable 是通过css()来改变父元原创 2016-07-09 21:32:47 · 2988 阅读 · 0 评论 -
AngularJS 用promises和$q处理异步调用
AngluarJS $q 是受Chris Kowal’s Q库启发(https://github.com/kriskowal/q) 。 这个库通过一个回调“promise”让用户监控异步过程。 下面针对使用pormise的语法进行说明。var promise = callThatRunsInBackground();promise.then( function(answer) { // do翻译 2016-06-07 20:21:35 · 2370 阅读 · 0 评论 -
AngularJS之Factory vs Service vs Provider
当你初试 Angular 时，很自然地就会往 controller 和 scope 里堆满不必要的逻辑。一定要早点意识到，controller 这一层应该很薄；也就是说，应用里大部分的业务逻辑和持久化数据都应该放在 service 里。我每天都会在 Stack Overflow 上看到几个同类的问题，关于如何在 controller 里保存持久化数据。这就不是 controller 该干的事。出于内转载 2016-06-07 15:01:14 · 643 阅读 · 0 评论 -
JavaScript 数组
JavaScript 数组详解 在程序语言中数组的重要性不言而喻，JavaScript中数组也是最常使用的对象之一，数组是值的有序集合，由于弱类型的原因，JavaScript中数组十分灵活、强大，不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素，JavaScript在同一个数组中可以存放多种类型的元素，而且是长度也是可以动态调整的，可以随着数据增加或减少自动对数组长度做更改。创建数组转载 2016-03-31 20:53:04 · 413 阅读 · 0 评论 -
JavaScript解析Json中的对象
有几种方法1 使用eval函数进行转换定义和用法 eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。 语法 eval(string) 参数 描述 string 必需。要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。<script>var json ="{'result':'true','rows':["+"{'cequip原创 2016-04-12 20:01:24 · 642 阅读 · 0 评论 -
javascript 的module 模块化
The Module Pattern，模块模式，也译为模组模式，是一种通用的对代码进行模块化组织与定义的方式。这里所说的模块（Modules），是指实现某特定功能的一组方法和代码。许多现代语言都定义了代码的模块化组织方式，比如 Golang 和 Java，它们都使用 package 与 import 来管理与使用模块，而目前版本的 JavaScript 并未提供一种原生的、语言级别的模块化组织模式，转载 2016-05-31 17:56:23 · 13438 阅读 · 1 评论 -
javascript中forEach
当使用forEach进行数组操作时，只能 var a = []; a[0] = { time:1}; a[1] = { time:2}; var b = a; b.forEach(function (e) { e = {jb:3}; });输出结果 发现 b并没有改变 var a = []; a[0] = { time:1};原创 2016-07-05 14:43:36 · 549 阅读 · 0 评论 -
44道javaScript变态题（上）
转自：https://github.com/xiaoyu2er/blog/issues/1 原题来自: javascript-puzzlers读者可以先去做一下感受感受. 当初笔者的成绩是 21/44...当初笔者做这套题的时候不仅怀疑智商, 连人生都开始怀疑了....不过, 对于基础知识的理解是深入编程的前提. 让我们一起来看看这些变态题到底变态不变态吧!转载 2016-07-05 16:07:55 · 9321 阅读 · 0 评论 -
webpack 入门
什么是 webpack？webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（load转载 2017-01-05 14:05:28 · 376 阅读 · 0 评论 -
sublime3使用ESLint
许多刚开始使用Sublime的同学可能都抱怨过为什么没有语法错误提示功能。像WebStorm，输入的语法错误在程序被编译之前就被编辑器提示出来，这样会在一定程度上提高开发的效率。而Sublime似乎不会提示语法错误或是简单的拼写错误，比如误用了中文符号，对象的属性之间忘记用逗号隔开等等一些低级错误；我们必须每次编译后才知晓这些错误，这样会将我们的部分精力和时间浪费在一次次地修改这些低级错误上，从而转载 2017-01-03 14:17:24 · 5730 阅读 · 0 评论 -
React 生命周期
在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。实例化当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：1、getDefaultProps2、getInitialState3、compon转载 2016-12-21 16:39:40 · 403 阅读 · 0 评论 -
【React】React.Component小结
React.Component 是一个抽象的Class，通常继承该类来构建自定义的Component。 Component可以将U分离成独立的碎片，有点类似于JavaScript的function，它接受一个任意的输入（props）并返回一个React element描述屏幕中的内容。有两种方法构建Components1 JavaScript函数function Welcome(props) {原创 2016-12-13 22:41:15 · 2260 阅读 · 0 评论 -
JavaScript 扩展Date 格式输出
方法一：// 对Date的扩展，将 Date 转化为指定格式的String// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) // 例子： // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S转载 2016-12-03 15:44:54 · 356 阅读 · 0 评论