the_lower的博客

原创 前端学习之路

一、基础html5：https://www.w3school.com.cn/html5/index.aspcss3：https://www.w3school.com.cn/css3/index.asp、https://www.w3school.com.cn/cssref/index.asp、https://www.w3school.com.cn/css/index.aspjs：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-i

原创 redux小记

Redux 和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。只要传入参数相同，返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用，没有 API 请求、没有变量修改，单纯执行计算。时刻谨记永远不要在克隆 state 前修改它。使用 action 来描述“发生了什么”，使用 reducers 来根据 acti

原创 css3简单回顾

边框属性：border-radius：创建圆角边框box-shadow：添加阴影border-image：使用图片来绘制边框背景属性：background-size：规定背景图片的尺寸background-origin：规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区域background-clip：规定背景的绘制区域新的文本属性：text-shadow：向文本添加阴影word-wrap：允许对长的不可分割

原创 学习HTML5的应用程序缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。什么是应用程序缓存（Application Cache）？HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势：离线浏览 - 用户可在应用离线时使用它们速度 - 已缓存资源加载得更快减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。浏览器支持所有主流浏览器均支持应用程序缓存，除了 Internet

原创 HTML5中web存储

在客户端存储数据HTML5 提供了两种在客户端存储数据的新方法：localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数

原创 HTML5中的SVG学习

什么是SVG？SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用于定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失SVG 是万维网联盟的标准SVG 的优势与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：SVG 图像可通过文本编辑器来创建和修改SVG 图像可被搜索、索引、脚本化或压缩SVG 是可伸缩的SVG图像可在任何的分辨率下被高质量地打印SV

原创 HTML5中的Canvas学习

什么是 Canvas？HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建 Canvas 元素向 HTML5 页面添加 canvas 元素，规定元素的 id、宽度和高度：<canvas id="myCanvas" width="200" height="100"></canvas>通过 JavaScript 来绘制canvas

原创 关于HTML5中的拖放

拖放拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。浏览器支持Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释：在 Safari 5.1.2 中不支持拖放。设置元素为可拖放首先，为了使元素可拖动，把 draggable 属性设置为 true拖动什么 - ondragstart 和 setData()ondragstart 属性调用了一个函数，drag

原创 HTML5新特性总结

HTML5 中的一些有趣的新特性：用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素，比如 article、footer、header、nav、section新的表单控件，比如 calendar、date、time、email、url、search...

原创 es6中Generator函数的语法

一、Generator 函数有多种理解1、语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。2、执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。3、形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状

原创 回顾下es6模块化

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。// ES6模块import { stat, exists, readFile } from 'fs';上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。ES6 的模块自动采用严格模式，不管你有没有在模块头部加上

原创 es6中的类和继承

class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; }}类的所有方法都定义在类的prototype属性上面class Point { constructor() { // ... } toString() { // ... } toValue

原创 es6函数的扩展简单总结

一、函数参数的默认值function log(x, y = 'World') { console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello1、指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真。(function (a) {}).length // 1(fu

原创 关于async函数的错误处理

任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行，有时，我们希望即使前一个异步操作失败，也不要中断后面的异步操作。这时可以将第一个await放在try…catch结构里面，这样不管这个异步操作是否成功，第二个await都会执行。另一种方法是await后面的 Promise 对象再跟一个catch方法，处理前面可能出现的错误。async function f() { try { await Promise.reject('出错了');

原创 es6中promise对象简单总结

1、Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），Promise对象是一个构造函数，用来生成Promise实例。const promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value); } else { reject(error); }});

原创 es6数组扩展回顾

一、扩展运算符扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列console.log(...[1, 2, 3]) // 1,2,3扩展运算符的应用1、替代函数的apply方法function f(x, y, z) { // ...}var args = [0, 1, 2];f.apply(null, args); // ES5 的写法function f(x, y, z) { // ...}let args = [0,

原创 let和const简单总结

1、暂时性死区2、没有变量提升3、let不允许在相同作用域内，重复声明同一个变量，不能在函数内部重新声明参数4、块级作用域5、允许在块级作用域中声明函数，函数声明类似于let，在es6浏览器中函数声明类似于var，推荐使用函数表达式。...

原创 Less新手入门

一、变量：@定义变量（例如@width）二、混合（Mixins）.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}#menu a { color: #111; .bordered(); /*混入*/}三、嵌套（Nesting）/*将伪选择器与混合一同使用。下面是一个经典的 clearfix 技巧，重写为一个混合(& 表示当前选择器的父级）:*/.clearfix

