- 博客(37)
- 收藏
- 关注
RSS订阅
原创 读《JavaScript设计模式与开发实践》
读《JavaScript设计模式与开发实践》我最近在读读《JavaScript设计模式与开发实践》，并将总结这本书的知识点，在学习过程中会总结觉得有用的知识点，并记录下来，做成系列集，供日后学习，每周更新一篇学习笔记，希望成为有技术的developer第一章————面向对象的JavaScript...
2018-09-19 09:08:01
208
原创 利用Map结构数据重组
利用Map结构数据重组Map 结构相关知识 请跳转阮一峰ES6教程场景：数据是这样的，但是在某些页面中我并不想要这样的数据 ，我想要的数据形式为： 在某个时间下有多少任务（任务含有任务详情数据）。所以就要进行数据重组。像这样简单的数据重组在前端是非常简单的。利用ES6 Map结构。达到数据的重组目的。重组后的数据形式为： let map = new Map(); data.for...
2019-01-15 14:50:11
1018
原创 JavaScript 几种for循环的比较。
let array = [1, 2, 3, 4];array.dec = ‘numbers’;//forEach 方法不允许 breakbreak 提出循环 forEach 方法循环出来没有属性// array.forEach((value) => console.log(value));//for in 循环出来的键值对的的 键。//forEach 和 for of 循环出...
2018-12-01 18:43:48
749
原创 JavaScript---设计模式与开发实践--第三章 闭包
JavaScript—设计模式与开发实践–第三章 闭包闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。对于 JavaScript程序员来说，闭包（closure）是一个难懂又必须征服的概念。闭包是指有权访问另一个 函数作用域中的变量的函数 ----> 《JavaScript高级程序设计》第三版闭包就是能够读取其他函...
2018-10-02 10:19:46
336
原创 JavaScript---设计模式与开发实践--第二章 this、apply、call
JavaScript—设计模式与开发实践–第二章 this、apply、callthisJavaScript的this总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。this指向this指向大致可以分为以下几种。作为对象的方法调用。作为普通函数调用。构造器调用。Function.prototype.call 或 Functio...
2018-09-25 21:26:30
197
原创 JavaScript---设计模式与开发实践--第一章（面向对象的JavaScript）
JavaScript—设计模式与开发实践第一章 面向对象的JavaScript设计模式----前言设计模式起源：“模式” 最早诞生于建筑学，哈佛大学建筑学博士士Christopher Alexander研究了为解决同一个问题而设计出的不同建筑解构，从中发现了那些高质量设计中的相似性，并且用“模式”来指代这种相似性。设计模式定义：在面向对象软件设计过程中针对特定问题的简洁而优雅的就解决方案...
2018-09-17 22:00:50
207
原创 Node----应用开发
Node应用开发Node是服务器的JavaScript运行环境，提供API与操作系统互动。Node意义JavaScript 成为服务器脚本语言，与 Python 和 Ruby 一样JavaScript 成为唯一的浏览器和服务器都支持的语言前端工程师可以编写后端程序了前端开发模式的根本改变Node环境下开发大量使用服务器端工具引入持续集成等软件工程的...
2018-08-24 10:19:50
195
原创 Vue----路由理解
Vue—-理解路由1.理解官网给出的路由例子官网例子 https://router.vuejs.org/zh/guide/#html自己理解 路由 简单的说，路由是根据不同的 url 地址展示不同的内容或页面。 说起路由，最先想到的应该就是路由器，那么路由器的工作原理是什么呢？ 路由器的功能就是一个中转站，就是把网络中的包通过一个一个路由器到达转发的目的。路由器...
2018-08-22 21:56:18
2309
原创 Vue----组件、组件嵌套、传递消息
Vue—-组件、组件嵌套、传递消息什么是组件？组件使用组件嵌套父组件向子组件传递消息5. 子组件向父组件传递消息1.什么是组件js组件就是把一系列的功能封装起来，包装成一个对象。比如一个表格组件，一个表单组件等等。一个组件必然包含了某种特定的职能，目的在于可以复用。比方说，你的网站需要展示一个万年历，那么最基本的方法，就是自己画table,自己写逻辑，麻烦得一...
2018-08-18 10:10:27
7652
原创 Vue----生命周期钩子
生命周期钩子1.什么生命周期2.钩子函数## 生命周期 生命周期：就是Vue实例从创建到销毁的过程，就是生命周期。 Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。 ## 钩子函数 同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的...
2018-08-17 19:57:52
187
原创 ES6----let 和 const命令
let 和 const命令let 命令块级作用域const命令1.let命令ES6新增了let命令，用来声明变量，但是let声明的变量只在let命令所在的代码块有效。{ let a = 10; var b = 1;} console.log(b); //1 console.log(a); // 报错上面的代码之中，用了...
2018-08-11 13:50:46
174
原创 ES6----Class的基本语法
ES6 Class基本语法简介严格模式constructor方法class的实例对象class表达式不存在变量提升this指向class的静态方法9. new.target1.简介JavaScript 语言中，生成实例对象的传统方法是通过构造函数.ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字...
2018-08-10 21:02:39
684
原创 JavaScript----快速排序算法(Quciksort)实现
JavaScript—-快速排序算法(Quciksort)实现先来阮大哥的教程。简单易懂，初入JS的最好学习圣地 http://www.ruanyifeng.com/blog/2011/04/quicksort_in_javascript.html快速排序算法的思想在数据集中选择一个元素作为基准。所有小于”基准”的元素，都移到”基准”的左边；所有大于”基准”的元素，都移到”基准”...
2018-07-30 20:57:40
216
原创 JavaScript----原型对象
原型对象在说原型对象之前要明白几个单词的意思： prototype (原型，雏形，蓝本) constructor (构造器) 不解释，先上关系图. 这就是他们之间的关系。用另一种方式解释一下prototype： 每一个函数都有一个prototype属性，这个属性其实是一个指针，二这个指针总是指向一个对象。这个对象的用途就是将特定的属性和方法包含在内，起到一个所有实例所共享的作用...
2018-07-26 21:32:44
174
原创 JavaScript----对象和函数的关系
理解对象中说明了函数是对象，因为可以用 instanceof函数来判断。所以函数是一种对象，但是函数又有特殊的地方。数组是对象的一个子集，属于包含关系，但是对象和函数之间的关系有点复杂，对象和函数的关系类似于鸡生蛋，蛋生鸡的关系。 例子：function Person(name,age){ this.name = name, this.age = age}var pe...
2018-07-26 20:18:33
979
原创 JavaScript----理解对象
Everything is Object–>数据类型在了解对象之前先要了解一下JavaScript中的数据类型，JavaScript中数据类型分为两类：值类型和引用类型。 function showType(n){ //基本类型。 console.log(typeof n);//undefined console.log(...
2018-07-26 17:50:41
171
原创 JavaScript----DOM基础知识（四）DOM选择器
JavaScript----DOM基础知识（四）DOM选择器在DOM经常要选中标签，下面就详细介绍五种在DOM中的常规操作节点1.直接查找<script type="text/javascript"> //1.document.getElementById(''); var a = document.getElementById('div'...
2018-07-20 11:16:24
251
转载 JavaScript--主流浏览器及其内核
任何上过网的用户对浏览器是再熟悉不过了。只是用户看到仅仅只是浏览器本身，却很少能看到浏览器最核心的部分—浏览器内核。从第一款libwww（Library WorldWideWeb）浏览器发展至今已经经历了无数竞争与淘汰了。现在国内常见的浏览器有：IE、Firefox、QQ浏览器、Safari、Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、遨游...
2018-07-14 11:29:15
376
原创 JavaScript----DOM基础知识（三）动态创建标签
JavaScript不仅可以用来改变网页的结构和内容，还可以通过创建新元素和修改现有元素来改变网页结构。在学习利用DOM方法在web浏览器中添加标记时，常常能想到document.write（）和element.innerHTML方法，但是，不推荐使用这两种方法。这两种方法都右一种共同的弊端：结构、样式、行为没有分离。例如：<html lang="en"><head> ...
2018-07-14 11:03:17
1730
原创 JavaScript——动画原理
JavaScript——动画原理首先给“动画”进行定义：随时间的变化而改变某个元素在浏览器窗口中里的显示位置。当物体在快速运动时, 当人眼所看到的影像消失后，人眼仍能继续保留其影像1/24秒左右的图像，这种现象被称为视觉暂留现象。是人眼具有的一种性质。人眼观看物体时，成像于视网膜上，并由视神经输入人脑，感觉到物体的像。但当物体移去时，视神经对物体的印象不会立即消失，而要延续1/24秒左右的时间，人...
2018-07-14 09:52:39
213
原创 JavaScript----addEventListener和removeEventListener详解
addEventListener() ，removeEventListener()均为事件绑定操作，一个增加事件绑定，一个是移除事件绑定。addEventListener(),用于向元素增加绑定事件，removeEventListener()用于向 元素移除绑定事件。语法说明：element.addEventListener(event,fn,useCaption ); 参数说明：event，比如...
2018-07-13 21:47:54
6594
原创 JavaScript例子——倒计时功能实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-07-12 19:26:17
305
原创 JavaScript----DOM基础知识（二）——节点关系
JavaScript----DOM基础知识（二）--节点我们知道DOM将HTML或XML文档描绘成了一个具有层次化的节点树，节点又分为几种不同的类型，每种类型用来记录文档中不同的信息，而每个节点又都拥有各自的特点、属性、方法，而且也与其他节点存在着关系。证实这种节点与节点之间的关系，构成了层次。文档元素是文档的外层元素，文档中的其他所有元素都包含在文档元素中。每个文 档只能有一个文档元素。在 HT...
2018-07-11 18:38:55
289
原创 JavaScript----DOM基础知识（一）什么是DOM？
什么是DOM？DOM（document object model）文档对象模型，是针对HTML和XML的一个API（应用程序接口）。DOM给我们描述了一个具有层次化特点的节点树，允许开发人员增删改查页面的某些部分。DOM是由脱胎于微软公司开发的DHTML，1998年DOM 1成为了W3C的推荐标准，为基本的文档结构查询提供了接口。DOM--"D"：文档如果没有“D”，DOM就没有任何意义，当创...
2018-07-10 19:27:23
2597
1
原创 JavaScript垃圾（内存）收集机制及其性能问题
JavaScript具有自动垃圾收集机制，其真实含义为：执行环境会负责管理代码执行过程中的使用的内存。垃圾收集机制原理：找出那些不再继续使用的变量，然后释放其占有的内存，为此，垃圾收集机制会按照固定的时间间隔周期性地执行这一操作。局部变量只再函数执行过程中存在，而在这个过程中，会为局部变量在栈内存（或堆内存）上分配相应的空间，以便存储它们的值，然后在函数调用过程中使用这些变量，直到函数执行完毕。这...
2018-07-09 21:00:03
140
原创 JavaScript变量作用域详解
JavaScript变量作用域详解 在JavaScript中，变量可以是全局的，也可以是局部的，在讨论全局变量于局部变量时，起使就是在讨论变量的作用域（scope） 全局变量（global variable）可以在脚本中的任何位置被使用，一旦在脚本中定义了全局变量，就可以在任何位置使用它（包括在函数内部），全局变量的作用域是整个脚本。 局部变量（local...
2018-07-09 11:26:11
248
原创 递归思想
原作者：书呆子Rico 《递归的内涵与经典应用》 http://my.csdn.net/justloveyou_摘要： 大师 L. Peter Deutsch 说过：To Iterate is Human, to Recurse, Divine.中文译为：人理解迭代，神理解递归。毋庸置疑地，递归确实是一个奇妙的思维方式。对一些简单的递归问题，我们总是惊叹于递归描述问题的能力和编写代码的简洁，但要...
2018-07-06 13:55:52
2516
原创 JavaScript基础知识（三）
三 流程控制语句（一）程序结构分为三种，顺序结构；分支结构；循环结构。 1.顺序结构执行顺序（自上向下，自左向右） 2.分支结构分为 ： if 语句 ; if else 语句 if....else if ..else. switch ...case 语句 3.循环结构分为 ： for while...
2018-06-29 18:41:01
112
原创 JavaScript基础知识（二）
二 JavaScript运算符（一）运算符分类：运算符根据运算符两边操作数的不同，分为：一元运算符，二元运算符，三元运算符。运算符根据功能的不同分为：算术运算符，赋值运算符，关系运算符（比较运算符） 逻辑运算符。1.算术运算符+（加法运算） -（减法运算） *（乘法运算） /（除法运算） %（取余运算）一元运算符：++（自增运算符）； --（自减运算符）;++,--后置：++，--运算符后置...
2018-06-28 20:20:33
134
原创 JavaScript基础知识（一）
一 JavaScript数据类型1.JavaScript是一门弱类型语言，变量声明时没有数据类型，但是，赋值之后，就有了数据类型。2.数据类型（1）数值类型 （number）:数字 1，2，3，4 1.1 2.2 0.3 -3 -3.3 等。（2）字符串类型（string)：被单双引号所包裹的内容 " " ' ' 例如：'hello',"hello", “12”...
2018-06-27 18:13:36
118
原创 利用opacity属性写过渡效果
opacity的意思是不透明性，opacity取值范围为0-1；opacity：0；表示完全透明，opacity：1；表示完全不透明。opacity：0 于overflow:hidden不同，overflow:hidden会完全消除空间，opacity：0 只是视觉上看不到，但是实际上会占用空间，这点我们常用来于：hover一起使用。<!DOCTYPE html><html l...
2018-06-25 21:21:06
6713
原创 页内滚动条
<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 1.在UL上增加一个固定宽度,这个固定宽度一定要能撑得下所有的li*/ ul {
2018-06-21 21:06:11
290
原创 flex-grow、flex-shrink、flex-basis详解
flex-grow、flex-shrink、flex-basis这三个属性的作用是：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素的空间的。其中，这三个属性都是在子元素上设置的。注：下面讲的父元素，指以flex布局的元素(display:flex)。flex-basis该属性来设置该元素的宽度。当然，width也可以用来设置元素宽度。如果元素上同时设置了width和flex-basi...
2018-06-21 20:15:17
235
原创 Bootstrap4响应式动态选项卡（卡片效果）详解
Bootstrap4响应式动态选项卡（卡片效果）详解先看效果图。卡片会随着屏幕的缩放的缩放而缩放。1.逻辑详解。利用Bootstrap4网格系统与弹性盒子布局来实现效果。比较重要的一点是：在响应式网站中，我们可能需要某些元素会随着屏幕的变化而变化，有些元素可能不会随着屏幕的变化而变化。例如，本例中，...
2018-06-20 21:01:04
24995
2
原创 bootstrap4响应式轮播图详解
在开发过程中，既要采用框架，又要使用响应式布局。而bootstrap正好帮我们解决了这个问题。采用bootstrap框架快速开发，达到快速开发响应式轮播图的目的。1.引入bootstrap框架 引入方式有两种：<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css"&...
2018-06-19 21:26:24
10827
3
原创 Bootstrap4 信息提示框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-06-14 21:40:03
4402
原创 css基本选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-06-13 19:40:50
119
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人