设为首页 加入收藏

TOP

前端通用框架可行性研究报告之弹窗(一)
2017-10-10 16:46:20 】 浏览:10080
Tags:前端 通用 框架 可行性 研究报告

在电力公司工作已有两年,开发的各个应用都是基于H5应用。而H5引用中又基于cordova.js 库来开发,各个外包公司接了应用,都是一头雾水,不晓得怎么开发(下篇文章我讲写电力信息基于cordova开发的基本点,主要把一些 常用的插件使用,遇到的问题给列出来),这篇文章主要是讲解使用基于seajs库和Bootstrap框架来搭建的一套前端通用框架。

前端框架主要研究了四点

1、 研究Web框架的动态加载技术

针对移动互联网环境下移动端内存、流量、电池资源有限,通过使用动态加载技术,将程序文件打散成多个小文件,以延迟加载技术(LazyLoading),实现按需加载提升用户体验,降低移动端的资源使用率。在业务和样式上,前端开发人员只需要在JS代码块头部引用需要的js库和css样式即可。在逻辑上,开发人员只需调用后端提供的接口进行读取与显示。这种技术的主要优点包括可维护性高、动态加载快、前端性能优化好。

2、 研究模块化构建技术

在前端人员开发移动应用项目的基础上,通过使用模块化构建技术,将每个页面分成多个功能进行分块化处理,这样既可快速的实现移动端的页面获取,也可在移动端调试的时候快速定位相关问题。通过定义多个模块来相互调用,既保证了各个模块之间不发生冲突,又提高了开发人员的编码效率。其优点主要是职责单一、依赖就近。

3、 研究多分辨率、多尺寸移动终端界面适配技术

针对移动端的各个终端设备,在基于bootstrap框架的基础上,通过媒体查询功能(Medie Query)来设置统一的样式,通过视窗(meta)属性内容,设置等比例窗口,这样实现了不同手机型号的不同分辨率、不同尺寸终端无法适配的问题,进一步减少代码的冗余和再次开发。

4、 研究移动端公用组件的封装

基于bootstrap框架下一些组件封装的有限,通过对时间插件(datatime)、弹窗插件(dialog)、图形插件(echarts)、下拉刷新上拉加载插件(Refresh)、滑动插件(swiper)、省市区选择 (citypicker) 插件、提示信息插件(UED)等一些插件进行封装,按需调用,按需加载,以做到不同页面引用不同的插件,实现组件的调用,大大减少了前端开发人员的时间,同时也提高了用户体验。

 

这里,我们就拿其中一个插件——弹窗来讲解

先给大家看看效果图吧

弹窗,基本上每个应用都会用到,而各式各样的弹窗有那么多,许多程序员,这边写一套,那边写一套,代码特别乱,这里我在网上也找了一套,自己单独整理了一下,希望大家以后使用共同的一套代码,做到简洁,简单。

前端h5代码

h5页面要做到简洁,简单,不允许有单独的css和js逻辑代码(下面一句css代码是为了测试使用)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>首页</title>
    <meta charset="utf-8" />
    <style>
        .col-xs-6 {
            padding: 10px 1px;
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="row">
            <div class="col-xs-6"><button class="btn has-hover  input-reverse-tofull">默认的弹窗</button></div>
            <div class="col-xs-6"><button class="btn btn-success has-hover">success</button></div>
            <div class="col-xs-6"><button class="btn btn-primary has-hover">primary</button></div>
            <div class="col-xs-6"><button class="btn btn-danger has-hover">danger</button></div>
            <div class="col-xs-6"><button class="btn btn-warning has-hover">warning</button></div>
            <div class="col-xs-6"><button class="btn btn-success has-hover">可设置背景色</button></div>
            <div class="col-xs-6"><button class="btn btn-danger has-hover">自定义标题、描述</button></div>
            <div class="col-xs-6"><button class="btn btn-danger has-hover">点后回调</button></div>
            <div class="col-xs-6"><button class="btn has-hover  input-reverse-tofull">box-shadow</button></div>
            <div class="col-xs-6"><button class="btn btn-success has-hover">box-shadow</button></div>
            <div class="col-xs-6">
                <button class="btn btn-primary has-
编程开发网
首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇CSS深入理解学习笔记之border 下一篇CSS深入理解学习笔记之border

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

最新文章

热门文章

C 语言

C++基础

windows编程基础

linux编程基础

C/C++面试题目