wyd1022-优快云博客

转载 ES6中class的使用

javascript传统做法是当生成一个对象实例，需要定义构造函数，然后通过new的方式完成。function StdInfo(){ this.name = "job"; this.age = 30; }StdInfo.prototype.getNames = function (){ console.log("name：...

2018-05-18 17:01:29 482

摘要这篇文章主要面向想要使用 HOC（Higher Order Component，高阶组件）模式的进阶开发者。如果你是 React 新手，建议你从阅读 React 的文档开始。高阶组件是一种很好的模式，很多 React 库已经证明了其价值。这篇文章中我们将会详细的讲解什么是 HOC，你能用它做什么，它有哪些局限，如何实现它。什么是高阶组件？高阶组件就是一个 React 组件包裹着另外一个 Re...

2018-05-18 11:20:55 1181

原创 React 5大核心概念

现在揭晓这五大核心概念：1、组件 2、JSX 3、Props & State 4、组件API 5、组件类型概念一：React组件的作用React组件能够像原生的HTML标签一样输出特定的界面元素，并且也能包括一些元素相关逻辑功能的代码。现在我们一般会用ES6的Class语法来声明一个React组件，它包含一个能够返回HTML的render方法。（当然也可以用函数声明，我们在之后会...

2018-05-18 10:44:53 4547

转载 Vue中使用vux的配置

一、根据vux文档直接安装，无需手动配置npm install vue-cli -g // 如果还没安装vue init airyland/vux2 my-project // 创建名为 my-project 的模板cd my-project // 进入项目npm install --registry=https://registry.npm.taobao.org ...

2018-04-24 09:19:33 321

原创 npm 在线更新

npm版本太低的，请在cmd黑窗口输入下面命令进行升级npm update npm -g请在cmd中输入下面命令安装cnpmnpm install -g cnpm –registry=https://registry.npm.taobao.org

2018-04-24 09:18:46 362

转载如何利用vue-cli初始化构建vue项目

第一步：安装vue-clicnpm intall vue-cli -g第二步：检查是否安装成功查看vue-cli是否成功，不能检查vue-cli，需要检查vuevue -V查看vue的版本号vue list第三步：初始化vue init webpack “名称”名称就是创建项目的名称，暂时叫做vue-me如果在执行上述操作之后，你遇到如下的错误，导致不能运行。上述的报错是由于使用cnpm安装的，...

2018-04-23 16:18:16 244

转载 JS字符串常用方法总结

0;　　for(var i=0;i<str1.length;i++)　　{　　　　n=str1.charCodeAt(i);　　　　if(n<48 || n>57)　　　　{　　　　　　return false;　　　　}　　}　　return true;} 4、str.indexOf(searchString,startIndex); 返回子字符串第一次出...

2018-04-20 09:14:13 124

原创 js 常用方法之数组篇

js 数组常用方法总结数组方法下面开始介绍数组的方法，数组的方法有数组原型方法，也有从object对象继承来的方法，这里我们只介绍数组的原型方法，数组原型方法主要有以下这些：join()push()和pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf() （ES5新增）forEac...

2018-04-19 16:48:10 137

原创 js中如何验证一个字符是否为大写字母,不用正则表达式

unction allCaps(text){ for(var i=0;i<text.length;i++){ var c=text.charAt(i); if(c<'A' || c>'Z') return false; } return true;}

2018-03-22 20:03:11 10165

原创数字格式字符串中剔除其他非法字符

charFilter(rmb, bit) { var num = '0123456789.-'; var res = ''; var chrs = (rmb + '').split(''); for (var chr of chrs) { if (num.indexOf(chr) == -1) continue; res += chr; } if (!bit...

2018-03-22 19:42:57 669

转载 npm太慢，淘宝npm镜像使用方法

淘宝 npm 地址： http://npm.taobao.org/如何使用有很多方法来配置npm的registry地址，下面根据不同情境列出几种比较常用的方法。以淘宝npm镜像举例：1.临时使用npm --registry https://registry.npm.taobao.org install express12.持久使用npm config set registry https://r...

2018-03-16 09:01:28 155

转载 es6 javascript的map数据结构的实例的属性和操作方法、遍历方法

（1） size 属性size属性返回 Map 结构的成员总数。[javascript] view plain copylet map = new Map(); map.set('foo', true); map.set('bar', false); map.size // 2 （2） set(key, value)set方法设置key所对应的键值，然后返回整个 Map 结构。如果ke...

2018-03-14 17:18:03 244

原创 React学习之扩展阻止数据的更新的方法

1、使用PureRenderMixin浅比较PureRenderMixin的出现早于React.PureComponent，该插件属于历史保留，现在就使用React.PureComponent吧，这里也就提一下如果你的React组件的渲染函数是一个纯函数也就是说对于相同的值返回一样的结果同时不影响元素局，在某些场景下，你可以利用这个插件来极大地提升性能。var PureRenderMixin = ...

2018-03-13 17:16:35 1260

转载如何扩展 Create React App 的 Webpack 配置

Create React App（以下简称 CRA）是创建 React 应用的一个脚手架，它与其他脚手架不同的一个地方就是将一些复杂工具（比如 webpack）的配置封装了起来，让使用者不用关心这些工具的具体配置，从而降低了工具的使用难度。但是对于一些熟悉 webpack 的开发者来说，他们可能想对 webpack 配置做一些修改，这个时候应该怎么办呢？其实我们可以通过以下几种方式来修改 webp...

2018-03-10 14:40:21 8114

转载以create-react-app为基础创建项目

初始化项目首先，要先利用create-react-app创建一个react项目，可参考https://github.com/facebookincubator/create-react-app注：用“[ ]”包裹的都是可自定义的内容，例如：cd [project-name]，实际上可能是cd my-app，也可能是cd my-project。总之“[ ]”包裹的内容，只表示上下文里相互对应的变量。...

2018-03-10 14:23:00 1037

转载 Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，GitHub地址是：https://github.com/vuejs/vue-cli 一、安装 node.js首先需要安装node环境，可以直接到中文官网http://nodejs.cn/下载安装包。只是这样安装的 node 是固定版本的，如果需要多版本的 node，可以使用 nvm 安装...

2018-03-10 14:03:57 168

转载 create-react-app创建react项目，使用axios跨域

最近用react做项目练手，项目中调用接口有跨域问题，引用的插件是axios，react项目是用 create-react-app创建的，解决跨域问题可以后台设置cros(跨域资源共享)，如果前端解决的话可以用代理，用webpack搭建的项目可以在webpack.config.js中配置，用create-react-app创建的项目webpack配置集成在react-script中集成了，不好配置...

2018-03-10 14:00:45 5682 1

转载 GIT 常用命令

常用 Git 命令清单作者：阮一峰日期： 2015年12月 9日我每天使用 Git ，但是很多命令记不住。一般来说，日常使用只要记住下图6个命令，就可以了。但是熟练使用，恐怕要记住60～100个命令。下面是我整理的常用 Git 命令清单。几个专用名词的译名如下。Workspace：工作区Index / Stage：暂存区Repository：仓库区（或本地仓库）Remote：远程仓库一、新建代码...

2018-03-10 13:59:23 140

转载 VueJs 监听 window.resize 方法---窗口变化

Vuejs 本身就是一个 MVVM 的框架。但是在监听 window 上的事件时，往往会显得力不从心。比如这次是 window.resize恩，我做之前也是百度了一下。看到大家伙都为这个问题而发愁。问题：今天我也遇到了这样一个问题，是关于canvas 自适应。根据窗口的变化去变化 canvas 的宽度备注：重要的问题说三遍解决框

2017-11-08 09:09:47 2801

转载原生js判断某个元素是否有指定的class名的几种方法

如果不考虑兼容IE10以下的话，可以用HTML5中的classList API，非常方便：1234var node = document.getElementById('demo');if(node.classList.contains('test')){ console.log('包含 test 这个cla

2017-11-06 13:28:50 12356

转载 CSS3的calc()使用

calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。因为看其外表像个函数，既然是函数为何又出现在CSS中呢？这一点也让我百思不得其解，今天有一同事告诉我，说CSS3中有一个属性能实现自适应的布局，首先让我想到的是box-sizing，但跟我说还可以计算，这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍，但一直没有深入，也没有自己去测试过。今天花了一

2017-11-01 15:34:31 154

转载 css实现右侧固定宽度，左侧宽度自适应

反过来也可以：左侧宽度固定，右侧自适应。不管是左是右，反正就是一边宽度固定，一边宽度自适应。这种布局比较常见，博客园很多默认主题就是这种。一般情况下，这种布局中宽度固定的区域是侧边栏，而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧？要实现这种布局，也算比较简单。我们先给出html结构：12345div id="

2017-11-01 14:49:08 1247

转载左边固定，右边自适应及左边自适应，右边固定布局的几种方法

自适应布局在现在的布局中，很容易遇见，下面是在平时工作中对左边固定，右边自适应及左边自适应，右边固定布局的几种方法的一些总结，希望能帮到大家，如果大家有更多更好的意见，欢迎补充！页面布局如下：一、左边固定，右边自适应的布局1. 左边左浮动，右边加个overflow:hidden; #lt{ float: left;wi

2017-11-01 14:48:07 2620

转载 Vue2.0子同级组件之间数据交互

熟悉了Vue.js的同级组件之间通信，写此文章，以便记录。Vue是一个轻量级的渐进式框架，对于它的一些特性和优点，请在官网上进行查看，不再赘述。使用NPM及相关命令行工具初始化的Vue工程，目录结构如下接着我们进入Demo，首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件

2017-11-01 11:03:23 174

转载基于flex弹性布局实现“头尾固定，中间滚动”的页面（纯CSS实现）

之前写过一个小项目，首先这个页面布局是这个样子滴，举个栗子，京东的首页：这算是一种还算常见的页面样式吧，头部和底部固定（或者底部固定没有头、头部固定没有底），有的会用fixed去做，但有在很多手机上会出现很多的奇葩的问题。思前想后，后来我决定使用弹性布局去做，至少在手机浏览器中都是支持的，虽然写法上可能为了考虑老版本要多谢一些兼容性的无用CSS，配合HTML5 hist

2017-10-31 14:48:12 3547 1

转载 FLEX实现两侧边栏固定中间自适应布局

12345678910111213141516171819202122<style type="text/css"> #outer{ display: flex;

2017-10-31 11:20:50 2239

原创生成箭头

<div class="arrow-up"></div>.arrow-up{ width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #f...

2017-10-31 10:34:56 337

原创 git 命令

本地创建分支后绑定指定的远程分支git branch --set-upstream-to master origin/masterfatal: branch 'origin/master' does not exist如果出现如上的报错，执行：git push -u origin master常用 Git 命令清单作者：阮一峰日期： 2015年12月 9日我每天使用 Git ，但是很多命令记不...

2017-10-30 16:21:55 282

转载 JSONP详解

0、关于JSONP什么的JSONPJSONP（JSON with Padding）是资料格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。另一个解决这个问题的新方法是跨来源资源共享。（参考：https://zh.wikipedia.org/wiki/JSONP）JSONP的起源曾经的Ajax不能跨域请求（现在的也不能，不过有cors）Web上使用script调

2017-10-27 10:08:06 287

转载跨域

同源策略在说跨域之前，我们需要先了解下同源策略。它是一个规范（Netscape 1995年提出），并没有指定具体的使用范围和实现方式。为了保证使用者信息的安全，防止恶意网站篡改用户数据，一些常见的Web技术都默认采用了同源策略（如Silverlight, Flash, XMLHttpRequest, Dom等）。那如何判断同源呢？相同的协议相同的域名相同的的端口号

2017-10-27 09:44:21 231

转载 CORS详解

## 0、关于CORS说到CORS，就不得不先了解跨站HTTP请求（Cross-site HTTP request）。跨域HTTP请求是指发起请求的资源所在域不同于该请求所指向资源所在的域的HTTP请求。正如大家所知，出于安全考虑，浏览器会限制脚本中发起的跨站请求。使用XMLHttpRequest发起HTTP请求必须遵守同源策略。具体而言，Web 应用程序能且只能使用 XMLHttp

2017-10-27 09:28:32 210

转载 JS继承的实现方式

JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。JS继承的实现方式既然要实现继承，那么首先我们得有一个父类，代码如下：// 定义一个动物类function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = func

2017-10-27 08:57:30 121

转载 React技术栈

React 是目前最热门的前端框架。Facebook 公司2013年推出现在最好的社区支持和生态圈大量的第三方工具React 的优点组件模式：代码复用和团队分工虚拟 DOM：性能优势移动端支持：跨终端React 的缺点学习曲线较陡峭全新的一套概念，与其他所有框架截然不同只有采用它的整个技术栈，才能发挥最大威力总结：React

2017-10-26 17:53:55 287

转载 JavaScrit的变量：如何检测变量类型

在《变量值的数据类型》一文中，了解到了JavaScript的变量主要有基本类型(undefined、null、boolean、number和string, ES6中还新增了Symbol)和引用类型(对象、数组、函数)。但在JavaScript中用户定义的类型(object)并没有类的声明，因此继承关系只能通过构造函数和原型链接来检查。而在这篇文章中，主要整理了在JavaScript中如何检测一

2017-10-26 17:30:53 1785

转载移动前端开发之viewport的深入理解

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个a

2017-10-26 15:56:36 135

转载 js 事件绑定的方法

js 事件绑定的方法同时支持三种事件模型的javascript事件使得客户端的 JavaScript 有机会被激活，并得以运行。在一个 Web 页面装载之后，运行脚本的唯一方式，就是响应系统或者用户的动作。虽然从第一个支持脚本编程的浏览器面世以来，简单的事件被实现为 JavaScript 的一部分；但是大多数最近出现的浏览器都实现了强壮的事件模型，使脚本可以更加智能地处理事件。

2017-10-26 15:27:23 148

转载 js中的四种调用，this、that

介绍函数四种调用模式前，我们先来了解一下函数和方法的概念，其实函数和方法本质是一样，就是称呼不一样而已。函数：如果一个函数与任何对象关系，就称该函数为函数。方法：如果一个函数作为一个对象属性存在，我们就称之为方法。接下来就可以开始今天的主体。1、函数调用模式。就是通过函数来调用，规范写法为：function fn(){} fn(); 函数中this的指向->window。案例如下：

2017-10-26 15:19:14 2945

转载 JSON.parse()和JSON.stringify()用法解析

1、parse用于从一个字符串中解析出json对象,如var str = '{"name":"huangxiaojian","age":"23"}'结果：JSON.parse(str)Objectage: "23"name: "huangxiaojian"__proto__: Object注意：单引号写在{}外，每个属性名都必须用双引

2017-10-26 14:55:03 1047

转载认识HTML5的WebSocket

在HTML5规范中，我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了一个受欢迎的技术，以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法，从客户端使用简单的语法有效地推动消息到服务器。让我们看一看HTML5的WebSocket API：它可用于客户端、服务器端。而且有一个优秀的第三方API，名为Socket.IO。一、什么是W

2017-10-26 14:44:27 186

转载【html5】html5 本地存储

最近一直在学习 html5，为了后期的移动项目进行知识储备。html5 相对于 html4 新增加了一些有趣的标签、属性和方法，今天主要介绍下 html5 的本地存储。在客户端存储数据html5 提供了两种在客户端存储数据的新方法：localStorage - 没有时间限制的数据存储sessionStorage - 针对 session 的数据存储，一旦窗口关闭就没有了

2017-10-26 14:40:30 143

空空如也

空空如也