Web App开发中会面临越来越“重”的问题,如果在开始阶段没有规划好,后续在添加功能时就会变得极其麻烦,同时不同功能之间可能会冲突。这些问题可以通过模块化来解决,那么如何做一个模块化可扩展的Web App呢?后端模块化是很好实现的,前端的模块化则涉及到HTML、CSS、JavaScript三部分的模块化。本专题从开发流程来探讨模块化Web App开发的最佳实践,让大家以后在制作Web App时少走弯路。

头条推荐

高效重构:Web App模块化的原则

说起模块化,也许我们首先想到的是编程中的模块设计,以功能块为单位进行程序设计,最后通过模块的选择和组合构成最终产品。把这种思想运用到页面构建中,也已经不是什么新鲜事。相信很大一部分页面构建工程师都经历了这样几个阶段:第一阶段是在一个css文件中把多个页面按自己的习惯顺序从上往下编写 样式,基本不考虑有无公用样式,以完成设计呈现为首要目的;第二阶段是提取不同页面中的通用样式,如公用颜色、图标、按钮等,实现一些基本元素的复用;第 三阶段是提取公用功能模块,如导航、版权信息等,实现部分公用模块的复用。……>>详细

HTML模块化:使用HTML5 Boilerplate模板

开始一个Web项目,HTML的书写总是重中之重,一个好的HTML能从根源上规避大量潜在问题,所以Web App应该全部应用一个标准化的高质量HTML模板,而不是将所有页面交由开发人员自由发挥。

这里推荐使用HTML5 Boilerplate项目作为App的默认模板以及文件路径规范,无论是网站或者富UI的App,都可以采用这个模板作为起步。

可以使用

git clone git://github.com/h5bp/html5-boilerplate.git

或者直接下载HTML5 Boilerplate项目代码。HTML5 Boilerplate的文件结构如下:

阅读全文

10个超赞便利的HTML 5/CSS3框架推荐

所有的开发人员都应该注意了,你们绝对应该看看这篇文章,帮助你快速创建HTML5/CSS3的开发框架。可能你也看到过其它的框架,但是你应该看看这些框架,因为你以前可能没用过他们中的大部分。看看最新的实用HTML5和CSS3框架吧!希望你们喜欢!

1.HTML5boilerplate

H5BP带给你非常漂亮的文档,一个网站优化的编译脚本,还有一个自定义的boilerplate编译器。除此之外,我们还支持lighttd,Google App Engine和NodeJS以及优化的服务器配置(包括Apache,Nginx,和IIS),并且已经把boilerplate的大小减少了50%。

 

阅读全文

CSS模块化:Normalize.css和LESS

使用Normalize.css重置默认样式

CSS重置有助于根据所有设置的样式建立一个基准样式。样式重置有效重写了浏览器某些元素(在浏览器里有很大的不同)默认的样式。

尽管CSS resets在过去的几年里很受欢迎,但是,很多网站至今也没有使用,这些网站CSS的可扩展性因css resets会有很大的困难。

大多数人推荐使用normalize.css重置默认样式,而不是使用由Eric Meyer写的非常流行的CSS Reset或者自己写的Reset。Normalize.css给所有浏览器的元素设置了一个共同的样式,而不是重置了这些元素的基本样式。可以参考github上normlize.css项目,它具有以下优点,不仅仅是CSS样式重置:

  • 不像其他CSS resets,normalize.css保存了有用的默认设置
  • 大范围的规范了HTML元素样式
  • 纠正了浏览器间的一些bug及不一样的表现形式
  • 精心的改进提高了可用性
  • 使用详细的注释解释了代码的作用

使用normalize.css替代一个标准的reset会使你编写正确的代码,在重新设置基本样式上节省大量的时间。

阅读全文

JavaScript模块化:使用requireJS按需加载

模块加载器的概念可能稍微接触过前端开发的童鞋都不会陌生,通过模块加载器可以有效的解决这些问题:

  1. JS文件的依赖关系。
  2. 通过异步加载优化script标签引起的阻塞问题
  3. 可以简单的以文件为单位将功能模块化并实现复用

