在web开发的过程中,我们会需要用到很多大大小小的插件,比如文本框,下拉树,下拉框等等各种各样的都需要。或许在开发的网页中会用到同一种插件来满足各种各样复杂的业务逻辑,比如简单的一个下拉树,有的地方需要进行拖拽排序,有的地方需要能够进行模糊搜索,有的地方需要权限控制等等。如果仅仅一次被使用到,那么我们在使用的时候,写一个满足需求的插件就可以了。但是当许多地方需要用到时候,你就会发现自己会不停去复制曾经写过的部分代码,随着越用越频繁,复制的量也会越来越大。当其中的一处代码出现bug时,所有复制过该处代码的地方都需要进行同样的维护。本人是坚决抵制复制代码的,这也绝对是代码界的大忌,当我们需要复制代码的时候,我们更需要做的就是深入的思考。比如搭建一个可以不断扩展的结构,那么同一类的控件就会有一套结构,慢慢不断积累,丰富多样的控件组合到了一起所形成的可扩展框架就统称为UI框架,比较常见的有JQuery官方的JQueryUI,另外也有smartUI,easyUI,ExtJs等等。鉴于此,随着使用的插件不对增多,慢慢地我们自己也会希望能够写一套框架来与这些大框架进行较量。

那么组成框架地重要元素必然是一个个独立地插件,当我们在写一个插件时,要怎样才能让它的扩展性能够满足几乎所有地业务逻辑呢?这是一个十分值得思考的问题。

最近,接触到了一个很优秀的下拉树控件zTree,不得不说真的十分优秀。第一次拿来使用,10分钟便可熟悉所有的API,灵活应用。无论是性能,交互还是扩展性,几乎无可挑剔。我曾2次遍历过其中的所有代码,从中受益匪浅,同时也渐渐养成了自己写扩展性插件的一个习惯,当然肯定还有很多不足的地方,毕竟自己的框架写给自己用,用起来不爽就绝对存在不足的地方。下面就来和大家一起探讨下到底有哪些值得我们学习的地方吧:

  1. 规范的API接口函数和属性配置。
    大大降低了API使用的学习成本。比如所有事件类函数统一on开头,每种事件都有对应的onBefore(事件发生前),on(事件发生时),onAfter(事件发生后)三种。属性配置也有一定命名规范,is开头表示“是否是”,has开头表示“是否有/存在”等等。
  2. 有意义的传参与返回值。
    这点也很重要,许多人写js的函数时,喜欢一个函数写到底,没有返回值也没有参数传递,其实这是比较糟糕的。曾经我也不以为然,后来发现其实这样的一个function和把代码写在调用function的地方几乎没有什么差别,唯一的区别顶多就是看着清爽了或者可以被继承下扩展什么的。实际上这样的function,在被不熟悉这段代码的人来使用是很不爽的。多一个有意义的返回值,比如Boolean类型,返回这个函数操作是否有成功执行等等;多几个参数传递进函数,这样才能感觉到这个函数是真的在处理一些特定的数据,而传递的参数也可以让我们更快的理解这个函数做了怎么样的数据处理。
  3. 错误的英文单词。
    俩字:“杜绝”。(每个coder都是艺术家,我们不容许有瑕疵)
  4. 区分private和public。开放出来的API函数最好都相对集中地写在一起,而私有地一些方法地命名尽量区分开来,比如前面加“下划线”等。
  5. 精简的注释。注释不是写给自己看的,一个产品地代码有80%地可能,开发者和维护者不是同一个人,为了降低成本,作为开发者我们需要给维护者一个可维护地环境。就是在需要地地方给予有效地注释。大大增强可读性。
  6. css的规范使用。
    很多人都忽视css,覆盖和权重问题经常让我们无法得到自己想要的效果。很多时候,觉得只要当前的页面看的过去就认为css没有问题,确实如此。但是写框架类的插件就不能够这样去思考问题,css也会污染全局,仅仅通过特有的类名是不够的。比较好的方法,就是比如我们写一个下拉树控件,下拉树有个基础类是fr-combotree。那么我们所有下拉树的css都统一用.fr-combotree开头,然后一层层向下选择。这样就可以有效的避免互相影响。
  7. 时间复杂度。
    最大只能O(n²),尽量优化成O(n)或者O(logn),超过肯定有问题。
  8. API文档。
    十分重要,任何一个优秀框架的必备品。当我们大致写完一个粗糙的框架后,我们就会希望有一份较为完美的doc文档,方便查阅。推荐ExtJs的JsDuck。
  9. IE兼容。
    框架的兼容性是很多企业级应用开发所选择的重要依据。
  10. 性能优化。
    web端的性能也是需要重视的,不然会严重影响到用户体验。可参考:http://115.29.194.184/?p=311

下面针对IE6及IE6以上的兼容的注意点做一些总结:

  1. css不要使用伪类。只有a标签可以使用:hover,:link,:active,:visited。
  2. 使用动画效果务必考虑兼容问题。slideDown slideUp fadeIn fadeOut可以考虑使用。
  3. new Date函数,只能使用 new Date(年,月,日,时,分,秒)或new Date(毫秒)
  4. 不要使用String[index]方法,应该使用 String.charAt(index)
  5. $(‘<form/>’)的写法改为$(‘<form></form>’)
  6. .text()和.html()的区别使用,不要取DOM的text或者html来给控件赋值,因为text()会合并空格,不准确。
  7. IE6下字过长显示省略号overflow必须和width连用,可参考:http://115.29.194.184/?p=107
  8. display: inline-block IE8,有些可以采用display: inline和zoom:1解决
  9. 图片透明问题。可参考http://115.29.194.184/?p=98
  10. 只能使用HTML3.2及其以下的实体字符

