组件化网页开发JS

【变量对象】：执行上下文和作用域链中间的桥梁

例 var one={ }；

one.sex='male'；

with(one){name='xh';}；

例子当中的one就是变量对象，

【作用域链】：用于查找对象

查找对象是沿着作用域链进行的。

查找速度：局部变量>全局变量

js的预解析

有var 的都为undefined

函数function会跳过，但是函数里面的（argument）是undefined

正式解析时是按顺序解析的

在调用函数中如果不是匿名函数【fn（argument）】，并且全局变量有赋值，那么会直接呗函数调用，但是，局部变量是逃离不了函数本身，所以在window里面的console.log()会用全局变量的赋值

1、数字做返回值

2、字符串做返回值

3、布尔值：return true/false,

表单验证 if(用户名不存在){return true;}else{return false;} 

4、undefined【就是一开始提到的，什么都不写或者只写return】

5、null：return null; 

6、返回数组

function add(num1,num2){

return [num1+num2, num1, num2];

} 

7、返回对象：

function getPerson(){

return {

name:'xm',

age:17

};

}

8、函数作为参数传参；

【为了写出更好更优雅的函数，会将函数作为参数传到另一个函数中，组成一个新功能函数，这个新函数就具有了两个功能：（1）传进来的函数功能（2）接收函数的功能】

原型链：JS在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做__proto__的内置属性，用于指向创建它的函数的原型对象prototype。

创建对象都分为三步：

1、var p={}; 创建对象

2、p.__proto__=person,prototype prototype是person里面代表对象的值，__proto__是它自带的一个属性

3、创建对象（初始化对象）p 这一步其实是调用person里面的call方法【person.call(p)】

原型链

对象实例.__proto__等同于对象.prototype



调用p.name，person里面若没有name这个属性，则会去p.__proto__中查找；而__proto__也是一个对象，就会取查找p.__proto__.__proto__，如果还没有就继续往下找，以此类推就会一直往下找__proto__，这样就形成了原型链。

call：调用一个对象的一个方法，以另一个对象替换当前对象

obj.call(方法,var1,var2,var3...)

apply：应用某一对象的一个方法，用另一个对象替换当前对象

obj.apply(方法,[var1,var2,var3]);

例子：

function parents(name){ //父

this.name = name;

this.say = function(){

alert("父亲的名字："+this.name);

}

}

function child(name,age){ //子继承parents

this.pObj = parents; //子对象的参数name传递到父对象中，其实就

是用父对象创建子对象

this.pObj(name);

this.age = age;

this.sayC = function(){ //定义子对象里的内容

alert("child:"+this.name+"age:"+this.age); //此时调用的是父

对象里的name

}

}

//实例化

var p = new parents("张三");

p.say(); //弹出：父亲的名字：张三

var c = new child("李四"，20);

c.sayC(); //弹出：child:李四age:20

//李四 --> this.pObj(name); --> parents(name) --> this.name=name='李四'

//this.sayC --> this.name --> parents --> this.name

//父对象被子对象继承，所有的属性和方法，都将传递到子对象中 

例子2：

function person(name,age,len){

this.name = name;

this.age = age;

this.len = len;

this.say = function(){

alert(this.name+":"+this.age+":"+this.len);

}

}

//call继承

function student(name,age){

person.call(this,name,age);【this都指向了student，因此传参时就

把person里的this都变成了student，所以下面李四没有传len参数弹

出的就是undefined】

}

var per = new person("张三",25,"170");

per.say(); //弹出：张三:25:170

var stu = new student("李四",18);

stu.say(); //弹出：李四:18:undefined

//apply继承

function teacher(name,age,len){

person.apply(this,[name,age,len]);

}

var tea = new teacher("王五",20,"180");

tea.say();

构造函数里的转义字符都要双重转义，就是两个\\

var str='love kasdkl';

var test1='love';

var test2=new RegExp(test1,'i');

console.log(test2.test(str));

像这种给直接给参数传递字符串形式的可以使用构造的方式来写正则

