Html /css/javascript项目模块化最佳实践

html/css/javascript project modularization best practices

本文关键字：最佳 模块化 项目 css javascript Html      更新时间：2023-09-26

与Java/c#/C/c++项目相比，我们经常看到的web前端项目(html/css/javascript)过于复杂，难以阅读和维护。那么，我们可以总结一些web前端项目的最佳实践吗?目标是可读性，模块化，易于维护。

要做到这一点，需要混合良好的模式，并知道什么是不打架的。

  1. CSS是最好的，如果它被分解，高效，和干净的格式。这里不需要过度思考，CSS是一门美丽的语言，我喜欢保持简单。例如，在这里看到我的答案:MVC 3, CSS, Razor和Visual Studio 2010
  2. Javascript绝对可以通过使用某种基于对象的模式来组织:http://www.klauskomenda.com/code/javascript-programming-patterns/。我从那个链接中使用了接近"自定义对象"的东西。使用YUI，我们已经内置了名称空间，使用jQuery，我们可以添加它们:在jQuery中创建名称空间有可能吗?就分离内容而言，在他们自己的javascript文件中分离对象和相关功能，并将它们包含在需要它们的页面上。为了优化，您可以将任何页面上的所有脚本编译成一个脚本。YUI 3有一个很棒的依赖加载机制——使用它吧。对于jQuery，你可以使用许多依赖加载器之一:jQuery的Javascript加载器
    3. 就HTML而言，我认为MVC是目前最流行的模式。使用任何现代mvc框架都可以很好地为您布局。(例如rails，任何java, asp.net mvc, pylons等)

目前，web开发有很多方法，没有标准的方法。

顺便说一下，由于JavaScript不支持一些OOP特性，比如实际的类或名称空间，但支持原型，因此您需要知道，对于创建优秀的大型模块化前端Web项目来说，这不是一个好的开始。

尽管存在限制，但您可以使用原型来利用某种伪oop设计。也就是说，您可以基于一些定义公共行为和可视化的抽象层次结构的继承来创建面向组件的用户界面。

记住任何现代开发中最重要的一点是重用和可伸缩性，我认为使用带有原型的伪oop应该可以避免不良实践，并加强可维护性、可读性和模块化。

例如，您可以用原型模拟命名空间。这是通过创建匿名对象实现的，其中其成员是充当getter(属性)的匿名函数，其返回类型是某些实际"类"的原型-还有其他方法可以实现相同的结果-:
  • http://www.codeproject.com/KB/scripting/jsnamespaces.aspx

或者您可以模拟多态性:

  • http://www.codeproject.com/KB/scripting/edujini_007_JavaScript_OO.aspx

我可以添加更多的参考，但我相信你明白了:这更像是尝试将实际的OOP方法导出到JavaScript中，并使用已经存在多年的相同设计模式!

另一点应该是，您可以通过扩展现有的JavaScript框架，如jQuery, Prototype, MooTools, Microsoft AJAX来实现这种模块化(这是一个良好的开始，因为它有许多内置的OOP特性，如名称空间，继承，多态性等)。

相关文章：