远古项目里的一些挣扎

饼干_

发布于 2022-09-19 15:19:41

3580

发布于 2022-09-19 15:19:41

theme: channing-cyan

前言

最近接手了一个前后端没分离的项目，java作为后端，使用jsp当做模板来书写前端代码，并且用jq做各种操作，各种离奇写法和jq的辣眼睛操作以及臃肿的写法，这波给我看的属实头疼，但作为一个合格的前端开发者遇到困难就去克服他吧。

这个项目可以说是十几年前的古董项目了，页面跳转都是通过请求后台获取渲染好的dom结构直接展示在页面上。除了首页和登录，没有其他的地址。也就是说无论在哪个页面点击浏览器的返回都是返回到登录页，这点体验实际是非常糟糕的。然后由于页面填充数据都是依靠jq去操作DOM，所以导致表格从渲染出来到填充数据至少会有一秒的延迟。但是由于项目实在过于庞大，只依靠我一个人重构简直天方夜谭，并且还要在此基础上做新需求，于是我决定若是新增页面就使用Vue来书写，若是老页面则继续迭代。（其实我只是不想写jq而已）

在jsp中引入Vue

前面也说了，由于实际地址只有首页和登录页，首页作为主入口的jsp，我们可以在这里通过cdn引入vue相关的资源，由于老项目又要兼顾IE，只好引进Vue2.x来兼顾IE。

<!--这是element相关的资源（做demo用的） -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<!--引进Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

引进后就可以在其他页面快乐的使用Vue的写法咯,由于引进了element，你也可以直接使用他的组件：

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>

<body>
    <div id="app">
        <div>{{ msg }}</div>
        <div v-for="item in list">{{ item }}</div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180"/>
            <el-table-column prop="name" label="姓名" width="180"/>
            <el-table-column prop="address" label="地址"/>
        </el-table>
        <el-button type="primary" @click="confirm">确定</el-button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data(){
                    tableData: [
                        {
                            date: "2016-05-02",
                            name: "王小虎",
                            address: "上海市普陀区金沙江路 1518 弄",
                        },
                        {
                            date: "2016-05-04",
                            name: "王小虎",
                            address: "上海市普陀区金沙江路 1517 弄",
                        },
                        {
                            date: "2016-05-01",
                            name: "王小虎",
                            address: "上海市普陀区金沙江路 1519 弄",
                        },
                        {
                            date: "2016-05-03",
                            name: "王小虎",
                            address: "上海市普陀区金沙江路 1516 弄",
                        },
                    ],
                msg: 'hello Vue',
                list: ["早上", "中午", "下午"],
            },
            methods:{
                confirm() {
                    console.log(this.msg, '-welcome-')
                }
            }
        })
    </script>
</body>
</html>

看看效果：

怎么样？是不是看上去还不错？接下来你可能想问那我要复用一些自己封装的组件怎么搞呢？由于我们在页面中都是通过 new Vue 的方式将其挂载在指定DOM上面，我们封装公共组件时可以通过指定el来挂载到对于DOM上，所以在使用组件时我们只需要这样：

<!-- 引入组件 -->
<script src = "./1.js"></script>
<!-- 使用组件 -->
<div id='compontents'></div>

这就相当于一个占位符，我们封装组件时使用js来封装即可：

// 1.js
new Vue({
    el: 'compontents',
    template: `
        <div>
            <div>{{ this.msg }}</div>
        </div>
    `,
    data() {
        return {
            msg: '1122332121'
        }
    }
})

有人可能要问，为什么不直接写.vue文件？我也想写，我们在页面中引入时需要通过vue-loader编译成相应的js文件，但是vue-loader通过cdn方式引入并使用时会报错（这个我没有深入去看）。总之一言难尽，又迫于项目排期压力，只能想出临时方案去解决这个问题。我也想过使用jsx来书写相应的模板部分，但是也没有那么顺利，没法一下成型去使用他，只能用这种写法了。

组件通讯

现在有个新问题，我组件之间该怎么去通讯？

由于我是通过div标签来充当占位符，导致props并不知道从哪里传入进去（如果有大佬知道请赐教），我也是想了挺多办法，但都不太如意，最后只有一种简单粗暴的方法来解决：我直接在主入口定义了一个全局对象，并且通过不同模块功能划分开来，这样就大幅降低重名的概率：

// 在主入口（html）中：
var vue_data = {
    // 商品分类
    shop: {
        a: 111
    },
    // 商品详情
    detail: {
        a: 111
    }
}

使用时：

// 1.html
console.log(vue_data.shop.a) // 111
vue_data.shop.a = 222

// 2.html
console.log(vue_data.shop.a) // 222
vue_data.shop.a = 333

//再回到1.html
console.log(vue_data.shop.a) // 333

使用这种方式缺点也很明显：因为你无法确定哪里更改了数据源，所以出问题时，你得挨个查找。