yummyH-CSDN博客

原创 express+mongoose+ejs入门（实现简单的数据库操作实例）

一、环境搭建1. 数据库环境：安装mongodb， NoSQLBooster for MongoDB（mongodb可视化操作平台）2. 安装express，express-generator （脚手架）npm install express -g （全局安装express）npm install -g express-generator （安装express-generator脚...

2018-08-16 18:33:59 775

原创如何利用koa-generator快速搭建一个koa2项目

1. npm install koa-generator -g 安装koa-generator，利用koa-generator快速搭建Node.js服务器 2. koa2 my-project 新建一个叫做my-project的koa2项目 3. cd my-project npm install 4. 启动项目 npm...

2018-08-10 08:59:16 6570

原创移动端1像素问题（未完）

移动端1像素问题：目标：1px高，100px宽的线条<div className="border"></div>1.通过scale调整缩放比例.border { border-bottom: 1px solid #ddd; transform: scale(.5); width: 200px;}2.通过图片实现，在代码中引用图片...

2018-08-09 15:26:07 397

原创设计模式之策略模式（javascript描述）

先从一个应用场景说起，有一款游戏，我们会根据玩家的VIP等级提供不同经验加成，开始实现。 let calculateByRank = ( experience,vipRank ) => { if(vipRank==='0'){ return experience; }else if(vipRank==='1'){ ...

2018-06-23 12:45:59 522

聊聊nodejsnodejs从诞生至发展，从15年底4.0版本发布到上月末10.0正式发布经历不到3年时间，足以证明nodejs社区的蓬勃发展以及开发者们对于nodejs的重视，当下，在无数的踩坑与完善后，nodejs渐渐成熟走向商业化应用。在这个历程中不得不说的是express,koa框架，值得一提的说它们均来自同一作者TJ--node圈中的传奇人物，它们诞生于nodejs发展的不同时期，在ec...

2018-05-14 19:15:03 4355

原创回流与重绘

浏览器的渲染过程：具体过程：1. 浏览器回把html解析成DOM树，DOM树的构建是一个深度遍历的过程（当前节点的所有子节点遍历完成才会去构建当前节点的下一个兄弟节点）2. 在构建DOM树的同时，浏览器也会把CSS解析成 CSS树3. 合并DOM树和CSS树，生成render树（注：在这个过程，浏览器会自动忽略 head 元素，以及 display 属性值为none的元素）4. 浏览器在拿...

2018-05-02 16:52:28 1005

原创 js数组相关方法

数组是值的有序集合。数组中对应的每个值叫做元素，元素可以是不同类型的（包括“ ”，undefined，[]，{}）。每个元素都有对应的数字编码，就是我们所说的索引。 Eg： let arr = [1, 'test', true, undefined, null, [1, 2, 3], {a: 1}]1. join 将数组转化为字符串，什么都不填写默认以...

2018-04-25 17:55:20 251

原创 javascript的深拷贝与浅拷贝

1. 关于javascript数据类型： 5种基本数据类型（null，undefined，string，number，Boolean）+ 1种对象数据类型（object, Array）其中基本数据类型是按值传递，而对象类型（也叫做引用类型）是按引用传值2. 按值传递就比如下面的例子，我使num2 = num1，改变num2的值并不会影响到num1数据类型是按值传递2. 按引用传递比如下面的例子...

2018-04-23 18:22:56 237

原创 IE兼容性问题处理( 对象不支持startsWith )

一、 IE：对象不支持startsWith利用 react + redux + webpak 实现了一个mini项目。在项目快做完需要处理兼容性的时候却发现有一个坑爹的问题，项目在火狐和Chrome上都可以正常的使用，但是却不能兼容IE(IE11)。打开控制台刷新浏览器会变成这个样子，并且很奇怪没有生成对应的dom树，但是还好有报错：放大一下报错信息，它的报错信息是“对象不支持startsWith...

2018-03-21 18:09:07 15174 1

原创关于DOM0级与DOM2级事件调用，需不需要在函数名后加括号

最近在写代码的时候遇到了一个问题（关于是不是需要在被调用的函数名后加括号），总结一下大概是这个样子：在实际运行的过程中可以发现几种不同的现象：test1：在刷新页面的瞬间立即执行test2：点击test2的按钮执行test3：点击test3的按钮执行test4：点击test4按钮不执行弹框操作这是为什么呢？1. 首先 test1 和 test2 都是 DOM2 级事件，他们的区别是，是否...

2018-03-12 11:18:10 386

原创 React 入门 Demo 实例总结

学习一门语言，貌似最基础的demo练习就是实现CRUD操作。所以决定做一个react入门总结。首先，在实现crud操作前我们需要了解，React是如何操作修改数据，先看一个简单的demon，react是如何实现数据双向绑定（我理解的数据双向绑定）一、简单的双向绑定这里面有几点需要注意的：1. constructor：如果在react中需要添加st

2018-01-02 18:36:39 16107 2

原创移动滑动切换功能总结

实现移动端的触摸滑动事件，主要有以下几个步骤：添加路由事件，利用touchmove添加滑动事件，滑动的计算规则，滑动动画一.路由事件（对需要滑动的组件分别定义路由，具体省略）eg:XXXYYY二.添加滑动事件常用的三个触摸事件是 touchstart ，touchmove ，touchend，手指在屏幕中划过时会依

2017-12-27 15:24:01 1562

原创 javascript中的类型判断

一. 数据类型javascript中数据类型分为五种基本数据类型外加一种对象数据类型，结构图如下：二. 类型检测1.typeof typeof常用于检测基本数据类型以及函数对象，但它不适用于检测null 2.instanceof 常用于判断对象类型，基于原型链。期望左操作数为对象，期望右操作数为函数对象，判断左边的原型链上是否有右边的构

2017-10-31 19:34:08 272

原创 vue中v-text，v-html, v-model, {{}}之间的异同

首先我们知道vue中有很多自定义指令，以v- 开头，例如：v-text，v-bind，v-model, v-if,等在这些指令中，部分指令之间是很容易被混淆，所以今天决定自己总结一下以下几个相似指令之间的异同：1.v-textv-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变

2017-10-09 13:39:08 68984 1

原创 Canvas的使用以及方法整理

Canvas目前是比较流行用于在网页中通过Javascript脚本语言绘制图形的元素。在应用方面，包括很多小游戏的制作，动画的实现，基础图形以及文字的绘制等。下面通过小示例来学习通过canvas进行简单的绘图，首先我们需要定义一个canvas标签，定义的方法很简单：一. canvas的宽高定义1.这里我们建议的写法是这样，或者采用在js中通过 canvas

2017-09-01 13:39:28 1099

原创利用 CSS3 实现一个转动立体六边形 <二>

实现一个转动的立体六边形结果示例图：示例代码：.test{ font-size:20px;}.container{ width: 500px; height: 420px; position: relative; margin: 0 auto; padding-top: 200px; perspective: 2000px; -webkit-perspe

2017-08-31 09:55:00 1569 1

原创 ES6 函数的几个特性

1.允许给函数赋默认值function test( a, b = 'worse' ){ console.log(a,b)}test( 'its', 'great' ) /* its great */test( ' its' ) /* its */test( 'its', ' ' ) /* its */2.函数的length属性 ES6中函数的length属性返回值

2017-08-30 16:14:39 735

原创利用 CSS3 实现一个转动立体六边形 <一>

利用CSS3实现一个立体六边形结果示例图：示例代码：.test{ font-size:20px;}.container{ width: 500px; height: 420px; position: relative; margin: 0 auto; padding-top: 200px; perspect

2017-08-29 09:45:35 2552

原创 var 与let const比较

ES6中新增了let,const命令，那么它们与ES5中的var有哪些异同呢，下面我们来总结一下首先是letlet是用于声明变量，它的用法与var类似，但它仅在当前块级作用域内有效，同时与var相比它有3个特点：1.不存在变量提升（const也具有此特点）我们都知道var定义变量，当在声明变量前使用会有变量声明前置，大概因为这种变量声明前置在代码中并不严谨，所以在ES6中let不在

2017-08-25 13:56:05 308

原创 HTML5中<video>标签

HTML5 提出了 video元素来包含视频的标准方法。通过标签可以定义视频目前，支持3种视频编码方式Ogg, MPEG4, WebM 以下为一段示例代码： video{ width: 700px; position: absolute; height: 500px;

2017-08-22 20:01:42 334

原创关于CSS实现水平垂直居中

行内元素：1.text-align:center 对文本，图片，按钮等行内元素进行水平居中2.line-height:行高当只有一行文字元素时，将line-height设为行高可实现垂直居中块元素：3.margin:0 auto 对于有宽度的块元素，设置margin:0 auto,相对于父元素水平居中 4.绝对定位与负边距实现利用绝对定位，将元素的top和left属性都设为50%...

2017-08-21 16:32:50 251

yummyH