JavaScript
ywltoread
喂喂喂
展开
-
利用正则截取匹配的字符串前后内容同
js截取两个字符串之间的内容: var str = "aaabbbcccdddeeefff"; str = str.match(/aaa(\S*)fff/)[1]; alert(str);//结果bbbcccdddeee js截取某个字符串前面的内容: var str = "aaabbbcccdddeeefff"; tr = str...转载 2019-07-23 14:16:44 · 4525 阅读 · 2 评论 -
jQuery中$.fn的用法示例介绍,理解$.extend()、$.fn和$.fn.extend()
jQuery中$.fn的用法示例介绍,理解$.extend()、$.fn和$.fn.extend()转载 2017-06-08 17:29:30 · 1322 阅读 · 0 评论 -
jquery根据name属性的高级选择
$("div[id]") 选择所有含有id属性的div元素 $("input[name='keleyicom']") 选择所有的name属性等于'keleyicom'的input元素 $("input[name!='keleyicom']") 选择所有的name属性不等于'keleyicom'的input元素 $("input[name^='keleyi']") 选择所有的na转载 2017-05-31 18:39:04 · 87104 阅读 · 1 评论 -
js中const,var,let区别
今天第一次遇到const定义的变量,查阅了相关资料整理了这篇文章。主要内容是:js中三种定义变量的方式const, var, let的区别。1.const定义的变量不可以修改,而且必须初始化。1 const b = 2;//正确2 // const b;//错误,必须初始化 3 console.log('函数外const定义b:' + b);//有输出值4 // b = 5;转载 2017-05-26 10:01:22 · 459 阅读 · 0 评论 -
js中Array数组中的常用方法汇总
Array的push与unshift方法性能比较分析从原理就可以知道,unshift的效率是较低的。原因是,它每添加一个元素,都要把现有元素往下移一个位置。unshift比push要慢差不多100倍!Array有一个叫做reverse的方法,能够把一个数组反转。先把要放进数组的元素用push添加,再执行一次reverse,就达到了unshift的效果。reverse性能极高,甚至于没有原创 2017-04-06 10:04:11 · 6501 阅读 · 0 评论 -
document load 与document ready的区别
页面加载完成有两种事件1.load是当页面所有资源全部加载完成后(包括DOM文档树,css文件,js文件,图片资源等),执行一个函数问题:如果图片资源较多,加载时间较长,onload后等待执行的函数需要等待较长时间,所以一些效果可能受到影响2.$(document).ready()是当DOM文档树加载完成后执行一个函数 (不包含图片,css等)所以会比load较快执行转载 2017-04-06 09:48:17 · 6586 阅读 · 0 评论 -
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
DOM事件三个阶段当一个DOM事件被触发时,它不仅仅只是单纯地在本身对象上触发一次,而是会经历三个不同的阶段:捕获阶段:先由文档的根节点document往事件触发对象,从外向内捕获事件对象;目标阶段:到达目标事件位置(事发地),触发事件;冒泡阶段:再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象。引用来源:http://www.w3.org/转载 2017-04-28 10:23:06 · 4361 阅读 · 1 评论 -
JS原生方法实现jQuery的ready()
浏览器加载页面的顺序:1、 解析HTML结构2、 加载外部脚本和样式表文件3、 解析并执行脚本代码4、 构造HTML DOM模型==ready()5、 加载图片等组件6、 页面加载完毕==onload()ready事件是在DOM模型构造完毕时触发load事件是在页面加载完毕后触发function ready(fn){转载 2017-04-28 10:17:31 · 2310 阅读 · 0 评论 -
深入解读JavaScript中BOM和DOM
BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口,提供访问文档各个功能部件(如窗口本身、屏幕功能部件、浏览历史记录等)的途径以及操作方法。遗憾的是,BOM只是JavaScript脚本实现的一部分,没有任何相关的标准,每种浏览器都有自己的BOM实现,这可以说是BOM的软肋所在通常情况下浏览器特定的JavaScript扩展都被看作BOM的一部分,主要包括:◆关闭转载 2017-02-22 16:22:24 · 442 阅读 · 0 评论 -
[译] 为什么原型继承很重要
Javascript是一个多样化的编程语言。它拥有面向对象和函数式的编程特点,你可以使用任何一种风格来编写代码。然而这两个编程风格并不能很好的融合。例如,你不无法同时使用new(典型的面向对象的特点)和apply(函数式编程的特点).原型继承一直都作为连接这两种风格的桥梁。基于类继承的问题大部分Javascript程序员会告诉你基于类的继承不好。然而它们中只有很少一部分知道其中的原转载 2017-02-08 17:58:04 · 621 阅读 · 0 评论 -
Javascript 面向对象编程(一):封装
Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢?一、 生成实例对象的原始模式假定我们把猫看成一转载 2017-02-08 17:37:35 · 211 阅读 · 0 评论 -
Javascript面向对象编程(二):构造函数的继承
今天要介绍的是,对象之间的"继承"的五种方法。比如,现在有一个"动物"对象的构造函数。 function Animal(){ this.species = "动物"; }还有一个"猫"对象的构造函数。 function Cat(name,color){ this.name = name; t转载 2017-02-08 17:36:43 · 295 阅读 · 0 评论 -
JavaScript模块化编程 - CommonJS, AMD 和 RequireJS之间的关系
先说说CommonJS CommonJS - 大家是不是觉得JavaScript仅仅是一个客户端的编译语言,其实JavaScript设计之初不仅仅是针对客户端设计的语言。后来只是由于Web的迅速流行,加之Netscape和微软之间之争过早的将JavaScipt标准化。要了解详细的JS历史请查看:http://zh.wikipedia.org/zh-cn/JavaScript。过早的标准转载 2016-12-20 21:13:12 · 395 阅读 · 0 评论 -
js 定时监听setInterval方法、延迟执行setTimeout方法
定时监听程序:function show1(){ console.log("dys",$scope.dys);}setInterval(show1,1000);原创 2015-09-16 14:37:45 · 2606 阅读 · 0 评论 -
前端性能优化补充
前言看了一下之前发布的文章,关于前端性能优化的,有网站前端性能优化之javascript和css及jquery的 jquery编程的标准写法和最佳实践 。前端性能优化是一个不断追求的过程,前面的文章虽然讲解了一些性能优化,但是关于性能优化的路还有很长,很多东西都没有提及。今天,我在前面的基础之上,再来简单总结一些常用的性能优化方式。运算符1、使用运算符时,尽量使用+=,-=转载 2017-07-03 17:30:43 · 266 阅读 · 0 评论 -
函数防抖和函数节流
1,函数防抖例如:输入验证,在用户输入完成后再进行格式校验,节省CPU开销。使用setTimeout来实现。2,函数节流例如:下拉滚动条,用户下拉滚动条时,由于人眼睛是有延迟的,所以不用全速CPU去计算变化,一般300ms更新一次页面就可以。也是使用setTimeout来实现。...原创 2019-03-06 17:41:47 · 229 阅读 · 0 评论 -
js中神奇的Object.defineProperty方法
这个方法可牛比了。这么说吧,vue.js是通过它实现双向绑定的。俗称属性拦截器。而且专门用来监控对象属性变化的Object.observe方法也被草案发起人撤回了(此方法在node环境中仍能使用)。可见defineProperty的威力之大。干货在后面,绝对惊喜。首先看一下官方的定义:Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个已...转载 2018-08-28 20:34:16 · 2331 阅读 · 0 评论 -
ES6的Promise讲解,通俗易懂
作为ES6中最重要的特性之一,我们有必要掌握并理解透彻。本文将由浅到深,讲解Promise的基本概念与使用方法。 ES6 Promise 先拉出来遛遛复杂的概念先不讲,我们先简单粗暴地把Promise用一下,有个直观感受。那么第一个问题来了,Promise是什么玩意呢?是一个类?对象?数组?函数? 别猜了,直接打印出来看看吧,console.dir(Promise),就这么简单...转载 2018-07-19 15:22:05 · 1235 阅读 · 1 评论 -
ES5中新加入的getter/setter方法的初步理解
简单一句话说:ES5以前读、写对象的属性时,只改变其值;ES5以后,可以通过getter和setter方法,在读写对象的属性时,进行开发者自定义操作。今天学习vue的深入响应式原理,需要了解getter和setter,经过一番研究后,写一下自己的理解。举个例子:在使用set时,不仅实现了赋值,还可以顺带打印出赋的值。set setparam(param) { this.param = param...原创 2018-04-24 16:40:51 · 1564 阅读 · 0 评论 -
JavaScript高级程序设计--阅读笔记
1.严格模式下,不规范的写法会报错。2.with语句用于延长作用域链,把其他地方定义的对象直接用到当前作用于来。3.JavaScript定义函数可以没有入参,调用函数时加上自己的入参,函数中可以用arguments[n]按入参顺序调用,因为是数组形式。4.由于函数可以没有入参,所以JS的函数无法重载(重载:根据函数入参数量的不同,执行不同的同名函数)。5.复制的对象类型被函数修改后原创 2018-01-04 16:14:22 · 236 阅读 · 0 评论 -
React/React Native 的ES5 ES6写法对照表
转自:http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends Rea转载 2018-01-11 09:47:47 · 257 阅读 · 0 评论 -
this的异步绑定.bind(this)
当遇到异步ajax请求时,想把请求返回的result结果赋值给ajax外定义的this对象时,直接写this.a = result;是不能成功的。例如:this.a = {};ajaxService.AjaxPost( {},"getTimeAccount.do").then( function (result) { if(result.status){ console.log(原创 2017-10-24 14:25:27 · 8381 阅读 · 0 评论 -
Javascript中bind()方法的使用与实现
在讨论bind()方法之前我们先来看一道题目:var altwrite = document.write;altwrite("hello");//1.以上代码有什么问题//2.正确操作是怎样的//3.bind()方法怎么实现对于上面这道题目,答案并不是太难,主要考点就是this指向的问题,altwrite()函数改变this的指向global或window对象,导致执行时提示转载 2017-10-24 13:51:00 · 2484 阅读 · 0 评论 -
jQuery:多个AJAX/JSON并行请求对应一个回调函数处理方法$.when
我知道这些函数都是异步执行并且会延迟一段时间返回,所以我想知道是否有一种方法,可有使多个AJAX/JSON并行请求,再由单个回调处理,就像JS加载器 curljs 所做的那样。 很幸运! 通过jQuery.when, 我可以并发地加载多个异步请求,只执行一次回调!$.when( $.getScript('/media/js/wiki-min.js?build=21eb633'),转载 2017-09-01 11:53:18 · 3442 阅读 · 0 评论 -
JS对象浅拷贝与深拷贝问题实践
今天写代码发现想把一个对象赋给自己新建的对象,给新对象再添加一个属性时,旧的对象也具有了这个属性,我意识到这是浅拷贝与深拷贝的问题了,只不过之前一直没实际遇到过这个问题。现在把经验总结一下:旧对象A: pageCount:10pageNo:"1"sessionId:"C6B1F6B4E84192F17B0BAD6EF389C039"sourceType:2tradeTime:...原创 2017-08-25 09:21:07 · 244 阅读 · 0 评论 -
初识CSS动画与JS动画,强制同步布局
css动画主要用到三个属性:transition、animation、transform,通过这三个属性可以实现transition过渡:初始状态到终止状态的平滑过渡,animation动画:当前样式逐渐改为新样式,transform变换:改变某个元素形状、大小、位置。js动画要稍微灵活一些,使用setInterval() 方法定时循环改变元素原创 2017-07-19 17:41:42 · 1253 阅读 · 0 评论 -
JS内存泄漏排查方法(Chrome Profiles)
一、概述 Google Chrome浏览器提供了非常强大的JS调试工具,Heap Profiling便是其中一个。Heap Profiling可以记录当前的堆内存(heap)快照,并生成对象的描述文件,该描述文件给出了当时JS运行所用到的所有对象,以及这些对象所占用的内存大小、引用的层级关系等等。这些描述文件为内存泄漏的排查提供了非常有用的信息。 注意:本文里的所有例子均基于Google转载 2017-07-03 17:39:42 · 4114 阅读 · 0 评论 -
用原生js写出类似于ajax请求程序
myajax是一个用js编写的一个跨浏览器的ajax库,支持get, post, jsonp请求,精巧,简单。源码:var myajax = { post: function(params){ var xmlhttp = this.createXMLHttpRequest(); if (xmlhttp != null) {转载 2016-10-27 18:54:32 · 1134 阅读 · 0 评论 -
使用Angularjs、jQuery在手机上实现滑动条到底自动加载更多功能
关键词:directive infiniteScroll infiniteScrollDistance infiniteScrollDisabled $window.on $window.off在网上查了很多相关技术,在电脑浏览器上能正常的实现自动加载更多功能,但是放到手机APP壳子上就不行了。下面把代码和自己的分析写下来,原创 2016-04-28 14:16:48 · 6887 阅读 · 2 评论 -
JS函数闭包与对象作用域
function setName(obj){ obj.name = "xiaobai"; obj = new Object(); obj.name = "xiaohei"; } var obj = new Object(); setName(obj); console.log("obj",obj.name); 输出xiaobai说明:在函数内原创 2016-09-26 17:45:32 · 394 阅读 · 0 评论 -
JS正则表达式
正则表达式可以: •测试字符串的某个模式。例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证 •替换文本。可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字 •根据模式匹配从字符串中提取一个子字符串。可以用来在文本或输入字段中查找特定文字 正则表达式语法 一个正则表达式就是由转载 2016-08-10 16:18:26 · 259 阅读 · 0 评论 -
深入理解javascript中的立即执行函数(function(){…})()
javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到转载 2016-06-29 10:28:29 · 468 阅读 · 0 评论 -
require.js的用法
一、为什么要用require.js?最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页代码,相信很多人都见过。 这段代码依次加载多个js文件。这样的写法有很大的缺点。首先,加载的时候,浏览器会停止网页渲染,加转载 2016-06-24 14:47:59 · 2250 阅读 · 0 评论 -
js变量声明提升,变量作用域与函数作用域,作用域链
JavaScript引擎在执行时,会把所有变量的声明都提升到当前作用域的最前面。比如下边的代码: var v = "hello";(function(){ console.log(v); var v = "world";})();这段代码的执行结果为undefined 这说明两个问题:1.匿名function作用域中的v没有受到外部的影响,这说明javas...转载 2016-05-05 18:09:36 · 542 阅读 · 2 评论 -
Angularjs和bootstrap、jquery和easyUI的各自主要功能
开始做app项目以来,一直使用着angularjs和bootstrap这两个工具,但还真没仔细想过这两个工具与jQuery和easyui有什么区别,各自负责怎样的功能部分,今天有些时间,来总结一下这其间的区别和这些工具各自能实现的功能。1.angularjshtml和js之间的数据衔接层,可以操控html元素(数据绑定、重复、隐藏)等,上手很容易,但想要精通,了解内部运行机制不容易。2原创 2016-03-23 17:18:57 · 20485 阅读 · 0 评论 -
js中的for循环与异步回调函数执行顺序问题
上一篇博文“利用HTML5新特性localstorage把用户数据暂时存储在客户端,用于之后上传”里提到了用for循环,但是今天发现for循环不起作用。最终post请求只执行了一次,代码如下for(i=localStorage.length-1;i>=0;i--){//从后往前依次取每条localstorage local_key=localStorage.key(i); if(local原创 2016-03-07 17:54:01 · 15262 阅读 · 5 评论 -
利用HTML5新特性localstorage把用户数据暂时存储在客户端,用于之后上传
最新的JS的API中增加了localStorage对象,以便于用户存储永久存储的Web端的数据。而且数据不会随着Http请求发送到后台服务器,而且存储数据的大小机会不用考虑,因为在HTML5的标准中要求浏览器至少要支持到4MB.所以,这完全是颠覆了Cookie的限制,为Web应用在本地存储复杂的用户痕迹数据提供非常方便的技术支持。那接下里分别介绍一下localStorage的常用的方法。原创 2016-03-05 19:59:23 · 2662 阅读 · 0 评论 -
js去除字符串中重复的编号,并删除自己的编号
jsrArr="102158#103713#117082#117082#96486#96487#101267#101272#117087#120827#101264#101270#101280#117079";var str=jsrArr;//字符串去重复,删除自己var cjrbh=""+$scope.cjrbh;str=str.replace(new RegExp(cjrbh,"g"),"")原创 2015-10-19 17:38:27 · 643 阅读 · 0 评论 -
js获取当前日期时间,昨天、本月第一天和最后一天
js获取当前日期时间,格式为yymmddhhmiss function CurentTime() { var now = new Date(); var year = now.getFullYear(); //年 var month = now.getMonth() + 1; //月 var day = now.getDate();转载 2015-09-16 16:11:03 · 10776 阅读 · 0 评论 -
js 关键字 in 的使用方法
1.For...In 声明用于对数组或者对象的属性进行循环/迭代操作。 对于数组 ,迭代出来的是数组元 素,对于对象 ,迭代出来的是对象的属性;Js代码 var x var mycars = new Array() mycars[0] = "Saab" mycars[1] = "Volvo" mycars[2] = "BMW转载 2015-10-14 14:16:48 · 640 阅读 · 0 评论