文档章节

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

馒头
 馒头
发布于 2015/12/02 23:10
字数 1164
阅读 2037
收藏 83
点赞 5
评论 10

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

引用来自“馒头”的评论

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

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

引用来自“馒头”的评论

用的jquery的事件监听

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

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

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

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

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

引用来自“馒头”的评论

用的jquery的事件监听

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

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

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

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

引用来自“馒头”的评论

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

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

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

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

phodal
01/09
0
0
前端开发-从入门到Offer

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

掘金官方
2017/12/28
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
【初探移动前端开发01】惊鸿一瞥

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

范大脚脚
2017/12/15
0
0
Node.js VS PHP:Web 开发的史诗级对决,你支持谁?

现在,Web开发公司和开发人员可以选择多种技术栈来构建Web应用程序。早期网络发展,不同的技术被用于前端和后端开发。但是,随着Node.js的发布,布局发生了变化,因为它允许开发人员使用 Ja...

uzv80px5v412ne
2017/12/29
0
0
前端每周清单第 50 期: AngularJS and Long Term Support, Web 安全二三论,React 与 Clean Code

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公...

王下邀月熊
02/06
0
0
前端每周清单第 45 期: Safari 支持 Service Worker, Parcel 完整教程, 2017 前端大事件

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公...

2017/12/25
0
0
前端每周清单第 35 期:Vue.js 2.5 发布、微前端概念详解、浏览器扩展开发实践

前端每周清单第 35 期:Vue.js 2.5 发布、微前端概念详解、浏览器扩展开发实践 前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程...

王下邀月熊
2017/10/16
0
0
Web 开发在 2015 年及未来的发展趋势

本文由伯乐在线 -Mxt 翻译。未经许可,禁止转载! 英文出处:shijuvar。欢迎加入翻译组。 本文中,我们将一同看看当今 Web 开发的发展趋势,给大家分享我对 2015 年及未来的一些看法、观察和...

伯乐在线
2014/10/07
0
0
AngularJS(一、我们为什么选择AngularJS)

在学习和使用AngularJS的过程中,一个这样的问题一直萦绕在我们心头:我们为什么选择AngularJS 首先我们来看一下官方的说明: AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一...

雪飘七月
2015/04/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周一乱弹 —— 如果是你喜欢的女同学找你借钱

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @guanglun :分享Michael Learns To Rock的单曲《Fairy Tale》 《Fairy Tale》- Michael Learns To Rock 手机党少年们想听歌,请使劲儿戳(这...

小小编辑
17分钟前
5
3
NNS域名系统之域名竞拍

0x00 前言 其实在官方文档中已经对域名竞拍的过程有详细的描述,感兴趣的可以移步http://doc.neons.name/zh_CN/latest/nns_protocol.html#id30 此处查阅。 我这里主要对轻钱包开发中会用到的...

暖冰
今天
0
0
32.filter表案例 nat表应用 (iptables)

10.15 iptables filter表案例 10.16/10.17/10.18 iptables nat表应用 10.15 iptables filter表案例: ~1. 写一个具体的iptables小案例,需求是把80端口、22端口、21 端口放行。但是,22端口我...

王鑫linux
今天
0
0
shell中的函数&shell中的数组&告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析

影夜Linux
今天
0
0
Linux网络基础、Linux防火墙

Linux网络基础 ip addr 命令 :查看网口信息 ifconfig命令:查看网口信息,要比ip addr更明了一些 centos 7默认没安装ifconfig命令,可以使用yum install -y net-tools命令来安装。 ifconfig...

李超小牛子
今天
1
0
[机器学习]回归--Decision Tree Regression

CART决策树又称分类回归树,当数据集的因变量为连续性数值时,该树算法就是一个回归树,可以用叶节点观察的均值作为预测值;当数据集的因变量为离散型数值时,该树算法就是一个分类树,可以很...

wangxuwei
昨天
1
0
Redis做分布式无锁CAS的问题

因为Redis本身是单线程的,具备原子性,所以可以用来做分布式无锁的操作,但会有一点小问题。 public interface OrderService { public String getOrderNo();} public class OrderRe...

算法之名
昨天
11
0
143. Reorder List - LeetCode

Question 143. Reorder List Solution 题目大意:给一个链表,将这个列表分成前后两部分,后半部分反转,再将这两分链表的节点交替连接成一个新的链表 思路 :先将链表分成前后两部分,将后部...

yysue
昨天
1
0
数据结构与算法1

第一个代码,描述一个被称为BankAccount的类,该类模拟了银行中的账户操作。程序建立了一个开户金额,显示金额,存款,取款并显示余额。 主要的知识点联系为类的含义,构造函数,公有和私有。...

沉迷于编程的小菜菜
昨天
1
0
从为什么别的队伍总比你的快说起

在机场候检排队的时候,大多数情况下,别的队伍都要比自己所在的队伍快,并常常懊悔当初怎么没去那个队。 其实,最快的队伍只能有一个,而排队之前并不知道那个队快。所以,如果有六个队伍你...

我是菜鸟我骄傲
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部