文档章节

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

馒头
 馒头
发布于 2015/12/02 23:10
字数 1164
阅读 2043
收藏 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)

 

 

© 著作权归作者所有

共有 人打赏支持
馒头

馒头

粉丝 22
博文 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的事件监听
要什么呢称
要什么呢称
右侧的 设置面板的设置 与中间的动画实时互动 用的是什么库啊?
当web前端架构方案遇上《金瓶梅》!?

首先声明,我不是标题党,你可以说我是老司机,但是这次绝对不会把你带沟里去,关于技术类的文章千篇一律,估计早就看烦了,不妨细细品味这篇文章,带你认识一个不一样的web前端世界,文章主...

馒头
2017/09/26
0
0
前端写一个月的原生 Android 是怎样一种体验?

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

phodal
2018/01/09
0
0
武汉活动 | 2015 Open Party 暑期Web专场

火热的夏天,总是会让人热血沸腾,与Open Party 2015暑期Web专场一起点燃你的热情!! 本期将迎来三位Speaker给我们带来不一样的干货。你是否正在做Web开发呢?你是否对Web开发有自己的见解呢...

jobthoughtworks
2015/08/04
524
0
【初探移动前端开发01】惊鸿一瞥

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

范大脚脚
2017/12/15
0
0
前端开发-从入门到Offer

解决你的前端面试 有时候前端的技术性面试还是很麻烦的,毕竟知识点那么多,框架迭代那么快。你不仅仅要对计算机科学基础有一个坚实的底子,还需要理解啥 Web 性能、构建系统以及 CSS 引擎等...

掘金官方
2017/12/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7重置密码、单用户模式、救援模式、ls命令、chmod命令

在工作当中如果我们错误的配置了文件使服务器不能正常启动或者忘记密码不能登录系统,如何解决这些问题呢?重装系统是可以实现的,但是往往不能轻易重装系统的,下面用忘记密码作为例子讲解如...

李超小牛子
今天
3
0
Python如何开发桌面应用程序?Python基础教程,第十三讲,图形界面

当使用桌面应用程序的时候,有没有那么一瞬间,想学习一下桌面应用程序开发?行业内专业的桌面应用程序开发一般是C++,C#来做,Java开发的也有,但是比较少。本节课会介绍Python的GUI(图形用...

程序员补给栈
今天
5
0
kafka在的使用

一、基本概念 介绍 Kafka是一个分布式的、可分区的、可复制的消息系统。它提供了普通消息系统的功能,但具有自己独特的设计。 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统...

狼王黄师傅
今天
3
0
Android JNI总结

0x01 JNI介绍 JNI是Java Native Interface的缩写,JNI不是Android专有的东西,它是从Java继承而来,但是在Android中,JNI的作用和重要性大大增强。 JNI在Android中起着连接Java和C/C++层的作...

天王盖地虎626
昨天
3
0
大数据教程(11.8)Hive1.2.2简介&初体验

上一篇文章分析了Hive1.2.2的安装,本节博主将分享Hive的体验&Hive服务端和客户端的使用方法。 一、Hive与hadoop直接的关系 Hive利用HDFS存储数据,利用MapReduce查询数据。 二、Hive与传统数...

em_aaron
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部