文档章节

构建web应用前端方面的一点点心得

馒头
 馒头
发布于 2015/12/02 23:10
字数 1164
阅读 2042
收藏 83

首先做个自我介绍:馒头。做了大概有3年前端了。 现在一家公司担任前端负责人。平时喜欢研究一些技术,搞点设计什么的~

去年。利用业余时间做了一个HTML5的在线编辑器,就以这个编辑器为例子,谈谈对前端构建web应用的一点心得吧~

编辑器大致是这样的:通过一些拖拽,点击,完成一个HTML5手机页面的制作。

这里谈谈我大致的制作流程:

1、技术的选型。

类似这种web应用,技术的选型相当重要,关系到后面开发的时间,以及开发的难度。因为技术选型没选好而夭折的项目太多了。所以一定要慎重。这里考虑到项目的实际性质。我选择了jquery,然后就是HTML5,因为做了前后端的分离,至于后台用什么技术,我就不多谈了。之前有考虑angluarjs的,但是考虑到这个编辑器与服务器不是频繁的交互,用了等于累赘,还得处理其他隐藏的问题,于是就放弃了,因为JS代码会比较多,使用模块化工具是必须的,所以我选择了seajs。

2、前端开发环境搭建。

选择好了技术,那么开发一个自动化的环境是必不可少的,这里选择了grunt,因为css不是太多,而且就一个页面。这里就没用sass/less这类了。自动化主要处理一些JS模块化的合并等等。

3、面向对象的编程思维构建框架。

一切就绪,该写代码了?别急,这是很多程序员的通病 —— 急着写代码~ 咱们还没构建项目框架呢,仔细想想,这个项目里面能提取的类有哪些?玩过PS的人都知道,其实这个东西和PS有很多共同点,所以我借鉴了PS的一些东西。

类:页面,单页面,图层

属性:动画,功能,参数。

关系:页面包含单页面,单页面由多个图层组成,动画是图层的属性,功能是所有类的属性,参数是图层的属性。

好了,大的关系理清了。小的关系我这里就不多理了(我很懒)~ 

那就开始写代码。新建3个类,一层一层的继承成下去。因为功能比较特殊,所有类都涉及到功能。这里要对功能进行分类。

最好写一个单独JS来存放配置信息,这样,我们在修改参数的时候就不用到处去找。

当然,我们可以把一些常用的方法封装成插件,比如:(拖拽方法,滑块插件,拖动排序,弹窗插件,图片上传插件,自定义下拉选择框等)切记:能封装成插件的都封装成插件,这样在写代码的时候,我们可以专注在业务逻辑上,不因为那些非逻辑代码扰乱我们的思维~

4、写代码:从整体到局部。

写代码也是很有讲究的,我们先把框架的东西写好,然后把代码模块化,细节的东西可以先不写,但是命名一定要做好,但是我一般会写个console.log,如果你有下属,那么恭喜你,码砖的活儿就可以交给他们了~ 整体就算完成了。

然后就是码砖,码砖,码砖~ 重要的事情说三遍 ~

没有数据的话,可以自己造个~ 试着跑跑~ 没问题后,就和后台对接数据。前后端分离。这样效率也会高很多。我和朋友两个人,他做后台,我做前端+设计,利用工作的业余时间,用1个月时间完成了这套系统~ 

5、发布上线。

最后发布之前,记得合并JS哟,我一个人写,所以模块分的不是太细,大大小小也有30多个JS文件。如果直接用,要向服务器发送30多个请求,考虑到效率问题,用grunt对js进行了模块化合并,然后压缩瞬间小了很多。终于完成了,可以坐下来喝杯咖啡,欣赏自己的作品,一种成就感莫名涌上心头~

 

(附带线上的网址:h5ds.com)

 

 

© 著作权归作者所有

共有 人打赏支持
馒头

馒头

粉丝 23
博文 8
码字总数 7164
作品 1
成都
前端工程师
私信 提问
加载中

评论(10)

笨蛋EGG
笨蛋EGG
现在前端都转技术型了,这美术谁做,怎么能搞到这么漂亮的界面
爱兔一生
爱兔一生
一直想做的东西,待我做个出来开源。13
五杀联盟
五杀联盟
666
AkataMoKa
AkataMoKa
换Chrome就可以了
AkataMoKa
AkataMoKa
我创建了“手机场景”,然后点击新出来的tab,没有反应?
用的是firefox 42
金贞花
金贞花

引用来自“馒头”的评论

引用来自“要什么呢称”的评论

右侧的 设置面板的设置 与中间的动画实时互动 用的是什么库啊?

引用来自“馒头”的评论

用的jquery的事件监听

引用来自“要什么呢称”的评论

