js

Web前端作为开发团队中不可或缺的一部分，需要按照相关规定进行合理编写（一部分不良习惯可能给自己和他人造成不必要的麻烦）。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。备注：实际开发请以本公司的规范为标准。 A.基本原则 符合web标准（UTF-8，HTML5），语义化html（HTML5新增要求，减少div和span等无特定语义的标签使用），结构表现行为分离（HTML-CSS-JS代码分离，不同行为代码高内聚低耦合），兼容性优良（早期版本浏览器兼容，移动端和PC端设备兼容）.页面性能方面（减少请求次数，例如使用精灵图和sass语法），代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度（减小repaint和reflow）. B.文件命名规范 1、html，css，js，lib，images文件均存放至项目的目录中。如果使用相关前端框架，根据框架的文件格式进行合理布局。 2、所有文件夹及文件使用英文命名（避免使用中文路径）。 3、html文件：入口文件使用index.html。如果有对应的设计组设计原稿，需要将对应的设计稿和html文件命名一致并合理存放。 4、css文件命名：后缀.css。通用initial.css，初始化base.css，首页index.css，其他页面按照对应的html命名。 5、Js文件命名：英文命名

实参和形参的关系？ 1、定义函数的时候，小括号中的变量就是形参，执行函数的时候小括号中的参数叫实参； 2、实参是在调用时传递给函数的参数，它可以是表达式、函数等； 3、形参是函数被调用时用于接收实参值的变量，它不是实际存在变量； 4、形参的个数可以大于实参的个数，反过来不行； 函数的参数可以是任意类型吗？ 可以是，函数分为形参和实参，行参可以是任何形式，实参为要带入的参数。 函数作用域： js代码执行前，客户端分配的window空间叫全局作用域链。 函数执行时开辟的私有空间叫私有作用域，或局部作用域。 作用域：变量的一个作用范围。 来源： https://www.cnblogs.com/chuliwei/p/12300138.html

一、实参和形参的关系 定义函数的时候，小括号中的变量就是参数叫 形参， 执行函数的时候小括号中的参数 叫实参 。 带参数的函数的执行过程分析 参数就是私有变量，等价于 var 声明了一个变量 函数再定义的时候先把参数存到内存中，再找关键字 var 和 function 存变量。 　　2. 执行函数的时候，实参可带可不带，带了就相当于给形参赋值，没带就是 undefined 。 但是不带的实参，再定义函数的时候跟它对应的形参必须放在后面 　　3. 形参的个数可以大于实参的个数，反过来不行。 重点函数的返回值 二、函数的参数可以是任意类型 三、函数作用域的问题 浏览器执行 js 代码的时候开辟了一个最大的作用域叫 window 或者是全局作用域。 在执行代码的过程中如果是函数执行，将会在 window 下开辟一个私有作用域 / 子作用域。 每个作用域的分配是一样的，都有一个存储模块和执行模块。 来源： https://www.cnblogs.com/caixukuncaoaikun/p/12300079.html

