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

Question

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

Answer 1

要做到这一点，就需要混合一些好的模式，并知道哪些战斗是不需要战斗的。

如果将

1. CSS考虑在内，效率更高，格式更干净，那么它是最好的。在这里没有过度思考的必要，CSS是一种美丽的语言，我喜欢保持它简单。例如，请参见我在这里的回答：MVC 3, CSS, Razor and Visual Studio 2010
2. Javascript绝对可以通过使用某种基于对象的模式：http://www.klauskomenda.com/code/javascript-programming-patterns/来组织。我使用的东西接近“自定义对象”从该链接。使用YUI，我们已经构建了名称空间，使用jQuery，我们可以添加它们：Is it possible to create a namespace in jQuery?。至于分离内容，将对象和相关功能分离到它们自己的javascript文件中，并将它们包含在需要它们的页面中。为了进行优化，您可以将任何页面上的所有脚本向下编译成一个脚本。YUI 3有一个很好的依赖加载机制--使用该机制。对于Javascript loaders with jQuery
3. As，您可以使用许多依赖加载器之一: jQuery作为HTML，我认为MVC是当今最流行的模式。使用任何现代mvc框架都会为您提供更好的服务。(例如rails，任何java的，asp.net mvc，幽门等)

Answer 2

目前，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 (这是一个很好的开端，因为它有许多内置的OOP特性，如名称空间、继承、多态性……)来实现这种模块化。