前端通用框架可行性研究報告之彈窗

時間  2019-12-11
標籤 前端 通用 框架 可行性 研究報告 简体版
原文   原文鏈接

一、 研究Web框架的動態加載技術css

針對移動互聯網環境下移動端內存、流量、電池資源有限，經過使用動態加載技術，將程序文件打散成多個小文件，以延遲加載技術（LazyLoading），實現按需加載提高用戶體驗，下降移動端的資源使用率。在業務和樣式上，前端開發人員只須要在JS代碼塊頭部引用須要的js庫和css樣式便可。在邏輯上，開發人員只需調用後端提供的接口進行讀取與顯示。這種技術的主要優勢包括可維護性高、動態加載快、前端性能優化好。html

二、 研究模塊化構建技術前端

在前端人員開發移動應用項目的基礎上，經過使用模塊化構建技術，將每一個頁面分紅多個功能進行分塊化處理，這樣既可快速的實現移動端的頁面獲取，也可在移動端調試的時候快速定位相關問題。經過定義多個模塊來相互調用，既保證了各個模塊之間不發生衝突，又提升了開發人員的編碼效率。其優勢主要是職責單1、依賴就近。jquery

三、 研究多分辨率、多尺寸移動終端界面適配技術程序員

針對移動端的各個終端設備，在基於bootstrap框架的基礎上，經過媒體查詢功能（Medie Query）來設置統一的樣式，經過視窗（meta）屬性內容，設置等比例窗口，這樣實現了不一樣手機型號的不一樣分辨率、不一樣尺寸終端沒法適配的問題，進一步減小代碼的冗餘和再次開發。bootstrap

四、 研究移動端公用組件的封裝後端

基於bootstrap框架下一些組件封裝的有限，經過對時間插件(datatime)、彈窗插件(dialog)、圖形插件(echarts)、下拉刷新上拉加載插件(Refresh)、滑動插件(swiper)、省市區選擇 (citypicker) 插件、提示信息插件(UED)等一些插件進行封裝，按需調用，按需加載，以作到不一樣頁面引用不一樣的插件，實現組件的調用，大大減小了前端開發人員的時間，同時也提升了用戶體驗。性能優化

 

這裏，咱們就拿其中一個插件——彈窗來說解echarts

先給你們看看效果圖吧框架

彈窗，基本上每一個應用都會用到，而各式各樣的彈窗有那麼多，許多程序員，這邊寫一套，那邊寫一套，代碼特別亂，這裏我在網上也找了一套，本身單獨整理了一下，但願你們之後使用共同的一套代碼，作到簡潔，簡單。

前端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-hover">box-shadow</button>
</div>
<div class="col-xs-6"><button class="btn btn-primary has-hover">無進入動畫</button></div>
<div class="col-xs-6"><button class="btn btn-warning has-hover">單個按鈕</button></div>
<div class="col-xs-6">
<button type="button" class="btn btn-info" id="btn-modal">bootstrap彈窗</button>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-info" >無標題</button>
</div>
</div>
</div>
<script type="text/html" id="modal-tpl">
<div id="dialogContent">
這裏是用戶獲取到的內容,獲取的內容，可直接設置在這裏，而後在頁面顯示
</div>
</script>
<script>
var basepath = "../../";//定義當前目錄的位置（若是所有在根目錄的話，則不須要定義）</script>
<!--一、首先加載sea.js 咱們使用的是模塊化來加載文件-->
<script src="../../js/modules/sea.js"></script>
<!--二、而後加載配置項-->
<script src="../../config.js"></script>
<!--三、最後使用seajs.use來加載當前須要加載的模塊-->
<script>
seajs.use("../js/dialogs");
</script>
</body>
</html>

上面代碼，是用個人通用框架代碼，你們若是用到彈窗，可直接引用dialog.js 、dialog.css、jquery.js和dialogtest.js便可

dialogtest.js代碼以下

 

define(function (require) {

     require("bootstrap");//加載bootstrap
     require('dialog');//加載彈窗 
     require('dialogcss');//加載彈窗 
   
  
     var modal = new Modal({
         title: '測試案例',
         content: $('#modal-tpl').html(),
         width: "90%",
         onOk: function () {
             //操做
             alert("你點擊了肯定");
         },
         onModalShow: function () {
             //彈窗初始化操做
             
         }
     });
     $(".btn").each(function (index) {
         $(this).on("click", function () {
             if(index==0)
             {
                 $('body').dailog({ type: 'defalut' });
             }else if(index==1)
             {
                 $('body').dailog({ type: 'success' })
             }
             else if (index == 2) {
                 $('body').dailog({ type: 'primary' })
             }
             else if (index == 3) {
                 $('body').dailog({ type: 'danger' })
             }
             else if (index == 4) {
                 $('body').dailog({ type: 'warning' })
             }
             else if (index ==5) {
                $('body').dailog({ type: 'success', maskBg: 'rgba(33,11,22,0.5)' })
             }
             else if (index ==6) {
                 $('body').dailog({
                     type: 'danger', title: '我是自定義標題',
                     discription: '這裏是自定義的描述，能夠寫上你的描述或者他的描述，總之能夠寫不少文字，你本身看着辦吧'
                 }, function (ret) {
                     if (ret.index == 0)
                     {
                         alert("你點擊了肯定按鈕");
                     } else
                     {
                         alert("你點擊了取消操做");
                     }
                     console.log("信息爲："+JSON.stringify(ret));
                 })
             } else if (index ==7) {
                 $('body').dailog({
                     type: 'danger', title: '錯誤提示',
                     discription: '這裏是自定義的描述，能夠寫上你的描述或者他的描述，總之能夠寫不少文字，你本身看着辦吧',
                     isInput: true
                 }, function (ret) {
                     console.log(ret);
                     if (ret.index === 0)
                     {
                         alert('你點擊的是第' + ret.index + '個按鈕,狀態:' + ret.input.status + ';輸入的值爲:' + ret.input.value)
                     };
                 });
             } else if (index == 8) {
                 $('body').dailog({ type: 'defalut', showBoxShadow: true })
             } else if (index ==9) {
                 $('body').dailog({ type: 'success', showBoxShadow: true, maskBg: '#fff' })
             } else if (index == 10) {
                 $('body').dailog({ type: 'primary', showBoxShadow: true, maskBg: '#ccc' })
             } else if (index == 11) {
                 $('body').dailog({ type: 'primary', showBoxShadow: true, animateStyle: 'none' })
             } else if (index == 12) {
                 $('body').dailog({
                     type: 'warning', showBoxShadow: true, animateStyle: 'none',
                     bottons: ['肯定'], discription: '也許有點問題!'
                 })
             }else if(index==13)
             {
                 modal.open();
             } else if (index == 14) {
                 $('body').dailog({ type: 'defalut',showBoxShadow: true, animateStyle: 'none',isnobutton:false,
                     bottons: ['關閉'], discription: '也許有點問題也許有點問題也許有點問題也許有點問題也許有點問題也許有點問題也許有點問題也許有點問題也許有點問題!'
                 });
             }
         })
     })
 
})

　　dialog.js和css ，我打個包，你們想下載就下載用吧

http://files.cnblogs.com/files/dinghouchuanqi/dialog.zip

 

本文來自http://www.cnblogs.com/dinghouchuanqi/archive/2017/07/14/7170176.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程