js基础知识整理

JS

JS组成：

JS = ECMAScript + dom(文档对象模型) + bom(浏览器对象模型)

JS命名规则 驼峰命名法

NAN 非数值 注意：Undefined和任何数值计算为NaN，NaN与任何值都不相等，包括 NaN本身

string 字符串 注意：无法输出的字符，先输出/，在输出字符。（“、\、换行等....）。

字符串不可变是指 在内存中不会立刻消失，只能二次赋值，原有的字符在一定时间内被垃圾回收器回收。

undefined和null：null和undefined有最大的相似性，他们的值相等，但是类型不相等，但是和数字运算的时候，null被看作是0，但是undefined和任何数计算都是NAN。

顺序结构（程序正常执行流程从上往下，从左往右）（不用研究）

赋值运算时为从右往左执行，且左侧为属性或变量，不取值！！！

数组的定义方式：

1 字面量定义  var  arr = [参数....];

2 对象定义    var  arr  =  new Array(参数....);

函数变量和作用域：全局变量 局部变量  隐式全局变量

在变量定义的时候，只有逗号能提供连续定义变量的功能。

注意：函数不调用不执行，函数名就等于（整个函数），加载函数的时候，只加载函数名，不加载函数体。

对象：最重要的是this这个关键词

注意：this只出现在函数中。谁调用函数，this就指的是谁。

对象字面量和JSON注意：对象字面量定义方法和json很像，只有一点不同，json的key要求必须加“”。用FOR IN遍历。

参数和传值问题

简单类型数据做参数，函数内部对参数的修改不应影响外部变量，简单类型传数值。

复杂类型数据做参数，函数内部对参数的修改会应影响外部变量，复杂类型传地址。

数组的高级API：（难记住的 不常用的一些重要）

toString() 把数组转化成字符串

Join()根据参数将把数组的每一项链接起来拼成字符串

IndexOf()  lastIndexOf() 查元素在数组中的索引值

map() 遍历数组中的每一项，将得到的返回值拼成一个数组返回。

事件三要素：事件源，事件和事件驱动程序

三部曲：获取事件源，绑定事件，书写事件驱动程序

HTML的组成部分为节点（Node ）

style是一个对象，不能获取内嵌和外链。

String

charAt：获取相应位置字符（参数： 字符位置）

注释：字符串中第一个字符的下标是 0。如果参数index 不在0 与 string.length之间，该方法将返回一个空字符串。

charCodeAt：获取相应位置字符编码（参数：字符位置）

charAt()方法和charCodeAt()方法用于选取字符串中某一位置上的单个字符

区别：charCodeAt()方法，它并不返回指定位置上的字符本身，而是返回该字符在Unicode字符集中的编码值。如果该位置没有字符，返回值为NaN。

indexOf，从前向后索引字符串位置（参数： 索引字符串）从前面寻找第一个符合元素的位置。

lastIndexOf，从后向前索引字符串位置（参数：索引字符串）从后面寻找第一个符合元素的位置。

trim()     //只能去除字符串前后的空白

replace()  //替换   str.replace(/aaa/gi,“bbb”);

split()    //字符串变数组

Offset家族（偏移，补偿，位移）。

offsetWidth和offsetHight（检测盒子自身宽高+padding+border）

offsetLeft和offsetTop  （检测距离父盒子有定位的左/上面的距离）：offsetLeft从父亲的padding开始算,父亲的border不算。

offsetParent   （检测父系盒子中带有定位的父盒子节点）

offsetLeft和style.left区别：offset返回的是数字，且是只读属性，而style返回的是字符串，除了数字外还带有单位：px，是可写读属性。

Scroll家族：

ScrollWidth和scrollHeight（不包括border）：检测盒子的宽高或者盒子内容的宽高（如果有内容超出了，显示内容的高度）。

scrollTop和scrollLeft：被浏览器遮挡的头部和左边部分或被卷去的头部和左边部分。

获取title、body、head、html标签：

document.title --- 文档标题；

document.head --- 文档的头标签

document.body --- 文档的body标签；

document.documentElement --- 文档的html标签。

Scroll()的封装很重要！！

client家族：

clientWidth 获取网页可视区域宽度（两种用法）

clientHeight 获取网页可视区域高度（两种用法）

调用者不同，意义不同：盒子调用，指盒子本身。body/html调用，可视区域大小。

clientX       鼠标距离可视区域左侧距离（event调用）

clientY       鼠标距离可视区域上侧距离（event调用）

clientTop/clientLeft 盒子的不包括border宽高

三大家族区别（三大家族总结）

Width和height

clientWidth  = width  + padding

clientHeight  = height + padding

offsetWidth  = width  + padding + border

offsetHeight  = height + padding + border

scrollWidth   = 内容宽度（不包含border）

scrollHeight  = 内容高度（不包含border）

top和left

offsetTop/offsetLeft ：

调用者：任意元素。(盒子为主)

作用：距离父系盒子中带有定位的距离。

scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)

调用者：document.body.scrollTop/.....(window)

作用：浏览器无法显示的部分（被卷去的部分）。

clientY/clientX:（clientTop/clientLeft值的是border）

调用者：event.clientX(event)

作用：鼠标距离浏览器可视区域的距离（左、上）。

Onresize事件：只要浏览器的大小改变，都会触动这个事件。

 

JavaScript书写规范：

1. 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …);

2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;

3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;

jQuery变量要求首字符为’_', 其他与原生JavaScript 规则相同, 如: _iTaoLun;另, 要求变量集中声明, 避免全局变量.

4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;

5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();

6. 命名语义化, 尽可能利用英文单词或其缩写;

7. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;

8. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;

9. 代码结构明了, 加适量注释. 提高函数重用率;

10. 注重与html分离, 减小reflow, 注重性能.

图片规范：

1. 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;

2. 图片格式仅限于gif || png || jpg;

3. 命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;

4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;

5. 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明);

6. 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下.

注释规范：

1. html注释: 注释格式 <!–这儿是注释–>, ’–’只能在注释的始末位置,不可置入注释文字区域;

2. css注释: 注释格式 /*这儿是注释*/;

3. JavaScript注释, 单行注释使用’//这儿是单行注释’ ,多行注释使用 /* 这儿有多行注释 */;

开发及测试工具约定

建议使用Aptana || Dw || Vim , 亦可根据自己喜好选择, 但须遵循如下原则:

1. 不可利用IDE的视图模式’画’代码;

2. 不可利用IDE生成相关功能代码, 比如Dw内置的一些功能js;

3. 编码必须格式化, 比如缩进;

测试工具: 前期开发仅测试FireFox & IE6 & IE7 & IE8 , 后期优化时加入Opera & Chrome;

建议测试顺序: FireFox–>IE7–>IE8–>IE6–>Opera–>Chrome, 建议安装firebug及IE Tab Plus插件.

其他规范

1. 开发过程中严格按分工完成页面, 以提高css复用率, 避免重复开发;

2. 减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一种美德. 为用户着想, 为服务器着想.