构建web应用前端方面的一点点心得
博客专区 > 馒头 的博客 > 博客详情
构建web应用前端方面的一点点心得
馒头 发表于2年前
构建web应用前端方面的一点点心得
  • 发表于 2年前
  • 阅读 2029
  • 收藏 83
  • 点赞 5
  • 评论 10

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 会切片的不只是前端,还有美工,前端工程师。构建前端的web应用,需要具备什么呢?浅谈下自己的心得~

首先做个自我介绍:馒头。做了大概有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)

 

 

共有 人打赏支持
馒头
粉丝 21
博文 6
码字总数 4256
作品 1
评论 (10)
要什么呢称
右侧的 设置面板的设置 与中间的动画实时互动 用的是什么库啊?
馒头

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

右侧的 设置面板的设置 与中间的动画实时互动 用的是什么库啊?
用的jquery的事件监听
要什么呢称

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

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

引用来自“馒头”的评论

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

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

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

引用来自“馒头”的评论

用的jquery的事件监听

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

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

引用来自“馒头”的评论

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

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

引用来自“馒头”的评论

用的jquery的事件监听

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

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

说得好,做的更好
AkataMoKa
我创建了“手机场景”,然后点击新出来的tab,没有反应?
用的是firefox 42
AkataMoKa
换Chrome就可以了
五杀联盟
666
爱兔一生
一直想做的东西,待我做个出来开源。13
笨蛋EGG
现在前端都转技术型了,这美术谁做,怎么能搞到这么漂亮的界面
×
馒头
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: