首页
站长论坛BBS
救助
投稿
discuz视频教程
discuz技术支持
版块
登录
快速注册

前端切图流程方法

冷蝶 2015-4-22 [DIVCSS] 来自PC 复制链接
13306
discuz使用视频教程
31idc

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
一个通常的前端开发工作,基本都是这样一个流程:

从产品和设计手中取得设计稿

写静态页面与前端交互,也就是俗称的切图

编写前端的JS交互特效

将静态页面交给后端人员套模板(最近还流行前后端分离,套模板也交给前端来搞,前端除了处理页面之外,还负责http请求层的开发,后端只负责数据接口开发,不管展现,但这个模式目前普及度还不高,因此咱们不讨论这个)

联调模板,写ajax交互

  还有比较流行的Webapp开发模式,开发、构建全部依赖框架,诸如angularjs、avalon之类的框架就不属于此次讨论的范围。咱们这次就说切图。

过去的模式分析我们前端在做静态页面时,经常面对的一个问题就是会有大量重复html代码,比如公共头部、公共页尾部分在每个页面都会包含,而且有的时候需要使用静态页面验证需求,在这种要求下,页面间的跳转也需要你自己写href,此时,如果你负责的项目比较大,页面比较多时,维护起来你会非常痛苦。当然,更可怕的还有巨多的css文件,js文件也需要有条理的维护。

过去的总结其实,对过去的前端开发模式总结一下,就是前端的模板不够“动态”。如果有一个办法可以让我们像后端套模板似的来去做前端静态页面,那前端肯定可以很好的去规划不同的业务模块,那么CSS/JS文件怎么去组织管理的问题,当然也迎刃而解啦。

我的切图方法介绍为了解决html巨多,css、js不好管理的情况,我引入了类似后端开发套模板的include机制,将公共页面部分提取出来,比如:header(整站公共导航)、footer(整站页尾)、styles(样式表)、scripts(脚本),然后在每一个页面中include公共页面,这样就很好维护了。

干货来啦!我将我整个的开发流程总结了一个grunt项目初始模板,大家可以在我的github上下载:https://github.com/lpgray/ray-grunt-template
使用 grunt-includesgruntjs想必搞前端的同学都很熟悉,这个我就不多介绍。我是使用的一个grunt插件,名字叫grunt-includes,这个插件可以将带有include的html页面转换成常规的html页面。

开发方式我的切图方式大致如下:

使用 livereload + watch 插件实现监控代码改变浏览器自动刷新

使用Less来组织css

JavaScript还是按常规模式来写(至于你想用coffee或者用commonjs来写,这都随便啦)

使用watch + includes来实现监控html改变,然后自动调用grunt-includes功能

让livereload的http server访问grunt-includes转化后的页面至此,你已经可以实现一个功能强大,类似后端动态include的前端切图模式!

代码构建如果需要前端交付压缩后的css和js,你也可以使用process-html来进行css、js的引用替换,让html页面都包含压缩后的代码。

以上这一套开发流程我github上的项目都已经包含了,大家有兴趣可以自己搞下来体会体会。



上一篇:简单的JavaScript组件化实现
下一篇:PHP会话处理相关函数介绍
洛阳app外包 发表于 2015-4-23 14:51:09 来自PC
支持学习
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表