![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
ES6
文章平均质量分 52
ES6
I-T枭
这个作者很懒,什么都没留下…
展开
-
js中this指向问题
js中this指向问题老生常谈的问题了,在这里说一下我所理解的层面的this。this 指的是当前对象,如果在全局范围内使用this,则指代当前页面window;如果在函数中使用this,则this指代什么是根据当前函数是在什么对象上调用。我们可以使用call和apply改变函数中this的具体指向。console.log(this === window) // trueconsol...转载 2018-08-20 22:12:44 · 130 阅读 · 0 评论 -
react的map循环嵌套
var btnType=Object.keys(obj).map((key,i)=>{ var item=obj[key].map((s,index)=>{ return ( <button className={styles.btnType} key={index}>{obj[key][index]}</button> ...原创 2018-08-14 10:04:06 · 1920 阅读 · 0 评论 -
使用create-react-app或者antd创建一个React项目
转载请注明出处:王亟亟的大牛之路距离上一次提及React的内容差不多也快1年多了,然后这一年里平胸而论觉得进步不多,然后最近因为业务需要然后都在做一些前端的工作。 然后以前都是从npm init一路自己撸到配置package.json到写scripts那些,现在脚手架一行撸穿,还是感叹懒人的世界6666老规矩开篇前先案例:https://github.com/ddwhan0123/Useful-O...转载 2018-06-29 12:06:14 · 447 阅读 · 0 评论 -
create-react-app关闭eslint提醒
create-react-app关闭eslint提醒(亲测)在create-react-app框架下的react项目中,定义变量,未使用会出现如下报错:解决方案:1: 运行npm run eject 注意:这是一个单向操作,一旦你使用eject,那么就不能恢复了 使用说明:如果你对create-react-app这个构建工具和配置项不满意,你可以在任何时候eject,从...原创 2018-06-29 11:51:14 · 14911 阅读 · 2 评论 -
JS性能优化 之 FOR循环
FOR 循环我们用的真的是太多了,但你是否关注过它的优化写法呢?记录下:1. 最最常规写法,没有任何不妥for (var i = 0; i < 10; i++) { // do something...}2. 循环的次数为变量的情况for (var i = 0; i < arr.length; i++) { // do something...}其实大多数人都是这种写法,这种写法的缺点在于,每次循环都要去读取一次数组的长度,不划算...转载 2020-05-19 15:26:33 · 1279 阅读 · 0 评论 -
js-依次循环异步请求(普通/ES6)
要求:请求5次ajax,将结果依次显示在页面老办法:用数组+定时器代替for循环//递归 -------有顺序 function getTime(j, length) { $start = new Date().getTime(); Time(j, length); } function T...原创 2020-03-28 17:32:09 · 1235 阅读 · 0 评论 -
react-router-dom动态渲染路由
module.jsimport React from 'react';export function Home() { return <h2>Home</h2>;}export function About() { return <h2>About</h2>;}export function Users() {...原创 2020-03-06 17:56:32 · 2471 阅读 · 1 评论 -
fetch处理response.json()报错处理
fetch是基于promise,fetch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象。fetch特点1、第一个参数是URL:2、第二个是可选参数,可以控制不同配置的 init 对象3、使用了JavaScript Promises来...原创 2020-02-28 17:19:34 · 11032 阅读 · 0 评论 -
对ES6中的Fetch进一步封装(项目级)
1.封装 (http.js)class Ajax { get(url) { return new Promise((resolve, reject) => { fetch(url) .then(res => res.json()) .then(data => resolve(data)) .catch(...原创 2020-02-27 21:57:32 · 390 阅读 · 0 评论 -
React中this值绑定和事件函数传参
Javascript中的this值总是能让很多初学者感到困惑,总的来说this值就是指向调用函数的那个对象。但是call,apply,bind方法和ES6中箭头函数让this值还是要具体情况具体分析,不过这块知识点并不是很难,对应的博客也很多,花点时间就能掌握。接下来主要介绍React中this值绑定和事件函数传参。React中this值绑定React中也有this值的绑定问题,接下来...转载 2019-11-14 11:26:39 · 475 阅读 · 0 评论 -
React 数据为什么要使用immutable方式(PureRenderMixin封装)?
深复制与浅复制let obj = { a: 1, arr: [1, 2]};let obj1 = obj; //浅复制obj1.a = 2console.log(obj) // { a:2, arr: [1,2] };//同样的方式let obj = { a: 1, arr: [1, 2]};let obj2 = deepCopy(obj); //深复制obj2.a = 2cons...原创 2019-11-12 14:34:20 · 224 阅读 · 0 评论 -
react使用Immutable实战
1. 与 React 搭配使用,Pure Render熟悉 React 的都知道,React 做性能优化时有一个避免重复渲染的大招,就是使用 `shouldComponentUpdate()`,但它默认返回 `true`,即始终会执行 `render()` 方法,然后做 Virtual DOM 比较,并得出是否需要做真实 DOM 更新,这里往往会带来很多无必要的渲染并成为性能瓶颈。当然我们...原创 2019-11-11 16:54:23 · 687 阅读 · 0 评论 -
Vue-cli报错error: Unexpected console statement (no-console) 解决办法
写项目过程中用ESLint遵守代码规范很有必要,但是对于一些规范也很是无语,比如:‘Unexpected console statement (no-console)’,连console都不能用,这就很抓狂了。其实增加一行代码即可。修改package.json中的eslintConfig:{} 中的 “rules”:{},增加一行代码: "no-console":"off" "e...原创 2019-10-30 14:49:21 · 1890 阅读 · 0 评论 -
vue 给UI库添加按需加载时启动项目时 babel-preset-es2015 报错
项目使用vue cli3脚手架工具构建按照element 官方文档中所示。npm install babel-plugin-component -D然后添加.babelrc文件{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { ...原创 2019-10-30 12:03:30 · 12536 阅读 · 12 评论 -
如何创建.babelrc文件
方法一:根目录下,创建 .babelrc. 文件名就可以了!方法二:cmd进入根目录,输入 type null>.babelrc ,回车即可!原创 2019-10-30 09:55:22 · 1424 阅读 · 0 评论 -
react map遍历时事件无效
import React from 'react';import './Left.css';const menuArr_ = ['用户管理', '用户登录', '房源管理', '财务管理'];class Left extends React.Component { constructor(props) { super(props); this.s...原创 2019-10-24 17:29:08 · 369 阅读 · 0 评论 -
react.js 之 create-react-app 命令行工具系统讲解
react.js 教程之 create-react-app 命令行工具系统讲解快速开始npm install -g create-react-appcreate-react-app my-appcd my-app/npm start通过http://localhost:3000/查看你的app使用 npm run build 编译打包程序npm test 文件修改后测试,这部分内容后面...转载 2018-06-29 00:22:55 · 617 阅读 · 0 评论 -
ES6中的类(Class)的写法
1.传统ES5中的class用法//ES5的对应写法 (function(){ //定义类、构造函数 function User(name,age){ this.name=name; this.age=age; } ...原创 2018-08-11 19:13:33 · 927 阅读 · 0 评论 -
系统学习前端之FormData详解
FormData1. 概述FormData类型其实是在XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。2. 构造函数创建一个formData对象实例有几种方式1、创建一个空对象实例var formData = new FormData();此时可以调用append()方法来添加数据2、使用已有的...原创 2018-08-23 00:39:56 · 299 阅读 · 0 评论 -
fetch formData 上传文件(设置header不成功)
fr.postBlob = function (url, file, success, fail) { let filedata = new FormData(); filedata.append('file', file.file, file.file.name); filedata.append('path', file.data.path); let req...原创 2018-08-23 00:54:53 · 7608 阅读 · 1 评论 -
React中实现定时操作和时间间隔内循环操作
componentDidMount = () => { // this.autoHiddenConfirm(); }componentWillReceiveProps = (props) => { if (props.confirmType == 'tips' && !this.timer) { //...原创 2018-08-24 18:08:56 · 3849 阅读 · 0 评论 -
Ajax和Jsonp的工作原理,以及区别。
Ajax工作原理是相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务器读取新数据时由Ajax引擎代为向服务器提交请求。AJAX最大优点就是不刷新整个页面的前提下与服务器通信维护数据。过程的话第一步:创建一个ajax引擎对象,ie6的是new ActiveX...原创 2018-08-24 23:27:16 · 260 阅读 · 0 评论 -
[解决]npm ERR! publish Failed PUT 403
使用命令 npm publish 发布一个包时,或有如下报错:...npm ERR! publish Failed PUT 403npm ERR! code E403npm ERR! no_perms Private mode enable, only admin can publish this module:......解决过程如下:1. 检查仓库是否被设成了淘宝镜像库...原创 2018-08-25 20:51:03 · 4103 阅读 · 0 评论 -
npm publish项目报错
npm bulish步骤如下:1,npm adduser(注册npm账号)方式一:在npm命令行输入npm adduser创建npm账号 打开控制台 输入npm adduser进行登录npm login npm账号注册显示成功(Logged in as maxiaorong on http://registry.npmjs.or...原创 2018-08-25 21:24:07 · 19322 阅读 · 3 评论 -
React之setState调用unmount组件报警告
最近公司比较忙,所以更新进度比较慢,一是因为要梳理以前的代码,二是因为赶进度!!!这个问题也是机缘巧合碰到了,正赶上这周公司网络无缘无故抽风(很慢),然后那天在调试代码的时候忽然发现浏览器报了一个这样的Warning:warn.png 其实从字面上也大概可以了解个大概,是由于setState只能更新挂载完成的组件或者正在挂载的组件,那么定位这个BUG的第一步当然是先了解组件的生命...原创 2018-11-09 09:39:50 · 820 阅读 · 0 评论 -
react 的弹出层你们一般怎么写
流程分析:交互意图以及需求 结构:HTML+CSS实现静态结构 接口:定义公共接口 实现:抽象=>细节,实现功能接口、暴露事件 完善:便利接口,插件封装、重构等实例 :Modal组件模态组件是最常用到等组件,Modal通过弹出一个高聚集性的窗口来立即捕获当前用户注意力需求分解模态窗口水平锤子居中 半透明遮罩。 可以自定义标题和内容 提供取消和确认操作页面结构...原创 2018-11-08 14:47:14 · 3087 阅读 · 0 评论 -
js调用百度地图api实现定位
<?php/** * Created by PhpStorm. * User: onlythen * Date: 5/26/15 * Time: 3:23 PM */session_start();require_once("config.php");$link_id=mysql_connect($DBHOST,$DBUSER,$DBPWD);mysql_select_...原创 2018-12-13 16:31:45 · 1597 阅读 · 0 评论 -
前端开发环境的安装、搭建及配置
干货( Dry goods?)node.js brew(just for mac) ruby npm cnpm yarn git webpack bower browser-sync express gulp grunt sass vue angular react cutterman(填坑中) 待续...node.jsWindow官网下载地址:下...转载 2018-12-30 01:14:55 · 9495 阅读 · 0 评论 -
一看就懂的ReactJs入门教程-精华版
现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点长,耐心读完,你会有很大收获哦~ 一、ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScri...转载 2018-12-26 10:59:05 · 551 阅读 · 0 评论 -
ES6的开发环境搭建
在搭建es6开发环境之前,先简单介绍一下es6。ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。我们为什么要使用es6?es6有什么优点?......,我会在后面写一个es6专题系列,来介绍es6的使用。本次分享的内容是 es6...转载 2018-05-17 22:34:35 · 145 阅读 · 0 评论