Tec Zoom

原创 codewars第五篇（7kyu）Vowel Count

题目：Return the number (count) of vowels in the given string.We will consider a, e, i, o, and u as vowels for this Kata.The input string will only consist of lower case letters and/or spaces.个人感觉较好的...

原创 codewars第四篇（8kyu）Is your period late?

题目：In this kata, we will make a function to test whether a period is late.Our function will take three parameters:last - The Date object with the date of the last periodtoday - The Date object wit...

原创 codewars第三篇（8kyu）Well of Ideas - Easy Version

题目：For every good kata idea there seem to be quite a few bad ones!In this kata you need to check the provided array (x) for good ideas ‘good’ and bad ideas ‘bad’. If there are one or two good ideas,...

原创 codewars第二篇（8kyu）Remove String Spaces

题目：Simple, remove the spaces from the string, then return the resultant string.个人感觉不错的解答：function noSpace(x){ return x.replace(/\s/g, '');}function noSpace(x){return x.split(' ').join('')}co...

原创 codewars第一篇（8kyu）Generate range of integers

题目：Implement a function named generateRange(min, max, step), which takes three arguments and generates a range of integers from min to max, with the step. The first integer is the minimum value, the ...

原创 HTML5 2---嵌入内容

一、Iframe：嵌入技术<iframe>元素旨在将web文档嵌入到当前文档中。这很适合将第三方内容纳入您的网站。此示例包括使用以下所需的<iframe>基本要素：注意：为了提高速度，在主内容完成加载后，使用JavaScript设置iframe的src属性是个好主意。这使您的页面可以更快地被使用，并减少您的官方页面加载时间（重要的SEO指标）。二、使用HTT...

原创 HTML5介绍

打算重新看前端知识，下面是记录的mdn上的关于html的知识点。一、列表Lists无序Unordered：<ul></ul>有序Ordered：<ol></ol>描述列表description list：<dl><dt><dd></dd></dt></dl><d...

转载 let和const

https://www.cnblogs.com/chenjg/p/7158248.html

原创 git mv

使用git mv oldName newName 来重命名文件名

原创 关于SVG图片鼠标变为小手

当鼠标停在svg图片上时，鼠标指针变成小手：

原创 React models缺失问题

直接删除文件夹下的node_modules，然后直接npm install重新安装依赖，npm start运行即可。

原创 React Route history

history有很多属性。其中push是向浏览器历史添加地址，可以通过回退按钮回到来处；replace是替换当前的页面，这样没有历史记录replace常用于用户登录页面。...

原创 React处理查询语句的插件

React处理查询语句的插件：

原创 JavaScript 正则表达式

在正则表达式中，当你在表达式加入问号时，就意味着这个表达式是可选的。<Route path="/posts/:year?/:month?" component={Posts} />

原创 React路由组件都被渲染

由于访问组件时，ur地址l的开头都是‘/’，所以两个组件都被渲染了，如下图所示，products和home都被渲染了。要解决这个问题，有两种方法：1.使用exact属性。在home组件前面加上exact，只有完全匹配才会生效。<div className="content"> <Route path="/products" component={Products} /&...

原创 React类型检测

React有内置的类型检测，但是从版本15开始，它被移到了一个单独的库中，需要独立安装。之所以安装类型检测，是因为当某些props改变或输入错误时，控制台不会报错，但是界面会出现bug。...

原创 React无状态功能性组件

