- 博客(144)
- 资源 (9)
- 收藏
- 关注
RSS订阅
原创 React学习：状态(State) 和 属性(Props)
React ：元素构成组件，组件又构成应用。 React核心思想是组件化，其中 组件 通过属性(props) 和 状态(state)传递数据。State 与 Props 区别props 是组件对外的接口，state 是组件对内的接口。组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件...
2018-04-04 21:58:40
28361
10
原创 web程序员表白程序，三行情书
很久之前的作品，用JS和CSS3实现的，今天给大家分享一部分。 若要见完整版，请点击右侧链接下载：程序员浪漫表白“三行情书”一等奖（JS+CSS3） 注：这是一个3D场景，在PC端的话还可以按住鼠标左键并拖动鼠标，来从各个视角观察它。降低作品档次的效果图： 寓意解释：通过JS和CSS3组合实现的 碎片飘零效果。每个碎片都由一句情话组成，无数的情话碎片构成了心型
2018-01-21 00:58:12
49407
31
原创 React-Router实战：重定向Redirect
当用户访问某界面时，该界面并不存在，此时用Redirect重定向，重新跳到一个我们自定义的组件里。一、基础1、引入使用// 如果loggedIn 为 false, 则重定向跳转到 /home 页面import { Route, Redirect } from 'react-router'<Route exact path="/" render={() => ( ...
2019-03-23 18:55:45
74842
9
原创 React-Router实战：路由传参（正则表达式）
首先我们先做个路由普通传参的例子。一、准备工作1、目录结构| - index.js| - components | - App => App.js | - Home => Home.js | - About => About.js | - News => News.js2、源码./index.jsi...
2019-03-23 18:23:30
5607
原创 React-Router实战：NavLink
基础：（1）引入使用：import { NavLink } from 'react-router-dom'<NavLink to="/about"> About </NavLink>（2）activeClassName：string//当被激活时，显示类名为selected 的css样式<NavLink to="/about" activ...
2019-03-23 17:09:41
6442
原创 React-Router实战：基本路由、路由传参、嵌套路由
安装&amp;amp;gt; npm install -g create-react-app&amp;amp;gt; create-react-app demo-app&amp;amp;gt; cd demo-app&amp;amp;gt; npm install react-router-dom一、基本路由（Dome1）1、目录及 组件关系图目录结构：组件关系：2、源码./index.jsimport React
2019-03-17 17:53:27
4661
2
原创 js小记：EventUtil兼容
EventUtil：var EventUtil={ addHandler:function(element,type,handler){ //添加事件 if(element.addEventListener){ element.addEventListener(type,handler,false); //使用DOM2级方法添加事件 }el...
2019-03-09 17:37:52
235
原创 React-Redux：动手实现
一、实现React-Redux的过程中的DOME样式点击Blue变为：二、概述及源码1、组件设计2、主要目录结构：- public | - index.html- src | - index.js | - components | - react-redux.js | - Contents.js | - Header.js | - ThemeSwitc...
2019-03-05 10:00:09
328
原创 Redux：动手实现
一、动手实现index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&
2019-03-03 20:15:33
251
原创 Vue实战：树形组件
一、展示点击粗体能展开节点：点击“+” ，还能插入new stuff节点：还能为没有孩子的节点添加多个子节点，如图为 hello节点添加：二、源码index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n
2019-02-26 11:11:57
8851
原创 Vue实战：table组件(带搜索，排序)
效果源码&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &a
2019-02-25 18:18:26
14835
原创 Vue实战：获取数据列表展示
这个例子从 Github 的 API 中获取了最新的 Vue.js 提交数据，并且以列表形式将它们展示了出来。你可以轻松地切换 master 和 dev 分支。一、展示二、源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam
2019-02-25 14:59:35
15838
原创 Vue Router慢慢学：起步Dome
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。我们首先通过原生JS简单讲解router的核心原理，然后再用Vue-Router做个Dome~一、前端router核心原理路由核心原理：根据不同的锚点值做出不同的显示。我们用原生JS举例说明：<a href="#/login">点我登陆</a&g...
2019-02-20 01:53:29
416
原创 Vue.js实例学习：获取DOM元素
一、获取DOM元素在Vue中获取DOM元素，我们可以用ref。用法(和React一样)：（1）在组件的DOM部分，任意标签中 写上：ref="xxx"（2）通过组件对象 this.$refs.xxx 获取到元素1、获取HTML标签的DOM例1：&lt;div id="app"&gt;&lt;/div&gt;&lt;script type=
2019-02-19 23:51:00
17139
原创 Vue.js实例学习：生命周期
Vue生命周期钩子：beforeCreate、createdbeforeMount、mountedbeforeUpdate、updatedactivated、deactivatedbeforeDestroy、destroyederrorCaptured一、beforeCreate、created&amp;lt;div id=&quot;app&quot;&amp;gt;&amp;lt;
2019-02-17 15:55:33
702
原创 Vue.js实例学习：slot
父组件可以给子组件传递数据，但却不能传递DOM节点，为了解决这个问题，slot诞生了。solt是Vue的内置组件，也就是我们俗称的插槽。一、无名插槽例：<style type="text/css"> li { list-style: none; width: 33%; height: 100px; background: yellowGre...
2019-02-16 23:14:20
530
原创 Vue.js实例学习：watch与computed
watch：监视单个属性computed：监视多个属性注：v-model是双向绑定数据，但并未将数据与方法挂钩；为了解决这个问题，watch与computed诞生了。一、watchwatch是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。由于watch监视...
2019-02-16 18:13:59
3223
原创 Vue.js实例学习：过滤器
一、简介Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值v-bind 表达式过滤器要被添加在 JS 表达式尾部，由“|”符号指示：<!-- 在双花括号中 -->{{ message | myfun }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | fo...
2019-02-16 16:00:57
562
原创 Vue实战：简易布局Dome
一、show1、介绍组件：App、MyHeader、Mybody、MyNav、MyMain、MyFooter（App是所有的父组件，Mybody是 MyNav和MyMain 的父组件）数据data：[{name: ‘bty’, age: 12}, {name: ‘张三’, age: 13}, {name: ‘oppen’, age: 14}]传值：将全局数据data传给App...
2019-02-16 14:23:29
11421
原创 React实战：留言板
留言板&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot; /&amp;amp;gt;
2019-02-02 19:02:58
1795
原创 React实战：井字棋 游戏
井字棋 游戏&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot; /&amp;amp;gt
2019-01-30 23:47:23
805
原创 webpack实践之路（九）：development与production的配置
一、准备工作在终端输入：> mkdir webpack_demo> cd webpack_demo> mkdir src> mkdir dist> npm init -y> sudo npm install webpack webpack-cli --save-dev> sudo npm install --save-dev html-...
2019-01-16 00:35:26
3040
原创 webpack实践之路（八）：压缩JS
本文的目录代码继承自：webpack实践之路（二）：快速上手的Demo我们写的JS代码在上线之前，都是需要进行压缩的。在Webpack中是通过插件的方式实现JS代码的压缩，这里用uglifyjs-webpack-plugin(JS压缩插件，简称uglify)。（1）安装> sudo cnpm install uglifyjs-webpack-plugin（2）引入插件webpa...
2019-01-15 01:09:08
6229
原创 webpack实践之路（七）：模块热替换HMR
HMR模块热替换(Hot Module Replacement 或 HMR)允许在运行时更新各种模块，而无需进行完全刷新。HMR主要是通过以下几种方式，来显著加快开发速度：保留在完全重新加载页面时丢失的应用程序状态。只更新变更内容，以节省宝贵的开发时间。调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。HMR 不适用于生产环境，这意味着它应当只在开发环境使用。一、...
2018-12-28 22:34:20
853
原创 webpack实践之路（六）：让开发更便捷
在开发过程中使用一些工具会让工作更便捷，效率更高。这里我们在上一节的项目基础上进行；一、使用 source map当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这并通...
2018-12-28 16:33:52
266
原创 webpack实践之路（五）：管理输出
一、预先准备首先我们更改目录结构并设置一个多入口、多出口的Dome。(项目的搭建以及webpack.config.js的配置跟前面一样，请参考：快速上手的Demo)目录结构：（1）src/print.js：export default function printMe() { console.log('I get called from print.js');}（2）src/i...
2018-12-28 14:43:50
264
原创 webpack实践之路（三）：快速上手的Demo2.0
上一篇通过一个小Demo我们对Webpack有了初步了解，但是它在实际开发中并不使用，而是使用Webpack的配置文件的方式进行设置。一、配置文件webpack.config.jswebpack.config.js就是Webpack的配置文件，这个文件需要自己在项目根目录下手动建立（在根目录建立）。建立好后我们对其进行配置，下面就是webpack.config.js的基本结构，无内容的标准模...
2018-12-28 00:33:51
323
原创 深入JavaScript 模拟实现new
new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。例1function Person(name, age) { this.name = name; this.age = age;}var child = new Person('sam', 18);new Person() 过程种发生了什么：（1）创建了一个新对象（2）这个新对象 的_...
2018-12-21 22:44:16
337
原创 深入JavaScript 模拟实现bind
bindbind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。由此我们可以首先得出 bind 函数的两个特点：返回一个函数可以传入参数例1var foo = { value: 1};function bar() { console.log(this.value...
2018-12-21 17:30:09
191
原创 webpack实践之路（四）：管理资源
webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。一、加载CSS1、安装为了从 JavaScript 模块中 import 一个 CSS 文件，我们需要在 module 配置中 安装并添加 style-loader 和 css-loader，在终端输入：&amp;amp;amp;amp;amp;gt; sudo npm install --save-dev st...
2018-12-19 19:09:30
385
1
原创 JS构造函数与普通函数的区别
1、直观上构造函数都应该以 一个大写字母开头：function Foo(){...}非构造函数则应该以一个小写字母开头：（本文所说的普通函数就是 非构造函数）function foo(){...}2、本质区别无论是构造函数还是非构造函数，两者并没有实质性的区别；构造函数可以作为普通函数使用，普通函数也可以作为构造函数来用；首字母大小写仅仅是为了在开发中能易于区分他们。...
2018-12-14 23:02:32
3020
原创 深入JavaScript 模拟实现call、apply
一、call()call() ：在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。1、实际的call()var value = 2;var foo = { value: 1 };function bar(name, age) { console.log(this.value); console.log(name, age);}bar.call(foo...
2018-12-14 21:47:29
555
原创 关于 “JavaScript重写原型对象后设置constructor” 的误解
首先我们要知道prototype、constructor及其关系：每个函数都有 prototype属性（即原型对象)原型对象都有 constructor属性(指针)：它指向着该原型对象的拥有者。现在看下面例子：function Child() {}Child.prototype = {}; //重写prototypeChild.prototype.constructor = C...
2018-12-14 01:05:47
1623
4
原创 深入JavaScript 继承的各种方式及优缺点
一、原型链继承1、优点可以函数复用function Parent () { this.name = 'kevin';}Parent.prototype.getName = function () { console.log(this.name);}function Child () {}Child.prototype = new Parent();Child.p...
2018-12-13 22:22:12
654
原创 深入JavaScript 从原型到原型链
一、构造函数、原型对象、实例对象的关系function Foo(){} //Foo为构造函数Foo.prototype.name = 'Feidian'; //Foo.prototype即原型对象var f1 = new Foo() //f1 为 实例对象要想了解Foo、Foo.prototype、f1 之间的关系，我们就要理解prototype...
2018-12-11 21:09:56
550
原创 webpack实践之路（二）：快速上手的Demo
在 上一节中，我们安装了webpack，这节我们就开始一个简单的Demo。1、建立基本项目结构首先进入上一节建立的webpack_demo文件夹。进入后在webpack_demo的根目录建立两个文件夹，分别是src文件夹和dist文件夹：&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; mkdir src //创建src&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; mkd
2018-12-05 21:17:33
467
原创 webpack实践之路（一）：安装
一、什么是WebPack？WebPack可以看做是模块打包机：它会分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。现在Webpack还肩负起了优化项目的责任。上面的话有三个重点：打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。转换：把...
2018-12-05 17:08:05
414
原创 React安装及目录结构
1、安装cnpm国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org$ sudo npm config set registry https://registry.npm.taobao.org...
2018-11-30 17:19:59
1465
原创 深入JavaScript 赋值后的内存分布
在阅读前，请先读下面这篇链接文章里的《二、从底层角度讲》，它能让你对JS参数传递的具体机理有一定了解。其实两者差别不大。深入JavaScript之参数共享传递现在开始进入正题关键点:运算符=就是创建或修改变量在内存中的指向.初始化变量时为创建,重新赋值即为修改.一、例1var a = {b: 1}; // a = {b: 1}var c = a; /...
2018-11-20 16:39:20
774
1
原创 深入JavaScript 共享传递
在《JavaScript高级程序设计》第三版，讲到传递参数：ECMAScript中所有函数的参数都是按值传递的。什么是按值传递呢？也就是说，把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一个变量一样。如果你没有学过C/C++/C#等编程语言，对堆栈以及汇编并不是很了解，那么阅读《一、从小白角度讲》；反之，请看《二、从底层角度讲》一、从小白角度讲这种讲解方式是...
2018-11-20 10:28:40
1135
4
遗传算法解决TSP问题（全）
2017-12-26
限制select显示条数：div完全模拟select
2017-12-10
程序员浪漫表白“三行情书”一等奖（JS+CSS3）
2017-12-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人