2018年12月_阿宇的编程之旅

12月 11月

原创 JS案例：继承和深复制

继承：// 寄生式继承(圣杯) Father.prototype.name = 'Hello' //在Father类中添加一个name属性 function Father() {} //构造Father类 function Son() {} //构造Son类 var inherit = (function () { //新建一个立即执行函数,(类似雅虎网站的继承写...

2018-12-30 16:54:26 802 2

原创 React（四）进阶

搭建脚手架 create-react-app：（类似Vue）：步骤：全局安装 npm install create-react-app -g在项目目录下安装create-react-app myapp(项目名称）npm start 运行项目npm run eject--------将配置文件迁移到外部（产生config文件夹）Redux：如果你不知道是否需要 Re...

2018-12-30 15:18:14 378 2

原创 React（三）TableBar，ToDoList，Redux案例

直接上代码：TableBar:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0

2018-12-27 23:56:31 410 2

原创 React（二）组件通信

组件通信：(react版本是15版本，可能和16版本的操作有部分差异)父子组件：父=>子用props：通过ref进行标记 1.用props<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> &

2018-12-27 15:48:00 394 4

原创 React（一）起步

轻量级的视图层框架React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式React高性能的原理：减少对DOM进行操作，引入了虚拟DOM，如：先将节点内容从A-B,B-A，React会认为A变成B，然后又从B变成A ，不发生任何变化。特点：虚拟DOM组件系统单向数据流JSX 语法起步：引入三个js文...

2018-12-25 21:23:42 513 6

原创 Vue（二）进阶

Vue脚手架： vue-cli：全局安装：npm install -g vue-cli查看版本：vue -V 初始化脚手架：vue init webpack + 项目的名字运行项目：npm run dev打包项目：npm run build文件及文件夹的信息：开发依赖：开发编译打包需要的依赖，打包之后就不要了生产依...

2018-12-24 10:30:55 558 6

原创 Vue（一）初识

Vue的意义：将开发者的精力从dom操作解脱，更加专注于数据的操作，数据驱动，界面的渲染随着数据的变化自动变化 1.将开发者的精力从dom中解除，极少做dom操作 2.通过指令（directive）将元素和数据进行绑定 3.数据变化元素界面变化 4.开发者关注数据的变化配置：Vue官网下载；或npm install vuejs引入包后，实例化...

2018-12-14 20:56:05 362 7

原创 Vue（三）两个案例（todolist，tableBar）

待办事项：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

2018-12-11 11:57:02 496 2

原创 JS案例：轮播图（面向对象），最终版（注释全面）

Html：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"

2018-12-08 21:45:50 775 7

原创 Node（十二）加密解密

token：（引入jsonwebtoken模块）对称加密，一个秘钥进行加密解密const crypto = require('crypto');// 产生tokenlet obj = { a: 1, b: 2,};let sec = 'HelloWorld'let res = jwt.sign(obj, sec,{ algorithm: 'RS2...

2018-12-05 18:00:33 590 4

原创 JS案例：轮播图（第二代）

较上个版本功能全面，函数模块化，降低联系，bug减少，附上代码：Html：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w

2018-12-04 20:08:43 450 2

原创 JS案例：轮播图（第一代）

初级版轮播图，实现左右按钮切换图片，下方小点切换图片，简单的自动轮播代码：（缺点，固定图片张数和宽度高度，每次用时都需要复制，代码累赘，多处功能不完善）Html：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta htt...

2018-12-04 14:53:22 445 1

原创 Node（十一）mongoose配合Node实现注册登录(注册上传头像，登录成功后显示用户信息)

需要引入的模块和框架：JQ，monogoDB，mongoose模块，express模块，nodemailer模块，cors模块，multer模块，body-parser模块。文件夹（大致）结构如下：css：主页样式；get_pic：临时文件存放；img：默认头像路径；js：首页的js；main：入口server文件（终端执行的）；node_moudules:下载的...

2018-12-03 17:34:53 1604 7

原创 JS案例：购物车操作（简单实现）

Html：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"

2018-12-02 20:13:38 1792 4

原创 JS案例：Jq中的fadeOut和fadeIn实现简单轮播（没完善，简单实现）

代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

2018-12-02 19:32:35 611 2

原创 JS案例：小球拖动，记录轨迹，并原路返回

附上代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

2018-12-02 16:56:44 1119 2

原创 Node(十)之Mongoose配合Node路由实现邮箱注册登录（Post版）

首先新建一个HTML：（引入jq）<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-sca

2018-12-02 15:36:22 717 1

原创 Node(九)之Node配合MongoDB实现简单的注册登录

附上代码：（较之前的用txt实现的没有什么区别，只是后端用数据库实现了接口功能）Html：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="w

2018-12-01 16:47:12 513 1

javascript面向对象编程

javascript面向对象编程，JavaScript 的演化是渐进而稳固的。历经过去十年的进程，JavaScript 在人们的认知里已经从一门简单的玩物式的语言逐渐发展成为一门倍受推崇的编程语言，被全世界的公司和开发者用来构造种种精彩的应用。现代 JavaScript 编程语言一如既往地可靠、健壮，强大得令人难以置信。

2020-10-26

这个项目是我利用空余的时间写的，商城App界面主要模仿零食商贩小程序写的，其余都是自己写的项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping 使用到的技术：后端：node+express+MongoDB 管理界面：react+antd 商城界面（移动端）：Vue+Mint UI 开发工具：npm 打包工具：webpack 代码管理：git 技术栈：后端（express，mongoose，cors，body-parser，multer，jsonwebtoken，crypto-js，bcrypt

2020-09-08

一些用jq和原生实现的案例

案例是几年前在学校的时候做的，一些学习过程，案例主要包括：轮播图，弹出框效果，下拉菜单，动画函数，全选框等等

2020-04-11

Echarts案例：整一个炫酷一点的仪表盘

使用Echarts仪表盘加极坐标实现一个炫酷的仪表盘，表盘渐变，边缘圆角，（备份的案例）源码：https://gitee.com/DieHunter/myCode/tree/master/Echart/PolarGauge

2020-03-21

Echarts案例：使用象形柱状图（PictorialBar）实现电池效果柱状图

Echarts案例：使用象形柱状图（PictorialBar）实现电池效果柱状图，数据驱动更新charts （备份的案例）源码：https://gitee.com/DieHunter/myCode/tree/master/Echart/PictorialBar

2020-03-20

Echarts案例：使用极坐标加柱状图实现类似Apple Watch上的运动环形效果

分享自己公司项目类似的一个案例，用Echarts中的Polar（极坐标或称为平面直角坐标系）和Bar（柱状图）实现的源码：https://gitee.com/DieHunter/myCode/tree/master/Echart/AppleWatch

2020-03-20

使用JS+socket.io+WebRTC+nodejs+express搭建一个简易版远程视频聊天

使用到JS+socket.io+WebRTC+nodejs+express构建远程实时视频聊天功能，实现浏览器对浏览器之间通过socket建立连接，再通过WebRTC进行流式传输

2020-03-12

用购物车理解前端MVC架构

购物车整体流程：目录结构将model view controller剥离开 Modedl层：存储数据，显示数据 View：根据Model数据渲染页面 Controller：传递数据 Command:操作数据，获取数据 Event：事件总线，注册事件商品列表：初始化View层，建立Ajax获取数据，之后由controller触发事件至事件总线，然后再由注册的事件将ajax数据传至Model中完成商品列表初始化当model获取到商品列表数据时，通过代理set() 触发新建商品列表事件，通过command操作view达到新建列表目的购物车表格：当用户对view进行操作时，触发注册的事件，通过command修改Model中的数据（购物车列表）从而再由command驱动view中的刷新表格进行渲染

2020-03-05

原生JS实现高大上的购物车

购物车可谓是js中十分经典的案例，很多电商网站都会用到，是一个十分考验综合性的案例今天分享一个自己编写的购物车，采用的是原生面向对象实现，数据的传导通过事件代理进行。

2020-02-24

前端XMind汇总

除了小部分别人分享的，其他全是自己总结的，主要是原生的，nodejs，Vue，React等等也有，没原生详细

2019-03-08

前端面试题

自己收集的一些前端面试题以及解答，希望会派上用场，原生JS，Vue，React居多，非常全面，物超所值

2019-03-07

JavaScript面试题集锦

JavaScript常见面试题，特别不错，强烈推荐

2018-12-17

JavaScript案例

自己写的一些JS案例备份，博客里的有注释，资源不提供注释

2018-12-04

收集前端常用框架包，及UI库

该资源包括前端常用的组件库和js框架库，由于react太多，所以没有加入TAT，其中包括Vue（vue大法好，可能不全），angular（据说用的不多了），animate（一款css的动态库，用animation做的），core.js（用的比较少，貌似是jQ的包），H-ui（比较不错的组件库），jQuery（这个不用说了吧），layui（也挺好用的UI组件），less（sass，scss，less一起的），swiper（一个挺好用的轮播图的库，强烈推荐），Tween（运动函数库），sport.js万能运动公式

2018-11-13

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人