JS基础(一)JS基础，函数职责单一性，模块封装，ES3、5转ES6 、webpack、defineProperty和P

<!DOCTYPE html>
<html lang="en" xmlns:script="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="calculator J_calculator">
    <p>结果:<span class="result">0</span></p>
    <div class="input-group">
        <input type="text" placeholder="第一个数字" value="0">
        <input type="text" placeholder="第二个数字" value="0">
    </div>
    <div class="button-group">
        <button data-method="plus">+</button>
        <button data-method="minus">-</button>
        <button data-method="multiplication">*</button>
        <button data-method="division">/</button>
    </div>
    <script src = "./tools.js"></script>
    <script>
        // 以下js代码
    </script>
</body>
</html>

初步实现计算器代码

const oCalculator = document.getElementsByClassName("J_calculator")[0],
    oResult = oCalculator.getElementsByClassName("result")[0],
    fInput = oCalculator.getElementsByTagName('input')[0],
    sInput = oCalculator.getElementsByTagName("input")[1],
    oButtonGroup = oCalculator.getElementsByClassName('button-group')[0]

oButtonGroup.addEventListener("click", onBtnClick, false)

function onBtnClick(evt) {
    const e = evt || window.event,
        tar = e.target || e.srcElement,
        tagName = tar.tagName.toLowerCase();
    if (tagName === 'button') {
        const fvalue = Number(fInput.value.replace(/\s+/g, '')) || 0
        const svalue = Number(sInput.value.replace(/\s+/g, '')) || 0
        var method = tar.getAttribute('data-method')
        switch (method) {
            case 'plus':
                oResult.innerText = fvalue + svalue
                break;
            case 'minus':
                oResult.innerText = fvalue - svalue
                break;
            case 'multiplication':
                oResult.innerText = fvalue * svalue
                break;
            case 'division':
                oResult.innerText = fvalue / svalue
                break;
            default:
                break;
        }
    }
}

解决作用域问题

;(function () {
    const oCalculator = document.getElementsByClassName("J_calculator")[0],
        oResult = oCalculator.getElementsByClassName("result")[0],
        fInput = oCalculator.getElementsByTagName('input')[0],
        sInput = oCalculator.getElementsByTagName("input")[1],
        oButtonGroup = oCalculator.getElementsByClassName('button-group')[0]
    var init = function () {
        bindEvent()
    }
    function bindEvent(){
        oButtonGroup.addEventListener("click", onBtnClick, false)
    }
    function onBtnClick(evt){
        const e = evt || window.event,
            tar = e.target || e.srcElement,
            tagName = tar.tagName.toLowerCase();
        if (tagName === 'button') {
            const fvalue = Number(fInput.value.replace(/\s+/g, '')) || 0
            const svalue = Number(sInput.value.replace(/\s+/g, '')) || 0
            var method = tar.getAttribute('data-method')
            switch (method) {
                case 'plus':
                    oResult.innerText = fvalue + svalue
                    break;
                case 'minus':
                    oResult.innerText = fvalue - svalue
                    break;
                case 'multiplication':
                    oResult.innerText = fvalue * svalue
                    break;
                case 'division':
                    oResult.innerText = fvalue / svalue
                    break;
                default:
                    break;
            }
        }
    }
    init()
})()

解决作用域和函数单一性问题

    // tools.js 