在vue、react等框架大量应用之前，我们需要使用jQuery或者原生js来操作dom写代码，在用原生js进行事件绑定时，我们可以应用DOM2级绑定事件的方法，即： 元素.addEventListener() ，因为兼容性，还有： 元素.attachEvent() 。所以我们需要封装成一个方法： function emit(element, type, func) { if (element.addEventListener) { element.addEventListener(type, func, false); } else if (element.attachEvent) { element.attachEvent('on' + type, func); } else { //如果不支持DOM2级事件 element['on' + type] = func; } } 这个时候，如果一个元素需要通过一个行为添加多个点击事件，如： emit(div, 'click', fn1); emit(div, 'click', fn2); 在第一次给div进行fn1事件绑定时，已经知道浏览器可以执行哪种绑定方式，执行绑定fn2时，就没有必要再次进行判断，那么代码可以进行修改： function emit(element, type, func) { if (element

数据类型分类 基本数据类型和对象数据类型 基本数据类型 undefined,null,string,boolean,number,symbol 对象数据类型 array,function,date,regexp,error 可拥有对象方法和不可拥有对象方法 可拥有 string,boolean,number,symbol,object 不可拥有 null,undefined 可变和不可变 可变 对象属性和数组值 不可变 null,undefined,布尔，数字，字符串。字符串看起来是可以修改的但实际调用字符串方法对字符串进行修改时并不会修改原始字符串而是返回一个修改后新的字符串。 有趣的数字 溢出 与其他语言一样，js的数字类型也有自己的取值返回，超出这个范围称为溢出。用infinity表示正无穷大，-infinity表示负无穷大 0 / 0 //NaN 3 / 0 //infinity infinity +(-,*,/) 3 //infinity infinity +(*) infinity //infinity infinity -(/) infinity //NaN 下溢 当计算结果无比趋向0时，称为下溢。正方向趋向0返回0，负方向返回-0. 0 === -0 //true NaN 表示非数字，与任何值都不相等包括其本身。可用isNaN()判断是否为NaN. 浮点数比较的问题

语法方面 ECMAScript 中有5中简单数据类型（也称为基本数据类型）: Undefined 、 Null 、 Boolean 、 Number 和 String 。还有1中复杂的数据类型———— Object ， Object 本质上是由一组无序的名值对组成的。 其中 Undefined 、 Null 、 Boolean 、 Number 都属于基本类型。 Object 、 Array 和 Function 则属于引用类型 三种变量命名规则： var firstName ='king';//小驼峰 var FirstName ='queen';//大驼峰 var first_name ='maizi';//下划线法 当变量名或函式名是由一个或多个单词连结在一起，而构成的唯一识别字时，第一个单词以小写字母开始；第二个单词的首字母大写或每一个单词的首字母都采用大写字母，例如：myFirstName、myLastName，这样的变量名看上去就像骆驼峰一样此起彼伏，故得名。 骆驼式命名法的命名规则可视为一种惯例，并无绝对与强制，为的是增加识别和可读性。 JavaScript是弱类型编程语言,定义变量都使用 var 定义,与 Java 这种强类型语言有区别. 在定义后可以通过 typeOf() 来获取JavaScript中变量的数据类型. // Number 通过数字字面量赋值 //

我们都知道js执行遵循两个规则 1.函数声明整体提升 2.变量 声明提升 其实还有一点最重要的就是预编译，预编译往往发生在函数执行前，了解预编译，对我们理解函数执行非常关键。 预编译的前奏 1.imply global暗示全局变量：即任何变量，如果变量未经声明就赋值，此变量就为全局属性所有。 2.一切声明的全局变量，全是window的属性。 下面就先看几个例子吧 例1 function fn(a){ 　　console.log(a); 　　var a = 123; console.log(a); 　　function a(){}; 　 console.log(a); 　　var b = function(){};//这是函数表达式，不是函数声明（var b属于变量声明） 　　console.log(b); 　　function d(){} } fn(1); 1.创建AO对象 AO{ } 2.查找函数形参及函数内变量声明，形参名及变量名作为AO对象的属性，值为undefined AO{ 　　a：undefined； 　　b : undefined; } 3. 实参形参相统一，实参值赋给形参 (即把实参的值赋给形参，并不执行函数内的赋值) AO{ 　　a：1; 　　b : undefined; } 4. 查找函数声明，函数名作为AO对象的属性，值为函数体 AO{　 　 a

一、js HTML DOM （一）DOM简介 1.通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被结构化为对象树： HTML DOM 是： • HTML 的标准对象模型 • HTML 的标准编程接口 • W3C 标准 W3C DOM 标准被分为 3 个不同的部分： ·Core DOM - 所有文档类型的标准模型 ·XML DOM - XML 文档的标准模型 ·HTML DOM - HTML 文档的标准模型 总之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。 2. 创建动态 HTML DOM一般用法 • 改变 HTML 元素的内容 • 改变 HTML 元素的样式（CSS） • 对 HTML DOM 事件作出反应 • 添加和删除 HTML 元素 3. javascript 有三部分构成，ECMAScript，DOM和BOM （二）DOM方法 1.在 DOM 中，所有 HTML 元素都被定义为对象。 HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。 HTML DOM 属性是您能够设置或改变的 HTML 元素的值。 document.getElementById("demo")

效果图 code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片跟着鼠标走</title> <style> img { width: 99px; position: absolute; left: 0; top: 0; } </style> </head> <body> <img src="images/img.jpg" id="image"> </body> </html> <script> var img = document.getElementById("image"); document.onclick = function (event) { targetX = event.clientX - img.offsetWidth /2; targetY = event.clientY - img.offsetHeight /2; }; var leaderX = 0, leaderY = 0, targetX = 0, targetY = 0; setInterval(function () { leaderX = leaderX + (targetX - leaderX) / 10; leaderY = leaderY + (targetY - leaderY) /10;

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。 一、变量的作用域 要理解闭包，首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种：全局变量和局部变量。 Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。 Js代码 　　 var n=999; 　　function f1(){ 　　　　alert(n); 　　} 　　f1(); // 999 另一方面，在函数外部自然无法读取函数内的局部变量。 Js代码 　　 function f1(){ 　　　　var n=999; 　　} 　　alert(n); // error 这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！ Js代码 　　 function f1(){ 　　　　n=999; 　　} 　　f1(); 　　alert(n); // 999 -------------------------------------------------------------------------------------------------------- 二、如何从外部读取局部变量？ 出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下