当你转换一个类组件为sfc（无状态功能性组件）时，要去掉所有this的引用，并将props作为形参传入函数。例如：import React from "react";const Like = props => { let classes = "fa fa-heart"; if (!props.liked) classes += "-o"; return ( &lt...

原创 React focus鼠标指针变成手指

通过行内样式，给style一个样式style={{ cursor: "pointer" }}

原创 React生命周期（四）

卸载阶段（Unmounting Phase）：componentWillUnmount：这个方法只在一个组件从DOM卸载时调用。即在将组件移出DOM前使用。如果设置了计时器或者监听器，可以在组件移除之前做一些清除工作，同时可以做一些内存优化...

原创 React生命周期（三）

更新阶段（updating phase）：这个阶段在组件的state或者props改变时发生。render：当组件被渲染的时候，实际上是得到了一个React元素，这个元素更新了虚拟DOM。componentDidUpdate：React会拿新的虚拟DOM与旧的虚拟DOM进行比较，然后将修改的部分更新到真实DOM。在这个钩子函数中，我们可以决定何时进行Ajax请求。componentDi...

原创 React生命周期函数（二）

装载阶段(Mounting Phase）：添加一个构造器（constructor），一般需要通过使用super方法来调用父级的构造器。这个构造器只会调用一次：当一个类的实例创建的时候。这是一个给属性赋值的好机会，（ps：this.setState只有在组件被创建并插入到DOM中之后才能调用）所以如果需要直接设置state，可以在构造器里实现。同样的，不能在构造器里访问this.props...

原创 React生命周期（一）

一个组件在其生命周期中会经历很多状态。第一个状态称为mounting状态，这是组件被实例化并创建到DOM中，这里有一些可以加入组件的特殊方法，React会自动调用这些方法，这些方法被叫做生命周期钩子，它们允许我们在整个生命周期中钩住某个特定的时刻，并做一些事情。在mounting状态中有3个声明周期函数，React会按顺序调用这些方法：第二个状态是update状态，这个状态在state或...

原创 React 组件之间props调用删除方法

之前学习了在同一组件下进行删除，直接调用this.state里的数据，进行filter筛选，然后更新状态即可。但是现在counters数组是Counters的一部分，想要在Counter里通过删除按钮删除数据就不能直接使用上述方法了。为此，有了新的解决方法：Counter组件发起事件onDelete，在Counters中实现handleDelete()方法。首先，向Counters组件添加...

原创 react props与state的区别

props是我们给组件的数据，而state是组件本地或者私有的数据容器，其他的组件时不能访问这个组件的state的，它完全只能在组件内被访问。另外，props是只读的，我们不能在组件内部改变组件的输入数据。...

原创 Debugging React Apps

在控制台使用r可以得到组件的实例，通过r可以得到组件的实例，通过r可以得到组件的实例，通过r我们可以处理任何页面上的组件输入$r.render()：不只是react中有$r，在Elements中也有$0....

原创 2019-09-05 React动态传递子组件

使用children动态传递子组件Counter.jsximport React, { Component } from "react";class Counter extends Component { state = { value: this.props.value }; // 按钮点击事件，value+1 handleIncrement = () =&...

原创 2019-09-04 React Table、Button的使用

要求：代码：movies.jsximport React, { Component } from "react";import { getMovies } from "../services/fakeMovieService";class Movies extends Component { state = { movies: getMovies() }; h...

原创 2019-09-04JavaScript类真值与类假值

类假值（Falsy）：undefined、null、’’、false、0、NaN类真值（Truthy）：所有不是类假值的值false || 1 || 2：1（运算从第一个参数开始，只要遇到它第一个类真值，它就返回，即短路（就近原则））使用位元或‘|’运算符可以添加权限，使用位元与‘&’运算符可以检测是否有某个权限当js编译器处理一个布尔表达式时：它先看第一个值...

原创 React新建出现问题

Uncaught Error: Cannot find module ‘D:\project\react-counter-app-mosh\node_modules\babel-preset-react-app\node_modules@babel\runtime/helpers/slicedToArray’at webpackMissingModule (formatWebpackMessag...

原创 Javascript 方法重写

原创 2019-09-03 JavaScript继承

在使用es6中extends继承时，如果在父类中有一个构造器，然后在子类中又想添加一个构造器，在子类中的构造器必须先调用父类的构造器，以创建一个父类的实例。在子类构造器中，我们可以使用super关键字去引用父类实例...

原创 2019-09-03 JavaScript (OOP) ES6 getter & setter

const _radius = new WeakMap();class Circle { constructor(radius) { _radius.set(this, radius); } get radius() { return _radius.get(this); } set radius(value) { ...

原创 2019-09-03 JavaScript (OOP)实现属性和方法的私有化

/** * 在ES6环境下如何实现属性和方法的私有化: * 1.在命名时加下划线（非常不推荐） * 2.使用ES6的Symbol * 3.使用WeekMap */ /********************************************使用ES6的Symbol ***************************************/ /** * 这...

原创 2019-09-03JavaScript(OOP) this指向问题

当我们在严格模式下时：

原创 2019-09-02 javascript(OOP)原型（二）

若想动态得到Circle的构造函数，使用new Circle.prototype.constructor()。当你重设了原型对象之后，你应该同时重设构造器属性

原创 2019-09-02 JavaScript（OOP）原型问题（一）

参考视频https://www.bilibili.com/video/av35179218/?p=28为了设置继承，希望circleBase继承自shapeBase，如图所示：在JavaScript中，有个函数可以从给定的原型创建对象，就是Object.create()，第一个参数是用作创建的原型，可以为空。我们需要一个新的circleBase对象继承自shapeBase，而不是obje...