原生JS实现集合结构

【原生JS实现集合结构】的更多相关文章

原生JS实现集合结构

1. 前言集合是由一组无序且唯一(即不能重复)的项组成的.你可以把集合想象成一个既没有重复元素,也没有顺序概念的数组.在ES6中已经内置了集合这一数据结构--Set.接下来,我们就用原生JS来实现这一数据结构. 2. 创建集合类首先,我们先创建一个集合类,并且为其声明一些实例方法,如下: class Set { constructor() { this.items = {} } has(value) {} add(value) {} remove(value) {} clear() {} s…

原生JS实现栈结构

1. 前言栈,是一种遵从后进先出(LIFO,Later-In-First-Out)原则的有序集合.新添加的元素都保存在栈的一端,称作栈顶,另一端叫做栈底.在栈中,新元素都靠近栈顶,旧元素都靠近栈底. 2. 功能说明 push(value):添加一个新元素到栈顶 pop():移除栈顶的元素,同时返回该元素 peek():获取栈顶的元素 isEmpty():判断栈是否为空.是返回true,否返回fallse clear():清空栈里的元素 size():获取栈里元素的个数 3. 代码实现首先,先…

原生JS实现队结构及利用队列模拟‘击鼓传花’游戏

1. 前言队列,是一种遵从先进先出(FIFO,First-In-First-Out)原则的有序集合.队列在尾部添加新元素,并从顶部移除元素,最新添加的元素必须排在队列的末尾. 2.功能说明 enqueue(value):进队,添加一个新元素到队列末尾 dequeue():出队,移除队列中的第一个元素,同时返回该元素 front():获取队列中的第一个元素 isEmpty():判断队列是否为空.是返回true,否返回fallse clear():清空队列里的元素 size():获取队列里元素的个…

(js描述的)数据结构[集合结构](6)

(js描述的)数据结构[集合结构](6) 一.集合结构特点 1.集合中的元素不能重复. 2.集合是无序的. 二.集合的代码实现 function Set() { this.items = {} //1. add方法 Set.prototype.add = function(value) { //判断集合中是否包含元素 if (this.has(value)) { return false } //把数据添加到集合中 this.items[value] = value return true }…

原生JS实现树状结构列表

树状结构列表,这个技术点之前有写过了,是基于vue讲解,但似乎都没有解决痛点,最基础的原生JS该怎么实现呢? 这篇文章会全面详细的介绍树状结构列表的实现,从数据处理成树状结构,到动态生成dom节点渲染页面. 确定原始数据结构原始数据是需要按照下面这种结构来定义的,如果原始数据已经是被后端处理成树状结构,就可以省略这一步骤. let data = [ { "id": "1", "name": "1", "fath…

原生JS 表单提交验证器

转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定不用外部流行的框架,如bootstrap,由于我负责的模块仅仅是其中的一部分,因此少数服从多数,无奈只能抛弃bootstrap等提供的布局,样式以及验证等一些列如此方便的组件,(他们拒绝使用的原因也令人发省). 那么问题就来了. 二.设计理念我们都知道,在抛开外部框架,仅仅用JS+css+html 去开…

原生js写的一个弧形菜单插件

弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var defaultPra = { mainMenuId: "ArcMenu",//主菜单id menuBoxId:"menuBox",//菜单包裹id position: "",//弧形菜单 customPosition:"0,0",/…

原生JS插件（超详细）

作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦.以前一直说,掌握了js原生,就基本上可以解决前端的所有脚本交互工作了,这话大体上是有些浮夸了.不过,也从侧面说明了原生js在前端中占着多么重要的一面.好了.废话不多说.咱们就来看一下怎么去做一个自己的js插件吧. 插件的需求我们写代码,并不是所有的业务或者逻辑代码都要抽出来复用.首先,我们得看一下…

JS中集合对象(Array、Map、Set)及类数组对象的使用与对比

原文地址在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型,Array,Map,Set都属于iterable类型,它们可以使用for...of循环来遍历,都内置forEach方法. 数组遍历普通遍历最简单的一种,也是使用频率最高的一种. let arr = ['a', 'b', 'c', 'd', 'e'] for (let i = 0; i < ar…

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

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

前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）

1.同源策略同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现,现在所有支持JavaScript 的浏览器都会使用这个策略. 所谓同源,就是指两个页面具有相同的协议,主机(也常说域名),端口,三个要素缺一不可. 所谓同源策略,指的是浏览器对不同源的脚本或者文本的访问…

原生JS实现"旋转木马"效果的图片轮播插件

一.写在最前面最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的.现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品.逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来.做起来才发现,没有自己想象中的那么容易...不啰嗦了,讲解一下实现过程吧. 二.效果由于自己的服务器还没弄好.在线演…

【CSS进阶】原生JS getComputedStyle等方法解析

最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐进增强)优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹. 另外,阅读源码让我接触到了大量底层的知识.对原生JS .框架设计.代码优化有了全新的认识,接下来将会写一系列关于 jQuery 解析的文章. 我在 github 上关于 jQuery 源码的全文注解,感兴趣的可以围观一下…

使用原生JS实现一个风箱式的demo，并封装了一个运动框架

声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的框架. function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr];//为了获取IE下的属性值 }else{ return window.getComputedStyle(obj,null)[at…

原生js实现滚动条

var SimulateScroll = (function(){ var oParent = document.getElementById('wrap-scroll-bar'), oBox = document.getElementById('scroll-bar'), oWp = document.getElementById('container'), oDiv = document.getElementById('cont'), bDown = true, downFun = func…

原生 js 左右切换轮播图

使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以加本人 QQ172360937 咨询或者留言都可以,这个是用原生写的轮播图,样式可以写自己喜欢的样式,什么都不用改,只改变样式就行,页面结构的id 要与js的相对应li随便加.li 随便加的意思就是说你可以加无数个图片.每个li 里装一个图片,或者是其他什么元素, <!doctype html> <html lang=&qu…

原生js dom记忆的内容

1.DOM基础getElementByIdgetElementByTagNamegetElementByName getElementsByClass querySelector querySelectorAllgetAttributesetAttributeremoveAttribute domobj.tagNamedomobj.innerHTML innerHTML与innerText的区别.http://akunamotata.iteye.com/blog/440863domobj.idd…

使用原生js与jQuery分别实现一个简单的tab页签

tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动.而页签内容部分使用div承载即可.另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构: <div id="main"> <ul id="tabbar" class=&…

原生JS实现幻灯片轮播效果

在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <div id="box"> <ul class="list"> <li><img src="01.jpg" width="490" height="170" /><…

原生js和jquery实现图片轮播特效

本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换式1.首先是个外围部分(其实也就是最外边的整体wrapper)2.接着就是你设置图片轮播的地方(也就是一个banner吧)3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式)4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部6.然后是一个图片描述info…

原生js 样式的操作整理

内联样式的获取 function getStyle(obj,attr){//简单的获取内联样式 return obj.currentStyle?obj.currentStyle[attr]:obj.getComputedStyle(obj,false)[attr]; } 下面是比较完善的, //参考地址 http://stylechen.com/getstyle2.html var getStyle = function( elem, style ){ //单位如果em或%的单位,getCo…

原生js和jquery实现图片轮播特效(转)

本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换式1.首先是个外围部分(其实也就是最外边的整体wrapper)2.接着就是你设置图片轮播的地方(也就是一个banner吧)3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式)4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部6.然后是一个图片描述info…

一个简单用原生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操作DOM

查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个匹配的元素 <div class="wrap"> <div class="header">header</div> </div> <script> var oHeader = document.querySel…

用原生JS从零到一实现Redux架构

前言最近利用业余时间阅读了胡子大哈写的<React小书>,从基本的原理讲解了React,Redux等等受益颇丰.眼过千遍不如手写一遍,跟着作者的思路以及参考代码可以实现基本的Demo,下面根据自己的理解和参考一些资料,用原生JS从零开始实现一个Redux架构. 一.Redux基本概念经常用React开发的朋友可能很熟悉Redux,React-Redux,这里告诉大家的是,Redux和React-Redux并不是一个东西,Redux是一种架构模式,2015年,Redux出现,将 Flux 与…

原生js学习选择dom

连bootstrap5 都抛弃jquery了,重新使用原生js来写,所以最近在学习原生js. 一.选择dom元素: id let sure=document.getElementById('sure'); 返回值:是一个dom元素,因为id在一个文档(document)中,是唯一,所以返回一个dom对象. class let mask=document.getElementsByClassName(] 返回值:类数组的元素集合因为className在一个文档中并不是唯一,我们在使用docume…

抛开jQuery，拾起原生JS的DOM操作

常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. 删除DOM 5. 添加class 6. 是否存在class 7. 删除class 8. 实现 JQ 的toggleClass 9. 获取DOM的css样式 10. 给DOM设置css样式 11. 删除DOM的css样样式 12. DOM的查找(遍历),例如查找父级,子级,兄弟等节点 13. 获取DO…

原生js 数组的迭代的方法

一.原生js Array给我们提供很多了方法.方便我们操作数组.这些方法的参数,都需要传入一个匿名函数,匿名函数中有三个参数,分别含义是:数组中的项.该项的索引.以及数组本身. 1.filter方法:对数组每一项执行匿名函数,并返回符合条件的数组的项. ,,,,,]; //filter 方法 var moreTwo=testArr.filter(function(item,index,array){ ; }); console.log(moreTwo); 2.map方法:对数组中每一项进行操作,…

用原生js实现ajax、jsonp

转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data: {name: }, dataType: 'json', success: function (data) { }, error: function () { } }) function ajax(options) { options = options || {}; options.type =…

原生JS实现Promise

ES6中Promise可以说很大情况下改善了异步回调的嵌套问题,那么如果我们自己去写一个类似Promise的库应该怎么去写? 我们先看一下Promise的特点: 第一:Promise构造函数接受一个函数作为参数,函数里面有两个参数resolve和reject分别作为执行成功或者执行失败的函数 var promise=new Promsie(function(resolve,rejec){ if(/*异步执行成功*/){ resolve(value); }else{ reject(error);…