
JavaScript学习笔记
文章平均质量分 69
南太平洋_99
这个作者很懒,什么都没留下…
展开
-
深入理解javascript原型和闭包笔记
读完 深入理解javascript原型和闭包 的一些摘录。javascript原型和闭包一切都是对象四种(undefined, number, string, boolean)属于简单的值类型,不是对象。剩下的几种情况——函数、数组、对象、null、new Number(10)都是对象。他们都是引用类型。值类型的类型判断用typeof,引用类型的类型判断用instanceof。一切(引用...转载 2020-01-09 17:52:12 · 318 阅读 · 0 评论 -
通用方法记录
判断数据类型可判断类型:undefined、null、string、number、boolean、array、object、symbol、date、regexp、function、asyncfunction、arguments、set、map、weakset、weakmapfunction DataType(tgt, type) { const dataType = Object.pr...原创 2019-10-31 11:25:58 · 205 阅读 · 0 评论 -
JavaScript实现继承的方式优化
组合继承将原型链和借用构造函数的技术组合在一块,从而发挥两者之长的一种继承模式。var Parent = function(name){ this.name = name || 'parent';};Parent.prototype.getName = function(){ return this.name;}Parent.prototype.obj = {a:1};转载 2017-06-30 19:21:11 · 326 阅读 · 0 评论 -
前后端路由
路由路由是根据不同的 url 地址展示不同的内容或页面。在过去,服务器端处理来自浏览器的请求时,要根据不同的Url路由,拼接出对应的视图页面,通过Http返回给浏览器进行解析渲染。后端路由每次访问一个新页面的时候都要向服务器发送请求,然后服务器再响应请求,这个过程肯定会有延迟。前端路由前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做。前端路由在访转载 2017-07-10 16:24:52 · 1070 阅读 · 0 评论 -
JavaScript 函数参数传递到底是值传递还是引用传递
保存对象的变量,它里面装的值是这个对象在堆内存中的地址。以下是详细分解:数据类型在 JavaScript 中数据类型可以分为两类:原始数据类型值 primitive type,比如Undefined,Null,Boolean,Number,String。引用类型值,也就是对象类型 Object type,比如Object,Array,Function,Date等。转载 2017-06-20 11:10:31 · 674 阅读 · 0 评论 -
原生JS写Ajax的请求函数
JS原生ajaxajax:一种请求数据的方式,不需要刷新整个页面;ajax的技术核心是 XMLHttpRequest 对象;ajax 请求过程:创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据;·下面简单封装一个函数,之后稍作解释 ajax({ url: "./TestXHR.aspx", //请求地转载 2017-04-24 16:33:46 · 661 阅读 · 0 评论 -
【小作品】名侦探柯南剧场版介绍网页(原生javascript html5 css)
通过原生js自己设计实现了名侦探柯南的介绍网页(从上至下构成一页)第一幅图是模仿了Lyn老师的散列画廊教程 http://www.imooc.com/learn/366花了很长一段时间完成,虽然看起来简陋了点,对整体样式还是满意的原创 2016-11-30 19:46:47 · 2345 阅读 · 4 评论 -
JavaScript实现类的private、public
定义Js中的类,实际上用的是function,这个语法其实是用来定义函数的。不同于定义函数的是,我们可以在function中通过this.xxx的方式来定义属性和方法。this.xxx只能定义公有属性和方法,那私有属性和方法怎么办呢?这个可以用到js闭包的知识来解决对象可以由初始化对象的方法 -- 构造函数产生。构造函数提供在其他编程语言中类提供的特性,包括静态变量和方法。转载 2017-04-01 16:39:06 · 6375 阅读 · 0 评论 -
javascript正则检测连续重复字符串
元字符 \1~\9 作用:用来表示前面以匹配的字符或分组的一个引用//一般情况,当我们想匹配任意两个相同的字符(复杂一点就是两个相同的分组)时,往往可以借助下面的写法//说明://(\w)用来匹配任何除了换行和制表符的字符, 而\1是对(\w)的一个引用, 所以你可以理解成: (\w)\1 就是(\w)(\w)//但是,//(\w)\1 和 (\w)(\w)的不同之处在于, (\原创 2017-03-31 18:32:40 · 12829 阅读 · 3 评论 -
JavaScript的柯里化函数
什么是柯里化简单来说,柯里化是一种允许使用部分函数参数构造函数的方式。也就是意味着,你在调用一个函数时,可以传入需要的全部参数并获得返回结果,也可以传入部分参数并的得到一个返回的函数,它需要传入的就是其余的参数。这增加了函数的适用性,但同时也降低了函数的适用范围。为了让你理解柯里化的原理,我们开始来写第一个柯里化的 JavaScript 函数,使用熟悉的语法去新建一个我们想要的柯里化函数。转载 2017-03-31 11:08:14 · 362 阅读 · 0 评论 -
Array.prototype.slice.call(arguments,0)
为什么要这么调用 arguments 的slice 方法呢?就是因为 arguments 不是真的数组,typeof arguments==="Object" 而不是 "Array"它没有slice这个方法,通过这么Array.prototype.slice.call调用,JS的内部机制应该是把arguments对象转化为ArrayArray.prototype.slice.call调转载 2017-03-30 20:02:28 · 439 阅读 · 0 评论 -
setInterval和setTImeout中的this指向问题
setInterval和setTimeout中传入函数时,函数中的this会指向window对象var num = 0;function Obj (){ this.num = 1, this.getNum = function(){ console.log(this.num); }, this.getNumLater = function(){原创 2017-03-13 19:11:52 · 809 阅读 · 0 评论 -
js深拷贝和浅拷贝
在 JS 中有一些基本类型像是Number、String、Boolean,而对象就是像这样的东西{ name: 'Larry', skill: 'Node.js' },对象跟基本类型最大的不同就在于他们的传值方式。基本类型是按值传递,像是这样:在修改a时并不会改到bvar a = 25;var b = a;b = 18;console.log(a);//25console.lo转载 2017-06-30 20:29:54 · 750 阅读 · 0 评论 -
JavaScript 中的 this 用法以及 call(apply) 的理解
this是什么this是 JavaScript 中的一个关键字。它用在对象的方法中。this总是指向调用该方法的对象this在对象的方法中var obj = { name : 'object', sayName : function () { alert(this.name); }};obj.sayName(); // objec转载 2017-04-24 18:58:22 · 432 阅读 · 1 评论 -
js中setTimeout
什么是阻塞机制 Js阻塞机制,跟Js引擎的单线程处理方式有关,每个window一个JS线程。所谓单线程,在某个特定的时刻只有特定的代码能够被执行,并阻塞其它的代码。 由于浏览器是事件驱动的(Event driven),因此浏览器中很多行为是异步(Asynchronized)的,很容易有事件被同时或者连续触发。当异步事件发生时,会创建事件并放入执行队列中,等待当前代码执行完成之后再执行这转载 2017-07-01 20:31:09 · 284 阅读 · 0 评论 -
table九宫格hover实现
Month Savings January $100 cellpadding 规定单元边沿与其内容之间的空白。cellspacing 规定单元格之间的空白。九宫格 1 2 3 4 5 6 7 8 9 CSS t原创 2017-07-31 12:59:54 · 1411 阅读 · 0 评论 -
jQuery.fn.extend() 和 jQuery.extend()
jQuery为开发插件提拱了两个方法,分别是:jQuery.fn.extend(); jQuery.extend();jQuery.fn:jQuery.fn = jQuery.prototypejQuery便像一个封装得非常好的类,比如语句$(“#btn1″) 会生成一个 jQuery类的实例jQuery.extend(object):原创 2017-07-09 14:43:05 · 371 阅读 · 0 评论 -
jQuery公告栏文字滚动插件
jQuery插件关于jQuery插件,http://www.cnblogs.com/ajianbeyourself/p/5815689.html 这篇文章写得真心不错(1)通过$.extend()来扩展jQuery (2)通过$.fn 向jQuery添加新的方法方法一仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。所以我们调用通过$.extend()添加的原创 2017-07-09 20:48:41 · 3867 阅读 · 1 评论 -
ES6/ES2015核心内容理解
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。也就是说,ES6就是ES2015。最常用的ES6特性let, const, class, extends, super, arrow functions, template string, destructuring, de转载 2017-02-08 17:13:58 · 368 阅读 · 0 评论 -
javascript中Get/Set访问器
Get/Set访问器可以限制一个变量是否可以被访问或是否可以被重写。另外还有一个功能是,我们在访问或重写时可以执行其他语句进行处理get是得到 一般是要返回的, set是设置不用返回如果调用对象内部的属性约定的命名方式是_age ==================未完原创 2017-07-07 21:00:51 · 631 阅读 · 0 评论 -
JSONP跨域请求原理及实现
什么是JSONP? 先说说JSONP是怎么产生的: 其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,着用自己的方式来阐释一下这个问题,看看是否有帮助。 1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准。 2、不过我转载 2017-07-06 20:19:25 · 2545 阅读 · 0 评论 -
理解双飞翼布局
双飞翼布局主要解决俩问题:1、三列布局,中间宽度自适应,两边定宽; 2、中间栏要在浏览器中优先展示渲染。在css布局中,有三种技术是经常被使用的:(1)浮动 (float)(2)负边距 (negative margin)(3)定位 (position)这是实现布局的三个最基本的原子技术。只要巧妙组合,并加以灵活运用,就能“拼”出各种布局的实现方案。如果三列布局不原创 2017-07-05 12:49:48 · 786 阅读 · 0 评论 -
echarts基本使用
项目中要做图形报表,要求使用echarts实现,以前有用过,不过忘得差不多了,现在重新学学。echarts官网提供了源码和说明文档,使用echarts需要先到官网下载需要的js源文件,如果用到主题和地图,也需要到官网进行下载。可以在使用 webpack 的项目中引入和打包 ECharts1.npm 安装 EChartsnpm install echarts --save原创 2017-06-03 21:03:36 · 1665 阅读 · 3 评论 -
原生js瀑布流布局+图片懒加载
瀑布流布局function waterfall(ele,col,eleWidth){ var hArr = []; for(var i = 0;i < ele.length;i++){ if(i < col){ hArr.push(ele[i].offsetHeight); }else{ //min原创 2017-07-01 20:58:44 · 6001 阅读 · 2 评论 -
ES5和ES6中对于继承的实现方法
在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方。原型链的特点和实现已经在之前的一篇整理说过了,就是通过将子类构造函数的原型作为父类构造函数的实例(sub.prototype=new super),这样就连通了子类-子类原型-父类,原型链的特点就是逐层查找,从子类开始一直往上直到所有对象的原型Ob转载 2017-02-08 23:08:09 · 6313 阅读 · 0 评论 -
[].forEach.call() 方法
初次看到[].forEach.call()这样的代码,我觉得这种写法很有趣,为什么要这样写?为什么要用空数值引申出的方法?于是研究了一下。[]就是个数组,而且是用不到的空数组。用来就是为了访问它的数组相关方法,比如.forEach。这是一种简写,完整的写法应该是这样:Array.prototype.forEach.call(...);很显然,简写更方便。至于forEach 方法原创 2017-01-11 15:04:46 · 3180 阅读 · 0 评论 -
前端模块化理解
转至http://www.cnblogs.com/lvdabao/p/js-modules-develop.html在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等),随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀,这时候JavaScr转载 2017-02-06 17:03:15 · 15753 阅读 · 0 评论 -
JavaScript 变量的作用域
1. 全局作用域(Global Scope) 在代码中任何地方都能访问到的对象拥有全局作用域,一般来说以下几种情形拥有全局作用域: (1)最外层函数和在最外层函数外面定义的变量拥有全局作用域,例如:123456789101112var转载 2016-08-01 15:54:42 · 227 阅读 · 0 评论 -
JavaScript split()方法和join()方法
JavaScript split() 方法split() 方法用于把一个字符串分割成字符串数组。"2:3:4:5".split(":") //将返回["2", "3", "4", "5"]"|a|b|c".split("|") //将返回["", "a", "b", "c"]var str="How are you doing today?"docu原创 2016-07-31 09:14:08 · 461 阅读 · 0 评论 -
offsetLeft与style.left的区别 event.altKey、event.ctrlKey、event.shiftKey 属性 clientWidth和offsetWidth
offsetLeft与style.left的区别offsetLeft 获取的是相对于父对象的左边距left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offse原创 2016-07-30 22:02:28 · 524 阅读 · 0 评论 -
JavaScript return false
window.onload=function(){ document.oncontextmenu=function(){ return false }}在js中return false的作用一般是用来取消默认动作的。用oncontextmenu事件单禁用右键菜单onconTextmenu=window.event.returnValue=false;右键菜单禁用,用这原创 2016-07-28 20:07:23 · 664 阅读 · 0 评论 -
简易时钟 Date对象 for...in...语句 replace方法
window.onload = function (){ var oPan = document.getElementsByTagName("span"); setInterval(getTimes,1000); getTimes(); function getTimes(){ var oDate=new Date(); var oDat=[oDate.getHours(),oD原创 2016-07-27 21:49:58 · 514 阅读 · 0 评论 -
JavaScript中Math对象和test()方法
window.onload = function (){ var oIput=document.getElementsByTagName("input"); var oPan=document.getElementsByTagName("span"); for(var i=0;i<oIput.length;i++){ oIput[i].onkeyup=function(){ this原创 2016-07-27 20:26:04 · 537 阅读 · 0 评论 -
parseInt()和replace()方法
window.onload = function (){ var oIput=document.getElementsByTagName("input"); var oPan=document.getElementsByTagName("span")[0]; for(var i=0;i<oIput.length;i++){ oIput[i].onkeyup=function(){ t原创 2016-07-27 17:06:24 · 641 阅读 · 0 评论 -
JavaScript replace()方法
window.onload=function(){ var oImg=document.getElementsByTagName("img"); for(var i=1; i<oImg.length;i++){ oImg[i].onmouseover=function(){ oImg[0].src=this.src.replace(/small/,"big"); } }原创 2016-07-26 22:06:29 · 424 阅读 · 0 评论 -
写模态对话框的问题:运用this.index 为元素添加事件
简单选项卡:window.onload=function(){ var oTab=document.getElementById("tab").getElementsByTagName("li");//tab最好是li的直接父级元素 不然会有奇怪的情况发生 var oCtn=document.getElementById("content").getElementsByTagName("u原创 2016-07-26 19:57:33 · 246 阅读 · 0 评论 -
elem.style[attr]=value 点操作符和中括号操作符
var changeStyle=function(elem,attr,value){ elem.style[attr]=value};window.onload=function(){ var oPut=document.getElementsByTagName("input"); var oBtn=document.getElementsByTagName("button"); va原创 2016-07-26 16:50:06 · 1224 阅读 · 0 评论 -
使用匿名函数为setInterval传递参数
在使用JScript的时候,我们有时需要间隔的执行一个方法,比如用来产生网页UI动画特效啥的。这是我们常常会使用方法setInterval或setTimeout,但是由于这两个方法是由脚本宿主模拟出来的Timer线程,在通过其调用我们的方法是不能为其传递参数。 我们常用的使用场景是:window.setTimeout("delayRun()", n);window.set转载 2016-08-02 17:30:31 · 1861 阅读 · 0 评论 -
js的Prototype属性 解释及常用方法
函数:原型每一个构造函数都有一个属性叫做原型(prototype,下面都不再翻译,使用其原文)。这个属性非常有用:为一个特定类声明通用的变量或者函数。prototype的定义你不需要显式地声明一个prototype属性,因为在每一个构造函数中都有它的存在。你可以看看下面的例子:Example PT1CODE:function Test(){}转载 2016-08-10 20:50:47 · 201 阅读 · 0 评论 -
Underscore模版引擎的使用-template方法
之前写小网页里有遇到在DOM中增加大量的html结构的时候,傻乎乎的在js中写一堆模版,然后用replace一个一个做替换。当时就是难看了点,不觉得啥,现在了解了模版引擎之后回头来看真的比较捉急了,以后是不会那么傻了看了《javascript编程实战》这本书后,个人认为比较好用的一个模版引擎,Underscore中的template方法。_.template(templateString,原创 2016-11-09 20:49:32 · 4337 阅读 · 0 评论