web学习笔记27-webpack 面向对象 xss跨站攻击

webpack 面向对象 xss跨站攻击

前端工具链

？前端工具链

因为各种框架的出现，需要一个工具把各种框架整合在一起，分工合作，像流水线一样，按照固定的规则来生产网页。

webpack

一款基于node.js搭建的工具，官方地址

？引入原因

浏览器提供的脚本的src引入方式缺点比较多，而node.js提供的模块化语法更好用；浏览器无法直接兼容模块化语法，所以webpack诞生，把模块化语法，以及其他依赖文件一起通通转为普通代码，存在一个文件当中直接引入使用

一键生成webpack项目包

在实际开发中，大多数时候不需要知道怎么配置webpack项目包，直接使用简单命令生成项目包使用即可：

• 创建文件夹: webpack-pro

• 初始化: npm init -y

• 安装模块: npm i webpack webpack-cli

• 执行默认的初始化: npx webpack init

  • 所有的选项, 都直接回车采用默认值即可

面向对象

？面向对象编程

针对对象类型进行开发

？对象类型

就是一个集合, 一堆数据和函数 封装在一起形成一个整体

面向对象的三大特征：

• 封装

  • {}将内容包在大括号里

• 继承

• 多态

继承

子类会完全继承父类的所有属性和方法（通过原型链机制实现）

class Father {
constructor(name, age) {
this.name = name
this.age = age
}
eat() {
console.log('吃东西')
}
}
var f = new Father('亮亮', 37)
console.log(f)
// 子类: 继承Father的所有属性和方法
// extends: 继承
class Son extends Father { }
var s = new Son('小亮', 12)
console.log(s)
s.eat()

? 为什么要有继承

因为一些构造函数，所需要的功能大部分相同，只有部分不相同，对于这种就可以将公共部分代码提炼出来形成一个父类，这样就可以少写很多代码。对于细节上的不同，就是定制化子类，把细节不同的地方重写即可

？如何使用function的方法实现继承，考察原型与原型链的使用

 function Animal(name,age){
            this.name =name 
            this.age = age
      
   }
        //将方法写在原型上
        Animal.prototype.cry=function(){}
        //
        function Dog(name,age){
             //利用call修改掉this的指向
            Animal.call(this,name,age)
            console.log('this：',this);
        }

        //把父元素的原型借用过来
        Dog.prototype = Object.create(Animal.prototype)
        console.log(Dog.prototype);

        //为原型指定构造函数
        Dog.prototype.constructor = Dog

        let d1 = new Dog('wangwang',2)

        console.log(d1);

多态

多态: 每个子元素都继承了父元素的cry方法, 但是由于重写了, 所以使用时各不相同, 呈现出不同的状态

对象权限设置

• 阻止扩展

  • Object.preventExtensions(对象)

• 阻止增删

  • Object.seal(对象)

• 阻止增删改

  • Object.freeze(对象)

 'use strict'

        let emp = {ename:'kaikai',age:32,phone:'13212345678'}

        //阻止扩展
        // Object.preventExtensions(emp)

        //阻止增删
        // Object.seal(emp)

        //阻止增删改
        Object.freeze(emp)

        // emp.phome = '10086'
        // delete emp.phone
        // emp.phone='10086'

        console.log(emp);

xss跨站脚本攻击

Cross Site Scripting: 理论上简称 CSS, 但是与层叠样式表重名, 所以改名为 XSS

跨站脚本: 使用非我们自己网站的脚本, 一旦这些脚本中存在恶意代码, 就会导致我们的网站出现风险

防御: 把脚本下载到本地来执行, 而不是使用远程脚本