js代码 | 易学教程

js顺序加载与并行加载

阅读更多关于 js顺序加载与并行加载

　　前端优化过程中常提到js的加载方式，下面说下几种常用的加载方式：　　 1：head标签内插入<script>标签　　<script type="text/javaScript" src="test.js"></script> 　　这是最常见的方法，但是这个方法有个最大的问题，就是当浏览器解析到<script>标签时，浏览器会停止解析其后的内容，而优先下载脚本文件，并执行其中的代码，是个阻塞的过程，这意味着，其后的test.css样式文件和<body>标签都无法被加载，由于<body>标签和样式等资源无法被加载，那么页面自然就无法渲染了，因此常常页面打开会出现页面内容空白或者样式丢失问题，这都是在头部引入了过多的js文件阻塞加载造成的，虽然高版本的浏览器已经可以对脚本并行加载，可是还有些浏览器脚本依旧是一个接一个加载的，因此优化的话可以把js放在body标签最底部，这样页面可以先快速显示出来，提高了体验友好度。　　 2：创建动态脚本 var script=document.createElement('script'); script.type='text/javaScript'; script.src='test.js'; document.getElementsByTagName('head')[0].appendChild(script); 　　上述代码动态创建了一个

Js apply方法详解

阅读更多关于 Js apply方法详解

我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享.. 如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高.. 主要我是要解决一下几个问题: 1.apply和call的区别在哪里 2.什么情况下用apply,什么情况下用call 3.apply的其他巧妙用法（一般在什么情况下可以使用apply）我首先从网上查到关于apply和call的定义,然后用示例来解释这两个方法的意思和如何去用. apply:方法能劫持另外一个对象的方法，继承另外一个对象的属性. Function.apply(obj,args)方法能接收两个参数 obj：这个对象将代替Function类里 this对象 args：这个是数组，它将作为参数传给Function（args-->arguments） call:和apply的意思一样,只不过是参数列表不一样. Function.call(obj,[param1[,param2[,…[,paramN]]]]) obj：这个对象将代替Function类里 this对象 params：这个是一个参数列表 1.apply示例: <script type="text/javascript"> /

JS-包装对象

阅读更多关于 JS-包装对象

1、字符串、数字、布尔值不是对象，为什么会有属性呢？例如： 1 var s = "test"; 2 var len = s.length;//4，使用字符串的属性因为只要引用了字符串s的属性，JavaScript就会将字符串值通过调用new String(s)的方式临时转换成对象，属性引用结束，临时对象销毁。例如以下代码，对字符串s设置属性会失败： 1 var s = "test"; 2 s.len = 4; 3 var t = s.len;// undefined 同样，数字和布尔值也具有各自的构造函数创建临时对象：Number()、Boolean()。在存取字符串、数字或布尔值的属性时创建的临时对象称作包装对象。注：null和undefined没有包装对象，访问它们的属性会造成一个类型错误。 2、可通过String()、Number()、Booolean()构造函数来显示地创建包装对象： 1 var s = "test",n = 1,b = true; // 一个字符串、数字和布尔值 2 var S = new String(s); // 一个字符串对象 3 var N = new Number(n); // 一个数值对象 4 var B = new Boolean(b); // 一个布尔对象 5 6 // 但是这两种方法并不是总是相等的，例如 7 s==S; //

babel学习笔记

阅读更多关于 babel学习笔记

babel 到底做了什么？怎么做的？简单来说，babel主要用于把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。本文以 babel 6.x 为基准进行讨论。严格来说，babel 也可以转化为更低的规范。但以目前情况来说，es5 规范已经足以覆盖绝大部分浏览器，因此常规来说转到 es5 是一个安全且流行的做法。接下来，我们逐个给大家介绍一下babel里的包都是干什么的包 babel-core 可以看做 babel 的编译器。babel 的核心 api 都在这里面，比如 transform，主要用来处理转码。它会把我们的 js 代码，抽象成 ast，即抽象语法树，是源代码的抽象语法结构的树状表现形式。我们可以理解为，它定义的一种分析 js 语法的树状结构。也就是说 es6 的新语法，跟老语法是不一样的，那我们怎么去定义这个语法呢。所以必须要先转成 ast，去发现这个语法的 kind，分别做对应的处理，才能转化成 es5。 babel-cli 提供命令行运行 babel。也就是你可以 babel filename 去对文件转码。如下图： babel script.js --out-file script-compiled.js babel-runtime 这个包很简单

js预解析面试题

阅读更多关于 js预解析面试题

