Eden-one-CSDN博客

原创 React Routing

React Routing Router Router 是放置 Route 的容器，其本身不定义 routing ，真正 routing 规则由 Route 定义。Route Route 负责 URL 和对应的组件关系，可以有多个 Route 规则也可以有嵌套（nested）Routing。像下面的例子就是每个页面都会先载入 App 组件再载入对应 URL 的组件history Rout...

2018-07-26 10:35:20 422

原创 Redux

ReduxRedux提供一个可以预测的state状态管理器，让开发者可以更容易地开发复杂的javascript应用程序Flux与Redux的差异只使用一个 store 将整个应用程式的状态 (state) 用物件树 (object tree) 的方式储存起来：原生的 Flux 会有许多分散的 store 储存各个不同的状态，但在 redux 中，只会有唯一一个 store...

2018-07-26 10:33:14 263

原创基于vue2.x实现loading bar（加载进度条）组件

基于vue2.x实现loading bar（加载进度条）组件在线演示地址Loading Bar在这之前，我更新了有关一个单选框与复选框的组件实现，有兴趣的小伙伴也可以了解一下，今天我们来介绍一下loading bar 组件的实现原理。实现思路整个组件ui部分有两部分组成，分别为顶部条形记载进度条，和spinner加载圈组成，整个部分包含在一个大的div里，并且通过fi...

2018-05-29 18:01:56 5137

原创基于vue2.x实现单选框与复选框组件

基于vue2.x实现单选框与复选框组件w-single-input(单选框)w-checkbox（多选框）不是很会录屏，就放几组演示照片吧话不多说，我们现在就开始实现这两个组件，首先你得搭好一个架子，架子具体实现请参考github,这个是我组件库开发的地址，通过修改vue-cli脚手架，将开发与展示放在一块，利于我前期的一个开发，examples下是展示实例，p...

2018-05-27 15:58:58 3817 1

原创 javascript各种设计模式

javascript各种设计模式设计模式之单例模式设计模式之构造函数模式设计模式之建造者模式设计模式之工厂模式设计模式之代理模式设计模式之命令模式设计模式之原型模式看了这么多模式之后，你或许很茫然，但是在实际写代码的过程中，这些设计模式能起到不少作用，下面我们就来讨论每一种设计模式的具体实现以及他们的使用方法。一、设计模式之单利模式1、概念：在传统的开发工程师眼里，

2017-10-22 15:27:34 1735 1

原创利用css3实现3d立体特效--正方体

其实css3中提供了很多让我们实现非常炫酷的工具，好多特效不需要通过复杂的js代码来实现，而可以通过简单的css3代码来实现，这一次我就给大家介绍一下3d立体盒子的实现以及动画的实现。要实现这个正当体盒子你要对css3的内容有基本的了解而且要具备css中基本的语法，css3中主要掌握的内容如下：了解css3中的transform中的scale(伸缩),旋转rotate，以及平

2017-07-16 14:54:17 5873

原创基于vue2.x实现文件上传（w-upload）组件

在线演示地址w-upload在这一系列的博客里，有一些其他的组件实现过程，有兴趣的童鞋可以了解一下，今天我们来介绍一下w-upload文件上传组件的实现原理。实现思路刚开始写这个的时候我自己也感觉很懵逼，感觉这个原生上传文件的样式咋改，很烦，最后在github上大佬们的实现过程，顿时就感觉这个东西真的很假，就只是让样式变得好看而已，不多说了。来说一下这个的实现过程。其实...

2018-06-03 17:52:26 4446 1

转载 javascript中call apply bind详解

一、函数的三种角色首先要先了解在函数本身会有一些自己的属性，比如：length：形参的个数； name：函数名； prototype：类的原型，在原型上定义的方法都是当前这个类的实例的公有方法； proto：把函数当做一个普通对象，指向Function这个类的原型函数在整个JavaScript中是最复杂也是最重要的知识，对于一个函数来说，会存在多种角色：function Fn() {

2017-11-12 16:25:50 323

为什么要使用模块化？- 1、解决命名冲突- 2、依赖管理- 3、模块的版本管理- 4、提高可维护性CMD、AMD、CommonJS 规范分别指什么？有哪些应用AMD (Asynchronous Module Definition, 异步模块定义) 指定一种机制，在该机制下模块和依赖可以移步加载。这对浏览器端的异步加载尤其适用，其也是CommonJS规范的一个延伸。语法define(id?, dep

2017-11-11 21:49:44 447

原创 http基础篇（一）

HTTP基础篇（一）- 1.了解web及网络基础- 2.简单的HTTP协议- 3.HTTP报文内的HTTP信息- 4.返回结果的HTTP状态码- 5.与HTTP协作的web服务器我们先来说一下http中的一些基本概念超文本传输协议(HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目

2017-11-09 10:54:12 383

原创 web前端关于浏览器兼容性

web前端关于浏览器兼容性所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题：一、不同浏览器的标签默认的外补丁和内部顶不同这个大家就很常见了，我们知道每个浏览器对margin和p

2017-10-24 00:24:33 1891

原创 javascript实现轮播图效果

javascript实现轮播图效果1.轮播图实现基本思路实现轮播图我们肯定需要一些图片，我们动过javascript编写动画使得这些照片自动轮播，首先我们解决html部分和css部分，我们需要在一个区域内轮播图片，还有我们需要设置小圆点导航，以及向前向后的按钮，具体实现效果。代码如下：<body> <div id="container"> <ul

2017-09-06 22:12:41 771

原创 javascript实现简单计算器

javascript实现简单计算器这个计算机主要通过二维数组将其存在一个数组中，再通过函数控制显示出的效果，有些键位占着两列，通过colspan函数合并两列，先将整个计算机的外部样式设计出来，主要实现代码以及效果图如下所示：var btns=[ [ {text:"AC",id:"btn_C",value:"c",col:1},

2017-08-09 09:40:30 2178

原创 javascript实现弹球效果

躁动的小球今天介绍的是一种通过javascript实现的一种炫酷的动画效果，具体实现特效我通过图片展示给大家还有释放后这些小球会在一个指定范围内进行运动，最关键的部分就是这些小球的各种样式都是随机获取的，所以这样才出现了一个炫酷的效果，主要使用到的随机数生成的代码如下：//获取一个范围内的随机数random返回一个大于0小于1的一个随机数 function selectFr

2017-08-09 09:15:50 2380

原创京东放大镜效果

京东放大镜效果实现放大镜主要知识点javascript中DOM操作。javascript中时间的获取，主要有mouseenter、mouseleave、以及当鼠标在照片上移动的时候onmousemove事件以及其中的事件对象中的属性clientY，clientX,还有获取元素宽度offsetWidth、offsetHight等。这里面好考虑到绝对定位，以及放大倍率的计算，里面用到的倍率计算公式

2017-08-01 21:23:00 926

原创 DOM小结

**DOM**是语言中立的API,用于访问html,xml文档。DOM1级将html和xml文档形象的看作为一个参差画的节点树，可以使用javascript来操作这个节点数，进而改变迪岑文档的外观和结构。DOM由各种节点构成，简要总结如下：最基本的节点类型就是Node,用于抽象的表示文档中的一个独立部分，所有其他类型都继承自Node。.Document 类型表示的是整个文档，是一组分层节点的根

2017-07-25 19:17:28 325

SHINE_SUNNY1的博客