秋天1014童话-CSDN博客

原创 table数据转为excel文件下载

本文讲解如何将table数据转为excel文件下载。亲测，当table有合并行/列时，下载的excel也会对应合并。

2022-09-23 18:17:15 969 1

经过业务长时间打磨，往往会沉淀诸多公用的方法和能力，比如获取用户信息，获取某场景配置信息等。在我们进行可视化搭建页面时，往往会存在多模块调用同一个公用方法的情况，比如这个模块需要进行用户信息展示，那个模块需要判断用户是否符合活动人群。如果全局没做状态管理的话，每调用一次，就会发起一次请求。在大流量的场景下，不但会提升qps，可能触发服务器调用阀值，影响用户体验，同时也很浪费服务器资源，这个时候我们就可以去做一个Promise的缓存。这也是面试经常被多形式问到的问题。...

2022-06-14 17:56:07 452

原创使用a标签下载文件，浏览器会直接打开解决方案

使用a标签下载文件，浏览器会直接打开解决方案背景一、HTML中的a标签实现点击下载二、即使使用a标签的download属性，chrome浏览器还是会打开三、解决方案解决方案一：使用ajax请求该url，获取到文本内容，手动实现下载。解决方案二：设置Content-Type四、写在最后背景在使用a标签进行下载文件时，chrome浏览器是会打开支持预览的文件（如txt、json等），而不下载。一、HTML中的a标签实现点击下载通常在咱们写项目的时候会遇到上传下载什么的，在上传完文件后会把文件的路径保存到

2022-04-22 16:40:35 13483 7

原创 js倒计时--天、时、分、秒，到时间后自动停止

js倒计时–天、时、分、秒，到时间后自动停止：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-

2018-10-31 15:58:44 3575 1

原创 React-JSONResult使用（JSON展示）