js预解析一直是面试的重点，下面是我自己整理的一些预解析的面试题，基本上是由简到难的顺序排列的，每一道题的答案都自己验证过了，并附上了详细的解释，希望能对你有帮助 < ! DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > < / title > < / head > < body > < script type = "text/javascript" > //01 alert ( a ) ; a = 0 ; //报错,a is not defined:不带var的变量没有提升 //02 alert ( a ) ; //undefined:带var变量预解析时存在提升 var a = 0 ; alert ( a ) ; //0 //03 alert ( a ) ; //函数原样输出:函数和带var的变量重名,带var的变量被忽略 var a = '我是变量' ; function a ( ) { alert ( '我是函数' ) } alert ( a ) ; //我是变量:重新赋值a = '我是变量' //04 alert ( a ) ; //1. 函数原样输出 a ++ ; alert ( a ) ; //2. NaN var a = '我是变量' ; function a ( ) {

纯js全选、多选

阅读更多关于纯js全选、多选

使用纯js来写一个模拟购物车的全选和多选功能。思路：　　1、需要给每一个input设置点击事件　　2、全选就是把所有的checkbox设置为true 　　3、取消一个不全选，就是判断是否全部的checkbox都被选了代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="checkbox" id="all"/>全选 <div id="checkbox"> <input type="checkbox"/>选择一 <br/> <input type="checkbox"/>选择二 </div> <script> //获取全选按钮 var all = document.getElementById("all"); //获取div中所有的复选框 var checkboxs = document.getElementById("checkbox").getElementsByTagName("input"); //点击全选,获取他当前的状态并设置新的状态 all.onclick = function(){ for(var i = 0;i < checkboxs.length; i++){ checkboxs[i]

JS函数节流和函数防抖

阅读更多关于 JS函数节流和函数防抖

问题引入问题1：如果实现了dom拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，导致浏览器直接卡死，这个时候怎么办？问题2：如果给一个按钮绑定了表单提交的post事件，但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交，如何防止多次提交的发生？为了应对如上场景，便出现了函数防抖和函数节流两个概念，总的来说：这两个方法是在时间轴上控制函数的执行次数。函数防抖(debounce) 概念：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。生活中的实例：如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。函数节流(throttle) 概念：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。生活中的实例：我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放（以前是，现在不知道）中基本是以每秒 24 张的速度播放的，为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候，100 张就会显得很浪费资源。分析图假设

js中! 与 !!

阅读更多关于 js中! 与 !!

! 是逻辑取反，非的意思,可以与任何变量进行逻辑与将其转化为布尔值 console . log ( ! true ) //false console . log ( ! undefined ) //true console . log ( ! 1 ) //false !! 常常用来做类型判断，在第一步!（变量）之后再做逻辑取反运算，在js中新手常常会写这样臃肿的代码：判断变量a为非空，未定义或者非空串才能执行方法体的内容 var a ; if ( a != null && typeof ( a ) != undefined && a != '' ) { //a有内容才执行的代码 } 实际上我们只需要写一个判断表达： if ( ! ! a ) { //a有内容才执行的代码... } 省去了多次判断null、undefined和空字符串的冗余代码。来源： CSDN 作者：不止三岁链接： https://blog.csdn.net/YYece/article/details/103905634

Selenium常用操作

阅读更多关于 Selenium常用操作

*/ /*--> */ 目录安装下载驱动元素选取输入、清除、点击关闭窗口、浏览器窗口切换页面(frame)切换页面弹窗等待加载动作链键盘事件执行js（滑动滚动条）截图获取元素属性获取网页源代码、刷新页面设置窗口大小设置代理、UA Cookie操作跳过Selenium检测示例安装 pip install selenium 元素选取单个元素查找方法注：其中的element加上一个s，则是对应的多个元素的查找方法通过xpath查找 find_element_by_xpath() 通过id查找 find_element_by_id() 通过class属性查找 find_element_by_class_name() 通过css选择器查找（语法规则） find_element_by_css_selector() 通过链接文本查找 find_element_by_link_text() 通过链接文本的部分匹配查找 find_element_by_partial_ink_text() 通过name属性进行查找 find_element_by_name() 通过标签名查找 find_element_by_tag_name() 两种方法集成了上面所有的查找方法 find_element(By.ID, '...') 通过ID查找一个 find

前端之js基础篇

阅读更多关于前端之js基础篇

JavaScript概述 ECMAScript和JavaScript的关系 1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。 ECMAScript的历史年份名称描述 1997 ECMAScript 1 第一个版本 1998 ECMAScript 2 版本变更 1999 ECMAScript 3 添加正则表达式添加try/catch ECMAScript 4 没有发布 2009 ECMAScript 5 添加"strict mode"严格模式添加JSON支持 2011 ECMAScript 5.1 版本变更 2015 ECMAScript 6

订阅 js代码