jquery方法替代eval函数 vue替代jquery

一直都有个想法，用vue取代掉项目中的Jquery套餐。

最近这个想法实现了，效果还不错。

所以来给大家安利一波。

先给大家看一波更换前更换后的对比

• jquery套餐代码

这样的

还有这样的

• Vue代码

这样的

还有这样的

• 对比

可以看到很明显的区别：

1. 可读性提高
2. 可维护性提高
3. 编码速度提高

可能大家会对我有这几个结论有异议，第一个可读性这一点，你可能会觉得这是开发者自身的原因，如果他严格按照代码规范来写就不会这样了，但我觉得不是每个人都会有这种想法的，更多的是拿到需求就开干，真的是代码就是一梭子撸。而这时候有vue这种框架就可以约束一下开发者了。对于第二点，可读性提高了，可维护性当然也就相应的提高了。第三点，这一点估计有人会有反对的声音了，但我是坚定的认为，vue开发比jquery开发在速度上是要胜过的。为什么呢，首先，jquery需要获取dom，就这一点，vue就甩开了jquery了，其他的就不多说了，其次在渲染速度上，vue依然是优于jquery的，vue利用虚拟dom技术一次性计算出改变的地方进行渲染，而jquery是每次改变都渲染，这就导致性能会下降了。

如果大家同意并且也想要用vue进行开发了，那咱们继续（前提是大家都已看过vue的文档并且有过实践了）：

• 修改smarty分界符

当然你也可能用的是别的模板引擎，但都一样，修改掉他们的分界符，保持不与vue的分界冲突（你也可以选择修改vue的分界符）。

我是这样修改的：

$this->smarty->left_delimiter = '{-';
 $this->smarty->right_delimiter = '-}';

• 引入vue文件

• 进行开发

走到这，你就已经可以进行开发了。

• 缺点

由于我们是直接引入的vue文件，并没有使用上前端开发工具（webpack之类的），所以我们很难进行组件化开发，但总会有办法的。

• 组件化开发

我们知道，vue组件需要一个html模板，而vue支持多种模板。其中就有

type="text/x-template"

这个我们可以利用起来。

同时，由于smarty需要解析特定的文件类型，所以我们可以创建一个单文件只写

<script type="text/x-template" id="store">
    <div class="core-box">
        <el-row :gutter="20">
            <el-col :span="4">
                <div class="grid-content">
                    <router-link to="/store/almost">总体库存</router-link>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content">
                    <router-link to="/store/dull">呆滞库存</router-link>
                </div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <keep-alive>
                    <router-view></router-view>
                </keep-alive>
            </el-col>
        </el-row>
    </div>
</script>

然后在Index页面中引入该文件

这样就可以在js文件中使用vue的语法引入了

//核心目标
var Core = {
    template:'#core'
}

这样就是一个组件了。

• 总结

从jquery替换成vue后，开发速度，维护性，复用性都大大提高了。

但唯一的缺点可能是你还没开始学习如何使用vue。