js代码

复习js基础第一天 函数

不羁的心 提交于 2019-12-10 08:53:48
JavaScript 函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 实例 <!DOCTYPE html> <html> <head> <script> function myFunction() { alert("Hello World!"); } </script> </head> <body> <button onclick="myFunction()">点击这里</button> </body> </html> 函数就是包裹在花括号中的代码块,前面使用了关键词 function function functionname() { 这里是要执行的代码 } 关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数 在调用函数时,您可以向其传递值,这些值被称为参数 这些参数可以在函数中使用。 您可以发送任意多的参数,由逗号 (,) 分隔: myFunction(_argument1_,_argument2_) 变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。 实例 <button onclick="myFunction('Bill Gates','CEO')">点击这里</button> <script> function myFunction(name,job) { alert("Welcome

js字符串替换 - 无replaceAll替换所有字符串的解决方案

徘徊边缘 提交于 2019-12-10 07:30:09
js替换全部字符串 - 无replaceAll的解决方案 原生js中并没有replaceAll方法,只有replace,如果要将字符串替换,一般使用replace var str = '2016-09-19'; var result = str.replace('-',''); console.log(result); ... 201609-19 replace只会替换找到的第一个原字符,如果想替换所有的字符串,有两种方案: (1)正则表达式替换所有字符 就需要使用正则表达式: var str = '2016-09-19'; var result = str.replace(/-/g,''); console.log(result); ... 20160919 /-/g 中 /- 是将 - 转义,/g 表示替换所有字符串。 (2)字符串分解连接替换法 var str = '2016-09-19'; var result = str.split('-').join(''); console.log(result); ... 20160919 (3)自定义函数 以上两种方式比较灵活,但是如果你想写完一次之后,别的地方直接调用,那就要自定义扩展js函数库 在html的<head></head> 标签中加入script代码 <head> ... <script language=

前端性能监控系统

浪尽此生 提交于 2019-12-10 00:11:55
引言 前阵子在 w3ctech 的 走进名企 - 百度前端 FEX 专场 上曾“夸下海口”说听完讲座后七天就可以打造自己的前端性能监控系统,既然说出去了也不能食言。从前一篇文章 前端数据之美 相信大家对前端数据有了一定的了解,下面就针对其中的性能数据及其监控进行详细阐述。 开始行动 本文中的性能主要指 web 页面加载性能,对性能还不了解?不用担心,接下来的“每一天”跟我一起进入前端性能的世界。 Day 1 为什么要监控性能? “If you cannot measure it, you cannot improve it” ———— William Thomson 这是一个最基本的问题,为什么要关注和监控前端性能?对于公司来说,性能在一定程度上与利益直接相关。国外有很多这方面的调研数据: 性能 收益 Google 延迟 400ms 搜索量下降 0.59% Bing 延迟 2s 收入下降 4.3% Yahoo 延迟 400ms 流量下降 5-9% Mozilla 页面打开减少 2.2s 下载量提升 15.4% Netflix 开启 Gzip 性能提升 13.25% 带宽减少 50% 数据来源:http://www.slideshare.net/bitcurrent/impact-of-web-latency-on-conversion-rates http:/

js深浅拷贝

倖福魔咒の 提交于 2019-12-10 00:02:16
在js中,经常要对数组进行拷贝操作,但如果只是简单的将它赋予其他变量,那么之后只需要修改一个变量,其他的就都会受到影响一起改变。这便是数组的深浅拷贝问题,像这种直接赋值的方式就是浅拷贝,但很多时候,这样并不是我们想要得到的结果。 举个例子: var arr1 = [0,1,2,3]; var arr2 = arr1; arr2[1] = "hello"; console.log(arr1); // [0,'hello',2,3] 由上可知,修改了 arr2 之后,arr1 也随之改变了。同样,在js中对象的拷贝操作也是如此。 var obj1 = { name: 'test', color: 'blue' } var obj2 = obj1; obj2.color = 'red'; console.log(obj1.color); // 'red' 1. 深浅拷贝 js大致分成两种数据类型:基本数据类型和引用数据类型。 基本数据类型保存在栈内存,而引用类型则保存在堆内存中。对于基本数据类型的拷贝,并没有深浅拷贝的区别,我们所说的深浅拷贝都是对于引用数据类型而言的。 浅拷贝: 浅拷贝是复制引用,复制后的引用都是指向同一个对象的实例,彼此之间的操作会互相影响。 深拷贝: 深拷贝不是简单的复制引用,而是在堆中重新分配内存,并且把源对象实例的所有属性都进行新建复制

JS系列:js数据类型的转换

北慕城南 提交于 2019-12-09 23:45:03
数据类型的转换 【基本数据类型】 数字 number 字符串 string 布尔 boolean 空 null 未定义 undefined 【引用数据类型】 对象 object 普通对象 {} 数组对象 [](Array) 正则对象 (RegExp) 日期对象 (Date) 数学函数 (Math) … 函数 function 真实项目中根据需求,我们徐亚进行对数据类型转换(规则和规则之间是相互独立的,千万不要混着记) 把其他数据类型转换为number类型 1.发生的情况 - isNaN检测的时候:当检测的值不是数字类型,浏览器会自己调用Number方法把它先转化为数字,然后再检测是否为非有效数字。 例子 1 : isNaN ( '3' ) => false Number ( '3' ) - > 3 isNaN ( 3 ) - > false 是有效数字 例子2:isNaN ( '3px' ) => false Number ( '3px' ) - > NaN isNaN ( 3 ) - > true 非有效数字 基于parseInt/parseFloat/Number 去手动转换为数字类型 数学运算:+ - * / %,但是"+"不仅是数学运算,也可能是字符串拼接 '3' - 1 => 2 Number ( '3' ) - > 3 3 - 1 - > 2 '3px' - 1 =>

现代前端库开发指南系列(二):使用 webpack 构建一个库

匆匆过客 提交于 2019-12-09 22:02:11
前言 在前文中,我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学,因此本文在介绍 webpack 配置时,仅提及构建一个库所特有的配置,其余配置请参考 webpack 官方文档。 输出产物 构建一个库与构建一个一般应用最大的不同点在于 构建完成后输出的产物 。 一般应用构建完成后会输出: 一个 html 文件 一个 js 入口 chunk 、若干子 chunk 若干 css 文件 若干其它资源,如图片、字体文件等 虽然输出的资源非常多,但实际上所有的依赖、加载关系都已经从 html 文件开始一层一层定下来了,换句话说,这个 html 文件实际上就是整个应用的入口。 一个库构建完成后会输出: 一个 CommonJS 格式的 js 文件 一个未压缩的 UMD 格式的 js 文件 一个已压缩的 UMD 格式的 js 文件 可能包括若干的 css 文件 可能包括若干的其它资源文件 库的入口分别是上面罗列的 js 文件;你可能会奇怪,一个库怎么会有3个入口文件呢?莫急,且听我一一道来。 CommonJS CommonJS 是 Node.js 推行的一种模块化规范,主要语法包括 module.exports 、 require() 等;而我们在使用 webpack 引入 npm 包时,实际上是处于 Node.js 环境,由此可知,这个 CommonJS 格式的入口 js 文件

JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

左心房为你撑大大i 提交于 2019-12-09 21:50:31
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scrollTop 网页被卷去的左:document.body.scrollLeft 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

JS系列:浏览器解析与运行

孤人 提交于 2019-12-09 20:29:10
浏览器解析: 1.当浏览器(内核、引擎)解析和渲染js的时候,会给js提供一个运行的环境,这个环境叫做“全局作用域(后端global / 客户端window scope)” 2.代码自上而下执行(之前有个变量提升阶段) => 基本数据类型值,会存储当前作用域下 var a = 12 ; var b = a ; 栈内存本身就是js代码运行的环境,所以的基本类型存储在栈内存中开辟一个位置进行存储。 b = 13 ; console . log ( a ) ; => 12 var obj1 = { n : 100 } ; var obj2 = obj1 ; == { n : 100 } ; => obj1 = { n : 100 } ; 堆内存用来存储引用类型的信息值的对象,对象存储的是键值对,函数存储的是代码字符串 obj2 [ 'n' ] = 200 ; => obj1 = { n : 100 } ; console . log ( obj1 . n ) ; //=>200 var b = 13 ; a和b没有任何关系,按值操作 1) 首先开辟一个空间存储12 2)在当前作用域中声明一个变量a (var a) 3)让那个声明的变量和存储的12进行关联(把存储的12赋值给a => 赋值操作叫定义) => 基本类型是重新赋值操作,基本数据类型也叫值类型,是按照值来操作:把原有的值复制一份

js的offset,client,scroll的区别

删除回忆录丶 提交于 2019-12-09 20:04:27
javascript的offset、client、scroll在使用过程中非常频繁,接下来将对此进行一一介绍,了解其区别和使用方法。 offsetTop 指元素距离上方或上层控件的位置,整型,单位像素。 offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素。 offsetWidth 指元素控件自身的宽度,整型,单位像素。 offsetHeight 指元素控件自身的高度,整型,单位像素。 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scrollTop 网页被卷去的左:document.body.scrollLeft 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:window.screen.width

Js中 关于top、clientTop、scrollTop、offsetTop的用法

大憨熊 提交于 2019-12-09 19:47:04
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的高: document.body.scrollTop; 网页被卷去的左: document.body.scrollLeft; 网页正文部分上: window.screenTop; 网页正文部分左: window.screenLeft; 屏幕分辨率的高: window.screen.height; 屏幕分辨率的宽: window.screen.width; 屏幕可用工作区高度: window.screen.availHeight; 屏幕可用工作区宽度:window.screen.availWidth; 1、offsetLeft 假设 obj 为某个 HTML 控件。 obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。 obj.offsetLeft 指 obj