g 全局匹配（会匹配字符串所有能匹配上的）

pattern.lastIndex属性，初始值为0，普通模式（未开启全局匹配模式）时是一直为0，开启全局匹配模式后，指向匹配到的字符的下一个位置，当全部匹配完后，会重置为0

http://file.mukewang.com/class/assist/792/6614186/1gktf1nntsr/%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6%E6%80%BB%E7%BB%93%E6%95%99%E8%BE%85.pdf

/./表示匹配除了换行符之外的所有

/\./表示匹配小数点

/\d/表示匹配0-9的数字【/[0-9]/】

/\D表示匹配除了0-9之外的任意字符【/[^0-9]/】

/\s/表示匹配空格或者unicode空白符或者制表符tab【/ /或/ /】

/\S/表示除了空格或者unicode空白符或者制表符tab以外都能匹配

/\w/表示匹配[a-zA-Z0-9_]/【字母数字下划线】

/\W/表示匹配[^a-zA-Z0-9_]/

【匹配零次，也就是说当字符串从左侧开始匹配时，开始不是数字，没有匹配到数字也就是匹配到了0次，所以就可以不继续往下面匹配了（因为可以匹配0次），输出结果是空字符串。

示例：

var str ='我家的电话是6930184，地址是北京西城区';

var pattern_1=/\d*/;

console.log(pattern_1.exec(str));

匹配结果：空字符串 ""】

1、“()”可以用括号将匹配字符归为一组，还会自动捕获一次括号内容

var str='abab';

var pattern=/ab+/; 加号只影响字符b，匹配结果是ab而不是abab;

var pattern=/(ab)+/; 匹配结果是['abab','ab']; 

2、先忽略括号运行一次，然后再自动捕获一遍括号内容，按顺序排列

var str='abcd';

var pattern=/(ab)c/; 将ab单独捕获，exec结果是['abc','ab']【捕获性分组】

var pattern=/(a(b(c)))/; exec结果是['abc','abc','bc','c'] 

3、“?:”可以放在括号里取消自动捕获，但无法与\1一起用

var pattern=/(?:ab)c/ ;不用将ab捕获，exec结果是['abc']【非捕获性分组】

4、“\1”代表第一个分组，以此类推

var str='ab cd ab';

var pattern =/(ab) cd \1/; \1代表第一个分组，如果有第二个分组可以用\2来代表第二个分组。exec结果是['ab cd ab','ab']

实际应用↓：

var str='<p><a>adffdafd</a></p>';

var pattern= /<([a-zA-Z]+)>(.*?)<\/\1>/;【保证后面的标签名和前面的标签名一样】exec结果是['<p><a>adffdafd</a></p>','p','<a>adffdafd</a>'] 

5、解析器会在控制台中自动给返回的数组添加两个属性：index、input

index：表示匹配到的值在字符串中的位置，从0开始

input：存放被匹配到的字符串，也就是数组中这个位置的内容

首匹配^:

var str = 'html js';

var pattern = /^js/;【j必须在行首】

注意：^在字符类中（[^]）是取反的意思

尾匹配$:

var str = 'html js';

var pattern = /js$/;【s必须在行尾】

匹配数字：/^\d+$/匹配的全是数字，匹配成功则说明全是数字

逆向思考：/\D/ 这个正则找到的是除数字外的所有字符，有匹配结果说明不全是数字并且将非数字返回

\b 元字符匹配单词边界。

构造语法：new RegExp("\bregexp")

直接量语法：/\bregexp/

“(?=指定字符)”前瞻性匹配，只有被匹配字符后面跟的是指定字符时才匹配

(?!指定字符)”负向前瞻性匹配，被匹配字符后面跟的是指定字符时不匹配

pattern.ignoreCase 返回布尔值 判定有没i

pattern.global 返回布尔值 判定有没g

pattern.multiline 返回布尔值 判定有没m

pattern.source 返回字面量形式所对应的字符串 --> js

这些属性的用处不大

pattern.lastIndex 这个比较重要

RegExp.input ==RegExp.$_==RegExp['$_']（所有用.来表示的都可以用[]，[]就不一定能用.）

RegExp.lastMatch最近一次匹配到的字符 == RegExp['$&']

RegExp.leftContext上次匹配左边剩余的字符

RegExp['$`']

RegExp.rightContext上次匹配右边剩余的字符

RegExp["$'"]

RegExp.lastParen上次匹配到的子选项

RegExp['$+']

console.log(RegExp.$1);返回第一个分组 （常用， 上面的不常用

添加全局匹配修饰符不会影响到结果：

var str="html js js";

var pattern=/js/g;

console.log(str.search(pattern)); //返回5

①match与全局匹配修饰符g：

非全局匹配模式下，与exec()方法相同；全局匹配模式下，分组中的内容将会被舍弃：

var str="js js js";

var pattern=/(j)s/g;

console.log(pattern.exec(str)); //返回["js","j"]

console.log(str.match(pattern)); //返回["js","js","js"]，分组内容被舍弃

②match和exec区别总结：

match在非全局的情况下才会返回分组中匹配到的内容；全局匹配下返回所有匹配到的内容，而分组中的内容将会被舍弃；

exec无论是否全局匹配都会返回分组中匹配到的内容,都只会返回当前匹配到的一个内容,而不是全部返回。

③match与多行匹配修饰符m

var str="1.js\n2.js\n3.js";

var pattern=/js/m;

console.log(str.match(pattern)); //返回["js"],index值为2

正则中的split

split（''）把字符串分割成数组，（）里面加正则，因为正则很灵活

字符串实例：

var str = 'html,css,js';

console.log(str.split(',')); //返回： [ "html", "css", "js" ]

①替换

var str="I love js js";

var pattern=/js/g;

console.log(str.replace(pattern,"html")); //返回I love html html



var str="1111-11-11";

var pattern=/-/g;

console.log(str.replace(pattern,":")); //返回1111:11:11 

②replace对分组的引用 将分组内容加粗变红

var str="I love js";

var pattern=/(js)/;

document.write(str.replace(pattern,'<strong style="color:red">$1</strong>')); //$1表示第一个分组【pattern中的那个分组js】

页面中的输出结果：I love js【js加粗并且是红色】

③replace过滤敏感词：

var str="中国军队和阿扁一起办证";

var pattern=/国军队|阿扁|办证/g;

console.log(str.replace(pattern,function($0){

//$0相当于母匹配，是最大的匹配，表示匹配到的内容；$1$2这些都算是子匹配（括号包含的分组）

var result="";

for(var i=0;i<$0.length;i++){

result+="*";

}

return result;

}));

①首匹配

var str=' Alex ';

var pattern=/^\s+/;【用+不用*是为了节省时间，没有空格的话就不需要执行替换操作】

