有梦想必远方-CSDN博客

原创 TypeScript（数据类型、函数、类、接口、泛型）

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。JavaScript 与 TypeScript 的区别TypeScript 是 JavaScript 的超集，支持 ECMAScript 6 标准，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一...

2019-12-27 17:51:00 1056

原创 js前端下载图片、文件（针对后台接口返回流的形式）

通过接口返回流的方式，我们可以给后台传参数（token等），不解释，直接上代码function downImgFile(file_name, content){ const csvData = new Blob([content]); // for IE if (window.navigator.msSaveOrOpenBlob) { window.nav...

2019-12-13 17:50:46 3907

原创 react中由缓存功能引发版本更新的血案（react-router-cache-router缓存组件，react-router-dom5，路由鉴权修改，异步组件修改，hook，@connect）

react实现缓存功能首先React Router 必须确保是最新版本，因为使用了 new Context，所以必须确保Router 使用相同的 API，之前的项目我们采用的是react-router3.xx版本，想都不用想，这将到这我们的项目中要改一些别人舍弃的东西。。。一、react-router5新版本的router不支持route里面嵌套route，可以放到另一个组件中去配置，这样...

2019-12-13 15:01:04 3171

原创 react中路由鉴权

vue.js中有丰富的钩子函数，比如全局前置守卫router.beforeEach，里面做一些判断，权限等。react中的路由鉴权网上有很多大佬分享的丰富的资源，但是在这里我说下我在项目中用到的简单的方式Route 可以定义 onEnter 和 onLeave 两个 hook ，这些hook会在页面跳转确认时触发一次。这些 hook 对于一些情况非常的有用，例如权限验证或者在路由跳转前将一些数...

2019-11-21 17:51:30 1281

原创 react中异步加载组件的几种方式（asyncComponent、getComponent、react-async-component、react-loadable）

异步加载组件就是为了解决初始化页面加载慢，这个时候我们应该将代码进行分割，按需加载。一、利用import() 编写 asyncComponent.jses6提供import()函数，它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。import()返回一个 Promise 对象asyncComponent.jsimport React, { Component } fr...

2019-11-20 16:57:44 5916

原创 Promise、Generator以及Async/await的理解

一、Promise 对象之前，异步编程的方法，大概有下面四种：回调函数、事件监听、发布/订阅、Promise 对象回调函数本身并没有问题，它的问题出现在多个回调函数嵌套。不难想象，如果依次读取两个以上的文件，就会出现多重嵌套。代码不是纵向发展，而是横向发展，很快就会乱成一团，无法管理。因为多个异步操作形成了强耦合，只要有一个操作需要修改，它的上层回调函数和下层回调函数，可能都要跟着修改。这种情...

2019-11-19 18:38:11 437

原创 vue修饰符.sync的作用

其实就是在一些特殊情况下（例如分页组件）父子组件“双向绑定时”用到，并且是一个语法糖。我们在传递一个属性到子组件时，正常情况下，子组件不能直接修改这个属性，修改了控制台会发出警告，这个vue的单项数据流原则，为了就是维护的问题，如果其他子组件也用到了这个属性，就会带来不必要的麻烦，但是在一些特殊情况下，比如分页组件，我们需要将父组件传来的值修改并回传给父组件，这时候我们正常思路是，在子组件使用...

2019-11-15 18:11:14 394

原创 react中基于ant-Design二次封装分页组件

一、组件中使用import Pagination from '@components/pagination';this.state = { total: 0 //总页数}//初始化时自调用一次，用于请求借口数据componentDidMount() { this.onChangeCurPageOrPageSize(1, 10)}<Pagination to...

2019-11-15 15:54:17 2071 2

原创 react.js开发随手笔记（class、虚拟dom中diff算法、react生命周期、组件传值及redux的中间件、组件分类）

之前一直用vue.js开发项目，上个项目领导要求用react.js开发，不要慌，干它，先说下我开发对比vue的感觉react灵活性大，处理复杂的业务或者说某个地方某个细节处理你想要的都可以用render函数生成vue api丰富，实现功能也比较多，不同的场景绝大多数都有专门的api，react可能需要你自己来处理，各有所长不过vue也能处理复杂的项目，具体情况看自己对技术的掌握程度和业务的复...

2019-11-15 11:58:23 225

原创将扁平数据转成树状数据

将扁平数据转成树状数据，转化中间可以添加自己想要的字段（序号等等） export const flatTransTree = (ids,list) => { let newArr = [] newArr = list.filter(father => { let branchArr = list.filter(child => { if (i...

2019-11-14 16:20:04 256

原创 instanceof底层原理及与typeof的区别、proto属性扩展

一、instanceof底层原理function instanceof(L, R) { //L是实例对象 R是构造函数 var L = L.__proto__; while (true) { if (L === null) return false; if (L === R.prototype) return true; ...

2019-09-03 16:51:11 261

原创可枚举性的影响及扩展

可枚举性enumerable影响以下三个函数的结果： for…in Object.keys() JSON.stringify这三种方式都是能读取到可枚举属性，如果enumerable为false，则取不到此属性值。我们常见的js中基本包装类型的原型属性是不可枚举的，如Object, Array, Number等，还有class类的内部所有定义的方法，都是不可枚举的。Object...

2019-09-03 15:28:52 100

原创如何将vscode的扩展存到github

一、安装的扩展是通过自己一点点手动安装的1、首先在vscode的扩展里面安装 settings sync 安装完成后重新载入，这个时候你也可以看里面的详细信息，此文以下可以不看2、上传你的扩展到github 快捷键Shift + Alt + U，弹出github页面，生成新的Token，勾选gist创建，生成的token存起来，因为以后就找不到它了。然后回到vscode，会让你输入刚才...

2019-03-12 15:12:24 1034

原创 vue中引入全年日历插件calendar.js

针对依赖amazeui的全年日历插件在vue项目中的问题cnpm i jquery -Dcnpm i amazeui -D在当前vue中引入jquery 、amazeui及相关css或这全局引入（看其他是否用到）calendar.js这里引入需要注意import引入其实是引入js暴露出的方法，calendar.js里面的方法并没有暴露出来，我们需要修改一下源码，将我们用到的方法expor...

2019-03-07 14:17:33 4419

原创 vue项目中按钮权限控制之自定义指令

vue项目中，有的情况下，你需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。这里我们自定义一个按钮权限控制的指令import Vue from 'vue'import store from '@/store'/**权限指令**/Vue.directive('has', { bind: function (el, binding) { if (!Vue.pro...

2019-03-05 16:16:23 3710

原创手动配置webpack

一、webpack介绍webpack其实就是javascript应用程序的静态模块的打包器。核心概念：入口(entry)、输出(output)、loader、插件(plugins)作用：webpack会将项目的资源文件当成一个个模块，模块之间有依赖关系（比如js和png，js会动态的改变引入一个图片，css设置背景图片和png有依赖，webpack会对这些依赖进行处理，让浏览器识别出来）...

2019-03-05 13:50:23 2051 1

原创 mpvue搭建、UI组件库及引入echarts的适配总结

1、快速上手，搭建mpvue小程序项目 http://mpvue.com/mpvue/quickstart/2、mpvue搭建与使用手册mpvue介绍 http://mpvue.com/mpvue使用手册 http://mpvue.com/mpvue/3、UI库3.1 基于mpvue 的一个小程序 UI 框架，实现组件化，支持 npm 安装，但是不支持全局安装，并且内容比较少。源码 h...

2019-03-04 16:12:02 1389

原创 jquery项目移动端适配

引入标签<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><script src="./js/plugins/flexible/index.js"></script>..

2019-03-04 15:24:52 2851

原创 vue移动端rem适配--附带引入第三方库解决方案

一、先上解决方案：移动端适配我采用淘宝的一套rem解决方案源码： https://github.com/amfe/lib-flexible1、安装 npm i -S amfe-flexible2、引入meta标签&amp;amp;amp;amp;lt;meta name=&amp;amp;amp;quot;viewport&amp;amp;amp;quot; content=&amp;amp;amp;quot;width=device

2019-02-25 12:08:48 3102

转载欢迎使用CSDN-markdown

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...

2019-02-21 15:37:33 102

qiuzhf