The vuedemo from casey-ckx

修改意见

看了你的运行效果，很棒啊！质量很高！运行上没什么问题，接下来我来看看你的代码上有什么问题：

git 问题

嗯，我建议直接把你的 vuedemo 文件夹里的内容全部提到 git 的根目录来(就是和 readme.md 同级)，比较符合直觉。

标签问题

你好像不小心把 <script> 标签放在了 <body> 标签的后面了？
类名不要大写 .Calculator
<link> 标签默认情况不需要带 type
类的命名使用 - 来分割单词，不要使用 _

css 问题

我发现了一些很细节的问题哈哈哈哈，因为你比较厉害所以对你要求也比较高~

按钮应该给上一个 user-select:none，不然会可以选中按钮上的文字，顺便变成那种手指的图标吧~
你那个 0 按钮处理的不好，不要使用 nth-child(10) 来实现，因为你无法避免以后它不是第 10 个按钮。
正确的处理方式是你要给 0 多一个类。

&.zero{
    position: relative;
    width: 56%;
}

然后在 html 上这么处理：

<div :class="{zero:n==='0'}" v-for="n of number" @click="number1(n)">{{n}}</div>

溢出的内容，嘻嘻

重名问题

你在代码中的 inputnum 同时用于 data 和 methods ，这样很容易出问题。还有就是我看你代码的时候很难区分到底是是一个属性还是一个方法，这个用法是错误的，谨记

还是命名问题

你的很多明明是没有规范的，需要所有的 js 变量希望遵循 小写驼峰命名法，

~~Calculator_num1~~ -> calculatorNum1
~~inputtime~~ -> inputTime
~~inputnum~~ -> inputNum

inputnum 这个方法的名字，emmmm，我想了许久，也许改成 recordNumber 会不会更合适呢？

inputtime 逻辑

你的 inputtime 的用处我看懂了，其实你应该把它当成一个布尔值来处理会好一些。然后改名为 isInputtingSecondNumber 是不是好一些些呢？

inputnum:function(){
    if(!this.isInputtingSecondNumber){
        this.Calculator_num1=this.inuputnum;
    }else{
        this.Calculator_num2=this.inuputnum;
    }
    this.isInputtingSecondNumber = !this.isInputtingSecondNumber;
    this.inuputnum="0";
}

不要使用 eval

不得已的情况下不要使用 eval，你的使用方法没有错误，但是 eval 不安全。还是老老实实用 switch 进行判断会好一些~

删除前导0的方法

哈哈哈哈你的方法没有错啦，只是还可以再简单一些

parseFloat(012) // 12
parseFloat(012.12) // 12.12

业务逻辑错误

0 不能作为除数，需要报错
你可以同时按很多次小数点，需要处理

暂时就这些啦~改起来还是要花费一些时间的

casey-ckx / vuedemo Goto Github PK

vuedemo's People

Contributors

Watchers

vuedemo's Issues

修改意见

git 问题

标签问题

css 问题

重名问题

还是命名问题

inputtime 逻辑

不要使用 eval

删除前导0的方法

业务逻辑错误

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent