MetaLuo-CSDN博客

原创为什么要选择react

以下是我个人在使用过程中的感受。模块化react的模块化使得组件化开发变得更加方便，可维护，使得代码复用性更强了，开发效率更高了。使得人们写代码更加规范，可读性也大大提高，就算是刚入门的新手也可以写出规范的代码来。虚拟DOMreact不直接对dom进行操作，而是创建了一个虚拟dom的概念，并且结合它优化过的diff算法，使得数据刷新的时候页面只进行最小的变化，因此大大提高了react的性能。r

2017-06-06 14:17:40 1594

原创 react生命周期概括

自定义组件的三种状态MOUNTINGRECEIVE_PROPSUNMOUNTING它们负责通知组件当前所处的状态，应该执行生命周期中的哪个步骤，是否可以更新 state。三个状态分别对应三种方法：mountComponent -> MOUNTINGupdateComponent -> RECEIVE_PROPSunmountComponent -> UNMOUNTING并且这每

2017-06-05 15:16:20 432

原创 javascript中undefined和null的区别

javascript中有七种内置类型，分别是： - 空值（null ） - 未定义（undefined ） - 布尔值（boolean ） - 数字（number ） - 字符串（string ） - 对象（object ） - 符号（symbol ，ES6 中新增）但是null和undefined这两种类型很让人迷惑。因为两者的差别很小。null == undefine

2017-06-02 14:05:57 1477

原创修改docker的镜像源

默认是docker hub。修改Docker配置文件/etc/default/docker如下：DOCKER_OPTS=”–registry-mirror=http://aad0405c.m.daocloud.io”

2017-02-21 13:23:40 448

原创 input type="file" and FormData

