公司某项眼下端技术积累

news/2024/8/26 7:42:04 标签: javascript, 测试, ui

最佳实践

BootStrap + jquery + jquery插件 + sea.js/require.js + Grunt

Edit

前期技术选型

  1. BootStrap + Backbone.js + require.js + jquery插件
  2. ExtJS
  3. Angular.js
  4. BootStrap + jquery + jquery插件
前端技术选型总结：
  1. 之所以选择 BootStrap + jquery + jquery插件 的原因是由于ExtJS或Angular.js这样的大而全的MVC框架，学习成本较大，之前没有项目经验；
  2. 弃用require.js或sea.js（模块化工具）以及Grunt（自己主动化构建工具）的原因是接手项目时已经是二手项目，而且rails有js模块化工具和自己主动化构建工具

但假设后台web框架不提供模块化工具和自己主动化构建工具，就很有必要使用类似于sea.js、require.js这种模块化工具以及Grunt这种自己主动化构建工具

Edit

前端技术图示



备注：有些技术未用到

Edit

前端插件使用心得

Edit

图表

  • Echarts
    1. 综合评分：5星
    2. 易用性：4星
    3. 收费：否
    4. 使用心得：百度良心打造canvas图表库，能基本满足全部线上图表需求，演示样例多、主题丰富、线下询问方便，但有一些bug（不影响正常使用）
  • d3.js
    1. 综合评分：4星
    2. 易用性：3星
    3. 收费：否
    4. 使用心得：开源SVG图表库。在图表较为复杂时，能够使用d3来绘制。演示样例多。但易用性较差，本项目中未使用
  • HighCharts
    1. 综合评分：4星
    2. 易用性：4星
    3. 收费：是
    4. 使用心得：收费高。易用性高、未发现bug，图表丰富，本项目中未使用
Edit

表格控件

  • DateTables
    1. 综合评分：5星
    2. 易用性：5星
    3. 收费：否
    4. 使用心得：功能强大，有BootStrap风格样式，本项目中未使用
  • st-grid3.0
    1. 综合评分：4星
    2. 易用性：5星
    3. 收费：否
    4. 使用心得：公司内部组件。可扩展性高，灵活性大，但有些功能尚不完好，可自行扩展
Edit

时间控件

  • jquery datepicker
    1. 综合评分：5星
    2. 易用性：5星
    3. 收费：否
    4. 使用心得：可用于单天日期选择，API完好，能满足大部分需求，建议自行从该插件扩展功能，同一时候有BootStrap风格的皮肤。本项目中未使用
  • FullCalendar
    1. 综合评分：5星
    2. 易用性：5星
    3. 收费：否
    4. 使用心得：可用于日程安排，API完好，易用性高
  • DateRangePicker
    1. 综合评分：5星
    2. 易用性：5星
    3. 收费：否
    4. 使用心得：双日历时间控件，当然jquery datepicker也能够控制显示多个日历表，但本控件封装的较为完好，满足了较为复杂的需求
Edit

多选日历

  • KitJS多选日历
    1. 综合评分：3星
    2. 易用性：3星
    3. 收费：否
    4. 使用心得：在论坛中找到。感觉像是为了完毕演示样例一样的插件，如今作者不再维护。可扩展性差，在本项目中为完毕需求曾多次改动其源代码
  • jquery Kalendae
    1. 综合评分：未知
    2. 易用性：未知
    3. 收费：否
    4. 使用心得：将此插件找到后未使用，因为其为jquery插件，可扩展性会比上款多选日历的插件要好些（当然也仅仅是感觉），本项目中未使用
Edit

下拉菜单

  • select2
    1. 综合评分：5星
    2. 易用性：5星
    3. 收费：否
    4. 使用心得：可用于单选或多选，可依据keyword搜索，易用性高，API完好
Edit

对话框

  • st-pop
    1. 综合评分：5星
    2. 易用性：5星
    3. 收费：否
    4. 使用心得：公司内部对话框组件，灵活性高，可扩展性强，但样式方面可能须要使用者自行改动符合系统的风格
  • magnific-popup
    1. 综合评分：5星
    2. 易用性：5星
    3. 收费：否
    4. 使用心得：暗箱对话框。可用于展示图片、视频等。样式好看
Edit

树形控件

  • zTree
    1. 综合评分：5星
    2. 易用性：5星
    3. 收费：否
    4. 使用心得：API完好，易用性高，但一次性生成多个节点速度会比較慢，这也是生成大数据量的DOM节点时的弊病。本项目中未用到
Edit

及时编辑控件

  • Jeditable
    1. 综合评分：4星
    2. 易用性：4星
    3. 收费：否
    4. 使用心得：样式简洁，可所见即所得的编辑文字。可自行扩展样式
  • Editable for BootStrap
    1. 综合评分：4星
    2. 易用性：4星
    3. 收费：否
    4. 使用心得：并不是所见即所得的编辑文字。是有简单的小弹窗。个人感觉较为突兀。但其样式较为优美。功能丰富（可填写文字或下拉列表等）
Edit

css前端框架

  • BootStrap3.0
    1. 综合评分：5星
    2. 易用性：5星
    3. 收费：否
    4. 使用心得：css框架。样式丰富。同一时候有一些很好用的js插件
      同一时候推荐一些css框架：扁平化风格的 Flat UI （公司已购买），微软Metro风格的 Metro UI ，以及Google风格的 Google BootStrap
Edit

项目构建工具

  • Grunt
    1. 综合评分：5星
    2. 易用性：4星
    3. 收费：否
    4. 使用心得：自己主动化构建工具，可一键式压缩（minification）、编译、单元測试、linting。结束您重复的构建工作。
Edit

