【问题标题】:html/css/javascript project modularization best practiceshtml/css/javascript 项目模块化最佳实践
【发布时间】:2011-04-16 08:32:11
【问题描述】:

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

【问题讨论】:

  • 下面有一些不错的cmets。我还想补充一点,“高性能网站”一书为前端开发提供了一些非常好的最佳实践知识——主要涉及性能技巧,但仍然值得一读。以为你会喜欢

标签: javascript html css


【解决方案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 等)

【讨论】:

    【解决方案2】:

    嗯,就目前而言,Web 开发有很多方法,并且没有标准的做事方式。

    顺便说一句,由于 JavaScript 不支持某些 OOP 特性,例如实际的类或命名空间,而是原型设计,因此您需要知道这不是创建好的大型模块化前端 Web 项目的良好开端。

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

    请记住,任何现代开发中最重要的一点是重用和可扩展性,我认为使用带有原型的伪 OOP 应该可以避免不良做法并加强可维护性、可读性和模块化。

    例如,您可以使用原型模拟命名空间。这是通过创建匿名对象来实现的,其中它们的成员是充当 getter(属性)的匿名函数,其中它们的返回类型是某些实际“类”的原型 - 还有其他方法可以实现相同的结果 - :

    或者你可以模拟多态性:

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-10-27
      • 2012-02-24
      • 2018-05-10
      • 2012-05-28
      • 1970-01-01
      相关资源
      最近更新 更多