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有一个很好的依赖加载机制 - 使用它。对于jQuery，您可以使用众多依赖加载器之一：Javascript loaders with jQuery
3. 就HTML而言，我认为MVC是目前最流行的模式。使用任何现代的mvc框架都可以帮到你。 （例如rails，任何java，asp.net mvc，pylons等）

Answer 2

嗯，目前，网络开发有很多方法，没有标准的做事方式。

顺便说一句，由于JavaScript不支持某些OOP功能，如实际类或命名空间，但是原型设计，您需要知道这不是创建良好和大型模块化前端Web项目的良好开端。 / p>

虽然存在局限性，但您可以使用原型设计来利用某种伪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功能，如命名空间，继承，多态... ）。