学习记录----简单的原生js路由

【学习记录----简单的原生js路由】的更多相关文章

学习记录----简单的原生js路由

在以前的web程序中,路由字眼只出现在后台中.但是随着SPA单页面程序的发展,便出现了前端路由一说.单页面顾名思义就是一个网站只有一个html页面,但是点击不同的导航显示不同的内容,对应的url也会发生变化,这就是前端路由做的事.也就是通过JS实时检测url的变化,从而改变显示的内容. 目前很多前端框架都有接口去实现路由,比如vuejs的vue-route等.我们可以利用原生的hashchange事件来模拟一个简单的路由. 路由:根据不同的url 显示不同的内容方法:hash(锚链接)实现路由…

一个简单用原生js实现的小游戏----FlappyBird

这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习这是html结构 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="game"> <div id="b…

封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式. 首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏, 容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为a…

Java设计模式学习记录-简单工厂模式、工厂方法模式

前言之前介绍了设计模式的原则和分类等概述.今天开启设计模式的学习,首先要介绍的就是工厂模式,在介绍工厂模式前会先介绍一下简单工厂模式,这样由浅入深来介绍. 简单工厂模式做法:创建一个工厂(方法或类)用来制造对象. 当一个人想要用手机的时候,需要自己创建手机然后来使用. 如下: public class IphoneX { public IphoneX(){ System.out.println("##### 制造iphoneX #####"); } } public class I…

Cisco学习记录（二）：路由及网络设备配置

本篇我们利用cisco packet tracer搭建一个简单的网络.我们在左下方的设备中尝试选择创建两个4321路由器和一个3560-24PS Multilayer交换机,然后在左下方的电缆线中选择Copper straight-Through,即用直通线将三台设备各选择一个端口连起来: 点击Options -> preferences,勾选如下可以让连接的端口号显示出来: 接下来,我们尝试配置路由.点击Router2路由进入CLI, 输入问号会提示能用的命令: 输入en,或者enable进入…

1、WIN2D学习记录（win2d实现JS雨天效果）

一.Win2D Win2D是微软开源的项目它的github地址是 https://github.com/Microsoft/Win2D 里面有详细的文档 http://microsoft.github.io/Win2D/html/Introduction.htm 大量Sample https://github.com/Microsoft/Win2D-samples 二.运用 1.上手win2d十分快,在nuget下载安装相应win2d插件即可使用了. 2.win2d里面有canvasContr…

LESS 学习记录(简单入门)

什么是 LESS LESS是一种动态样式语言,属于 CSS 预处理语言的一种.它使用类似 CSS 的语法,但是赋予了动态语言的特性,比如变量.继承.运算.函数等,方便 CSS 的编写和维护. 使用 LESS 在开发环境下的时候,推荐直接使用浏览器使用 LESS. 下载 LESS.js 文件. 页面中引入 styles.less 文件所有 .less 必须在 LESS.js 前引入.(服务器必须设置 .less 文件的 MIME 为 text/css) 引入 JS 文件开发完毕后,推荐使用 n…

WebApi官网学习记录---web api中的路由

如果一条路由匹配,WebAPI选择controller和action通过如下方式: 1.找到controller,将"controller"赋值给{controller}变量 2.寻找action,web api查看http的请求方式,然后寻找一个以对应请求方式开头的action,如Get请求,需要寻找一个名为Get...的action,这种方式仅支持Get,Post,Put和Delete操作. 除了依据Http请求的方式,还可以显示为action指定http method通过Http…

最简单的原生js和jquery插件封装

最近在开发过程中用别人的插件有问题,所以研究了一下,怎么封装自己的插件. 如果是制作jquery插件的话.就将下面的extend方法换成 $.extend 方法,其他都一样. 总结一下实现原理: 将方法体封装在一个自执行的函数体里面,防止变量污染. 默认参数在options设置,extend方法有由for-in遍历得到,使得参数为用户制定参数.this.init是项目初始化,init,extend,event方法都是在demo对象的原型链上面的方法,方便调用.将自己的方法直接卸载event方法…

最近老是有兄弟问我，Vue双向绑定的原理，以及简单的原生js写出来实现，我就来一个最简单的双向绑定，原生十行代码让你看懂原理

废话不多说直接看效果图代码很好理解,但是在看代码之前需要知道Vue双向绑定的原理其实就是基于Object.defineProperty 实现的双向绑定官方传送门这里我们用官方的话来说Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象.语法:Object.defineProperty(obj, prop, descriptor)参数obj:要在其上定义属性的对象.prop:要定义或修改的属性的名称.descrip…