前端介绍

Posted on |

前端简介

简介

  • 基于Browser大数据项目前台页面

  • 实现后台数据交互，前台数据展示和图形化

浏览器要求

  • IE9+

  • 必须开启cookie和localstorage，并且设置退出浏览器时不清理数据

功能 && 完成情况

  • 6个页面：搜索、源设置、任务管理、dashboard、帮助页、登陆页

  • Ajax交互、页面选择性更新、国际化、图形化、UI插件等

  • 基于node.js的模拟后台

Data Compass 前端结构

webroot 目录

1
2
3
4
5
6
<DIR>          css
<DIR>          font
<DIR>          img
<DIR>          js
<DIR>          jslib
<DIR>          page

HTML

  • 每个页面一个HTML

  • 引用 CSS JS

  • header 共用

JS基础库

  • Jquery
    重度依赖
    页面交互：内容替换、添加事件

  • Chart.js
    绘制图形，提供6种默认图形

  • eCharts.js
    绘制图形，强大的可交互处理

  • freeWall.js
    应用于dashboard，可拖拽自适应布局

  • pikaday.js
    时间选择器

  • json2.js
    对象序列化为JSON string 和 反序列化为对象

  • md5.js
    应用于login，md5生成

JS目录

  • 每个页面一个JS

  • util.js
    基础工具集，Cookie存储

  • uihelper.js
    简单UI控件

  • singleajax.js
    Ajax交互

  • languageservice.js / hwsearchlanguage.js
    国际化

  • hwchart.js 基于 Chart.js
    二次开发的绘图库

  • hwecharts.js 基于 eCharts.js
    二次开发的绘图库

  • interface.js
    前后台交互接口，非业务功能

  • commom.js
    各页面复用的js

CSS目录

  • commom.css
    各页面复用的css

  • 每个页面一个css

技术要点

  • ‘单例’的AJAX请求

  • 动态的DOM构建基于隐藏的页面模板
    _tmpl_idcls 为这类DOM的id后缀

  • 基于比较的页面更新，提升性能
    JSS

  • 代码控制图形legend和content大小，避免遮盖

前端下一步工作

  • 维护当前版本，完善功能

  • 基于框架和构建

附：前端技术简介

  • HTML

    HyperText Markup Language 超文本标记语言

    • 风格类似xml的

    • 富文本

    • 职责：结构

    1
    <a href="#"> hello world </a>

  • CSS

    Cascading Style Sheets 层叠样式表

    • 职责：样式
    1
    2
    3
     .helloworld{
    color： red；
     }

  • JS
    JavaScript

    • 类Java语法的脚本语言

    • 标准 ECMAScript

    • 职责：交互逻辑

    1
    console.log('hello world');

  • Browser
    解析和渲染页面，运行JS脚本。对HTML标准，CSS标准，JS标准支持不同

    • IE9+ 现代浏览器

    • 语法走向统一

完