草庐IT

Blazor与Vue标签代码的可维护性对比

0611163 2023-03-28 原文

通过一个简单示例来进行对比，
Vue的ElementUI组件的行内编辑：

Blazor的AntDesginBlazor组件的行内编辑：

区别：

  1. el-table-column的label属性相当于Column的Title属性，这个是没有区别的
  2. 多了一个scope="scope"，在ElementUI里，会有scope="scope"和slot-scope="scope"这种属性，具体要看文档才知道是干什么用的，这一点上，Blazor没有这个，不需要看文档
  3. :prop="'tableData.' + scope.$index + '.name'"相当于editCache[data.Id]，很显然editCache[data.Id]简捷的多，而前者，双引号字符串里套单引号字符串，'tableData.' + scope.$index + '.name'是一个表达式，但是，它也是一个字符串，字符串是最难维护的！
  4. <span>{{ scope.row.name }}</span>对比@data.Name，@data.Name也可以写成<span>@data.Name<span>，这个也是差不多的
  5. v-model相当于@bind-Value，都有代码提示，差不多的
  6. scope.row.name对比editCache[data.Id].data.Name，.row相当于[data.Id]，这个是差不多的
  7. v-model="scope.row.name"对比@bind-Value="editCache[data.Id].data.Name"，代码提示方面，前者name和后者Name都可以点的出来，这个提示都是有的，但鼠标移到Name上有数据类型、所属实体类以及注释提示，前者是没有这么丰富的提示的，不知道TypeScript的提示怎么样，估计应该有类型提示，不知道有没有注释提示
  8. :rules="rules.name"，这里的rules要在data里定义

    而Blazor是不需要这一行的，AntDesignBlazor的验证在实体类的属性上定义一个标签就可以了，剩下的数据校验工作由组件自动完成
    这方面也是差不多的
[Required(ErrorMessage = "必填")]
public string Name { get; set; }
  1. placeholder属性也是一样的，Input标签也有这个属性
  2. ElementUI的标签代码是由标签、属性和字符串组成，AntDesignBlazor的标签代码，除了标签、属性外，混合了@if这种Blazor语法，是可以写C#代码的，而前者有两种实现方式，一种是双大括号里可以写js，一种就是第3点提到的字符串表达式。这一点上，个人认为Blazor的代码看起来是更清爽的，不知道react能否达到这样的效果
  3. 前者8行代码后者有大括号独占一行是10行代码，Blazor的代码行数要多一点

综上，ElementUI难以维护的地方体现在第2、3、7、10这几点，它的标签代码字符数更多，引号更多，比如我写过的:

里面有三种引号！这个语法，不百度，不抄文档，不知道会vue的小伙伴能否手写出来，学会了长时间不用会不会生疏？而Blazor一般是这样写的：

Style=@()，这个括号里就可以写C#表达式了，它还可以写方法：


你们觉得这个C#的方法里，能不能查询数据库？我猜可以！
Vue的模板标签代码，除了维护标签和属性，你维护的是字符串，这个字符串好不好维护，取决于你安装的插件，比如VSCode安装Vetur插件，Blazor的标签代码，除了维护标签和属性，你维护的是C#，不知道Vue+TypeScript比C#如何？
在用AntDesginBlazor时，组件的用法，组件有哪些属性，需要看文档示例和文档中的API说明，Blazor本身的语法不多，C#语法.net程序员一般都会。
在使用ElementUI时，组件的用法，组件有哪些属性，需要看文档示例和文档中的API说明，Vue的语法需要掌握，js的语法一般前端都会。
Blazor只需要一个工程。Vue前后端分离需要两个工程、两种开发工具、前端语言和后端语言。
TypeScript+Vue或TypeScript+React，是不是会比js+Vue或js+React好维护一点？
我觉得Blazor非常优秀，值得学习、使用，如果熟练掌握，以及有一套完备优秀的开源组件比如AntDesginBlazor，再加上自己积累的使用Blazor的项目代码，一定会有很高的工作效率，和优秀的代码可维护性，你们觉得呢？这里只讲了Vue和Blazor的标签代码对比一个方面，Blazor其它的优点这篇博客就不讲了。

BlazorVue174862C#.NET技术

有关Blazor与Vue标签代码的可维护性对比的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  3. ruby-on-rails - Rails 源代码 : initialize hash in a weird way? - 2

    在rails源中:https://github.com/rails/rails/blob/master/activesupport/lib/active_support/lazy_load_hooks.rb可以看到以下内容@load_hooks=Hash.new{|h,k|h[k]=[]}在IRB中，它只是初始化一个空哈希。和做有什么区别@load_hooks=Hash.new 最佳答案 查看rubydocumentationforHashnew→new_hashclicktotogglesourcenew(obj)→new_has

  4. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码，尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么？

  5. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru

  6. ruby - 模块嵌套代码风格偏好 - 2

    我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个，因为它显然有一个缺点？我有一种直觉，它可能与性能有关，因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是，据我所知，没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别，可能也是最著名的，是你的

  7. ruby - 寻找通过阅读代码确定编程语言的ruby gem？ - 2

    几个月前，我读了一篇关于ruby​​gem的博客文章，它可以通过阅读代码本身来确定编程语言。对于我的生活，我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗？ 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem？，我们在StackOverflow上找到一个类似的问题：

  8. ruby - Net::HTTP 获取源代码和状态 - 2

    我目前正在使用以下方法获取页面的源代码:Net::HTTP.get(URI.parse(page.url))我还想获取HTTP状态，而无需发出第二个请求。有没有办法用另一种方法做到这一点？我一直在查看文档，但似乎找不到我要找的东西。 最佳答案 在我看来，除非您需要一些真正的低级访问或控制，否则最好使用Ruby的内置Open::URI模块:require'open-uri'io=open('http://www.example.org/')#=>#body=io.read[0,50]#=>"["200","OK"]io.base_ur

  9. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  10. 程序员如何提高代码能力？ - 2

    前言作为一名程序员，自己的本质工作就是做程序开发，那么程序开发的时候最直接的体现就是代码，检验一个程序员技术水平的一个核心环节就是开发时候的代码能力。众所周知，程序开发的水平提升是一个循序渐进的过程，每一位程序员都是从“菜鸟”变成“大神”的，所以程序员在程序开发过程中的代码能力也是根据平时开发中的业务实践来积累和提升的。提高代码能力核心要素程序员要想提高自身代码能力，尤其是新晋程序员的代码能力有很大的提升空间的时候，需要针对性的去提高自己的代码能力。提高代码能力其实有几个比较关键的点，只要把握住这些方面，就能很好的、快速的提高自己的一部分代码能力。1、多去阅读开源项目，如有机会可以亲自参与开源

随机推荐