一名前端工程师的笔记分享！Js篇（03-14更新）

本文链接：https://blog.csdn.net/weixin_40216166/article/details/79561281

一名前端工程师的自学之路！Js篇（12-12更新）

xss : 跨站脚本攻击（Cross Site Scripting）

为了不和层叠样式表（Cascading Style Sheet）的缩写混淆，故将跨站脚本攻击缩写为XSS

什么是脚本攻击 ?

思考问题：网站的注册功能

脚本攻击：就是在表单中输入一些特殊含义代码的数据比如: <a href="#">xxx</a>

解决办法1 ：在表单中用Js 正则验证

问题来了：网站可以通过右键点击浏览器的查看源代码，获取网站的表单数据（包括后台路径）；

这是，网站的使用者能将表单的数据粘贴到本地的另一个页面，运行这个页面，在表单中输入一些特殊含义的代码，也可以实现脚本攻击。

所以前段的Js验证并没有从根本解决脚本攻击。

解决办法2 ：在服务器上做验证

服务器如何验证-核心思想：去掉表单中输入的标签，保留标签的内容

<?php

header("content-type:text/html;charset=utf-8");

$name = $_POST["uname"];

//取消接收到的数据中所含有的标签

//echo strip_tags($name);//strip_tags php中去掉标签的方法

//通过验证去掉标签

$reg = '/<.+>(.*)</.+>/';

if(preg_match($reg,$name,$arr)){

$name = $arr[1];

}

echo $name;

?>

原理图

一名前端工程师的自学之路！Js篇（12-12更新）

对象

万事万物皆对象

对象是一个整体，对外提供一些功能

一切具有属性和方法的事物

一切具有本质特征的行为的物质

人：

属性 --- 人的本质特征：身高体重性别年龄

方法 --- 人的具有的行为：吃喝走路学习...

汽车：

属性 --- 颜色型号品牌价格

方法 --- 形式启动

属性 ---》静态

方法 ---》动态

document对象：属性没括号方法有括号；

数据类型：

所有的基本数据类型都没有属性和方法

所有的对象数据类型都有属性和方法

函数和方法的区别：方法属于函数，函数包含方法。

类的概念 : 类是具有相同本质特征的一类事物的总称。Js中的类 --- 构造函数

类和对象的区别：类是对象的抽象对象是类的实例（类是对象的抽象化，对象是类的具象化）

现有对象，根据一类对象的共同特征抽象出类的概念。

面向对象（oop） Object Oriented Programming

面向对象编程: 是一种编程思想

面向过程：

面向对象语言： php java .net c++

面向过程语言： c语言

实例：

一条公路畅100000米，汽车行驶的速度 100km/h 问走稳这段路需要多久

面向过程：h = 长度 / 速度

面向对象：

公路：--属性：长度

人： --速度； 1000m/h

结果 = 公路.length / 人.speed

创建对象

第一种方法：

var obj = new Object();

obj.name = "zhangsan";定义对象属性

obj.age = 12 ；定义对象属性

obj.walk = function (){//定义对象方法

alert（"行走方法"）

}

第二种方法：

var obj = {

"name":"xm",

"age":"12",

"walk":function(){

console . log ("行走方法")

}

}；

严格的json对象只有属性没有方法

上述方式创建同类对象是，会产生重复的代码。

工厂模式（设计模式的一种）

优点：工厂模式可以解决同类对象创建时重复代码写多次的问题

缺点：

不能确定某一个对象属于哪一类；

一般一个对象通过 new 关键字构造出来的，而工厂模式只是一个很普通的函数

工厂模式 --- 模具

function createObj（）{

//备料 --- 创建对象

var obj = new Object（）;

//加工 --- 为对象添加属性和方法

obj.name = name；

obj.tel = tel；

obj.say = function（）{

return "hello"

}

//出厂 --- 将创建的对象返回

return obj；

}

构造函数

构造函数中的属性叫做实例属性

构造函数中的方法叫做实例方法

为了和普通函数区分，一般构造函数的命名规范是: 大驼峰 GaoJunJie

基本上所有的对象都是通过构造函数创建出来的

构造函数中的this 指向的是构造函数执行时创建出来的那个对象。

定义一个构造函数

function Animla(name,age,food){

this.name = name;

this.age = age;

this.food = food;

this.eat = function(){

return this.name + "正在吃" + this.food;

}

}

var animal = new Animla("xiaohu",1.5,"骨头");

alert(animal.eat());

优点：解决了工厂模式中存在的缺点，可以通过构造函数方式，确定某个对象属于哪一个类

缺点：同类对象创建时，相同方法会重复创建。空间不共享

原型 prototype

写在原型函数中的属性叫做：原型属性

写在原型函数中的方法叫做：原型方法

定义一个原型函数

function Student(){

}

Student.prototype.name = "xm";

Student.prototype.age = 18;

Student.prototype.study=function(){

return "一定要好好学习";

}

var stu = new Student();

alert(stu.name);

alert(stu.study())

优点 : 解决了相同对象创建时方法重建的问题。

缺点 : 多个对象的属性值相同，不能更改。

混合

将属性写成构造函数的实例属性

将方法写成构造函数的原型方法

定义一个混合函数

function Go(name,age){

this.name = name;

this.age = age;

}

Go.prototype.study=function(){

return "啦啦啦"

}

var sss = new Go("Jay",18);

alert(sss.name);

alert(sss.study());