console.log(str,replace(pattern,'')）; 

②尾匹配

var str=' Alex ';

var pattern=/\s+$/;

console.log(str,replace(pattern,'')）; 

③首尾匹配

方法①：一次全部替换

var str=' Alex ';

var pattern = /^\s+|\s+$/g;

console.log(str.replace(pattern,''));

方法②：匹配两次（首、尾各一次），推荐

var str=" steady ";

var pattern1=/^\s+/;

var pattern2=/\s+$/;

console.log("|"+str.replace(pattern1,"").replace(pattern2,"")+"|"); //输出|steady|

转驼峰

css：background-color：red；

js:elem.style.backgroundColor=red;

jquery:$(elem).css('background-color','red');



A.简单案例：

var str="background-color";

var pattern=/-([a-z])/ig; //加上括号进行分组是为了获得匹配到的c

console.log(str.replace(pattern,function(all,letter){

return letter.toUpperCase();

})); //输出backgroundColor

【注意：all和letter这两个参数是replace方法自己封装好的。replace中第二个参数是一个函数时，函数里面的第一个参数是匹配模式的字符串，第二个参数是与模式中的子表达式匹配的字符串。即all是匹配的正则/-([a-z])/的结果-c ，而letter是匹配正则/-([a-z])/中的第一个分组，分组([a-z])匹配的c，所以letter就是c。】

①正向思考

var str=''<p class="odd" id="odd">123</p>;

var pattern=/<\/?[a-zA-Z]+(\s+[a-zA-Z]+=".*")*>/g;

console.log(str.match(pattern));

②逆向思考

var str=''<p class="odd" id="odd">123</p>;

var pattern=/<[^>]+>/g;

console.log(str.match(pattern));

③适用所有情况的方法

var str='<input type="text" value=">" name="username" />';

var pattern=/<(?:[^"'>]|"[^"]*"|'[^']*')*>/g;

?:表示取消对分组的捕获，提高匹配效率

邮箱可能的格式

steady@sina.com

steady_1@sina.com.cn

steady_1.abcd.efgh.com@sina.com.qwerty.cn

可匹配的正则：

/(?:\w+\.)*\w+@(?:\w+\.)+[a-z]+/i

较复杂的邮箱格式：(包含连字符)

steady_1.a-bcd.efgh.com@si_n-a.com.qwerty.cn

/^[a-z0-9]+(?:[._-][a-z0-9]+)*@[a-z0-9]+(?:[._-][a-z0-9]+)*\.[a-z]{2,4}$/i

如果是验证邮箱，记得要加上首^尾$匹配

匹配URL地址：

(协议：\/\/）主机名（：端口号）/（路径）

简化版正则： /^(https?:\/\/)?([^:\/]+)(:\d+)?(\/.*)?$/

匹配主机名：

/^([a-z0-9\.|[a-z0-9][-a-z0-9]*[a-z0-9]\.)*([a-z)+$/i

1、数字，字符串，布尔值，undifined，null

2. 值不可修改

3. 基本类型的' . '方法，实际使用的是其包装对象的方法：

比如 '123'.replace('1', '')，对应String的replace()函数;

4. 值保存在栈内存中， 按值访问

1、数组、对象

2. 值可修改

3. 地址保存在栈内存，值保存在堆内存中， 按引用访问 

$ == jQuery （字母开头）

变量比较：

两个基本类型的数据比较，只要数据是一样的，保存两个数据的变量就是相等（===）的；

两个引用类型的数据比较，比如两个对象，即使两个对象中的内容是一样的，保存两个对象的变量是不相等（===）的，因为引用类型的数据是保存在堆内存中，变量保存的是其地址，两个对象的地址是不相同的

复制变量的值

1、typeof

检测基本数据类型都可以（除了null），但检测引用类型，会返回object

2、instanceof（判断前者是否是后者的实例）

[]是Array的实例（console.log([] instanceof Array)）

[]是Object的实例（继承关系，所有东西都继承自Object）（console.log([] instanceof Object)

{}是object的实例（console.log({} instanceof Object)

{}不是Array的实例（console.log({} instanceof Array)



instanceof只能和引用类型联用，作用于基本类型会返回false

标识无用数据的策略

<2>添加属性和方法

变量：

var person = {}

person.name = 'xm';

person.setName=function(name){

this.name = name}

函数：

function add(num1,num2){

return num1+num2;

}

add.sex='male';

add.setSex=function (sex) {

this.sex=sex;

}

1、【字面量】：

2、【构造函数】

以上三种定义方式的区别：

【字面量定义方式和构造函数定义方式】

字面量定义方式相比构造函数，直观简洁、方便书写，

*****

【函数声明定义方式和赋值语句定义方式，主要是预解析方面】

1、使用声明函数的方式，调用在前在后都可以执行（调用提前）

2、赋值语句的方式，只能在函数后面调用

选择：

function声明和赋值表达式都可以，注意上面提到的调用提前的区别

1、全局作用域

2、函数作用域：可以访问同一级和上一级【可以根据作用域链来梳理函数的作用域，如图】

3、在if / for 代码块中，声明函数相当于全局函数，预解析时会造成调用提前；var赋值函数可以实现效果，因为预解析结束它们都是undefined。但还是不推荐在if / for 代码块中定义函数

4、作为对象的方法

命名函数

匿名函数

1、var op={

add:function(num1,num2){

return num1+num2;

};

}

op.add(1,2);

2、document.onclick=function(){

console.log('你点击了')

} // 浏览器帮忙调用

document.onclick(); // 自己调用，可以进行模拟操作 

3、对象里的属性，何时加引号何时不加

合法的标识符加不加引号都可以

不合法的标识符要加引号【比如@】，否则会报错

非法标识符调用时，只能用对象['非法标识符']

4、方法链式调用：

例：$('p').html('段落').css('background-color','red);

写在一行上，直观又简洁【图中也是一个例子】

1、构造函数也是一个普通函数，创建方式和普通函数一样，但构造函数习惯上首字母大写

2、构造函数和普通函数的区别在于：调用方式不一样。作用也不一样（构造函数用来新建实例对象）

3、调用方式不一样。

a. 普通函数的调用方式：直接调用 person();

b.构造函数的调用方式：需要使用new关键字来调用 new Person();

4、构造函数的函数名与类名相同：Person( ) 这个构造函数，Person 既是函数

5、内部用this 来构造属性和方法

所有函数下面都有一个call()方法和apply()方法

一般使用call()方法和apply()方法来实现间接调用，它们的第一个参数可以改变this指向【默认的都是指向该方法的调用对象，但是设置以后可以指向其他对象】，借用其他对象的方法来操作自己的函数；还可以判断数据是什么类型。

解决办法：使用函数表达式，给它两个名字

var jicheng=function fn(num){【jicheng相当于大名，fn相当于小名】

if(num<=1) return 1;

return num*fn(num-1);

}

这样即使jicheng这个函数名改变了，里面的fn没有变化，对函数的执行不会有影响。

一、js字面式对象声明对象：

var obj = {

属性名 : 属性值,

方法名称 : function() {},

}

二、new操作符后跟Object构造函数：

var obj = new Object();

obj.属性 = 属性值;

obj.方法 = function(str) {

方法代码;

};

三、js中构造方法声明对象：

function test([参数列表]) {

this.属性 = 属性值;

this.方法 = function() {

方法中代码

}

}

var obj = new test(参数列表);

三中，函数内部只能用this访问属性和方法

工厂方式声明对象：

说明：按照某种模式，可以不断地创造对象

【注意：任何模式下，同种模式中创造出来的对象都是独立存在的；无论以何种方式创建的对象，彼此之间都是无关联的】

任何js方法或函数，都自带一个prototype属性，且它以对象方式存在。prototype是Object的子对象。

原型模式根本：函数本身声明为空内容，利用prototype定义一些属性及方法，让所有实例化的对象都拥有它包含的属性及方法。

混合模式即为：构造模式+原型模式

for in 的遍历过程就相当于循环取值，能取到多少个值，就执行多少次函数体。对象遍历时，可以当做数组一样处理，通过[]取值。

1、栈内存：保存基本值和引用类型值的地址。

2、堆内存：保存一组无序且唯一的引用类型值，可以使用栈中的键名来取得。

3、代码段：通常是指用来存放程序执行代码的一块内存区域。

4、数据段：数据段通常是指用来存放程序中已初始化的全局变量的一块内存区域。

说明：1、大多面向对象的语言都支持封装的特性，提供了private关键字来隐藏某些属性或方法，用来限制被封装的数据或者内容的访问，只对外提供一个对象的专门访问的接口。接口一般为调用方法

2、js中没有提供专门封装这样的关键字，但是可以通过闭包实现封装，函数内部声明的变量，外部是访问不到的

3、公有与私有内容的区别是：能否在对象外部被访问

【call()方法的作用是调用一个方法，并改变其this的指向。第一个参数是传递this的，这里就是把subs的this传递给了add，那么add中如果有this，指向的就是subs。因为add代码中只是一个运算，没有使用到this，所以this还是指向add，调用的是add方法】