JavaScript
文章平均质量分 74
wenmin1987
这个作者很懒,什么都没留下…
展开
-
排序和搜索-基础
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>排序</title> </head> <body> <script type="text/javascript"> //reverse()逆序、 sort()默认升序: 返回的是...原创 2020-12-13 22:30:37 · 162 阅读 · 0 评论 -
函数表达式总结
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>函数表达式的应用</title> </head> <body> <script type="text/javascript"> // 一、声明式(变量会提升,可以先使用再赋值) ...原创 2020-12-13 11:40:53 · 589 阅读 · 0 评论 -
localStorage设置过期时间
众所周知,前端三大缓存,cookie,sessionStorage,localStorage,cookie空间太小,一旦大了,会消耗流量,只适合存一些登录会话信息,而sessionStorage的过期时间就是关闭浏览器,是个临时会话窗口,但是,最近这个差点把我坑了,就是sessionStorage只能在同一标签下共享,加入你把网址复制粘贴到新打开的标签页里面,你会惊喜的发现,what?居然不共享,这不坑爹呢吗?咳咳。。还有就是localStorage了,这个好处就是存储空间大,长时间保存,同一浏览器,标签页原创 2020-10-09 23:57:24 · 998 阅读 · 1 评论 -
登录过期--localStorage加sessionStorage实现7天登录过期
localStorage实现7天登录过期实现原理:存localStorage比较初始登录时存在缓存的时间戳和现在进入页面的时间戳,然后用sessionStorage去判断不勾选但是登录了的状态精简版function isPastDue() { // 过期时间7天 var time = 604800000; //1000*60*60*24*7; var storage = window.localStorage; var oldTimestamp = storage.g...原创 2020-10-09 23:49:41 · 1720 阅读 · 1 评论 -
原型链----看懂_proto_和prototype
文章目录1. 前言 2. _ _ proto _ _ 属性 3. prototype属性 4. constructor属性 5. 总结提示:不要排斥,静下心来,认真读完,你就搞懂了!(可以先看一下最后的总结部分再回过头来完整看完)1. 前言 作为一名前端工程师,必须搞懂JS中的prototype、__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点,__prot..原创 2020-09-15 16:18:39 · 504 阅读 · 0 评论 -
typeScript基础1
布尔类型 booleanletisDone:boolean=false;isDone=true;任意类型 anyletanyVualue:any=7;anyVualue="stringhahah";//隐式定义类型(变量的类型会是初始化 赋值 那个值的 类型)letaa="seven"; // 这个aa的类型 被隐式 为 字符串类型//可选类型 |letmyFavoriteNumber:string|number="nihao";my...原创 2020-06-09 15:34:50 · 235 阅读 · 0 评论 -
javasript基础----关于克隆clone
----完整版的function deepClone(obj) { var _toString = Object.prototype.toString; // null, undefined, non-object, function if (!obj || typeof obj !== 'object') { return obj; }...原创 2020-01-12 22:36:55 · 148 阅读 · 0 评论 -
javasript基础-----运算符与表达式(优先级,剔除非数字,处理浮点溢出)、数据/类型/变量(检测类型)
运算符的优先级:优先级 运算类型 关联性 运算符 20 圆括号() n/a(不相关) ( … ) 19 成员访问 . 从左到右 … . … 需计算的成员访问[] 从左到右 … [ … ] new(带参数列表) n/a new … ( … ) 函数调用 () 从左到右 …...原创 2020-01-12 12:49:40 · 231 阅读 · 0 评论 -
javascript数组,字符串,math常用方法汇总
一.数组是js里面非常重要的数据结构,日常工作中避免不了对数组进行各种操作。一下便针对数组做一个整理array.filter()过滤函数,返回符合条件的item 不会改变原数组var arr = [1, 2, 3, 3, 2];var r = arr.filter(function (item, index, self) { console.log(item); // 依...原创 2019-02-19 18:04:30 · 371 阅读 · 0 评论 -
javaScript数据类型检测(typeof /constructor)
1.typeof主要用于检测值的类型,对于原始 值类型的数据比较有效,但对于对象或者数组 null返回都是objectfunction type(o){ return (o===null)?"null":(typeof o);}2.对于对象、数组等复杂类型可以使用Object对象的constructor属性进行检测,但undefined和null特殊值不能够使用constr...原创 2019-02-23 18:45:49 · 648 阅读 · 0 评论 -
多种方法实现Tab切换—原生javaScript & JQuery方法
原生基础demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tab效果</title><style type="text/css"&原创 2019-02-22 16:15:46 · 370 阅读 · 0 评论 -
有关echarts
<!doctype html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=devic原创 2019-01-15 07:53:35 · 137 阅读 · 0 评论 -
javascript对象基础(使用对象)---4对象、属性、方法的高级操作-Fucntion和String
ECMAScript5为Function增加了一个原型方法bind(Function.prototype.bind), 用来把函数绑定到指定对象上function.bind(thisArg[,arg1[,arg2[,arg3]]]);其中thisArg,this关键字可在新函数中引用的对象例: var checkNumericRange=function(value){ ...原创 2019-01-02 22:34:13 · 102 阅读 · 0 评论 -
javascripts使用正则表达式--2字符匹配
参考:https://blog.csdn.net/xuemoyao/article/details/8033138正则表达式简介正则表达式是由一些具有特殊含义的字符组成的字符串,多用于查找、替换符合规则的字符串。在表单验证、Url映射等处都会经常用到。一、元字符元字符:即为有特定含义的字符,常见的元字符如下常用的元字符代码 说明. 匹配除换行符以外的任意字符...原创 2019-01-06 17:19:16 · 307 阅读 · 0 评论 -
javascripts使用正则表达式--1概念与定义
正则表达式(regular Expression)是一个描述字符模式的对象,其中字符模式由普通字符(如A~Z 、a~z、0~9)和特殊字符(元字符)组成一、 正则表达式的运用范围: 1、验证字符串:验证给定的字符串或子字符串是否符合指定特征,例如,验证邮件地址、电话号码、手机号码等用户提交的数据是否合法2、查找字符串:从指定的文本中查找符合特征的字符串3、替换字符串:把给定的符合...原创 2019-01-06 16:53:21 · 209 阅读 · 0 评论 -
javascript对象基础(使用对象)---3对象、属性、方法的高级操作-Arrary
Array---ECMAScropt5新增了9个方法 定位:2个--array.indexOf() 、 array.lastIndexOf() array.indexOf(searchElement[,fromIndex]);//数组中第一个匹配项的索引,没找到指定值,返回-1 array.lastIndexOf(searchElement[,fromIndex]);//数...原创 2019-01-01 17:05:07 · 204 阅读 · 0 评论 -
javascript事件基础--键盘事件
键盘事件包括三个类型: keydown:在按下某键时触发 keypress:按下某键并释放时触发 keyup:释放某键时触发键盘事件的属性: keyCode(常用):键位对应的键值 charCode(常用):键位对应的Unicode,仅DOM支持 target:事件的节点,仅DOM支持 srcElem...原创 2019-03-24 23:32:14 · 362 阅读 · 0 评论 -
javascript对象基础(使用对象)---2对象、属性、方法的高级操作-Object
三、对象的高级用法(ECMScript5):Object Array Function String Object ------ 1. 创建对象(前面使用的是1.使用对象直接量2.通过new创建对象) Object.create(prototype,descriptors) //prototype为必需参数,要用作原型的对象,可以为null;第二个...原创 2019-01-01 16:10:47 · 218 阅读 · 0 评论 -
javaScript遍历对象、数组、类数组总结
一、对象直接量的遍历var o={a:1,b:2,c:3,d:5}Object.keys(o) :遍历自己的属性,原型上的和继承过来的都不遍历Object.keys(o) // ["a", "b", "c", "d"]---输出的是数组key值delete o.a;//trueObject.keys(o) // ["b", "c", "d"原创 2019-03-03 11:52:43 · 982 阅读 · 0 评论 -
javascript函数基础--this基础
this是函数体内自带的一个对象指针,它能够始终 指向 调用对象: 这个this代表的对象由this所在的执行作用域决定的,而不是根据this所在的定义作用域决定。 this[.属性],如果this未包含属性,则直接传递的是当前对象1.this代表当前操作对象<input type="button" value="你好" onclick="this.value=' 哈...原创 2019-03-09 12:46:43 · 88 阅读 · 0 评论 -
javascript函数基础--this安全策略
确保在同一域中操作包含this的方法和函数。应避免把包含有this的全局函数或者方法动态用在局部作用域的对象中,也避免在不同作用域的对象之间相互引用包含的this的方法或者属性1.把this作为参数值来调用函数,就可以避免this多变的问题<input type="button" value="按钮1" onclick="f()"><input type="but...原创 2019-03-09 17:54:00 · 171 阅读 · 0 评论 -
javascript函数式编程--闭包3 闭包存储器与事件中应用闭包(封装事件)
1.闭包的常见用法 就是 为执行的函数提供参数,例如 为事件传递动作,为定时器传递行为,都是web非常常见的应用为定时器传递行为function f(a,b){ return function(){ a(b); }}var c=f(alert,"hello,World")var d=setTimeout(c,1000);//把闭包...原创 2018-09-08 17:57:39 · 200 阅读 · 0 评论 -
成功的JavaScript开发者的7个习惯
一、更多面向对象的JavaScript 1.1简单的对象创建 1.2 使用JSON创建对象 1.3类的定义 1.4 原型prototype二、柔性衰减和不唐突的JavaScript 2.1让JavaScript保持独立 2.2允许柔性衰减 2.3不要使用浏览器嗅探例程 2.4不要写浏览器相关或者语言相关的JavaSc...原创 2019-05-07 22:40:46 · 105 阅读 · 0 评论 -
javas事件基础--UI事件和表单事件
一、UI事件UI是User Interface缩写,表示用户界面,UI事件负责响应用户和浏览器或者页面元素的交互,UI事件:包括 focus (获取焦点) blur(失去焦点)focus、blur:单击或使用tab切换到某个表单元素或超链接对象时,触发UI事件<body> <input type="text"/> <i...原创 2019-03-27 23:10:40 · 423 阅读 · 0 评论 -
javascript事件基础--窗口重置(resize事件)和页面滚动(scroll事件)
浏览器窗口重置时触发(调整窗口大小,最大化,最小化):resize<body> <div id="box"></div> <script type="text/javascript"> var box=document.getElementById("box"); ...原创 2019-03-26 23:37:06 · 1298 阅读 · 0 评论 -
javascript事件基础--自定义事件(封装)
设计弹框和遮罩层<title>设计弹出对话框</title> <style> body{margin:0;padding: 0;} .dialog{ width: 300px;height: 200px; /*margin: 0 ...原创 2019-03-30 19:03:35 · 772 阅读 · 0 评论 -
javascript事件基础--鼠标事件
鼠标事件类型包括:click dblclick mousedown mouseout mouseover mouseup mousemove其中鼠标点击包括:click(单击)、dblclick(双击)、mousedown(按下)、mouseup(松开)鼠标点击:每次点击输出不同的值,并且限制每次点击时间间隔为3s var ...原创 2019-03-23 19:22:39 · 801 阅读 · 0 评论 -
javascript事件基础--页面事件(loade、DOMContentLoaded 、unload)
页面事件包括加载和卸载,即用户访问页面和离开关闭页面load事件 在页面完全加载完毕触发,该事件包含所有的图形图像、外部文件(css javascript文件等),在这些之前任何DOM不会操作DOMContentLoaded事件,作为DOM标准事件,不需要图像等全部加载,只需要DOM加载完毕即执行,比load先触发,目前Mozilla和Opera支持,IE和Safari浏览器不支持...原创 2019-03-25 23:14:53 · 969 阅读 · 0 评论 -
javascript事件基础----事件模型比较
一、基本事件模型:通过事件属性来设计的 绑定事件: 1、静态绑定:把javascript脚本作为属性直接赋予给事件属性 <button onclick="this.style.background='red' ">按钮(this表示获取当前对象)</button> <button onc...原创 2019-03-17 23:12:28 · 125 阅读 · 0 评论 -
javascript事件基础---事件流与事件类型
javascript是基于事件处理的程序事件模型分类:基本事件模型 标准事件模型 IE事件模型 Netscape事件模型(Netscape4浏览器使用,在Netscape6停止支持)基本事件模型:通过简单的事件属性,为指定的标签绑定事件处理函数,获得所有浏览器支持,但对标签依赖太重,不利于独立开发,面对复杂的Web应用会束手无策,因此不建议使用标准事件模型:由W3C指定,包含...原创 2019-03-16 19:40:52 · 989 阅读 · 0 评论 -
javascript改进textarea文本域自适应内容高度
场景需求:根据输入内容自适应高度,textarea不能满足需求,需要该进autoTextarea.js:define('autoTextarea',[],function(){ return{ /* * 文本框根据输入内容自适应高度 *cfg{ //配置参数 ...原创 2018-12-28 11:00:25 · 577 阅读 · 0 评论 -
javascript时间日期处理--new Date(),format()
创建时间对象: var objDate=new Date([arguments list]); 参数有5种形式: 1)new Date("month dd,yyyy hh:mm:ss"); 2)new Date("month dd,yyyy"); 3)new Date(yyyy,mth,dd,hh,mm,ss); 4)new ...原创 2018-12-10 18:36:33 · 14532 阅读 · 0 评论 -
javascript对象基础(使用对象)---1对象、属性、方法的基本操作
除字符串、数字、true、false、null和undefined之外,javascript的值都是对象一、对象的分类: 1. 原生对象: Object、Function、Array、String、Boolean、Number、Date、RegExp、 ...原创 2018-12-15 23:26:31 · 392 阅读 · 0 评论 -
javascript面向对象编程--继承--复制继承+克隆继承 混合继承(常用)
复制继承:利用for/in语句遍历对象成员,逐一复制给另一个对象funciton F(x,y){ this.x=x; this.y=y;this.add=function(){ return this.x+this.y; }}F.prototype.mul=function(){ return this.x*this.y;}var f...原创 2018-09-23 22:24:31 · 593 阅读 · 0 评论 -
javascript面向对象编程--继承--实例继承
类继承和原型继承的弊端: 它们在客户端是无法继承DOM对象的,同时他们也不支持继承系统对象和方法类继承:function D(){ Date.apply(this.arguments);}var d=new D();alert(d.toLocaleString());//返回[object object]说明类继承是无法是想对静态对象的继承,这是因为系统对象...原创 2018-09-23 18:07:23 · 201 阅读 · 0 评论 -
javascript面向对象编程--继承--类继承2(封装类继承模式)
function extend(Sub,Sup){ var F=function(){}; F.prototype=Sup.prototype; Sub.prototype=new F(); Sub.prototype.constructor=Sub;Sub.sup=Sup.prototype;// 在子类中定义一个本地属性存储超类原型,这样可以避免子类和超累耦合...原创 2018-09-23 17:24:25 · 278 阅读 · 0 评论 -
javascript面向对象编程--继承--类继承1(构造函数继承)
例1:函数之间的引用和传递是类继承的基础function() A(x){this.x=x;this.say=function(){alert(this.x)}} function B(x,y){ this.m=A; //把A当作一个普通函数引用给临时方法m()this.m(x); //delete this.m; //清除临时方法,单继承this...原创 2018-09-23 15:04:15 · 134 阅读 · 0 评论 -
javascript面向对象编程--继承(类继承、原型继承、实例继承、复制继承、混合继承)---原型继承
面向对象编程语言中,对象系统的继承机制有3种:基于类、基于原型、基于元类javascript使用原型继承机制设计对象系统,使得该语言有丰富、多变且适用于动态编程的对象系统让类继承另一个类可能会导致他们之间产生耦合性,也将就是说,一个类依赖另一个类的内部实现,但javascript提供了多种技术途径来避免这种问题的发生,如掺元类等javascript的继承包括:类继承、原型继承、实例继承...原创 2018-09-10 07:42:04 · 488 阅读 · 0 评论 -
javascript面向对象编程--定义类(推荐使用构造函数原型模式定义类,次之动态原型模式)
javascript是基于原型继承的机制来实现面向对象编程的。例如,对象直接量继承于Object.prototype,函数对象继承于Function.prototype,而prototype对象本身也继承于Object.prototype在javascript中, 如果类型相同或相近,则可以使用继承来抽象; 如果类型不同,而功能相似则可以...原创 2018-09-09 22:42:59 · 146 阅读 · 0 评论 -
javascript函数式编程-4函数灵活应用( 惰性求值 记忆 套用 模块化 柯里化 高阶函数)
1.惰性求值惰性函数模式是一种将对函数或请求的处理延时到真正需要结果时进行的通用概念函数作为运算符参与运算,具有非惰性求值的特性,会对整个程序造成负面影响(javascript也支持非惰性求值)var a=2; function f(x){ return x;}alert(f(a,a=a*a))//2,第二个参数虽然不用,但也被会计算了alert(f(a))/...原创 2018-09-08 23:18:17 · 502 阅读 · 0 评论