Javascript 设计模式应用级讲解

chengtao1633 发布于2019-08-23 11:27 / 2929人阅读

摘要：继承关键字传给父类执行实际应用就是提取公共部分，复用代码。关于封装，完全开发对子类开放对自己开放，目前还不支持。

首先npm init一路回车 新建webpack.dev.config.js，修改package.json文件，安装webpack-dev-server可以帮助你在代码发生变化后自动编译代码

修改package.json文件

 "scripts": {
    "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
  },

webpack.dev.config.js

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    entry: "./src/index.js",
    output: {
        path: __dirname,
        filename: "./release/bundle.js"  // release 会自动创建
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html"  // bundle.js 会自动注入
        })
    ],
    devServer: {
        contentBase: path.join(__dirname, "./release"),  // 根目录
        open: true,  // 自动打开浏览器
        port: 9000,   // 端口
        proxy: {
            "/api/*": {
                target: "http://localhost:8880"
            }
        }
    },
    module: {
        rules: [{
            test: /.js?$/,
            exclude: /(node_modules)/,
            loader: "babel-loader"
        }]
    }
}

package.json 依据上面的方式，安装以下依赖

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "javascript-state-machine": "^3.0.1",
    "jquery": "^3.3.1"
  }
}

面向对象三要素：封装、多态、继承，子类继承父类，封装对数据的权限和保密，多态，同一个接口不同的实现，不从事后台开发很难真正理解这几个概念。

class People {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    eat() {
        alert(`${this.name} eat something`)
    }
    speak() {
        alert(`My name is ${this.name}, age ${this.age}`)
    }
}

class Student extends People {     //继承关键字extends
    constructor(name, age, number) {
        super(name, age)  //super 传给父类执行
        this.number = number
    }
    study() {
        alert(`${this.name} study`)
    }
}

let xiaoming = new Student("xiaoming", 10, "A1")
xiaoming.study()
console.log(xiaoming.number)
let xiaohong = new Student("xiaohong", 11, "A2")
xiaohong.study()

实际应用就是提取公共部分，复用代码。

关于封装，public完全开发、protected对子类开放、private对自己开放，目前es6还不支持。

GPU云服务器云服务器应用级监控 javascript设计模式 mongodb应用设计模式 javascript应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96988.html

面试宝典

摘要：有谈谈面试与面试题对于前端面试的一些看法。动态规划算法的思想及实现方法帮大家理清动态规划的解决思路以及原理方法前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章，涉及到优化等多个方面。极客学院前端练习题道练习题，面试季练练手。由数据绑定和排序引入的几个 JavaScript 知识点在 JavaScript 的数据绑定和做简单的表格排序中遇到的几个知识点 [[JS 基础...

neu 2019-08-29 14:00 评论0 收藏0
深入讲解js中的位运算及实际用法

摘要：虽然在内部，数值都是以位浮点数的形式储存，但是做位运算的时候，是以位带符号的整数进行运算的，并且返回值也是一个位带符号的整数。如下表应用场景取整对于一般的整数，返回值不会有任何变化。例如，结果为负数存储采用的形式是二进制补码。什么是位运算？位运算是在数字底层（即表示数字的 32 个数位）进行运算的。由于位运算是低级的运算操作，所以速度往往也是最快的（相对其它运算如加减乘除来说），并...

jifei 2019-08-26 10:14 评论0 收藏0
JavaScript中的闭包

摘要：闭包引起的内存泄漏总结从理论的角度将由于作用域链的特性中所有函数都是闭包但是从应用的角度来说只有当函数以返回值返回或者当函数以参数形式使用或者当函数中自由变量在函数外被引用时才能成为明确意义上的闭包。文章同步到github js的闭包概念几乎是任何面试官都会问的问题,最近把闭包这块的概念梳理了一下,记录成以下文章。什么是闭包我先列出一些官方及经典书籍等书中给出的概念,这些概念虽然...

HmyBmny 2019-08-21 17:07 评论0 收藏0
JavaScript 事件详解

摘要：事件监听函数标准的事件监听函数如下上面的示例表示先获得表示节点的对象，然后在这个对象上面添加了一个事件监听器，当监听到事件发生时，则调用回调函数，即在控制台输出。 JavaScript 事件解读 1. 事件基本概念事件是指在文档或者浏览器中发生的一些特定交互瞬间，比如打开某一个网页，浏览器加载完成后会触发 load 事件，当鼠标悬浮于某一个元素上时会触发 hover 事件，当鼠标点击...

Object 2019-08-19 18:12 评论0 收藏0
双十二大前端工程师读书清单

摘要：本文最早为双十一而作，原标题双大前端工程师读书清单，以付费的形式发布在上。发布完本次预告后，捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起，帮助我们设计快速响应的网络应用，而非简单的页面。本文最早为双十一而作，原标题双 11 大前端工程师读书清单，以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流，现免费分享到这里，不足之处欢迎指教...

happen 2019-08-02 16:00 评论0 收藏0