原创 mock简介

Mock.mock()：根据数据模板生成模拟数据；Mock.setup()：配置拦截AJAX请求时的行为；Mock.Random()：用于生成各种随机数据；Mock.valid(template，data)：校验真实数据data是否与数据模板template匹配；Mock.toJSONSchema()：把Mock.js风格的数据模板template转换成JSON Schema...

原创 安装并配置yarn(附yarn常用命令)

1、安装npm install yarn -g2、查看版本yarn -version3、配置yarn私服（加入网址为http://www.taobao.com）yarn config set registry http://www.taobao.com4、查看yarn私服yarn config get registry 回车显示http://www.taobao.com这样以后就可以直接执行yarn install安装依赖包啦...

原创 css清除浮动的4种方法

float布局会脱离文档流，对页面的布局造成影响，比如造成父级的高度坍塌等问题。清除浮动后，便不会影响文档流。下面介绍一下现在清除浮动的一些方式。一、父级添加overflow: hidden；子元素浮动了，会造成父元素的高度坍塌。只要给父元素添加overflow: hidden;属性，就可以解决浮动带来的影响。<ul class="cc"> <li></li> <li></li></ul><style t

原创 区分冒泡和捕获

事件处理函数中第三个参数为false表示冒泡，为true表示捕获，默认为false

原创 HTML img元素中的 alt 属性与 title 属性区别

图片中的 alt 属性是在图片不能正常显示时出现的文本提示图片中的 title 属性是在鼠标在移动到元素上的文本提示

原创 css中visibily:hidden和display:none的区别

1、display:none视为不存在且不加载，不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失；visibility:hidden隐藏，但在浏览时保留位置，即对象在网页上不可见，但该对象在网页上所占的空间没有改变；2、使用 display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。即它仍具有高度、宽度等属性值。...

原创 js理解对象

js中有两种属性：数据属性和访问器属性。1、属数据属性默认的特性有4个：(默认前三个属性都为true)configurable: 表示能否通过delete删除属性从而定义新属性，为false则不能变为可配置的了。enumerable：可通过for … in枚举writable：可写value：属性的值2、要修改属性默认的特性，必须使用Object.defineProperty（属性所在的对象，属性的名字，描述符对象)方法，描述符对象的属性必须是configurable、enumerable

原创 跨域技术

原创 HTTP与ajax介绍

HTTP头部信息：请求头：ACCEPT:浏览器能够处理的内容类型。ACCEPT-Charset: 浏览器能够显示的字符集。ACCEPT-Encoding: 浏览器能够处理的压缩编码。ACCEPT-Language：浏览器当前设置的语言。Connection：浏览器与服务器之间连接的类型。Cookie：当前页面设置的任何cookie.Host：发出请求的页面所在的域。Referer：发出请求的页面的URI.User-Agent: 浏览器的用户代理字符串。使用setRequestHeade

原创 原生ajax

var xhr = new XHRHttpRequest();//第三个参数表示是否异步发送请求xhr.open(“get”, “example.php”, false);//参数作为请求主体发送的数据，如果没有则必须传入nullxhr.send(null);响应数据相应的属性：responseText: 作为响应主体被返回的文本；responseXML: 保存着响应数据的XML DOM文本；status: 响应的HTTP状态；statusText: HTTP状态的说明。异步请求时，re

原创 前端模块化

node中的模块化：es6中的模块化：

