javascript+TypeScript
文章平均质量分 80
TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,它由 Microsoft 开发。
面条请不要欺负汉堡
道理不是拿来懂的,而是拿来悟的
展开
-
干货 | RAF替代setTimeout_setInterval
为什么用 requestAnimationFrame代替 setInterval 和 setTimeout?那得先了解微任务、宏任务与Event-Loop, 还有 setInterval 存在的问题转载 2023-02-28 10:29:25 · 653 阅读 · 1 评论 -
iframe通信
iframe作为一个html标签,可以让嵌入任何的html网页。解决跨域问题的方法,通过postMessage发送消息,相应的页面进行消息监听,监听到正确消息后再执行操作转载 2022-08-02 14:23:01 · 421 阅读 · 0 评论 -
高性能JavaScript 简单学习
一.加载和运行(1)脚本的位置 以及注意点,减少性能损失HTML加载中,无法预知js是否给html标签添加内容,所以浏览器会停下来,运行加载js代码,然后解析js代码, 这个过程需要发时间,这时页面解析和用户交互是被完全阻塞,页面呈现是空白的所以建议是:1. 把script 放在</body>前,这个时候页面HTML 有解析,页面呈现不是空白在加:2. 多个js文件 压缩在同一个js,然后用一个script引用,减少性能损失3.如果是文件在服务器上是2个分离的文件,..原创 2020-12-02 15:30:27 · 269 阅读 · 0 评论 -
简单的了解TypeScript
TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,它由 Microsoft 开发。1.TypeScript 增加了代码的可读性和可维护性 A.类型系统实际上是最好的文档,大部分的函数看看类型的定义就可以知道如何使用了 B.可以在编译阶段就发现大部分错误,这总比在运行时候出错好 C.增强了编辑器和 I...原创 2019-10-31 14:22:39 · 240 阅读 · 0 评论 -
js数据结构和算法(一)数组和散列表
程序设计=数据结构+算法一.数据结构1.什么是数据结构数据结构就是关系,没错,就是数据元素相互之间存在的一种或多种特定关系的集合。传统上,我们把数据结构分为逻辑结构和物理结构。逻辑结构:是指数据对象中数据元素之间的相互关系,也是我们今后最需要关注和讨论的问题。物理结构:是指数据的逻辑结构在计算机中的存储形式。2.常用的数据结构有:数组,队列(queue),堆(heap),栈(stack),链表(l...原创 2018-03-16 15:49:56 · 1083 阅读 · 0 评论 -
js中三目运算符和&& || 符
一.三目运算表达式:conditions ? statementA : statementB ;首先判断条件condition,若结果为真则执行语句statementA,否则执行语句statementB。var age1=23;var age2=24;age1>age2?true:false;//false1.statementA 或 statementB 里面可以也可以放函数哦。va...原创 2018-03-16 10:50:25 · 4530 阅读 · 0 评论 -
JavaScript设计模式(一)工厂模式,原型模式,构造器模式
一.什么是模式1.模式是一种可复用的解决方案,而反模式呢就是针对某个问题的不良解决方案。2.js反模式常见例子①向setTimeout和setInterval传递字符串,而不是函数,这会触发eval()的内部使用。②在全局上下文中定义大量的变量污染全局命名空间③修改Object类的原型④以内联形式使用js,嵌入在HTML文件中的js代码是无法包含在外部单元测试工具中的。⑤滥用document.wr...原创 2018-03-15 16:38:23 · 406 阅读 · 0 评论 -
base64字符串与图片的相互转换
一.base64字符串转图片原理是当base64字符串作为img标签的src属性时,如果是有效的,则可以预览。而若要下载,则创建一个新的a标签将a标签的href属性设置为该base64字符串设置a标签的download属性为文件名再通过js手动触发该a标签的点击事件,则完成了下载行为(具体视浏览器可能需要选择下载目录或者使用默认目录)。二.图片转base64字符串分为两种,一种是提供图片的src标...转载 2018-02-27 14:14:18 · 7483 阅读 · 3 评论 -
常用的正则表达式
现在开发一般都是用框架,而框架都会自带表单验证。然而手机号码会随之而改变,所以啊,框架自带的验证是不正确的。下面我们来了解几个正则表达式,慢慢积累啊。首先推荐正则表达式编辑器(验证表达式是否正确)PyRegex:http://www.pyregex.com/一.常用的正则表达式1.手机号码(包含177开头)tip: /^[1][3,4,5,7,8][0-9]{9...原创 2017-05-10 10:51:58 · 843 阅读 · 0 评论 -
页面优化之高性能函数防抖与节流
一.函数节流(throttle)函数节流是指一定时间内js方法只跑一次。1.函数节流的目的例如,DOM 操作比起非DOM 交互需要更多的内存和CPU时间。连续尝试进行过多的DOM 相关操作可能会导致浏览器挂起,有时候甚至会崩溃。尤其在IE 中使用onresize 事件处理程序的时候容易发生,当调整浏览器大小的时候,该事件会连续触发。在onresize 事件处理程序内部如果尝试进行DOM 操作,其高...原创 2018-02-26 17:26:24 · 565 阅读 · 0 评论 -
javascript 总结(常用工具类的封装)
一.javaScript1. type 类型判断isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String'}isNumber (o) { //是否数字 return Object.prototype.toString.call(o).slice(8,转载 2018-01-30 14:50:52 · 1305 阅读 · 0 评论 -
JavaScript函数(二)
一.私有变量和函数在函数内部定义的变量和函数,如果不对外提供接口,外部是无法访问到的,也就是该函数的私有的变量和函数。function Box(){ var color = "blue";//私有变量 var fn = function(){ //私有函数 ,,, }}这样在函数对象Box外部无法访问变量color和原创 2018-01-30 14:40:10 · 210 阅读 · 0 评论 -
js数据结构和算法(二)栈和队列
一.栈1.定义栈是一种重要的线性结构。栈(Stack)是一个后进先出(Last in first out,LIFO)的线性表,它要求只在表尾进行删除和插入操作。对于栈来说,这个表尾称为栈的栈顶,相应的表头称为栈底。栈的操作只能在这个线性表的表尾进行: 栈的插入操作(Push),叫做进栈,也称为压栈,入栈。 栈的删除操作(Pop),叫做出栈,也称为弹栈。2.栈的顺序存储结构因为栈的本...原创 2018-03-16 17:27:21 · 347 阅读 · 1 评论 -
js数据结构和算法(三)链表(linked list)
链表是一种常见的数据结构,也属于线性表,但不会按线性的顺序来储存数据。而是在每一个节点中,储存了下一个节点的指针。可以看图理解。使用链表结构可以克服数组需要预先知道数据大小的缺点,链表结构可以充分利用计算机内存空间,实现灵活的内存动态管理。链表一般有,单链表、静态链表、循环链表、双向链表1.单链表:就是很单一的向下传递,每一个节点只记录下一个节点的信息,就跟无间道中的梁朝伟一样做卧底都是通过中间人...原创 2018-03-20 17:39:04 · 1379 阅读 · 0 评论 -
javaScript 的AMD及define模块定义
1. AMD的由来 前端技术虽然在不断发展之中,却一直没有质的飞跃。除了已有的各大著名框架,比如Dojo,JQuery,ExtJs等等,很多公司也都有着自己的前端开发框架。这些框架的使用效率以及开发质量在很大程度上都取决于开发者对其的熟悉程度,以及对JavaScript的熟悉程度,这也是为什么很多公司的技术带头人都喜欢开发一个自己的框架。开发一个自己会用的框架并不难,但开发一个大家都喜欢的...转载 2019-02-14 15:26:08 · 1855 阅读 · 0 评论 -
scrollIntoView()的用法
一.介绍Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。调用方法为 element.scrollIntoView() 参数默认为true。参数为true时调用该函数,页面(或容器)发生滚动,使element的顶部与视图(容器)顶部对齐;参数为false时,使element的底部与视图(容器)底部对齐。TIPS:页面(容器)可滚动时才...转载 2019-02-14 09:30:39 · 20370 阅读 · 7 评论 -
原生js兼容性问题
1. 获取标签样式的兼容性问题1. getComputedStyle(node,null).value 不支持IE8以及以下 第一个参数是节点对象,第二个参数是伪类,没有为null2.node.currentStyle.vale 是IE专有的function getStyleValue(node,propertyName){ if(node.currentStyle) ...转载 2019-01-14 09:48:06 · 584 阅读 · 0 评论 -
js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本
一.js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本 function myBrowser(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; i...转载 2018-07-09 16:45:42 · 1104 阅读 · 0 评论 -
JS中键盘事件及keyCode对照表
一.Keycode对照表二.键盘事件1.键盘事件:完整的 key press 过程分为两个部分:1. 按键被按下;2. 按键被松开。keydown:按键按下keyup:按键抬起keypress:按键按下抬起2.使用时//jq的方式$("input").keydown(function(){ $("input").css("background-color","#FFFFCC");});$(...原创 2018-06-01 15:38:02 · 25031 阅读 · 1 评论 -
jsonp原理及同源策略
一.jsonp原理及同源策略jsonp 是用来跨域读取数据的,为什么从不同的域访问数据要用jsop呢?这源于一个著名的安全策略--同源策略,即: 协议、端口号、域名相同 举例说明:http://www.myweb.com:8080/demo/index.html [协议:http:// 端口:8080 域名:www.myweb.com] http://www.myweb.com:8080...转载 2018-05-21 14:11:09 · 696 阅读 · 0 评论 -
js中getBoundingClientRect()方法详解
一.getBoundingClientRect()分析getBoundingClientRect()获取元素位置,这个方法没有参数getBoundingClientRect()用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。 getBoundingClientRect()是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。 该函数返回一个Object对象,该对象有6个属性:...转载 2018-05-18 16:16:50 · 133622 阅读 · 1 评论 -
JavaScript常见的操作
1.弹框之外的区域点击关闭弹框写到一个弹框 需要在页面之外点击时关闭弹框var container=$('#myModal');container就是弹框的最外层元素 $(document).bind('click',function(e){ if(!container.is(e.target)&&container.has(e.target).length==...原创 2018-05-03 13:52:26 · 225 阅读 · 0 评论 -
数组或是对象、日期的操作
一.数组1.俩个数组的整合 concatarrs1=["0002", "0003"];arrs2=["0004", "1000"];arrs1 = arrs1.concat(arrs2);console.log(arrs1);//输出 ["0002", "0003", "0004", "1000"]引申到一个数据的累加开始arr=[]; 点击获取后 arr=["1002"......原创 2018-04-18 17:11:21 · 548 阅读 · 1 评论 -
JavaScript中的函数
一.函数介绍(1).什么是函数?具有特定功能的n条语句的封装体。只有函数是可执行的,其他类型的数据是不可执行的。函数也是对象。(2).函数的作用→ 提高代码复用→ 便于阅读和交流(3).函数的定义方式一:函数声明(推荐使用) function 函数名(参数列表) { //执行代码 }方式二:函数表达式(推荐使用) var原创 2017-10-19 08:54:48 · 435 阅读 · 0 评论 -
JavaScript的json格式理解
一.什么是JSONJSON:JavaScript 对象表示法(JavaScript Object Notation)。JSON的形式是用大括号“{}”包围起来的项目列表,每一个项目间用逗号(,)分隔,而项目就是用冒号(:)分隔的属性名和属性值。这是典型的字典表示形式,也再次表明javascript里的对象就是字典结构。不管多么复杂的对象,都可以用一句JSON代码来创建并赋值。在JSON中,转载 2018-02-05 10:27:27 · 287 阅读 · 0 评论 -
JavaScript中的原型与原型链
说原型的时候,一般都是在说原型属性prototype。一.介绍1.函数的prototype属性*所有的函数都有一个prototype属性,它默认指向一个object空对象(即称为原型对象)*原型对象中有一个属性constructor,它指向函数对象2.原型对象有什么作用?----->给原型对象添加属性(一般都是添加方法)*作用:函数的所有实例对象自动拥有原型中的属性(方法)原创 2017-10-23 10:21:16 · 459 阅读 · 1 评论 -
JavaScript 中的数据&变量&内存
一.1.什么是数据?*数据是存储于内存中代表特定信息的‘东东’,本质就是0101二进制eg:18 //这个18可能只年龄 或是分数等等,,写程序中的数据都要有特殊的意义。*数据具有可读和可传递的基本特性(可传递很重要) var a=2; b=a;//这个是传递a变量的数据的变量 a={2,4,5} b原创 2017-10-19 15:52:30 · 478 阅读 · 0 评论 -
Ajax-Http请求
一.什么是HTTP?1.是计算机通过网络进行通信的规则;2.web浏览器向web服务器发送请求命令3.是一种无状态协议(不建立持久的链接)二.一个完成的http的请求过程,通常有以下7步骤:1. 建立TCP连接2.Web浏览器向Web服务器发送请求命令3.Web浏览器发送请求头信息4.Web服务器应答5.Web服务器发送应答头信息6.Web服务器原创 2017-10-16 11:02:13 · 300 阅读 · 0 评论 -
Ajax-JSON基本概念
一.JSON基本概念1、javaScript对象表示法(javaScript object notation)2、json是存储和交换文本信息的语法,类似xml。它使用键值对的方式来组织,易于人们阅读和编写,同时也易于机器解析和生成。3、json是独立于语言的,也就是说不管什么语言,都可以解析json,只需要按照json的规则来就行。二.json和xml比较xml也是一种传递信原创 2017-10-16 14:19:36 · 289 阅读 · 0 评论 -
AJAX 简介
一.AJAX 是什么?1.AJAX不是JavaScript的规范,它只是一个哥们“发明”的缩写:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求。2.AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更原创 2017-10-16 09:19:21 · 397 阅读 · 0 评论 -
JavaScript DOM
一.JavaScript DOM介绍1.DOM是?中文是文档对象模型DOM是html文档的一个抽象2.js语言,DOM,网页的关系js语言操作DOM(js不能直接操作网页,只能通过DOM),DOM的变化映射到HTML,进而显示出来。 js---》DOM--->页面--》用户视觉3.模型---DOM树js要操作网页,就必须通过DOM树原创 2017-10-26 14:58:08 · 426 阅读 · 0 评论 -
js注意的细节
一.注意点1.引入CSS在head中,JS建议在body的尾部引入;这样有利于加载速度2.this是什么?*一个关键字,一个内置的引用变量*在函数中都可以直接使用this*this代表当前函数的调用对象*在定义函数时,this还没有确定,只有在执行时才动态绑定的记住:跟函数定义没关系,跟函数的执行有大大的关系。总之就是:函数在哪里调用才决定了this到底引用的是啥3.JavaScript 对大小写...原创 2017-08-17 14:29:47 · 429 阅读 · 0 评论 -
JavaScript基础知识
一.小细节1.JavaScript 是一门解释型的、弱类型的、基于原型的编程语言。2.JavaScript 由ECMAScript+DOM+BOM组成ECMAScript,核心语法DOM (Document Object Model),文档对象模型。提供了操作网页内容的一系列工具(api)。BOM (Browser Object Model),浏览器对象模型。提供了操作浏览器的原创 2017-10-18 10:08:10 · 308 阅读 · 0 评论 -
获取百度地图
一.获取百度地图需要调用百度的js html,body,div,ul,li{ margin: 0; padding: 0;}a{text-decoration: none;} .maps_bg{ width: 600px; height: 289px;} var map = new BMap.Map("c原创 2017-07-13 15:24:08 · 361 阅读 · 0 评论 -
触摸与手势事件
iOS版Safari为了向开发人员传达一些特殊信息,新增了一些专有事件。因为iOS设备既没有鼠标也没有键盘,所以在为移动Safari开发交互网页时,常规的鼠标和键盘事件根本不够用。随着Android中的WebKit的加入,很多这样的专有事件变成了事实标准。1.触摸事件包含iOS2.0软件的iPhone 3G发布时,也包含了一个新版本的Safari浏览器。这款新的移动Safari提供了一些与转载 2017-05-11 11:28:16 · 497 阅读 · 0 评论 -
JavaScript 中的数据类型
JavaScript 中的数据类型(重要)(1).基本数据类型(又称值类型)a.String 字符串: 特点:用双引号或单引号多包裹的内容。如:”123”; “张三”; 注意:单双引号嵌套 双引号作为字符, ‘ ”” ’;单引号作为字符, “ ‘’ ”; b.Number 数字: 特点:直接的数字 如:1; 3.14; -1; 0; NaN;原创 2017-10-19 14:07:14 · 380 阅读 · 0 评论 -
JavaScript 对象
一.JavaScript 对象介绍1.对象是什么?对象是程序中的对象,程序是用来描述现实生活世界。 如现在要写一个程序来管理大家的信息,这边就有每个人的信息(身高,体重等),这些信息都是相互独立,如果要高效管理这些信息,就要放到一个容器(对象)中进行管理。总结:*代表现实中的某个事物,是该事物在编程中的抽象(数据,是引用数据类型)*多个数据的集合体(封装体)*用于保原创 2017-10-20 10:55:25 · 259 阅读 · 0 评论 -
js 字符串中加入符号
1.一个数字字符串,从右到左每隔3位加入一个逗号(1234567890 --> 1,234,567,890)function hh(str){ if(/\./.test(str)){ return str.replace(/\d(?=(\d{3})+\.)/g, "$&,").replace(/\d{3}(?![,.]|$)/g, "$&,"); }else{ return原创 2018-01-19 11:36:49 · 11489 阅读 · 0 评论 -
window.location对象location.search
一,location对象1.location.search在客户端获取Url参数的方法(1).location.search是从当前URL的?号开始的字符串如:http://www.baidu.com/s?wd=baidu&cl=3它的search就是?wd=baidu&cl=3(2).如: location.search.substr(1).split("&")[0]可以返回第一个参数:wd=b原创 2018-01-19 10:45:43 · 1233 阅读 · 0 评论 -
JavaScript 中的数据截取问题
一.数组中获取1.获取value的值var revokeModel = $("#modalMsgRevoke form").serializeArray(); console.log('cxyy00:'+revokeModel[0].value)2.从一组数据数组中获取1个字段 var formData = $("#tbMai...原创 2017-12-13 16:56:14 · 1766 阅读 · 0 评论