主流的JS模块加载器有requireJSSeaJS等,加载器之间可能会因为遵循的规范不同有微妙的差别,从纯用户的角度出发,之所以选requireJS而不是SeaJS主要是因为:

  • 功能实现上两者相差无几,没有明显的性能差异或重大问题。
  • 文档丰富程度上,requireJS远远好于SeaJS,就拿最简单的加载jQuery和jQuery插件这回事,虽然两者的实现方法相差无几, 但requireJS就有可以直接拿来用的Demo,SeaJS还要读文档自己慢慢折腾。一些问题的解决上,requireJS为关键词也更容易找到答 案。

 

requireJS 加载jQuery + jQuery插件

可能对于一般Web App来说,引入jQuery及相关插件的概率是最大的,requireJS也亲切的给出了相应的解决方案及动态加载jQuery及插件的文档及实例代码

阅读全文

使用JS模板引擎、面向对象以及示例代码

数据载入后,最终都会以某种形式显示在页面上。简单情况,我们可能会这样做:

  1. $('body').append('<div>' + data.name + '</div>'); 

如果页面逻辑一旦复杂,比如需要有if判断或者多层循环时,这种连接字符串的方式就相形见绌了,而这也就催生出了JS模板引擎。

主流的JS模板引擎有underscore.jsJadeEJS等等,可以横向对比一下这些JS模板引擎的优缺点

对于相对简单的页面逻辑(只需要支持if和for/each)来说,我更倾向选用轻巧的underscore.js或者JavaScript Templates

阅读全文

前端模块化相关文章

前端模块化开发那点历史
不谈什么:传统的模块化开发方式,比如文件拆分、全局变量、命名空间,以及…
前端模块化开发的价值
随着互联网的飞速发展,前端开发越来越复杂。本文将从实际项目中遇到的问题…
前端模块化设计思路
页面模块化的实施思路是高度耦合的页面片段封装,模块布局作为公开接口,高…
网站前端模块化开发策略研究
随着网站前端功能日渐增多且更新频繁,前端开发技术受到越来越多公司的重视…

响应式Web开发的奇妙工具

响应式web设计的奇妙工具之
在您开始着手响应式站点的搭建之前,如果能拥有强有力的开发工具会让您的世…
响应式web设计的奇妙工具之
响应式图文的设计工具是响应式web设计的另一个关键组件。实现获取流体图像…
响应式web设计的奇妙工具之M
Media Query工具,估计现在您已经有了应对不同设备访问时页面布局的策略,…
响应式Web设计以及移动开发
响应式Web设计以及移动开发的模板工具:有效率的响应式设计的工作流的灵魂…
响应式web设计的奇妙工具之
下面我们将介绍响应式web设计的奇妙工具的插件及测试工具。尽管现在的浏览…

投    票

你会开发Web App应用吗?
不会
我要开发Hybrid混合应用

专题推荐

...麻烦,同时不同功能之间可能会冲突。这些问题可以通过模块化来解决,那么如何做一个模块化可扩展的Web A
Web App开发最佳实践:模块
...麻烦,同时不同功能之间可能会冲突。这些问题可以通过模块化来解决,那么如...
BaaS是Backend as a Service的简称,意为后端即服务,即为移动和Web应用提供后端云服务。这个概念起源于移
移动云服务BaaS:移动应用之
BaaS是Backend as a Service的简称,意为后端即服务,即为移动和Web应用提供后...
Web App的概念提出来已经有不短时间了,虽然目前Native App仍是主流,Hybrid App正在过渡,Web App的时代还
Web App开发初探
Web App的概念提出来已经有不短时间了,虽然目前Native App仍是主流,Hybrid Ap...
为了让移动设备也能用上jQuery,jQuery开发团队发布了jQuery移动设备版开发项目jQuery Mobile Project。jQu
jQuery Mobile基础入门教程
为了让移动设备也能用上jQuery,jQuery开发团队发布了jQuery移动设备版开发项目...

一周排行

留言评论