var tools = (function () {
    function digitalize(str) {
        return Number(str.replace(/\s+/g, '')) || 0
    }
    function getTarget(evt){
        var e = evt || window.event;
        return e.target || e.srcElement;
    }
    return {
        digitalize:digitalize,
        getTarget:getTarget
    }
})();
// *************分隔符*************
;(function (doc,tools) {
    const oCalculator = doc.getElementsByClassName("J_calculator")[0],
        oResult = oCalculator.getElementsByClassName("result")[0],
        fInput = oCalculator.getElementsByTagName('input')[0],
        sInput = oCalculator.getElementsByTagName("input")[1],
        oButtonGroup = oCalculator.getElementsByClassName('button-group')[0]
    var init = function () {
        bindEvent()
    }

    function bindEvent() {
        oButtonGroup.addEventListener("click", onBtnClick, false)
    }

    function onBtnClick(evt) {
        const tar = tools.getTarget(evt)
            tagName = tar.tagName.toLowerCase();
        if (tagName === 'button') {
            const fvalue = tools.digitalize(fInput.value.replace(/\s+/g, ''))
            const svalue = tools.digitalize(sInput.value.replace(/\s+/g, ''))
            var method = tar.getAttribute('data-method')
            var result = compute(method, fvalue, svalue)
            renderResult(result)
        }
    }

    function compute(method, fvalue, svalue) {
        let result = ''
        switch (method) {
            case 'plus':
                result = fvalue + svalue
                break;
            case 'minus':
                result = fvalue - svalue
                break;
            case 'multiplication':
                result = fvalue * svalue
                break;
            case 'division':
                result = fvalue / svalue
                break;
            default:
                break;
        }
        return result
    }

    function renderResult(result) {
        oResult.innerText = result
    }

    init()
})(document,tools)

webpack

安装依赖

1. 安装三大件
    webpack
    webpack-cli
    webpack-dev-server
2. 需要处理的模块
    // 转换es6的模块
    babel-loader@7
    babel-core
    babel-preset-env
    //  转换ES67的模块 装饰器等
    babel-plugin-transform-runtime
    babel-plugin-transform-decorators
    babel-plugin-transform-decorators-legacy
3. css预处理程序
    //sass
    sass-loader
    node-sass
    css-loader
    postcss-loader autoprefixer
    style-loader
4. 处理模板
    ejs-loader
5. 处理html
    html-webpack-plugin

开发依赖和生产依赖的区别

--save-dev 等同于 -D 安装在开发环境下的依赖

--save 等同于 -S 安装在生产环境下的依赖
package.json

{
  "name": "xiao_ye",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "SET NODE_OPTIONS=--openssl-legacy-provider && webpack-dev-server --content-base dist/ --hot --config webpack.config.js --progress --display-modules --colors --display-reasons"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
  },
  "devDependencies": {
    "@babel/core": "7.4.5",
    "babel-core": "6.26.3",
    "babel-loader": "8.0.6",
    "babel-preset-env": "1.7.0",
    "html-webpack-plugin": "3.2.0",
    "webpack": "4.35.0",
    "webpack-cli": "3.3.5",
    "webpack-dev-server": "3.7.2",
    "autoprefixer": "^10.4.16",
    "babel-plugin-transform-decorators": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "css-loader": "^6.8.1",
    "ejs-loader": "^0.5.0",
    "node-sass": "^9.0.0",
    "postcss-loader": "^7.3.3",
    "sass-loader": "^13.3.3",
    "style-loader": "^3.3.3"
  }
}

配置webpack -- webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require("html-webpack-plugin")
const autoprefixer = require("autoprefixer")
module.exports = {
    mode: "development",
    entry: {
        index: "./src/js/index.js"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/bundle.js"
    },
    module: {
        rules: [
            {
                test: /.js$/,
                loader: "babel-loader",
                exclude: __dirname + "node_modules",
                include: __dirname + "src",
                options: {
                    "presets": ["env"]
                }
            },
            {
                test: /.css$/,
                use: [
                    {loader: "style-loader"},
                    {loader: "css-loader"},
                    {
                        loader: "postcss-loader",
                        options: {
                            plugins: function () {
                                return [autoprefixer('last 5 versions')]
                            }
                        }
                    }
                ]
            },
            {
                test: //.scss$/,
                use: [{loader: "style-loader"},
                    {loader: "css-loader"}, {loader: "sass-loader"}]
            },
            {
                test: /.tpl$/,
                loader: 'ejs-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            minify: {
                // 移除所有注释
                removeComments: true,
                // 去掉所有的换行空格
                collapseWhitespace: true
            },
            filename: "index.html",
            template: path.resolve(__dirname, "src/index.html"),
            excludeChunks: ["node_modules"],
            files: {
                js: ["js/index.js"],
                chunks: {
                    "main": {
                        "entry": "dist/bundle.js"
                    }
                }
            }
        })
    ],
    devServer: {
        watchOptions: {
            ignore: /node_modules/
        },
        host: 'localhost',
        port: 3000,
        open: true
    }
}