JavaScript
文章平均质量分 63
Dragon_GL
爱前端 爱代码的 斗笔一枚
展开
-
JavaScript 数组乱序方法
1. 方法一: 通过给数组原生方法 sort( )传递一个函数——让比较函数随机传回-1或1就可以了。如下午所示2. 方法二:原创 2015-12-06 20:52:07 · 1144 阅读 · 0 评论 -
ES6入门——Set和Map数据结构
SetES6提供了新的数据结构Set。类似于数组,只不过其成员值都是唯一的,没有重复的值。 Set本身是一个构造函数,用来生成Set数据结构。var s = new Set();// 通过add方法向Set结构中加入成员[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x))for (i of s) { console.log(i) }// 2 3 4 5 (表明s原创 2016-07-03 14:05:25 · 13271 阅读 · 2 评论 -
ES6入门 —— Class和Module
一、ClassES6引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。 // 定义类 class Point() { constructor(x, y) { this.x = x; this.y = y; } toString() { re原创 2016-07-03 14:09:10 · 13185 阅读 · 0 评论 -
JavaScript笔记整理 —— XMLHttpRequest对象
XMLHttpRequest()方法是由JavaScript创建的HTTP请求对象(构造器)。值得一提的是,它最在是在IE中实现的(在IE中他叫做ActiveX)。目前,它已被所有现代浏览器所支持,是一种跨浏览器技术——Ajax应用。实际上,Ajax可以看做是由Js和XML之间建立的异步联系。XHR对象是由Js代码创建的。XML, 最初创建的HTTP请求是用来获取XML文档,XML文档中包含了需原创 2016-07-03 14:13:38 · 506 阅读 · 0 评论 -
节点克隆
对于克隆节点最长用的方法有两种,一、原生JavaScript。 二、使用流行类库。这篇文章里我会说下使用原生Javascript方法和jQuery方法克隆节点。以及,两者的异同点。好了,废话也不多说了,进入主题。。在说两种实现克隆节点之前,再啰嗦几句基础的概念:影子克隆和深度克隆var el = document.querySelector('.come-class');// 影子克隆: 只克隆节点原创 2016-08-08 17:20:29 · 2507 阅读 · 1 评论 -
JavaScript实现弹出层代码
弹出层效果应该说很是常见了,下面是使用原生JavaScript实现弹出从的方法。好了,废话不多说了。一言不合就上代码。。弹出层js部分代码: 样式表代码如下: * { padding: 0; margin: 0; } html, body { font-size: 10px;原创 2016-09-15 21:01:23 · 3646 阅读 · 0 评论 -
React入门
1.1 React 是什么 React IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES 来自:React 官方网站狭义来讲 React 是 Facebook 内部开源出来的一个前端 UI 开发框架,广义来讲 React 不仅仅是 js 框架本身,更是一套完整的前端开发生态体系,这套体系包括:React.js ReactRen原创 2016-10-04 19:50:27 · 347 阅读 · 0 评论 -
React调试工具:React Devtools
React Devtools是React官方提供的类似于浏览器调试台的插件。通过在浏览器中安装这个插件,可以查看组件的层次、各个组件的Props、States等信息。并且它的使用方式也很简单。 (图片取自网上!)下载:https://github.com/facebook/react-devtools/releases注意: 如果是Chrome浏览器就下载.crx后缀的文件。如果是FirFox浏览原创 2016-10-04 20:13:01 · 30444 阅读 · 8 评论 -
屏幕取词: window.getSelection和document.selection
上周在做扇贝小作业时学到的小技巧,因为平时很多这样的小知识点都是写在电子笔记(有道云笔记和印象笔记)里的。但是随着时间的推移,发觉里面的东西赛的是越来越多了。所以,每隔一段时间就该整理一下才合理,既可以总结最近学习的知识,放到博客里也是分享,希望对需要的朋友有帮助。IE9以下支持:document.selection IE9、Firefox、Safari、Chrome和Opera支持:wi原创 2016-10-19 00:34:44 · 5261 阅读 · 1 评论 -
数据结构与算法 —— 动态规划
简介动态规划有时被认为是与递归相反的算法。 递归 是从问题的顶部开始,将一个完整的问题一步步分解成一个个子问题,通过解决掉所有分解出来的这些子问题的方式,来解决整个问题。动态规划 是从问题的底部开始,先解决掉底部的最简单的小问题,然后,通过已解的这些小问题作为基础合并成一个整体解决方案,从而解决掉整个大问题。使用递归去解决问题虽然简洁,但 效率不高。包括JavaScript 在内的众多语言,不能高效原创 2017-03-06 16:01:21 · 420 阅读 · 0 评论 -
lambda-view: JS源码阅读工具
Github项目地址:https://github.com/Jianru-Lin/lambda-viewlambda-view能做什么?下面看一下我从lambda-view项目地址处截的一张图。对,标题就是lambda-view: A New Tool for Reading JavaScript Code in 2017,即是一个可以帮助我们更好的阅读JS源文件的这么一个工具。下面,让我们看一下当原创 2017-03-29 23:09:53 · 2631 阅读 · 0 评论 -
AutocJS – 为你的文章自动创建目录导航菜单
灵感AnchorJS 是 AutocJS 的创作灵感。既然 AnchorJS 可创建标题的链接,为什么不直接给文章生成一个目录(Table of Contents)导航呢? 于是就有了 AutocJS。What is AutocJS?AutocJS 是一个专门用来生成文章目录(Table of Contents)导航的工具。AutocJS 会查找文章指定区域中的所有 h1~h6 的标签,并自动分析文转载 2017-03-09 19:13:44 · 2317 阅读 · 0 评论 -
图片赖加载
什么是图片赖加载?一般图片懒加载又称图片延时加载、惰性加载。也就是在用户需要使用图片的时候才加载,这样做的好处有:可以减少请求、节省带宽、提高页面加载速度、减少服务器压力, 提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。图片赖加载其实在各大论坛、电商网站、图片网站被使用,具体表现为,当页面被请求时,只加载可视区域的图片,其它部分的图片则不加载,只有这些图片出现在可视区域时才会原创 2017-04-17 21:31:56 · 924 阅读 · 0 评论 -
使用window.open()打开新的窗口
本实例要在窗口每次被加载的时候弹出一个话框。本实例主要应用 JavaScript 的 window 对象。window 对象的常用方法:alert() 弹出一个警告对话框confirm() 在确认对话框中显示指定的字符串prompt() 弹出一个提示对话框close() 关闭被引用的窗口focus() 将被引用的窗口放在所有打开窗口的前面open() 打开新浏览器窗口并且显示由URL或名原创 2017-04-20 20:19:08 · 4384 阅读 · 1 评论 -
Web API接口 FileReader学习笔记
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。一、介绍FileReader接口的方法FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。FileReader接口事件FileReade原创 2017-05-29 22:53:40 · 1709 阅读 · 0 评论 -
ES6之——变量的解构赋值
一、数组的结构赋值1>、什么是解构?ES6允许我们队数组和对象中提取值,对变量进行赋值,这被叫做“解构”。 通常我们像下面这样为变量赋值:var a = 1; b = 2; c = 3;但是,ES6允许我们像下面这样做:var [a, b, c] = [1, 2, 3];即从数组中提取值,按照位置的对应关系,对变量赋值。2>、嵌套数组解构再来看看嵌套数组解构的例子:var [foo,原创 2016-07-03 14:01:45 · 5063 阅读 · 0 评论 -
ES6入门——Iterator和for...of循环
Iterator(遍历器)遍历器(Iterator)是一种协议,任何对象只要部署了这个协议,就可以完成遍历操作。在ES6中遍历操作特质for….of循环。它的作用主要有两个:为遍历对象的属性提供统一的接口。使对象的属性能够按次序排列。ES6的遍历器协议规定,部署了next方法的对象,就具备了遍历器功能。next方法必须返回一个包含value和done两个属性的对象。value属性是当前遍历的位原创 2016-07-03 13:58:53 · 6029 阅读 · 1 评论 -
ES6入门——let和const命令
let命令ES6新增了let命令用于声明变量。它的用处和var很相似,只不过let所声明的变量只在let命令所在的代码块内有效。看下下面代码: { let a = 10; var b = 9; } alert( a ); // ReferenceError: a is not defined alert( b ); //9再看看下面代码:原创 2016-07-03 13:54:48 · 3844 阅读 · 0 评论 -
JavaScript 严格模式 - "strict mode"
一、概述除了正常运行模式,ECMAscript 5添加了第二种运行模式:“严格模式”(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。 设立”严格模式”的目的,主要有以下几个:消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;消除代码运行的一些不安全之处,保证代码运行的安全;提高编译器效率,增加运行速度;为未来新版本的Java原创 2016-03-22 20:12:42 · 626 阅读 · 0 评论 -
使用Classie.js让添加、删除和检查类更容易
GitHub地址:classie.jsClassie.js是一个功能强大并且非常轻量级的脚本,它可以让你添加、删除、切换以及检查DOM中的类变的非常容易。很多JavaScript严重的核心是围绕着类的添加与删除,今天,CSS3 transitions, transforms, 以及animations开始流行,很多非常酷的特效可以通过简单的添加一个类到一个元素上创立。比如通过触摸如何将图片过渡到视图原创 2016-04-05 20:51:57 · 7933 阅读 · 1 评论 -
Javascript面向对象之:原型(prototype)和基于原型的对象系统
我们都知道,Javascript是一种动态脚本语言,它天生就没有类的概念(Brendan Eich最初在为JavaScript设计面向对象系统时就没有打算加入类的概念)。它是基于原型的面向对象语言,函数才是Js的一等公民。而在JS编程中函数、对象、原型的概念无疑是重中之重。下面就简单总结下这段时间对Js基于原型的对象系统的学习。1、原型模式 通过克隆现有的对象来创建新的对象下面看一段代码:原创 2016-03-25 14:15:00 · 537 阅读 · 0 评论 -
JavaScript笔记整理——驯服线程和定时器
定时器提供了一种让一段代码在一定毫秒之后,再异步执行的能力。由于Js是单线程的(同一时间只能执行一处Js代码)。定时器提供了一种跳出这种限制的方法,以一种不太直观的方式来执行代码。需要注意的是,定时器并不是Js自身的一个功能。定时器作为对象和方法一部分才能够使用。这也就提醒我们,在非浏览器的环境中使用JS,很可能定时器就不存在了。1、创建和清除定时器JavaScript提供了两种方法创建和清除定时器原创 2016-06-24 16:23:52 · 1195 阅读 · 0 评论 -
JavaScript笔记整理 —— 作用域
1、什么是作用域?先想两个问题,变量存储在哪里?当程序需要的时候是如何找到它们的?这些问题说明需要一套设计良好的规则来存储变量,并且之后可以方便地找到这些变量。而这套设计良好的规则就是作用域。继续深入理解:这些作用域规则是在哪里?怎样设置的? 请继续阅读2、编译原理尽管通常将js归类为“动态”或者“解释执行”语言,但事实上它是一门编译语言。 但是与传统的而编译语言不同的是,它不是提前执行的,编译原创 2016-06-08 22:10:19 · 413 阅读 · 0 评论 -
Javascript笔记整理 —— 提升
在JavaScript中提升包括函数提升和变量提升。 函数提升: 是指在代码编译时函数的声明会被提升到代码的顶部; 变量提升: 在js里,不仅函数可以提升,变量也会被提升,但函数的提升优先于变量的提升;1、是先有的鸡 还是先有的蛋示例-1:a = 666;var a;console.log(a); // 666对, 结果是“666”。可能有人会错以为是undefined, 因为var a;原创 2016-06-08 22:14:25 · 353 阅读 · 0 评论 -
JavaScript笔记整理——原型和原型链
JavaScript 是唯一一个被广泛使用的基于原型继承的语言。js原型和js原型链总会给人产生一些困惑,特别是函数(function)的原型(prototype)属性(property)。事实上,原型是一种非常简单的概念。JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型。虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继原创 2016-06-09 14:57:50 · 315 阅读 · 0 评论 -
JavaScript笔记整理——for in循环
和 in 操作符一样,for in 循环同样在查找对象属性时遍历原型链上的所有属性。// 修改 Object.prototypeObject.prototype.bar = 1;var foo = {moo: 2};for(var i in foo) { console.log(i); // 输出两个属性:bar 和 moo} 注意: for in 循环不会遍历那些 enumera原创 2016-06-09 15:02:38 · 245 阅读 · 0 评论 -
JavaScript笔记整理 —— 函数声明与表达式
函数是JavaScript中的一等对象(一等公民),这意味着可以把函数像其它值一样传递。 一个常见的用法是把匿名函数作为回调函数传递到异步函数中。函数声明function foo() { }上面的方法会在执行前被 解析(hoisted),因此它存在于当前上下文的任意一个地方, 即使在函数定义体的上面被调用也是对的。foo(); // 正常运行,因为foo在代码运行前已经被创建function fo原创 2016-06-09 16:06:55 · 292 阅读 · 0 评论 -
JavaScript笔记整理——this 的工作原理
JavaScript 有一套完全不同于其它语言的对 this 的处理机制。 在五种不同的情况下 ,this 指向的各不相同。1、五种情况1>、全局范围内this;当在全部范围内使用 this,它将会指向全局对象。 浏览器中运行的 JavaScript 脚本,这个全局对象是 window。2>、函数调用foo();这里 this 也会指向全局对象。 ES5 注意: 在严格模式下(strict原创 2016-06-10 11:54:53 · 260 阅读 · 0 评论 -
Sea.js是如何工作的?
【Sea.js是如何工作的?】CMD规范要想了解Sea.js的运作机制,就不得不先了解其CMD规范。Sea.js采用了和Node相似的CMD规范,我觉得它们应该是一样的。使用require、exports和module来组织模块。但Sea.js比起Node的不同点在于,前者的运行环境是在浏览器中,这就导致A依赖的B模块不能同步地读取过来,所以Sea.js比起Node,除了运行之外,还提供了两个额外的东西原创 2016-03-22 16:59:35 · 515 阅读 · 0 评论 -
JavaScript笔记整理——递归
递归本词条由“科普中国”百科科学词条编写与应用工作项目 审核 。 程序调用自身的编程技巧称为递归( recursion)。递归做为一种算法在程序设计语言中广泛应用。 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算,大大地减少了程序的代码量。递归的能原创 2016-06-14 17:28:14 · 334 阅读 · 0 评论 -
ES6入门—— ECMAScript简介
ECMAScript 6 (简称ES 6)是JS语言的下一代标准。Mizilla将在这个标准的基础上,退出JavaScript 2.0版。ECMAScript和JavaScript的关系ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现。(前者是后者的规格,后者是前者的实现。但通常两者是可互换的。)ESMAScript历史1996年11月,N原创 2016-07-03 13:50:37 · 1046 阅读 · 0 评论 -
UML之类图
在UML类图中,常见的有以下几种关系: 泛化(Generalization) 实现(Realization) 关联(Association) 聚合(Aggregation) 组合(Composition) 依赖(Dependency)1. 泛化(Generalization)【泛化关系】:是一种继承关系,表示一般与特殊的关系,它指定了子类如何特化父类的原创 2017-06-03 19:33:12 · 496 阅读 · 0 评论