HTML5提供了一个新方法，就是input的file类型可以直接用来上传文件。上传文件用FormData来获取上传的内容。以下是相关代码：<form ref="formVolume"> <input type="file" name="basicSkuList" className="hide" onChange={event=>{this.handleImpo

2016-12-02 14:48:29 1238

原创 js的Date.parse()方法和getTime()的陷阱

之前一直记得getTime()和Date.parse()方法都是返回某个时间到1970年1月1日0:00的毫秒数，但是这次遇到了问题。当我使用Date.parser()的时候，返回的却是这个时间点到1970年1月1日08:00的毫秒数。下面是我的代码：function startTime() { let date = new Date, year = date.getFu

2016-12-02 14:38:36 10019 2

原创《javascript pattern》— javascript的继承

javascript不是一门基于类的语言，因此没有一个确定的继承的方法。（es6提供了class和extend关键词，用来实现像java这类强类型语言的继承的样子，实际上是一种语法糖。）虽然说js没有类，但是要实现继承却有很多种方法。主要分为类式继承及现代继承（就是不考虑像有类一样去继承）。要实现的继承效果是：//parent构造函数function Parent(name) {this.na

2016-10-26 14:35:40 432

原创《javascript pattern》要点概括

高质量javascript基本要点可维护的代码意味着代码是：可读的一致的可预测的看起来像是同一个人写的有文档的减少全局变量var声明中通过链式赋值的方法会创建全局变量，如下，b是全局变量，a是局部变量。// antipattern, do not usefunction foo() { var a = b = 0; // ...}因为这里的计算顺序是从右至左的。首先计

2016-10-25 17:52:18 1339

原创 react的使用方法

主要是针对诸如我这类的react小白用户，看看react的一些常用的基础语法等。react起步要使用react，首先需要引入两个文件，react.js和react-dom.js。一般我们会使用jsx模板，上生产环境前需要对jsx进行转译。如果是平时开发，可以引入一个browser.min.js文件，可以进行实时转换。当然，如果能够配合npm和webpack一起使用，将会事半功倍。可以查看web

2016-08-23 17:13:05 1558

原创 webpack如何与react进行配合

记录一下如何用webpack来开启react项目创建文件夹并配置webpackmkdir myappcd myapp先创建和进入该文件夹，之后开始配置webpack。首先是全局安装webpack，然后是在该文件里安装依赖。 npm install webpack -g npm install webpack --save-dev 然后初始化`npm init`这时会出现一个package.

2016-08-23 16:54:18 866

原创兼容移动端和pc端的弹性盒模flexbox

现在主流浏览器都支持flex布局，ie是支持到ie10的，不过一些移动端的支持性和pc端不同。如何适应各个版本的浏览器各个设备呢？新版与旧版弹性盒模型混用：.box{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; display: box;

2016-08-09 14:29:49 4208

原创 javascript的继承模式的总结

js的继承方式可谓是五花八门啊，而且我用的频率也不高，因此很容易遗忘，很容易搞混。所以就来总结一下。先来看一张图：可以看到js的构造函数、原型、实例之间的关系。接下来总结下js所有的继承方式：原型链function SuperType(){ this.property = true;}SuperType.prototype.getSuperValue = function(){

2016-07-25 15:27:17 359

原创应该掌握的html5

canvasvideoaudiodrag、dropsvggeolocationlocalstorage、sessionstoragemanifest(应用缓存)Web Workers服务器发送事件（server-sent event）input type:email、url、number、range、Date pickers(date, month, week, time, da

2016-07-22 16:10:53 305

原创理解js闭包

闭包是面试中很容易会问到的一个概念。 js的作用域分为全局作用域和局部作用域（es6里出现了块级作用域），函数内部可以获取外部的全局变量，但是函数外部不能获取函数内部的变量。如果外部要获取函数内部的变量要怎么办呢？这个时候只要在函数内部再构造一个函数，把内部的变量return出来就行了。function f1(){ var n=1; function f2(){

2016-07-21 15:44:01 555

原创需要掌握的es6特性（二）

数组的扩展Array.from()Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3};// ES5的写法var ar

2016-07-21 11:48:38 344

原创需要掌握的es6特性（一）

目前es6越来越火，很多公司都开始使用起了es6。因为掌握es6的一些常用特性是非常必要的。let和const原来定义变量时，都会使用var来定义。第一次使用的时候就觉得var的定义特别随性特别自由。但是由于太过自由总是容易犯一些很难找到的错。首先var的作用域现在一般是全局作用域和局部作用域（一般为函数作用域），很容易造成作用域的混淆。其次声明提前在一方面来说比较自由，因此比较方便。但是

2016-07-21 11:22:59 490

原创面试前端开发需要准备的内容

本文是为了我自己的面试需要准备的内容基础知识html基础知识 1.常用的一些标签 2.html5的新特性css基础知识 1.css常用的一些样式处理 2.css3新特性,重点动画 3.我用过的比较特别的cssjs基础 1.基础的常用的一些性质 2.es6新特性 3.基础概念：闭包、对象的创建、继承等。 4.前后端交互：ajax常用框架jquery的源码理解react+

2016-07-14 11:51:09 542

转载 JS中encodeURI,escape,encodeURIComponent区别

js对文字进行编码涉及3个函数：escape,encodeURI,encodeURIComponent，相应3个解码函数：unescape,decodeURI,decodeURIComponent1、传递参数时需要使用encodeURIComponent，这样组合的url才不会被#等特殊字符截断。例如：<script language="javas

2016-07-13 13:49:32 411

原创 HTTP协议在前端开发中的应用

工具HTTP协议实现的过程HTTP协议的含义及格式调试工具首先，前端开发的一个很重要的工具就是chrome浏览器。其实像火狐浏览器也很很好的调试工具，但我更喜欢使用chrome的。按下F12就能调出这个管理控制台。点击Network后就会出现所有的网络请求。当我点击其中一个网络请求时，可以点击它的header来获取它的头信息。其中包含了general，response he

2016-07-13 10:27:53 2024 1

原创好看的移动端H5应用效果及样式借鉴

支付宝页面切换采用从下往上滑动，而且不是从底部滑上来，而是距离顶部大概200px的位置快速滑上来，感觉很自然。缓冲的效果，就是一个圆圈不停转动的效果，作为一个遮罩层，等内容加载完，遮罩层隐去，内容浮现。回到顶部按钮。一滚动页面右下方就出现回到顶部按钮。一回到顶部按钮消失。导航栏在幻灯片下面。一开始滚动页面的时候导航栏随之移动,当导航栏触碰到顶部的时候导航栏就不动了。有一个新的css3属性可以

2016-05-19 16:02:47 4598

原创模仿jquery的$选择符

function $(selector,context){ context=context||document; var elemengts=context.querySelectorAll(selector); return Array.prototype.slice.call(elements);} 来自《css揭秘》

2016-04-27 14:16:41 365

原创 javascript call()和apply()

在学习js的继承的时候，尤其是用到构造函数的时候，会用到call（）方法，有时候是apply（）方法。那这两个方法到底是用来干什么的？它们有什么区别吗？比如以下这个经典的例子：function add(a,b){ alert(a+b);}function sub(a,b){ alert(a-b);}add.call(sub,4,2); //6可以看到，add方法代替了su

2016-03-07 15:12:52 431

就是如下效果：左边的这个三角形如果做呢？方案一：简单粗暴，直接用图片方式：这个绝对地方便啊，直接将三角形的图片抠出来放进去，不管是用span承载图片然后用绝对定位来实现，还是作为一小个div的背景承载（这两种方式的布局不一样，其实要实现这个聊天框可以用好多种布局方式来实现），都是很方便的。优点：方便。缺点：一般图标占用资源较多，能用css解决就最好用css解决，毕竟可以节省资源。方案二：简单不粗暴

2016-03-04 15:02:37 375

原创关于动作发生在请求前还是请求后（以点赞为例）

做了个应用，里面是有点赞的，我想这还不简单，没想到在组长的快速点击下就出问题了。就是如下的效果：原先的想法及出现的问题一开始我是觉得，点击之后发起请求，将数据传递给后端，等数据再传回来的时候就将赞的颜色变蓝并将点赞数加1。然后取消点赞也是一样的思路。但是在快速点击下，数字竟然开始出现负数。具体原因是什么我也不是非常清楚，可以肯定的是请求速度跟不上导致的，并且应该跟ajax本身特性及js本

2016-03-04 14:42:49 531

原创 fixed在移动端失效的问题

其实在安卓机上fixed的适应性要远远比ios上好，真是接地气啊哈哈。之前第一次遇到这个问题的时候非常惊讶，那时候在用sui mobile的组件库，里面就有底部导航栏，用了fixed。但是随着屏幕向上滚动，超过一定距离，这个底部导航栏竟然也跟着上去了。并且在我的安卓机上是没多大影响，但是在ios上就这样了。不过我同事的安卓机竟然比在ios上还夸张。什么原因导致的？经过我多方调研，其实移动端在早些年以

2016-03-04 14:16:00 5948

原创 zepto与jquery冲突的解决

一般是不会把zepto和jquery一起来用的。但有时候要引入一些插件，可能就会遇到这样的问题。jquery noConflict()jquery有一个方法叫noConflict() ,可以把jquery的$改掉。var jq=$.noConflict();这个时候用jq来代替jquery的$吧。zepto的符号改掉window.$$=window.Zepto = Zepto在zepto里加入这一行

2016-03-04 11:50:20 14287 7

原创 div永远垂直居中的方法

如果div大小和父级元素大小已定，那垂直居中的方法就很多，今天来讨论下如果子元素大小和父级元素大小都不确定，要保持一个div永远垂直居中的方法。用CSS3来实现如果使用css3的话就有挺多的方法。teansform:translate.parent{ position:relative; }.child{ position:absolute; top:50%; left:5

2016-02-25 09:04:42 1582

原创 javascript的数组创建及方法

作为一门动态脚本语言，javascript真的是非常地易用。它的数组非常灵活，并且方法也很多，用起来较为方便。javascript的数组的创建js真的是一门很随性的语言啊，比如在创建数组的时候就反映出来了，我想怎么创就怎么创，我想创什么就创什么。比如现在我想创建一个数组，但我不确定要给它开辟多少内存空间。没关系！因为你创建一个数组内容，它就会给你开辟一个内存空间。var arr=new Arra

2016-02-23 11:55:09 582

原创 ajax同步与异步

什么是同步和异步会用在什么地方？ajax同步的方法什么是同步和异步？所谓同步，就是在发出一个调用时，在没有得到结果之前，该调用就不返回。但是一旦调用返回，就得到返回值了。换句话说，就是由调用者主动等待这个调用的结果。而异步则是相反，调用在发出之后，这个调用就直接返回了，所以没有返回结果。换句话说，当一个异步过程调用发出后，调用者不会立刻得到结果。而是在调用发出后，被调用者通过状态、通知来通

2016-02-18 14:15:19 439

原创 javascript面向对象编程

关于javascript要不要使用面向对象编程，每个人都会有自己的看法。如果是在后端使用javascript，那出于多方面的原因都会使用面向对象编程。但如果是作为浏览器的脚本语言，不同的人有不同的看法。有些人觉得javascript更偏向于一门函数式语言。有些人觉得javascript要对dom进行频繁的操作，不适合面向对象编程。但是不同的公司有不同的语言规范，为了代码可读性，也为了更好的合作，

2016-02-06 17:00:43 523

原创简易富文本编辑器

效果图如下：思路：首先选择用iframe来承载这个富文本编辑器，因为iframe有一个属性contentEditable，让内容可编辑。然后它的execCommand方法又可以实现多种效果。最早出现这些方法和属性的是IE浏览器，后来其他浏览器也纷纷支持了。现在的富文本编辑器的适用范围越来越广，但我看到的网上的插件啊资源啊基本只有百度一家有，而且很多网站也直接用了百度的插件。但是如果我们要自己

2016-01-18 15:12:49 2602

原创 js计算时间间隔

记录一下：可以用到getTime()方法，具体的以后再说，直接贴代码：var startTime=new Date(Date.parse(start.replace(/-/g, "/"))).getTime(); var endTime = new Date(Date.parse(end.replace(/-/g, "/"))).getTime();

2016-01-05 16:19:09 407

原创 relative的定位

平时我们运用position:relative一般都是在使用absolute的时候限制他的相对定位。那如果直接使用relative呢？是相对于什么来进行定位的？一开始的位置：由于设置了padding-left，可以更好地区分一些情况：用relative，left:50%后的位置：可以看出，它的移动是相对于元素本身的位置移动。那是移动了多少的位置？我设置的是left:50%，显然并不是自身

2015-12-31 16:19:37 1569

原创用纯css做环形进度条

效果如下：先来讲一下原理吧，说先画一个圆环，圆环的画法有很多，就不说了。然后用clip切掉一半的圆环。clip怎么用？一、clip属性必须和定位属性postion一起使用才能生效。二、clip裁切的计算坐标都是以左上角即（0,0）点开始计算，rect ( number number number number ) :　依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏

2015-12-30 14:59:32 2649

原创网页上制作动画效果的方法及优势劣势

css3animatejs运用css3实现动画效果css3有两种动画效果，一种是trasition，一种是animation。其中的animation更加灵活，transition更为便捷。 transition的内容可以参照：transition详解。 animation的内容可以参照：animation详解。本人也是比较喜欢使用css3的，也喜欢用css3做点小东西。比如：

2015-12-30 14:38:42 715

原创点击input输入法不弹出

首先说明我这个只是在安卓端的测试，下次试下ios的。问题这是个很令人头疼的问题，比如我用了一个时间选择控件，或者是地址选择控件等，并不想让输入法弹出来，不然太烦了。所有我就想了一些解决方法。解决方法disabled直接治本。不仅输入法不弹起，而且都不能点击了，如果要使用需要在上面覆盖一个div，然后将点击事件监听到这个div上。readonly这个方法不错，可以点击，但无法输入，所有输入法不会弹起。

2015-12-28 17:05:13 6169

原创城市选择二级联动、三级联动的思路

今天为了做项目写了个城市选择二级联动的插件，首先放上效果图如图所示。实现的效果是选择左边的省份后，右边点击后会出现相应省份的所有城市。这里我采用了ajax引入json的方法。关于ajax和json我将会在之后写。首先，我从网上找了一份包含所有省份和城市的json文件。由于不知道怎么上传我就单独发了一篇博客，把json文件的代码贴出来了，具体可以看city.json。其实这个json文件并

2015-12-28 16:51:47 3857

转载 city.json

{ “cityList”: [ { “province”: “北京”, “city”: [ { “country”: “北京”, “编码”: “101010100” }, { “country”: “朝阳”, “编码

2015-12-28 16:40:55 4267

转载前后端数据交互方法

目录HTML赋值JS赋值script填充JSONAJAX获取JSONWebSocket实时传输数据总结HTML赋值输出到 Element 的 value 或 data-name<input type="hidden" value="<?php echo $user_avatar;?>" /><div data-value="<?php echo $user_avatar;?>"></

2015-12-24 09:10:45 850

原创推荐一些前端开发好的博客及文章、工具

好的博客网站阮一峰的个人网站不认识的就去百度吧。一个知识面很广的大神。可乐橙-一个学前端的UI设计师前端的抓紧了，不要被UI比下去了。张旭鑫的个人网站网站很丑，首页都是广告位了。。不过内容很好。。 kamiwan的网站我的男朋友的网站，喜欢接触各种新鲜事物和技术。好的文章前后端数据交互技巧获益匪浅，很详细。好多收藏的文章没有了，下次补上。好的工具网站can i use

2015-12-18 16:32:23 483

城市选择json文件

空空如也