效果：封装JSONResultJSONResult/index.js:import PropTypes from 'prop-types';import styles from './index.less';import JSONTree from 'react-json-tree';import theme from './theme';function TestResult(...

2018-10-29 20:52:53 6784

原创 react动态添加样式

一、使用ES6模版字符串className={`title ${index === this.state.active ? 'active' : ''}`}二、classnames库的使用安装：npm install classnames --save使用：import classNames from 'classnames';&lt;div className=classNa...

2018-10-29 20:42:40 2771

原创 React常用知识点

1、jsonResult - json展示import { Tabs, Form, Input, Alert, Button, Spin } from 'antd';import JSONResult from 'components/JSONResult';class TestTab extends React.Component { ... render(){ const {...

2018-10-15 10:55:33 436

原创 js-工具类处理函数

一、 js-时间处理函数项目需要，会用到很多时间处理函数，总结至此。有未提及的相关工具类方法或者有更高效的方法，希望大家留言补充。时间格式化 //很给力的函数，几乎可以覆盖所有日期格式输出 //时间格式化 function formatDate(date, fmt) { //在es6下导出一个函数 //对...

2018-06-29 23:24:24 1007

原创 html5+ React -进入和退出全屏实现

html5已经支持全屏API，不同浏览器实现方式不一，以下为兼容方案：一、不同浏览器的进入和退出全屏实现// Webkit (works in Safari5.1 and Chrome 15)element.webkitRequestFullScreen();document.webkitCancelFullScreen();// Firefox 10+element.moz...

2018-06-23 02:53:48 4843

原创 json文件下载--防止chrome直接打开方案

一、HTML中的a标签实现点击下载通常在咱们写项目的时候会遇到上传下载什么的，在上传完文件后会把文件的路径保存到数据库里以便下载，如果想不通过后台直接下载的话，可以把文件路径给a标签的属性href； &lt;a href="/user/test/xxxx.txt"&gt;点击下载&lt;/a&gt;这样当用户打开浏览器点击链接的时候就会直接下载文件。但是有个情况，比如txt,p...

2018-06-12 12:43:05 15705 4

原创 React--ref详解

总结： React提供的ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例；需要区分一下，ReactDOM.render()渲染组件时返回的是组件实例；如果给一个复合组件（如<TextInput />）附加ref属性，你就会拿到对应的组件类的实例 , 可以直接调用组件在类定义中导出的任何方法。而渲染dom元素时，返回是具体的dom

2018-04-30 18:01:24 866

转载 React--key值详解

项目中遇到不少的坑，例如组件的key影响加载，或者警告数组遍历子元素要有一个唯一的key值等，今天汇总说一下：参考博客1、key的作用react中的key属性，它是一个特殊的属性，它是出现不是给开发者用的（例如你为一个组件设置key之后不能获取组件的这个key props），而是给react自己用的。那么react是怎么用key的呢？react的作者之一Paul O’Shannessy有提到：

2018-04-30 17:19:59 4471

原创 wangEditor富文本编辑器+react+antd的使用

1、github上发现富文本编辑器：官网地址及github地址2、结合react+antd的具体使用：案例使用场景：MyModal为弹窗，弹窗显示编辑名称及描述。描述使用wangeditor富文本编辑器实现。MyModal.jsimport { Form, Modal, Input, Row, Col } from 'antd';import Editor from...

2018-04-30 16:24:56 22149 4

原创 react--props

一、react的props用以父组件向子组件传递参数如下例所示： 1、propTypes用于验证props的类型。 2、getDefaultProps用于设置props的默认值。 3、在父组件中通过属性的方式，传递给子组件<SubMessage messages={this.state.subMessages}/>，子组件中使用this.props.messages得到父组件...

2018-03-07 19:41:11 403

原创 react-state的问题

react-state的问题 1、setState是异步的，在调用了setState之后，this.state的值并没有立即改变，可能还是使用原来的值。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试state

2018-03-07 14:45:40 316

原创 react出山了（一）

最近有时间，再把react重新过一遍。也把看到的一些资料，也在上面，方便回顾。1、react最简单的一个例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试react</title&amp

2018-03-06 19:27:32 187

转载 Cookie 在前端中的实践

对于很多不了解后端的前端er来说，很多涉及后端的知识点都是一道坎，因为不懂后端，所以很多知识都只能在文章上得到，却很少有机会实践，导致很多这块的知识点都是模模糊糊的。在这里，推荐大家去学习一下 Node.js，尝试一下就知道，用 Node.js 搭建一个 mock 服务器是多么简单的一件事情，新世界的大门就此敞开。今天看到一篇很好的博客，特此记录下。待使用nodejs测试下。Cookie 在前端中的

2017-10-10 09:58:07 274

原创 Node.js异常处理

异常处理什么是异常？计算机不能处理的状况称之为异常.异步异常对象和被try catch捕获的对象是一样的。不会影响下面代码的执行。错误里面的信息是堆栈信息。可以给error对象设置一个code属性，便于我们自己对错误的管理。 var err = new Error('错误对象信息'); err.code = 100; err.namename = '链接超市';

2017-09-26 17:48:27 746

原创 Node.js之文件及文件流（fs，path，buffer，stream）

文件操作文件的完整读写fs模块---》操作文件---》io----》node的特长fs模块是node非常重要的模块，能体现出node的优势fs.readFile() 读文件fs.writeFile() 写文件fs.appendFile() 在文件的内部去追加写一些内容fs.mkdir() 创建文件夹fs.readdir() 读文件夹fs.access() 判断路径（文件或者文件夹是

2017-09-26 17:47:20 9163

原创 Node.js之Global全局对象

异常处理什么是异常？计算机不能处理的状况称之为异常.异步异常对象和被try catch捕获的对象是一样的。不会影响下面代码的执行。错误里面的信息是堆栈信息。可以给error对象设置一个code属性，便于我们自己对错误的管理。 var err = new Error('错误对象信息'); err.code = 100; err.namename = '链接超市';

2017-09-22 11:21:59 529

原创 Nodejs之事件驱动+非阻塞io模型

1什么是i/o？ io input、output 输入输出，电脑的输入输出，例如音频录音表示声音输入、听音乐是声音的输出网络上的传输全部是在传字符串，i/o在服务器上可以理解为读写操作。2什么是并发？一个时间段中有几个程序都处于已启动运行到运行完毕之间。3异步i/o与事件驱动3.1什么是进程？进程是为运行当中的应用程序提供运行环境的一个运行当中的应用程序就会有一个进程与之相对应3

2017-09-20 17:14:50 6519

原创 nvm、npm、nrm--3m安装法

nvm npm nrm— 3m nvm node版本的管理工具 npm node的包管理工具 nrm npm的数据源管理工具 npm install -g nrm npm–基于Node.js开发的包的托管网站Node.js包管理工具npm :基于包的规范实现的一个包管理工具 npm init 创建package.json文件 npm install 将packag

2017-09-20 11:48:17 980

原创 Node.js之模块系统

模块系统1、什么是模块一个文件就是一个模块2、模块作用域在一个模块内变量、函数、对象都属于这个模块，对外是封闭的。3、require require("路径") //路径现阶段使用相对路径4、exports 是module.exports的一个别名、引用，exports能做的module.exports都可以完成。5、module.exports 最终曝露出去的对象，想曝

2017-09-19 14:00:37 572

原创 JavaScript 模块化发展与简介

JavaScript 模块化编程解决问题：1.命名冲突2.文件依赖问题什么是模块化将软件产品看作一系列功能模块的组合，通过特定的方式实现软件所需模块的划分、管理、加载。模块化开发演变全局函数命名冲突<script type="text/javascript"> //命名冲突代码写的可读性差而且没法完整的写在一块 var add=function(v1,v2

2017-09-01 17:57:35 374 1

原创一个DOM元素绑定多个事件时，先执行冒泡还是捕获

问题引入：一个DOM元素绑定两个事件，一个冒泡，一个捕获，则事件会执行多少次，执行顺序如何。这次不卖关思了，直接给你个答案。不理解你就继续往下看。绑定在被点击元素的事件是按照代码顺序发生，其他元素通过冒泡或者捕获“感知”的事件，按照W3C的标准，先发生捕获事件，后发生冒泡事件。所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件。addEventLi

2017-08-27 01:22:41 9352 2

原创 Object你真的知道它吗

Object.defineProperty let obj = { a: 1, b: 2 }; Object.prototype.c = 3; Object.defineProperty(obj, 'd', { enumerable: false }); for (let key in obj) {

2017-08-27 00:24:33 232

原创 toString()和valueOf()

之前再做数组的随机排序问题，潜意识想到的第一个方法就是产生随机下标排序。曾经网上一直流传着这样一个写法：function shuffle(arr) { arr.sort(function () { return Math.random() - 0.5; }); }之前一直觉得这种方法简单，但是后来总结时，再思考，每个元素仍然有很大机率在它原来的位置附近出现，他好像

2017-08-26 14:15:08 371

原创关于JavaScript的数组随机排序

之前再做数组的随机排序问题，潜意识想到的第一个方法就是产生随机下标排序。曾经网上一直流传着这样一个写法：function shuffle(arr) { arr.sort(function () { return Math.random() - 0.5; }); }之前一直觉得这种方法简单，但是后来总结时，再思考，每个元素仍然有很大机率在它原来的位置附近出现，他好像

2017-08-24 23:08:32 3841

原创跨浏览器的事件侦听器和事件对象

为跨浏览器实现添加事件侦听器和跨浏览器事件对象的使用方法做了下总结，并把这些方法打包。<高级程序设计>里面建议使用此封装方法，可跨浏览器实现事件。我下篇博客里，有介绍惰性载入方式，判断分支只需一次。惰性载入 var EventUtil = { // 添加侦听事件 addEventListener: function(element, type, handler) {

2017-08-24 18:40:50 438

原创作用域安全的构造函数

问题引入：之前看到《js语言精粹》上，介绍js语言的糟粕，其中之一就是全局对象。当在使用构造函数时，可能忘记写new，那对象就添加到了全局对象window上，导致了错误对象属性的意外增加。比如，一个构造函数：function Person(gender,age){ this.gender = gender; this.age = age;}正确的打开方式应该是var p = n

2017-08-23 17:37:51 229

原创 js中一系列的兼容---惰性载入优化

一直都是在用正则表达式，没有好好的汇总过。正好，遇到很多小算法，可以作为案例补充。正则表达式的定义：正则表达式是由普通字符和特殊字符(也叫元字符或限定符)组成的文字模板。元字符：. 匹配除换行符（\n\r）以外的任意字符\d 匹配数字, 等价于字符组[0-9]\w 匹配字母, 数字, 下划线或汉字\s 匹配任意的空白符(包括制表符,空格,换行等)\b 匹配单词开始或结束的位置^

2017-08-23 13:37:49 276

原创文件系统API

对于表单里的input：可以直接通过name找到，document.form[0].input_file主要代码：var inputFile = document.forms[0].input_file;var files = inputFile.files; //获取文件列表files[i].namefiles[i].lastModifiedDate.toLocaleDateString()

2017-08-19 16:31:41 373

原创 canvas-toDataURL()将图片转为dataURL（base64）

一个应用场景：由于某些特殊原因从服务端请求到图片路径，要求通过该路径获取对应图片的 base64 dataURL.一个完整的 dataURI 应该是这样的：data:[<mediatype>][;base64],<data>其中mediatype声明了文件类型，遵循MIME规则，如“image/png”、“text/plain”；之后是编码类型，这里我们只涉及 base64；紧接着就是文件编码后的

2017-08-18 19:34:55 9305

原创面向对象思想-封装拖拽对象

1、如何让一个DOM元素动起来我们常常会通过修改元素的top，left，translate来其的位置发生改变。修改元素的left，top值，但会引起页面重绘，而transform不会，所以要优先使用transform。2、如何获取当前浏览器支持的transform兼容写法function getTransform() { var transform = '',

2017-08-12 10:48:00 301

原创 jquery-源码分析

1、jQuery.typetype: function( obj ) { return obj == null ? String( obj ) : class2type[ toString.call(obj) ] || "object"; },//其中class2type:jQuery.each("Boolean Numbe

2017-08-10 20:31:19 231

原创 getComputedStyle方法与currentStyle属性获取元素样式

1、getComputedStylegetComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值（计算之后的最终结果，如2em计算后的结果。此外，即使没有CSS代码，也会把默认的祖宗八代都显示出来）。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。/* 语法 */var style = window.getComputedSty

2017-08-10 17:43:14 1230

原创 requestAnimationFrame--用法及轮播动画

requestAnimationFrame ，字面含义是请求动画帧。从API命名来看，和动画有着密切的关系。其用法跟setTimeout差不多，与setTimeout相比，最大的优势是由浏览器来决定函数的执行时机。形象一点的解释就是：告诉浏览器说 “我这里有一个函数要执行，你有空了帮忙执行一下”，然后浏览器相对比较空闲的时候就给执行了。用法一：动画raf api本身的设计就是用来解决js动画

2017-08-08 20:09:10 1427

原创 promise原理浅析

Promise超神超简单总结：之前总感觉promise很神秘，今天仔细读了阮一峰大神的es6，也查询了下相关的promise原理，终于明白了promise怎么这么6.简介： Promise 对象用于延迟(deferred) 计算和异步(asynchronous )计算.一个Promise对象代表着一个还未完成，但预期将来会完成的操作。Promise 对象是一个返回值的代理，这个返回值在pro

2017-08-08 15:38:24 4154 1

原创本地存储封装-localStorage，sessionStorage，userData

h5新增了本地存储localStorage，sessionStorage。IE6,7需要使用userData进行兼容。封装代码如下：var localData = { hname:location.hostname?location.hostname:'localStatus', isLocalStorage:window.localStorage?true:fals

2017-08-07 12:07:34 1003

原创 js多态-浅析

《JavaScript设计模式与开发实践》上，讲到js的多态，我觉得书上的例子还是挺好的，特此总结一下。多态就是同一个操作作用于不同的对象上面，会产生不同的解释和不同的执行结果。或者说，给不同的对象发送同一个消息的时候，这些对象会根据这个消息分别给出不同的反馈。主人家里养了两只动物，分别是一只鸭和一只鸡，当主人向它们出“叫”的命令时，鸭会“嘎嘎嘎”地叫，而鸡会“咯咯咯”地叫。这两只动物

2017-08-05 18:16:40 924

ssh_基本框架

struts框架-helloworld

day14_结构化数据库代码_以mysql为例_包含db.properties,JdbcUtils.java等

java_mysql连接的jar包

wsdl4j 解析wsdl文件工具

net.bpelunit.eclipse.updatesite-1.6.2-20160306.112155-859-assembly

bpelunit测试 SOAP fault