原创 vue笔记 ---组件之间的通信

父组件向子组件传值：props中如果值是一个数组或者对象，默认值必须是一个工厂函数，否则报错。props: { msgInfo: { type: Array, required: true, default: function(){ return [] } }, msg1: [string, number] //msg1既可以是字符串也可以是number}父组件中绑定props值要用短横线格式：<comList :mag-info="message"&gt.

原创 react学习第六天

react插槽加粗样式

原创 react学习第五天

react生命周期：组件从实例化到渲染到最终从页面中销毁，整个过程就是生命周期，在这个生命周期中，我们有许多可以调用的事件，也俗称为钩子函数。生命周期的3个状态：mounting：将组件插入到DOM中updating：将数据更新到DOM中unmounting：将组件移除DOM中生命周期钩子函数：componentWillMount：组件将要渲染componentDidMount：组件渲染完毕componentWillReceiveProps：组件将要接收props数据shouldCo

原创 js数组方法

遍历数组的方法：forEach：对数组直接进行循环，相当于直接for 循环：arr.forEach((item,index,arr)=>{ //.....})map：对数组的每一项进行加工，加工完成之后返回一个新的数组arr.map((item,index,arr)=>{ //...})filter：过滤，将想要的内容进行行筛选，不要的内容去除，最终想要的内容返回arr.filter((item,index)=>{ //....})reduc

原创 react学习第四天（三）

react列表渲染：将列表的内容拼装成数组放置到模板中import React from 'react';import ReactDOM from 'react-dom';let arr = ["小明","小黑","小白"]let arrHtml = [<li>小明</li>,<li>小黑</li>,<li>小白</li>] //将数据拼装成数组jsx对象class Welcome extends React.Compone

原创 react学习第四天（二）

react条件渲染1、案例一import React from 'react';import ReactDOM from 'react-dom';import'./App.css';function UserGreet(props){ return ( <h1>欢迎登陆</h1> )}function UserLogin(props){ return ( <h1>请先登录</h1> )}class Paren

原创 react学习第四天（一）

react事件：绑定事件的命名，用驼峰命名法{ } 中传入一个 函数，而不是字符串<button onClick={this.sendData}>传递数据给父元素</button>react返回的事件对象是代理的原生事件对象，如果想要查看事件对象的具体值，必须直接输出事件对象的属性，直接输出console.log(event)打印出属性值都为null原生js阻止默认行为时，可以直接返回return false，react中，阻止默认行为必须e.preventDefa

原创 react学习第三天（二）

1、父组件向子组件传数据：props父组件向子组件传数据：props 单向流动props的传值可以是任意的类型props可以设置默认值：HelloMessage.defaultProps = { name: '老陈' } //name是变量名，可以设置多个默认值props可以传递函数，可以传递父元素的函数，就可以修改父元素的state状态，从而实现子组件向父组件传递数据2、子组件向父组件传递数据：调用父组件的函数从而操作父元素的数据，从而实现数据从子组件传递给父组件...

原创 react学习第三天（一）

react状态管理react中的 state 相当于vue中的 data ，但是使用方式和vue不一致。修改state的正确方式，调用setState,切勿重新修改数据例： 每隔1行输出当前时间import React from 'react';import ReactDOM from 'react-dom';import'./App.css';class Clock extends React.Component{ constructor(props){ super(pro

原创 react学习第二天（三）

react组件：函数式组件、类组件1、函数式组件//函数式组件function Father(){ //组件名字要大写 return ( <div> <h1>函数式组件</h1> </div> )}ReactDOM.render( <Father/>, document.querySelector('#root'))//函数式组件function Father(){ //组件名字

原创 react学习第二天（二）

jsx_style 样式let exampleStyle = { background: "pink", borderBottom: "1px solid blue" //注意要使用驼峰命名法}let element = ( <div> <h1 style={exampleStyle}>helloworld</h1> //jsx中不能在style中直接添加样式 //<h1 style="height: 200px;"&