前端开发总结

工作总结和经验教训

这个阶段主要完成云市场和后台运营系统的项目,在开发期间,遇到了很多问题,问题分为两种,一种是可以规避的问题,另一种是确实是问题的问题。我将对以下的问题做简单的总结。

1.页面样式布局

在还原云市场首页的页面,使用了百分比布局或者rem布局以及媒体查询的方式,但是最终换成了另外一种方式。以及公共样式,被更换了很多次,所以在刚开始的就需要定好页面的一些规则,而免去不必要的改动。还有要有意识的使用相对定位的方式,这样不会造成页面的样式混乱的效果。

2.使用hash及ejs模板

在项目刚开始,一个html页面包含多个页面的信息,使用display样式来控制,显得力不从心,以及点击刷新按钮,刷新之后的效果不是刷新之前的页面,而且页面比较多而混乱,特别容易出错,所以使用ejs模板加hash方法,避免上面的问题,页面层次清晰。

3.应用上架中页面

在应用上架方面,碰到很多问题,有些问题是可以避免的,一开始没有考虑到用ejs模板和hash来实现,整个应用上下架使用的tab切换的方式,这实现逻辑繁琐,页面看起来混乱,自己也不能保证自己能读懂自己的代码,所以费了很大功夫,把应用上下架改成用hash和ejs模板的形式,整体页面清晰可观了,但是问题又来了,tab切换的方式逻辑跟hash方式实现不同,得考虑几个问题了,第一个问题,页面之间连接起来的;第二问题,数据怎么带到下个页面;第三个问题,每个页面的上下步逻辑都一样只是请求接口地址不一样,怎么写复用性代码;第四个问题,怎样根据上架不同逻辑调用不同的模板;在处理以上的问题有很多种方法,我的实现方式可能想的复杂了,这几个页面公用一个hash,使用函数调用的形式,根据一个沙箱模式中的全局变量,调取所需要的ejs模板引擎,每个页面都是一个函数的调用。

4.多种富文框使用中遇到的问题

尝试了使用多个富文框,从ckeditor,wangeditor,到ueditor的使用,要求富文框有上传图片的功能,ckeditor富文框功能还是比较强大,刚开始接触,使用起来还比较生疏,在上传图片那块,可以上传图片,上传图片成功需要插入到编译器中没有实现,暂且先把这个编译器搁置一段时间,等哪次再拿出研究研究,使用wangeditor比较简单,在使用中也没任何问题,考虑到了之后浏览器的兼容性问题,功能也比较单一,使用了ueditor,在小伙伴的推荐下使用了ueditor,刚开始也遇到了上传图片的问题。

5.上传图片

实现上传图片的功能上,遇到一些问题,比如不能上传相同图片,IE上上传图片错位的问题,在input的file对象会保存上传图片的信息,在每次使用上传图片之前或者之后,把file文件对象的信息删除,但是这个文件是只读,不能对它进行删除处理,有两种方式进行解决,第一种,删除input节点,第二种,改变input中的type。IE上传图片的问题,IE浏览器的input的上传文件弹出的对话框会阻塞js代码执行,改变change事件和click事件的执行位置就解决了。

6.分页插件

项目中一些地方需要使用分页,在与小伙伴协作开发项目的时候,分页存在很多分歧的地方,刚开始分了两个分页的插件,这两个插件都是会请求两遍数据,我选择分页插件,功能比较齐全,小伙伴的分页灵活性比较高,对于尝试心态,选择了小伙伴的分页插件,但是还需要解决请求两遍数据的问题。从现在来分析这个问题,产生请求两遍数据的原因,是因为在进行分页初始化之前,需要传递一些参数,这些参数需要向后台请求数据得到的,拿到数据之后,分页会进行初始化,在初始化时候,分页又会去请求一遍数据。分析了这个情况之后,同时也发现,分页初始化请求后台数据是根据具体的页数去请求数据,第一请求数据的时候并没有具体的页数;所以根据是否有具体页数是否进行初始化。然而,在第一次进入页面的时候,还是会请求两遍数据,我还需要在分页初始化请求数据的时候,进行判断,怎么进行判断,我将给出了一个开关控制器,控制了请求数据的次数。

7.销售规格页面根据数据动态生成表格

在销售规格页面按周期中,动态生成表格的逻辑方面的算法,在小伙伴的帮助下,解决了动态生成表格产生不正确的表格数据,他是在数组基础,使用了对象的方式解决,首先,根据数组产生相应的表格,再根据对象把数据添加到表格中。

8.在IE浏览器下各种bug

在IE浏览器下,select下拉框的默认样式与Google样式不一样,需要统一样式,首先要把默认样式隐藏,有两种方式解决,第一种,用背景图片;第二种,使用字体图标的方式;在input框中,按下enter键的处理,它会寻找页面第一个按钮进行click事件,我增加了一个button按钮,防止IE浏览器中input的enter事件;

在今后的工作中,我需要不断的学习,js基础方面需要加强,不断优化代码,多与同事们沟通和讨论,会得到不一样的东西,多分析和多画图,要懂得业务流程,一念之间,可以让问题变得简单也可以变得很复杂。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,612评论 5 471
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,345评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,625评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,022评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,974评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,227评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,688评论 3 392
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,358评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,490评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,402评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,446评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,126评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,721评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,802评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,013评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,504评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,080评论 2 341

推荐阅读更多精彩内容

  • 前言 暑假我在学校学习了一个月的时间 ,在这一个月期间我学习了关于安卓移动前端开发的一些简单的知识。之前我对安卓移...
    W_Nicotine阅读 11,548评论 1 10
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,285评论 25 707
  • “有两样东西,我对它们的思考越是深沉和持久,他们在我心灵中唤起的赞叹和敬畏就会越来越历久弥新,一是我们头顶浩瀚灿烂...
    greycity阅读 3,666评论 2 2
  • 幸好我还有我的姐姐,关心我,即使是吵架了,还是会关心我。 幸好找到了一个暑假打工的地方,并且这里的人都不错,让我有...
    惬意喵阅读 93评论 0 1
  • 应用:遥感图像分割 基本思想:稀疏由于用的是1范数,所以用了最有效的少量样本来表示一个样本点,为“竞争”关系;协同...
    隐岩阅读 380评论 0 1