模块化

  • sea.js
  • require.js
    1. 综合评分：都是5星
    2. 易用性：都是5星
    3. 收费：否
    4. 使用心得：两个模块化工具，是两种不同的规范。sea.js是CMD规范，require.js是AMD规范。在本项目中未使用
Edit

js MVC 框架

  • Backbone.js
    1. 综合评分：4星
    2. 易用性：4星
    3. 收费：否
    4. 使用心得：学习方便，源代码仅有2000多行（带凝视）。很适用于移动版，个人感觉，Backbone尽管没有其它MVC框架那么强大。可是也因此更加灵活，个人感觉能够当做多人协作的代码规范工具，在项目中未使用
  • Angular.js
    1. 综合评分：未知
    2. 易用性：未知
    3. 收费：否
    4. 使用心得：在项目中仅仅是用到其上传文件的组件，Angular是Google开源的一个MVC框架。功能很强大。可是报错不是特别明显。调试bug比較麻烦
  • ExtJS
    1. 综合评分：3星
    2. 易用性：3星
    3. 收费：是
    4. 使用心得：很符合企业级的内部管理系统，高强度定制化，学习成本高，维护成本高。调试bug比較麻烦，学习教程
Edit

js库

  • jquery
    1. 综合评分：5星
    2. 易用性：5星
    3. 收费：否
    4. 使用心得：很好用乃至接近完美的js DOM 库，jquery UI更是很方便且易扩展，而且jquery UI 如今有BootStrap风格的皮肤
Edit

图标字体

  • Font Awesome
    1. 综合评分：5星
    2. 易用性：5星
    3. 收费：否
    4. 使用心得：经常使用的图标
Edit

上传控件

  • jquery FileUpload
    1. 综合评分：5星
    2. 易用性：4星
    3. 收费：否
    4. 使用心得：配合HTML模板比較简单易用。可是在本项目中整合到rails中就不是非常好用。但仍不失为一款非常好用的拖拽上传软件，支持查看上传进度
  • 百度WebUploader
    1. 综合评分：未知
    2. 易用性：未知
    3. 收费：否
    4. 使用心得：百度FEX刚刚出的一款HTML+Flash上传插件。功能较为强大，但未在真实项目中使用，不知其性能和易用性怎样
Edit

视频播放插件

  • jwplayer
    1. 综合评分：4星
    2. 易用性：4星
    3. 收费：否（但去LOGO，须要收费）
    4. 使用心得：因为HTML5不支持在线播放Flash格式视频，所以须要外在插件，jwplayer的确是不错的选择，但在本项目中也是自己进行破解其插件才打到须要的效果

转载于:https://www.cnblogs.com/lxjshuju/p/6770630.html


http://www.niftyadmin.cn/n/1791000.html

相关文章

Python学习【第18篇】：进程理论基础

Python学习【第18篇】：进程理论基础

进程理论基础背景知识 顾名思义，进程即一个软件正在进行的过程。进程是对正在运行程序的一个抽象。 进程的概念起源于操作系统，是操作系统最核心的概念，也是操作系统提供的最古老的也是最重要的抽象概念之一。操作系统的其他所有内容都是围绕…
阅读更多...
力扣第88题：合并两个有序数组

力扣第88题：合并两个有序数组

给你两个有序整数数组 nums1 和 nums2，请你将 nums2 合并到 nums1 中，使 nums1 成为一个有序数组。 说明: 初始化 nums1 和 nums2 的元素数量分别为 m 和 n 。 你可以假设 nums1 有足够的空间（空间大小大于或等于 m n）来保存 n…
阅读更多...
python语句与语法

python语句与语法

Python的语句与语法 语句角色例子赋值创建引用值aApple,bbike调用执行函数log.write(mylog)打印调用打印对象print(1,hello)if/elif/else选择动作if a in b: print(a)for/else序列迭代for i in list: print(i)while/else一般循环while True: print(True)pass空占位符for i in l…
阅读更多...
Python Day5

Python Day5

一、本节内容 模块 模块，用一砣代码实现了某个功能的代码集合。 类似于函数式编程和面向过程编程，函数式编程则完成一个功能，其他代码用来调用即可，提供了代码的重用性和代码间的耦合。而对于一个复杂的功能来，可能需…
阅读更多...
懒汉式单例模式在多线程下问题的解决方法

懒汉式单例模式在多线程下问题的解决方法

package demo8;/*** author xianyu* version 1.0* date 2020/4/20 14:30* 单例模式&#xff1a; 懒汉式单例模式*/ public class singleInstance1 {public static void main(String[] args) {for (int i 0; i < 1000; i) {Thread t new Thread(()->{Teacher.getInstanc…
阅读更多...
单链表归并排序

单链表归并排序

package demo8; /*** author xianyu* version 1.0* date 2020/4/20 12:11* 单链表的归并排序*/ public class mergeSort {public static void main(String[] args) {Node head new Node(7);head.next new Node(5);head.next.next new Node(3);head.next.next.next new Node…
阅读更多...
shell基础DAY5

shell基础DAY5

1、awk工具使用awk -F ‘字段分隔符’ ‘BEGIN&#xff5b;&#xff5d;模式匹配{动作} END&#xff5b;&#xff5d;’ 文件名转载于:https://blog.51cto.com/11044100/2333991
阅读更多...
Python时间time模块介绍

Python时间time模块介绍

一、明确时间元组 二、测试代码#!/usr/bin/env python # -- coding: utf-8 -- """ 时间模块&#xff0c;time的相关操作与测试 """ # python中time模块使用例子 import time# 1493368879.41&#xff0c;时间戳 print time.time()# 获取的是一个元…
阅读更多...
最新文章

Copyright @ 2022~2023