哦 这部分用 angluarjs 不好么?
angluarjs更适合平凡与数据库交互的应用,如果用了,一会增加代码的冗余(手机端无用的标签代码),二,因为这里的编辑内容是缓存到浏览器的,没有平凡和数据库交互,不是数据的双向绑定关系,用了会加大项目的开发难度,如果用,也只能用他的VV绑定功能,其实这里几路简单的方法就可以实现,不需要引入那么大个框架。

说得好,做的更好
馒头
馒头

引用来自“要什么呢称”的评论

右侧的 设置面板的设置 与中间的动画实时互动 用的是什么库啊?

引用来自“馒头”的评论

用的jquery的事件监听

引用来自“要什么呢称”的评论

哦 这部分用 angluarjs 不好么?
angluarjs更适合平凡与数据库交互的应用,如果用了,一会增加代码的冗余(手机端无用的标签代码),二,因为这里的编辑内容是缓存到浏览器的,没有平凡和数据库交互,不是数据的双向绑定关系,用了会加大项目的开发难度,如果用,也只能用他的VV绑定功能,其实这里几路简单的方法就可以实现,不需要引入那么大个框架。
要什么呢称
要什么呢称

引用来自“要什么呢称”的评论

右侧的 设置面板的设置 与中间的动画实时互动 用的是什么库啊?

引用来自“馒头”的评论

用的jquery的事件监听
哦 这部分用 angluarjs 不好么?
馒头
馒头

引用来自“要什么呢称”的评论

右侧的 设置面板的设置 与中间的动画实时互动 用的是什么库啊?
用的jquery的事件监听
要什么呢称
要什么呢称
右侧的 设置面板的设置 与中间的动画实时互动 用的是什么库啊?
前端写一个月的原生 Android 是怎样一种体验?

摘要:自从我写了 Android 应用后,上知乎的时间变得更长了。哦,不对,你理解错了,我的意思是:编译代码、打包 APK、运行在设备上需要时间。可不像前端,一保存代码,就自动刷新页面。是的...

phodal
01/09
0
0
【初探移动前端开发01】惊鸿一瞥

前言 上周五老夫(自称老夫是因为叶小钗已经100多岁啦,角色代入习惯了)吃坏了肚子啦,感觉也没吃什么东西就中暑了...... 纠其原因我觉得还是上周找工作太操劳了,太花费精力了,有一种情况...

范大脚脚
2017/12/15
0
0
论初级PHPer如何点亮技能树

论初级PHPer如何点亮技能树 PHP点点通2016-09-2650 阅读 前言 对于很多刚毕业或者大四的同学,都会有个困惑,我如何学PHP,为什么知识会那么杂,然后实习中公司大概需要哪些要求。此篇文章并未...

PHP点点通
2016/09/26
0
0
伯乐访谈:为什么程序员需要学习设计,而设计师需要了解开发?

本文作者:伯乐在线 -黄余粮 。未经作者许可,禁止转载! 欢迎加入伯乐在线专栏作者。 做了很多年的开发,但很少接触设计方面的东西。最近,因为各种需要,开始学习和了解设计(偏向于网页设...

伯乐在线
2014/04/24
0
0
高手问答第 177 期 —— iView 作者带来的 Vue.js 实战分享

OSCHINA 本期高手问答(11 月 15 日 - 11 月 21 日)我们请来了@aresn 为大家解答关于 Vue.js 实战方面的问题。 梁灏,网名 Aresn,基于 Vue.js 的高质量开源 UI 组件库 iView 的作者。目前在大...

局长
2017/11/14
3.9K
33

没有更多内容

加载失败,请刷新页面

加载更多

设计模式之单例模式

单例模式核心:保证一个类只有一个对象 单例模式分为五种:懒汉式、饿汉式、双重检测锁式、静态内部类式、枚举式 五种模式的特点:懒汉式---线程安全,调用效率高,不能延时加载 饿汉式---线...

森林之下
今天
2
0
markdown语法

这篇博客是本人在使用markdown语法过程中,用于记录一些自己总是会忘记的语法,并且会持续更新; 如何增加批注/备注:>; 这是一条备注/引言 如何手动换行,行末两次空格;

BlackCanary
今天
3
0
redis 设置外网可访问

前提是你已经把redis的端口放到了防火墙计划中,  /sbin/iptables -I INPUT -p tcp --dport 6379 -j ACCEPT /etc/rc.d/init.d/iptables save 更改redis.conf 文件 bind 127.0.0.1prot...

时刻在奔跑
今天
2
0
css3隐藏滚动条

chrome 和Safari .element::-webkit-scrollbar { width: 0 } IE 10+ .element { -ms-overflow-style: none; } Firefox .element { overflow: -moz-scrollbars-none; } firefox这个没试过~啦啦......

呵呵闯
今天
3
0
Poco官方PPT_020-ErrorHandlingAndDebugging双语对照翻译

因工作需要用到这一块的功能,所以直接翻译了一下 此PPT来源于官方文件,地址https://pocoproject.org/documentation.html

CHONGCHEN
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部