Javascript
刘元涛
活着只为改变世界
展开
-
JavaScript创建对象4种方法详解
1、工厂模式弊端:没有解决对象的识别问题,即怎么知道一个对象的类型。2、构造函数模式与工厂模式相比:1、没有显式的创建对象2、直接将属性和方法赋给了this对象3、没有return语句要创建person的实例,必须使用new操作符,以这种方式调用构造函数实际上会经历4个步骤:1、创建一个新对象2、将构造函数的作用域赋给新对原创 2016-07-15 20:34:51 · 1314 阅读 · 0 评论 -
一个简单的JavaScript函数式编程教程
前言基于事件(Event-Based)的Node.js的正是并发中很典型的一个模型函数式编程使其天然支持回调,从而非常适合异步/事件机制函数式编程特性使其非常适合DSL的编写会后的第二天,我在项目代码里忽然想要将一个聚合模型用函数式编程的方式重写一下,结果发现思路竟然与NoSQL依稀有些联系,进一步发现自己很多不足。下面这个例子来自于实际项目中的场景,不过Domain做了切原创 2016-07-16 13:19:13 · 721 阅读 · 0 评论 -
最详细的JavaScript事件使用指南
事件流事件流描述的是从页面中接收事件的顺序,IE和Netscape提出来差不多完全相反的事件流的概念,IE事件流是事件冒泡流,Netscape事件流是事件捕获流。事件冒泡IE的事件流叫做事件冒泡,即事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收,然后逐级向上(一直到文档);如下代码: 事件测试 JS如下:原创 2016-07-16 13:19:54 · 1081 阅读 · 0 评论 -
浅谈 JavaScript DDoS 攻击原理与防御
分布式拒绝服务攻击(DDoS)攻击是一种针对网站发起的最古老最普遍的攻击。Nick Sullivan是网站加速和安全服务提供商CloudFlare的一名系统工程师。近日,他撰文介绍了攻击者如何利用恶意网站、服务器劫持和中间人攻击发起DDoS攻击,并说明了如何使用HTTPS以及即将到来的名为“子资源一致性(Subresource Integrity,简称SRI)”的Web新技术保护网站免受攻击。原创 2016-07-16 13:20:23 · 303 阅读 · 0 评论 -
模块化JavaScript组件开发指南
现如今,虽然多数的web应用都使用了大量的JavaScript,但如何保持客户端功能的专注性、健壮性和可维护性依然是一个很大的挑战。尽管其它编程语言和系统都已经将关注分离和DRY这样的基本原则视为理所当然的宗旨,但往往在进行浏览器端应用开发的时候,这些原则就被忽视了。造成这一现象的部分原因是JavaScript语言本身就在不断挣扎的历史,在很长的一段时间内,它都难以获得开发者的认真原创 2016-07-16 13:20:53 · 1626 阅读 · 0 评论 -
前端JavaScript规范 非常详细
类型原始值: 相当于传值(JavaScript对象都提供了字面量),使用字面量创建对象。stringnumberbooleannullundefinedvar foo = 1, bar = foo;bar = 9;console.log(foo, bar); // => 1, 9复杂类型: 相当于传引用objectarrayfunction原创 2016-07-16 13:21:31 · 1208 阅读 · 0 评论 -
JavaScript 代码风格指南
一.基本格式缩进建议每级4个空格,可以给编辑器设置tab = 4个空格,自动转换分号不要省略分号,防止ASI(自动插入分号)错误行宽每行代码不超过80个字符,过长应该用操作符手动断行断行操作符在上一行末尾,且下一行缩进2级,如果是赋值语句,还应该和等号后面部分对齐空行函数声明与函数声明、变量声明与函数声明、函数内部的逻原创 2016-07-16 13:22:00 · 272 阅读 · 0 评论 -
JavaScript高级特性 — 作用域
作用域在javascript中分为全局作用域和局部作用域,而局部作用域其实指得就是函数作用域,javascript将函数作为作用域的最小范围。全局作用域 Global Scope在代码的任何地方都可以访问到的对象,比如window对象及window对象的属性,就拥有全局作用域。1、在最外层定义的变量,默认都是window对象的属性;2、未定义的变量默认都是全局的,默认也都是原创 2016-07-16 13:22:30 · 246 阅读 · 0 评论 -
JavaScript原型与原型链分析
JavaScript没有类的概念,但几乎所有的东西又是基于对象的,同时也能实现继承,这就是js跟其他OOP语言最大的不同之处,这也是js最难理解的一块。下面我来说说我个人的理解。首先从创建对象说起,一般会有下面几种方法:1.创建一个Object实例,然后给它添加属性和方法。var person() = new Object();person.name = 'mikej';p原创 2016-07-16 13:22:58 · 251 阅读 · 0 评论 -
JavaScript中getter/setter的实现
虽然ES5中为我们提供了Object.defineProperty方法来设置getter与setter,但此原生方法使用起来并不方便,我们何不自己来实现一个类,只要继承该类并遵循一定的规范就可以拥有媲美原生的getter与setter。现在我们定义以下规范:取值器跟设值器遵循格式:_xxxGetter/_xxxSetter,xxx代表需要被控制的属性。例如,如果要控制foo属性,则原创 2016-07-16 13:18:11 · 247 阅读 · 0 评论 -
JavaScript删除数组重复元素的5个高效算法
之前一段时间一直在准备面试, 因而博客太久没更新; 现在基本知识点都复习完毕, 接下来就分享下 面试的一些常见问题:去正规的互联网公司笔试、面试有很大的概率会碰到 使用javascript实现数组去重 的编码问题:如:魅族笔试题;本博文就 js 如何实现数组去重整理出5种方法,并附上演示Demo 以及 源码。1.遍历数组法最简单的去重方法, 实现思路:新建一原创 2016-07-16 13:17:33 · 486 阅读 · 0 评论 -
JavaScript 中 Property 和 Attribute 的区别详解
property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴。property是DOM中的属性,是JavaScript里的对象;attribute是HTML标签上的特性,它的值只能够是字符串;基于JavaScript分析property 和 attribute原创 2016-07-16 13:17:05 · 3943 阅读 · 0 评论 -
详解JavaScript中的Object对象
Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的。虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是Object对象其实包含了很多很有用的属性和方法,尤其是ES5增加的方法,因此,本文将从最基本的介绍开始,详细说明了Object的常用方法和应用。基础介绍创建对象首先我们都原创 2016-07-15 20:35:49 · 964 阅读 · 0 评论 -
JavaScript中this指针指向的彻底理解
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题。原创 2016-07-15 20:36:48 · 2247 阅读 · 2 评论 -
30行代码实现JavaScript中的MVC
从09年左右开始,MVC逐渐在前端领域大放异彩,并终于在刚刚过去的2015年随着React Native的推出而迎来大爆发:AngularJS、EmberJS、Backbone、ReactJS、RiotJS、VueJS…… 一连串的名字走马观花式的出现和更迭,它们中一些已经渐渐淡出了大家的视野,一些还在迅速茁壮成长,一些则已经在特定的生态环境中独当一面舍我其谁。但不论如何,MVC已经并将持续深刻地原创 2016-07-15 20:38:22 · 350 阅读 · 0 评论 -
JavaScript 提高性能的几个知识点总结
前段时间花时间看了大半的《High Performance JavaScript》这本书啊,然后就开始忙项目了,庆幸最忙的一周已经熬过去了。由于空不出时间,这个月写的学习笔记也不多,忙完最苦X的一周,这两天晚上也算是挑灯夜读了…终于是在残血之际将这本书shut down了…既然读完了,总归是要学到些什么的。说说对这本书的看法先吧,整体的来说,内容还是不错的,就是感觉有点老了(作为前端小白,原创 2016-07-15 20:40:46 · 244 阅读 · 0 评论 -
JavaScript 原型概念深入理解
原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”[[prototype]]”属性,函数对象有”prototype”属性,原型对象有”constructor”属性。为了弄清原型,以及原型相关的这些属性关系,就有了这篇文章。相信通过这篇文章一定能够清楚的认识到原型,现在就开始原型之旅吧。认识原型开始原型的介绍之前,首先来认识一下什么是原原创 2016-07-16 13:14:49 · 845 阅读 · 0 评论 -
图文解说 JavaScript this 到底指向什么?
JavaScript 是一种脚本语言,支持函数式编程、闭包、基于原型的继承等高级功能。JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发现JavaScript其实很难掌握,有些基本概念让人匪夷所思。其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的对象。有一种观点认为,只有正确掌握了 JavaScript原创 2016-07-16 13:15:22 · 263 阅读 · 0 评论 -
JavaScript 对象深入学习总结
JavaScript中,除了五种原始类型(即数字,字符串,布尔值,null,undefined)之外的都是对象了,所以,不把对象学明白怎么继续往下学习呢?一.概述对象是一种复合值,它将很多值(原始值或其他对象)聚合在一起,可通过属性名访问这些值。而属性名可以是包含空字符串在内的任意字符串。JavaScript对象也可以称作一种数据结构,正如我们经常听说的“散列(hash)”原创 2016-07-16 13:15:59 · 816 阅读 · 0 评论 -
JavaScript异步编程的Promise模式
异步模式在web编程中变得越来越重要,对于web主流语言Javascript来说,这种模式实现起来不是很利索,为此,许多Javascript库(比如 jQuery和Dojo)添加了一种称为promise的抽象(有时也称之为deferred)。通过这些库,开发人员能够在实际编程中使用 promise模式。IE官方博客最近发表了一篇文章,详细讲述了如何使用XMLHttpRequest2来实践promi原创 2016-07-16 13:16:31 · 1101 阅读 · 0 评论 -
最详细的JavaScript和事件解读
与浏览器进行交互的时候浏览器就会触发各种事件。比如当我们打开某一个网页的时候,浏览器加载完成了这个网页,就会触发一个 load 事件;当我们点击页面中的某一个“地方”,浏览器就会在那个“地方”触发一个 click 事件。这样,我们就可以编写 JavaScript,通过监听某一个事件,来实现某些功能扩展。例如监听 load 事件,显示欢迎信息,那么当浏览器加载完一个网页之后,就会显示欢迎信息原创 2016-07-16 13:23:32 · 3043 阅读 · 0 评论 -
JavaScript 开发的45个经典技巧
JavaScript是一个绝冠全球的编程语言,可用于Web开发、移动应用开发(PhoneGap、Appcelerator)、服务器端开发(Node.js和Wakanda)等等。JavaScript还是很多新手踏入编程世界的第一个语言。既可以用来显示浏览器中的简单提示框,也可以通过nodebot或nodruino来控制机器人。能够编写结构清晰、性能高效的JavaScript代码的开发人员,现如今已成原创 2016-07-16 13:26:25 · 1048 阅读 · 0 评论 -
JavaScript数组操作函数方法详解
1、concat() 连接两个或更多的数组该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。例如:1 2 var arr = [1, 2, 3];3 var arr1 = [11, 22, 33];4 document.write(arr.concat(4, 5, arr1));5 输出结果:1,2原创 2016-07-17 08:43:05 · 350 阅读 · 0 评论 -
编写高性能的JavaScript事件
如何能做出高效的web前端程序是我每次做前端开发都会不自觉去考虑的问题。几年前雅虎里牛逼的前端工程师们出了一本关于提升web前端性能的书籍,轰动了整个web开发技术界,让神秘的web前端优化问题成为了大街的白菜,web前端优化变成了菜鸟和大牛都能回答的简单问题,当整个业界都知道了惊天秘密的答案,那么现有的优化技术已经不能对你开发的网站产生的质的飞越,为了让我们开发的网站性能比别人的网站更加优秀,我原创 2016-07-17 08:43:45 · 1213 阅读 · 0 评论 -
JavaScript模板引擎的应用场景及实现原理
一、应用场景以下应用场景可以使用模板引擎:1、如果你有动态ajax请求数据并需要封装成视图展现给用户,想要提高自己的工作效率。2、如果你是拼串族或者数组push族,迫切的希望改变现有的书写方式。3、如果你在页面布局中,存在共性模块和布局,你可以提取出公共模板,减少维护的数量。二、实现原理不同模板间实现原理大同小异,各有优缺,请按需选择,以下示例以artTempl原创 2016-07-17 08:44:12 · 2259 阅读 · 0 评论 -
Javascript闭包深入解析及实现方法
一、什么是闭包和闭包的几种写法和用法 1、什么是闭包闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。闭包的特点:1. 作为一个函数变量的一个引用,当函数返回时,其处于激活状态。2. 一个闭包就原创 2016-07-17 08:44:45 · 417 阅读 · 0 评论 -
JavaScript实现异步的4种方法
你可能知道,Javascript语言的执行环境是”单线程“(single thread)。所谓”单线程”,就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。常见的浏览器无响应(假死),往往就是原创 2016-07-17 08:45:22 · 697 阅读 · 0 评论 -
学习Javascript的8张思维导图
学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将po出8张javascript相关的思维导图。思维导图小tips:思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又极其有效,是一种革命性的思维工具。思维导图运用图文并重的技巧,把各级主题的关系用相互隶属与相关的层级图表现出来,把主题关键词与图像、颜色等建立记忆链接,思维导图充分运用左右脑的机能,利用记忆原创 2016-07-17 08:45:55 · 689 阅读 · 0 评论 -
用Javascript获取页面元素的位置
原文地址:http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html一、网页的大小和浏览器窗口的大小首先,要明确两个基本概念。一张网页的全部面积,就是它的大小。通常情况下,网页的大小由内容和CSS样式表决定。浏览器窗口的大小,则是指在浏览器窗口中看到的那转载 2016-07-07 16:57:15 · 282 阅读 · 0 评论 -
JavaScript 节流函数 Throttle 详解
在浏览器 DOM 事件里面,有一些事件会随着用户的操作不间断触发。比如:重新调整浏览器窗口大小(resize),浏览器页面滚动(scroll),鼠标移动(mousemove)。也就是说用户在触发这些浏览器操作的时候,如果脚本里面绑定了对应的事件处理方法,这个方法就不停的触发。这并不是我们想要的,因为有的时候如果事件处理方法比较庞大,DOM 操作比如复杂,还不断的触发此类事件就会造成性能上的转载 2016-07-15 20:23:00 · 14311 阅读 · 2 评论 -
JavaScript事件冒泡、事件捕获和阻止默认事件
谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。冒泡篇先来看一段实例:js:var $input = document.getElementsByTagName("input")[0]; var $div = document.getElementsByTagName("div")[原创 2016-07-17 08:42:27 · 409 阅读 · 0 评论 -
Android中Java和JavaScript交互
Android提供了一个很强大的WebView控件用来处理Web网页,而在网页中,JavaScript又是一个很举足轻重的脚本。本文将介绍如何实现Java代码和Javascript代码的相互调用。如何实现实现Java和js交互十分便捷。通常只需要以下几步。WebView开启JavaScript脚本执行WebView设置供JavaScript调用的交互接口。客户端和网页端编写原创 2016-07-17 08:42:01 · 380 阅读 · 0 评论 -
强类型 JavaScript 的解决方案
JavaScript 是一种弱类型(或称动态类型)语言,即变量的类型是不确定的。x = 5; // 5x = x + 'A'; // '5A'上面代码中,变量x起先是一个数值,后来是一个字符串,类型完全由当前的值决定,这就叫弱类型。弱类型的好处是十分灵活,可以写出非常简洁的代码。但是,对于大型项目来说,强类型更有利,可以降低系统的复杂度,在编译时就发现类型错误,减轻程序员的负原创 2016-07-17 08:40:31 · 1996 阅读 · 0 评论 -
JavaScript中依赖注入详细解析
计算机编程的世界其实就是一个将简单的部分不断抽象,并将这些抽象组织起来的过程。JavaScript也不例外,在我们使用JavaScript编写应用时,我们是不是都会使用到别人编写的代码,例如一些著名的开源库或者框架。随着我们项目的增长,我们需要依赖的模块变得越来越多,这个时候,如何有效的组织这些模块就成了一个非常重要的问题。依赖注入解决的正是如何有效组织代码依赖模块的问题。你可能在一些框架或者库种原创 2016-07-16 13:26:49 · 1407 阅读 · 0 评论 -
JavaScript中bind、call、apply函数用法详解
在给我们项目组的其他程序介绍 js 的时候,我准备了很多的内容,但看起来效果不大,果然光讲还是不行的,必须动手。前几天有人问我关于代码里 call() 函数的用法,我让他去看书,这里推荐用js 写服务器的程序猿看《javascript编程精粹》 这本书,crockford大神果然不是盖的。之后我在segmentfault上又看到了类似的问题,那边解答之后干脆这里记一笔。首先,关于 js 定原创 2016-07-16 13:27:18 · 355 阅读 · 0 评论 -
JavaScript的事件监听与捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听。这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作。而js中事件监听方法总共有三种,分别如下所示:element.addEventListener(type, listener[, useCapture]); // IE6~8不支持element.attachEvent(’on’ + type, listener);原创 2016-07-16 13:27:55 · 302 阅读 · 0 评论 -
ES6箭头函数和它的作用域
在ES6很多很棒的新特性中, 箭头函数 (或者大箭头函数)就是其中值得关注的一个! 它不仅仅是很棒很酷, 它很好的利用了作用域, 快捷方便的在现在使用以前我们用的技术, 减少了很多代码……但是如果你不了解箭头函数原理的话可能就有点难以理解. 所以,让我们来看下箭头函数, 就是现在!执行环境你可以自己去学习和尝试下, 你可以简单的把示例程序代码复制到你的浏览器控制台下. 现在, 推荐原创 2016-07-17 08:33:40 · 5850 阅读 · 2 评论 -
细说JavaScript单线程的一些事
首先,说下为什么 JavaScript 是单线程?总所周知,JavaScript是以单线程的方式运行的。说到线程就自然联想到进程。那它们有什么联系呢?进程和线程都是操作系统的概念。进程是应用程序的执行实例,每一个进程都是由私有的虚拟地址空间、代码、数据和其它系统资源所组成;进程在运行过程中能够申请创建和使用系统资源(如独立的内存区域等),这些资源也会随着进程的终止而被销毁。而线原创 2016-07-17 08:33:55 · 1658 阅读 · 0 评论 -
JavaScript高级特性 — 作用域
作用域在javascript中分为全局作用域和局部作用域,而局部作用域其实指得就是函数作用域,javascript将函数作为作用域的最小范围。全局作用域 Global Scope在代码的任何地方都可以访问到的对象,比如window对象及window对象的属性,就拥有全局作用域。1、在最外层定义的变量,默认都是window对象的属性;2、未定义的变量默认都是全局的,默认也都是原创 2016-07-17 08:34:27 · 326 阅读 · 0 评论 -
JavaScript String 对象实例深入研究
本文主要介绍并分析JavaScript中String对象的具体用法,以及和String对象相关的方法,方便开发者在JavaScript开发中更好地处理字符串。1. 介绍String 对象,对字符串进行操作,如:截取一段子串、查找字符串/字符、转换大小写等等。2. 定义方式2.1 new String(Value) 构造函数:返回一个内容为Value的String对象原创 2016-07-17 08:35:55 · 1162 阅读 · 0 评论