转载于:https://www.cnblogs.com/littlehb/p/3866470.html

不断学习UI框架的写法相关推荐

  1. 解决mintUI的swipe组件图片显示不了并延伸学习到了学习ui框架的方法

    最近想写一个移动端的前端vue项目,mint-UI是比较符合的前端框,我本来准备用它的轮播图组件swiper,但是觉得官网上描述的太模糊的,然后搜搜搜,看了一个视频,上面说可以去github官网上搜索 ...

  2. Android 需要学习的UI框架

    Android需要了解学习的UI框架等 UI Awesome-MaterialDesign - MaterialDesignCenter改名为Awesome-MaterialDesign,优化了布局, ...

  3. 手把手学习Android的 Facebook Litho UI框架---(一)入门篇

    1.什么是Litho? Litho是Facebook推出的一套高效构建Android UI 的声明式框架,主要 目的是提升RecyclerView复杂列表的滑动性能和降低内存的使用. Litho是一套 ...

  4. 【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui

    看了下饿了么团队开发的PC端vue ui框架Element ui之后,顺便看了看同团队开发的移动端的vue ui框架mint ui,那么在vue项目中应该如何使用mint ui呢?以下做简单的记录. ...

  5. 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element

    看了下iView之后,顺便看了看同样基于vuejs的ui框架Element,那么在vue项目中应该如何使用Element呢?以下做简单的记录. 官网定义:Element,一套为开发者.设计师和产品经理 ...

  6. 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架iview

    今晚看了一下基于vuejs的ui框架iview,感觉UI挺好看的,那么在vue项目中应该如何使用iview呢?以下做简单的记录. 首先安装iview: $ npm install iview --sa ...

  7. vue3使用的移动端UI框架,vue一般用什么ui框架

    用vue 一般都配合什么 UI 框架 vue只是一个js库,不算框架,他不限制你使用使用UI框架,理论上你可以使用任意UI框架. 常见的vue的UI框架有:elementUI(饿了么的UI框架),Vu ...

  8. 告别XML,Android新声明式UI框架《Jetpack Compose入门到精通》最全开发指南

    什么是Jetpack Compose? Jetpack Compose是Android的新声明式UI框架.长期以来, Android 开发人员习惯于使用带有状态视图的xml编写UI,这些状态视图通过逐 ...

  9. UI框架 Vant、ElementUI、WeUI、AUI、LayUI

    UI框架有很多,比如微信官方为公众号开发提供的WeUI.适合后端程序员使用的Layui等.UI框架一般只是给前端狗写静态页面提供方便. 这类框架一般提供css和js文件,使用时引入css和js文件,然 ...

最新文章

  1. linux mysql jdk路径_教大家在如何Centos7系统中安装JDK、Tomcat、Mysql(文末附马哥linux全套视频教......
  2. inner join
  3. 如何证明你的性能测试结果可信?
  4. 用GAN创造新蛋白只需几周,大幅缩短制药周期 | Nature子刊
  5. html怎么让方块自动旋转,纯CSS3做的的3D旋转方块
  6. 13-11-27新的一天
  7. Linux下动态共享库加载及使用详解
  8. ASP.NET MVC3 中整合 NHibernate3.3、Spring.NET2.0 使用AOP执行事务处理
  9. 如何把自己写的python程序给别人用
  10. “酸碱体质理论”是个骗局
  11. Oracle EBS系统维护工具
  12. 二氧化硅微球包埋羧甲基壳聚糖稀土镧离子/二氧化钛和十六烷基胺/草莓形PVAc/SiO2纳米复合微球性能
  13. 一款智能家居APP的雏形
  14. 广告行业计费模式专业术语
  15. 工业和信息化部全国信息技术水平考试
  16. 全球与中国PMN-PT单晶市场深度研究分析报告
  17. 【已解决】adb connect x.x.x.x:5555报错由于 目标计算机积极拒绝,无法连接
  18. 骨干网络演化释义以及TCP BBR的部署环境问题
  19. 【荐】联通域名纠错 联通域名DNS劫持 您输入的域名有误或站点访问失败
  20. 与dB相关的参数(B/dB/dBW/dBm/dBV/dBu)

热门文章

  1. ajax代码 java,AJAX - java代码库 - 云代码
  2. 鼠标右键转圈圈_win10系统右键一直转圈
  3. 【linux】【firewalld】防火墙设置
  4. 技术系统进化法则是_技术系统进化法则
  5. c语言学指针变量,C语言指针变量学习五
  6. ios view 切上部分圆角_ios – 具有圆角的UIView:如何正确剪辑子视图?
  7. eclipse占用内存过大_MySQL 服务占用cpu 100%,如何排查问题? (MySQL面试第七弹)...
  8. linux 下orapwd 未找到命令,关于orapwd命令entries参数的探究
  9. java 4字节字符_java 替换四个字节的字符 '\xF0\x9F\x98\x84\xF0\x9F)的解决方案
  10. why在重写equals时还必须重写hashcode方法