1.最近好久沒有更新自己的博客了，一直在考慮自己應該寫一些什麽。4.2日從蘇州回到南京的路上感覺自己的內心些崩潰和失落，我就不多說了? 猛然之間我認為自己需要找一下內心的平衡。決定開發屬於自己一套快速開發的JS 框架。因為早前也一直想開發一套快速的JS 框架，但是種種原因一直沒用突破點也就不了了之了，開發這套JS 的框架主要是為了方便自己使用以，及其他開發人員的使用。通用的功能包主要括JS 的校驗 上傳圖片 視頻 語音 以分頁 時間插件的選擇 和ajax 請求以及其他的第三方的插件的混合使用等等 。
2. 對於開發人員 無論是做PC端還是移動端使用傳統的第三方插件比較多（主要包括JS 的驗證 以及上傳 文件插件的使用等等。雖然現在移動端使用JqueryWeUI 的比較多，但是還是脫離不了這些通用的功能），而且在多個頁面使用大多數雷同的JS 造成了頁面的JS 過多冗余，例如 首次加載頁面過慢 直接影響到用戶的體驗，而且代碼顯示的過於冗余 以及繁瑣 和復雜，如果有人離職了 造成了 後期維護人員 非常的頭疼。所以基於這些原因以及和內心找到平衡我決定開發一套屬於自己的快速開發的JS 框架，方便開發人員以及其他人員盡心學習和維護。

4.廢話不多說 直接上代碼。以下代碼全部采用面向對象的方法進行開發，如有部分的猿們理解不了多看看JavaScript 原理就適應了。

/*PC端或者移動端只需要引用 jquery-1.7.1  以上版本即可*/
/*RapidDevelopmentFramework庫是依賴於於Jquery類庫進行重新封裝的一套開發的框架*/
/*目的是為了方便開發人員進行快速的進行開發：主要包括通用的的驗證,以及彈出的消息框 以及瀏覽器的信息,以及一些PC 以及移動端通用的功能的封裝*/

/*基於當前主流的開發的語言都可以進行使用.NET Java  PHP Python ,Ruby 等等其他的一些開發語言*/

var RapidDevelopmentFramework =
    {
        //瀏覽器的信息
        BrowserInfo: {
            //版本信息
            Versions: function () {
                var u = navigator.userAgent;
                var app = navigator.appVersion;
                return {//移動終端瀏覽器版本信息
                    trident: u.indexOf("Trident") > -1, //IE內核
                    presto: u.indexOf("Presto") > -1, //opera內核
                    webKit: u.indexOf("AppleWebKit") > -1, //蘋果、谷歌內核
                    gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐內核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否為移動終端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
                    android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android終端或者uc瀏覽器
                    iPhone: u.indexOf("iPhone") > -1 || u.indexOf("Mac") > -1, //是否為iPhone或者QQHD瀏覽器
                    iPad: u.indexOf("iPad") > -1, //是否iPad
                    webApp: u.indexOf("Safari") == -1 //是否web應該程序，沒有頭部與底部
                };
            },
            //語言信息
            Language: (navigator.browserLanguage || navigator.language).toLowerCase()
        },

        //encodeURI，十六進制轉義序列進行加密
        EncodeURIString: function (_String)
        {
            if (_String != null && _String != "")
            {
                return encodeURI(_String);
            }
            return "";
        },

        //使用decodeURI進行在後臺進行 十六進制的轉義的序列進行解密
        DecodeURIString:function(_String)
        {
            if(_String!=null && _String!="")
            {
                return decodeURI(_String);
            }
            return "";
        },

        //通過JS 來進行獲取JS 的本地的時間 例如 2017/6/25/19:34
        GetDateTimeString: function () {
            //獲取當前的時間
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9)
            {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9)
            {
                strDate = "0" + strDate;
            }
            var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds();//進行獲取本地的時間的年月日以及時分秒

            if(currentdate!=null && currentdate!="")
            {
                return currentdate;
            }
            return "";
        },

        //獲取本地的經度以及緯度火星文進行獲取
        GetLocation:function(_LocationID){
            var Location= document.getElementById("_LocationID");
            function getLocation() {
                if (navigator.geolocation)
                {
                    navigator.geolocation.getCurrentPosition(showPosition);
                }
                else
                {
                   Location.innerHTML = "此瀏覽器暫時不支持！";
                }
            }
            function showPosition(position)
            {
                Location.innerHTML = "Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
            }
        },
        //通用的驗證 手機 電話 以及數字 IP 地址  腳本 以及HTML和 密碼 特殊的字符 以及SQL 註入 JS 註入等等
        Validate: {
            //檢查手機號碼格式
            CheckPhone: function (_MPhoneNumber) {
                var filter = /(^13\d{9}$)|(^14)[5,7]\d{8}$|(^15[0,1,2,3,5,6,7,8,9]\d{8}$)|(^17)[6,7,8]\d{8}$|(^18\d{9}$)/g;
                return filter.test($.trim(_MPhoneNumber));
            },
            //檢查固定電話格式
            CheckTelephone: function (_MPhoneNumber) {
                var filter = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
                return filter.test($.trim(_MPhoneNumber));
            },
            //檢查郵箱格式
            CheckMail: function (_EMail) {
                var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                return filter.test($.trim(_EMail));
            },
            //檢查半角英數字
            CheckString: function (_String) {
                var filter = /^[\w]+$/;
                return filter.test($.trim(_String));
            },
            //判斷正數
            CheckPNumber: function (_Number) {
                var reg = /^\d+(?=\.{0,1}\d+$|$)/
                if (reg.test($.trim(_Number))) {
                    return true;
                }
                return false;
            },
            //判斷正數
            CheckNumber: function (_Number) {
                var reg = /^\\d+$/;
                if (reg.test($.trim(_Number))) {
                    return true;
                }
                return false;
            },
            //檢查正整數
            CheckInt: function (_String) {
                var filter = /^[0-9]*[1-9][0-9]*$/;
                return filter.test($.trim(_String));
            },
            //檢查數字
            CheckNumberInt: function (_String) {
                var filter = /^[0-9]*$/;
                return filter.test($.trim(_String));
            },
            //檢查證密碼用(6～20位字母數字組合)
            CheckPassWord: function (_String) {
                var filter = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,20})$/;
                return filter.test($.trim(_String));
            },
            //檢查decimal(8,2) 
            CheckDecimal: function (_String) {
                var filter = /^(?!.{12,}$)\d+(\.\d{1,2})?$/;
                return filter.test($.trim(_String));
            }, 

            //檢查HTML和JS腳本進行
            CheckHTML: function (_String) {
                var filter = RegExp("[<>]");
                return filter.test(_String);
            },

            //JS 腳本的檢查 轉化為轉義字符 防止JS 攻擊
            CheckReplace: function (_String) {
                return _String.replace(/[<>&"]/g, function (c) { return { ‘<‘: ‘<‘, ‘>‘: ‘>‘, ‘&‘: ‘&‘, ‘"‘: ‘"‘ }[c]; });
            },

            //JS 轉化 HTML 防止JavaScript  腳本的攻擊
            CheckReplaceHtml: function (_String) {
                var arrEntities = { ‘lt‘: ‘<‘, ‘gt‘: ‘>‘, ‘nbsp‘: ‘ ‘, ‘amp‘: ‘&‘, ‘quot‘: ‘"‘ };
                return _String.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; });
            },

            //檢查輸入的特殊的字符
            SpecialChar: function (_String) {
                var Pattern = new RegExp("[`~!@#$^&*()=|{}‘:;‘,\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“‘。，、？]");
                //關於特殊的字符的驗證
                if (Pattern.test($.trim(_String))) {
                    return false;
                }
                return true;
            },

            //IP地址的驗證
            IPAddressUrl: function (_String) {
                var Pattern = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
                if (Pattern.test($.trim(_String))) {
                    return false;
                }
                return true;
            },
            //檢查移動客戶端
            CheckMobile: function () {
                var sUserAgent = navigator.userAgent.toLowerCase();
                var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
                var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
                var bIsMidp = sUserAgent.match(/midp/i) == "midp";
                var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
                var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
                var bIsAndroid = sUserAgent.match(/android/i) == "android";
                var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
                var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
                if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                    return true;
                }
                else {
                    return false;
                }
            },

            // 檢查 SQL 註入 URL 
            CheckSqlUrl: function (_String) {
                var sUrl = location.search.toLowerCase();
                var sQuery = sUrl.substring(sUrl.indexOf("=") + 1);
                re = /select|update|delete|truncate|join|union|exec|insert|drop|count|‘|"|;|>|<|%/i;
                if (re.test(sQuery)) {
                    return true;
                }
                return false;
            },

            //檢查SQL 普通輸入的註入
            CheckSqlForm: function (_String) {
                re = /select|update|delete|exec|count|‘|"|=|;|>|<|%/i;
                if (re.test(_String.value)) {
                    _String.value = "";
                    _String.className = "errInfo";
                    _String.focus();
                    return false;
                }
                return true;
            },

        },

        //對話框
        Dialog: {
            //提示窗口
            NotifyBox: function () { },
            //彈框消息，默認使用
            MessageBox: function () {

            },
            //加載Load
            LoadingObject: function () {
            },
            //取消Loading
            UnLoadingObject: function () {
            }
        },

        //AJAX  異步進行傳輸數據 並進行響應
        RequestAjaxServiceAction: {
            //BL請求方法
            BLRequest: function () {
                //先判斷是否需要對請求對象進行Enable
                var BLParameter;
                var LoadingIDList;
                var ArgLength = arguments.length;
                switch (ArgLength) {
                    case 1:
                        BLParameter = arguments[0];
                        break;
                    case 2:
                        BLParameter = arguments[0];
                        LoadingIDList = arguments[1];
                        break;
                    default:
                        break;
                }
                //BL請求實體(請求的隊形）
                var MyBLRequestContainer = new Object();
                MyBLRequestContainer.FunctionRouteName = BLParameter.FunctionRouteName;
                MyBLRequestContainer.RequestObjectString = JSON.stringify(BLParameter.BLRequestObject);//JSON序列化
                var PostDataString = JSON.stringify(MyBLRequestContainer);//JSON序列化 
                //成功回調
                var SuccessFunction = function (Result, State, JQXHR) {
                    var MyBLResponseObject = new Object();
                    MyBLResponseObject = JSON.parse(JSON.parse(Result).ResponseObjectString);//JSON反序列化
                    BLParameter.BLResponse.Success(MyBLResponseObject);
                }

                //失敗回調
                var ErrorFunction = function (Result, State, JQXHR) {
                    if (BLParameter.Debug == true) {
                        //是否Debug
                        alert(JSON.stringify(Result));
                    }
                    else {
                        alert("回調失敗！");
                    }
                }

                //主要是此處的異步的請求 進行調用Ajax 進行請求
                $.ajax({
                    type: "POST",
                    url: MyBLRequestContainer.FunctionRouteName,//進行調用的路由的名稱
                    data: PostDataString,//傳輸的數據 將傳統的對象轉化為JSON 字符串
                    success: SuccessFunction,//響應成功後的函數
                    error: ErrorFunction,//響應失敗後的函數
                    dataType: "text",
                    contentType: "text/plain; charset=utf-8"
                });
            }
        },

        //動作的管理跳轉的URL的字符串的解析
        Action: {
            //跳轉頁面
            GoToPage: function (URL) {
                window.location.href = URL;
            },
            //跳轉到錯誤頁面
            GoToError: function () {
                //跳轉到錯誤頁面
                RapidDevelopmentFramework.Action.GoToPage("跳轉到報錯頁面404！");
            }
        },

        ///上傳圖片的處理
        FileInputPicture: {
            //是否選擇上傳圖片 false否，true是
            IsInput: false,
            //圖片數據 全部用二進制的數據進行存儲
            ImageData: null,
            //圖片類型，1 jpeg 2png
            ImageType: 1,
            //初始化
            Init: function (AddImage_FileInput, Add_divUpdateImg) {
                //先進行圖片的銷毀
                $("#" + Add_divUpdateImg).fileinput("destroy");
                var FileInputObject = $("#" + Add_divUpdateImg);
                FileInputObject.val("");
                var PreFileInputDomObject = FileInputObject[0];
                PreFileInputDomObject.outerHTML = PreFileInputDomObject.outerHTML;
                var NewFileInputObject = FileInputObject.clone();
                FileInputObject.before(NewFileInputObject);
                FileInputObject.remove();

                //初始化數據
                FileInputPicture.ImageData = null;
                FileInputPicture.IsInput = false;
                FileInputPicture.ImageType = 1;

                //初始化新增圖片上傳
                $("#" + AddImage_FileInput).fileinput({
                    showUpload: false,
                    showCaption: false,
                    browseClass: "btn btn-success",
                    allowedFileTypes: ["image"],
                    allowedFileExtensions: ["jpg", "png"],
                    language: "zh",
                    maxFileCount: 1,
                    browseLabel: "選擇圖片",
                    browseIcon: "<i class=\"fa  fa-picture\"></i> ", //選擇APP啟用頁圖片
                    previewFileIcon: "<i class=‘fa fa-king‘></i>"
                });
                //新增圖片清除上傳
                $("#" + AddImage_FileInput).on("fileclear", function (event) {
                    //初始化數據
                    $("#" + Add_divUpdateImg).show();
                    FileInputPicture.ImageData = null;
                    FileInputPicture.IsInput = false;
                    FileInputPicture.ImageType = 1;
                });

                //新增圖片重置上傳
                $("#" + AddImage_FileInput).on("filereset", function (event) {
                    //初始化數據 
                    $("#" + Add_divUpdateImg).show();
                    FileInputPicture.ImageData = null;
                    FileInputPicture.IsInput = false;
                    FileInputPicture.ImageType = 1;
                });

                //選擇圖片後觸發
                $("#" + AddImage_FileInput).on("fileloaded", function (event, file, previewId, index, reader) {
                    $("#" + Add_divUpdateImg).hide();
                    FileInputPicture.ChangeInput(file);
                });
            },
            //選擇文件上傳
            ChangeInput: function (MyFile) {
                //隱藏編輯時圖片
                // $("#Add_imgUpdate").hide();
                //檢驗是否為圖像文件  
                if (!(MyFile.type == ‘image\/jpeg‘ || MyFile.type == ‘image\/png‘)) {
                    RapidDevelopmentFramework.Dialog.MessageBox("請上傳jpeg或png格式的圖片文件！", function () {
                        //圖片不符合規定，重新初始化上傳控件
                        FileInputPicture.Init();
                    });
                    return;
                }
                else {
                    var MaxSize = 1 * 1024 * 1024;
                    var size = MyFile.size;
                    if (size > MaxSize) {
                        RapidDevelopmentFramework.Dialog.MessageBox("請上傳小於1M的圖片文件！", function () {
                            //圖片不符合規定，重新初始化上傳控件
                            FileInputPicture.Init();
                        });
                        return;
                    }
                    var MyFileReader = new FileReader();
                    MyFileReader.onload = function (evt) {
                        var TempImage = this.result;
                        var img = new Image();
                        img.src = this.result;
                        //避免圖片渲染導致圖片高度和寬度不能讀出來
                        img.onload = function () {
                            var width = img.width,
                                height = img.height;
                            //長寬比例
                            var Proportion = width / height;
                            Proportion = Proportion.toFixed(2);

                            if (Proportion == 1) {
                                if (MyFile.type == ‘image\/jpeg‘) {
                                    TempImage = TempImage.replace(‘data:image/jpeg;base64,‘, ‘‘);
                                    FileInputPicture.ImageType = 1;
                                } else {
                                    if (MyFile.type == ‘image\/png‘) {
                                        TempImage = TempImage.replace(‘data:image/png;base64,‘, ‘‘);
                                        FileInputPicture.ImageType = 2;
                                    }
                                }
                                //圖片數據
                                FileInputPicture.ImageData = TempImage;
                                //已經上傳圖片
                                FileInputPicture.IsInput = true;
                            } else {
                                RapidDevelopmentFramework.Dialog.MessageBox("圖片寬高比為1:1，且大小不能超過1M！", function () {
                                    //初始化增加合作夥伴Logo文件上傳
                                    FileInputPicture.Init();
                                    return;
                                });
                            }
                        }
                    };
                    MyFileReader.readAsDataURL(MyFile);
                }

            }
        },

        //時間控件的初始化作為參數的是時間控件的標簽的ID 
        DataTimeCalender: function (StarTime, EndTime) {
            //初始化時間控件  開始時間控件的初始化 開始時間一定要小於結束的時間
            $(‘#‘ + StarTime).datetimepicker({
                language: ‘zh-CN‘,//顯示中文
                format: ‘yyyy-mm-dd‘,//顯示格式
                minView: "month",//設置只顯示到月份
                autoclose: true,//選中自動關閉
                todayBtn: true//顯示今日按鈕
            }).on(‘change‘, function (ev) {
                var startDate = $(‘#‘ + StarTime).val();
                $("#" + StarTime).datetimepicker(‘setStartDate‘, startDate);
                $("#" + StarTime).datetimepicker(‘hide‘);

            });

            //結束時間控件初始化 只能選擇精確到今天的時間 其他時間超過的時間不可以選擇
            $(‘#‘ + EndTime).datetimepicker({
                language: ‘zh-CN‘,//顯示中文
                format: ‘yyyy-mm-dd‘,//顯示格式
                minView: "month",//設置只顯示到月份
                autoclose: true,//選中自動關閉
                todayBtn: true//顯示今日按鈕
            }).on(‘change‘, function (ev) {
                var EndTime = $(‘#‘ + EndTime).val();
                $("#" +StarTime).datetimepicker(‘setEndDate‘, EndTime);
                $("#" +EndTime).datetimepicker(‘hide‘);
            });

        },
      
        ///上傳視頻的處理
        FileInputVideo: {
            //是否選擇上傳視頻 false否，true是
            IsInput: false,
            //視頻數據
            VideoData: null,
            //視頻類型，1 mp4 2 其他類型的視頻
            VideoType: 1,
            //初始化
            Init: function (AddVideo_FileInput,Add_divUpdateVideo) {
                //先進行視頻的數據的銷毀
                $("#"+AddVideo_FileInput).fileinput("destroy");
                var FileInputObject = $("#"+AddVideo_FileInput);
                FileInputObject.val("");
                var PreFileInputDomObject = FileInputObject[0];
                PreFileInputDomObject.outerHTML = PreFileInputDomObject.outerHTML;
                var NewFileInputObject = FileInputObject.clone();
                FileInputObject.before(NewFileInputObject);
                FileInputObject.remove();
                //初始化數據
                FileInputVideo.VideoData = null;
                FileInputVideo.IsInput = false;
                FileInputVideo.VideoType = 1;

                //初始化新增視頻上傳
                $("#" + AddVideo_FileInput).fileinput({
                    showUpload: false,
                    showCaption: false,
                    browseClass: "btn btn-success",
                    allowedFileTypes: ["video"],
                    allowedFileExtensions: ["mp4"],
                    language: "zh",
                    maxFileCount: 1,//選擇的視頻的個數
                    browseLabel: "選擇視頻",
                    browseIcon: "<i class=\"fa  fa-picture\"></i> ", //選擇APP啟用頁視頻
                    previewFileIcon: "<i class=‘fa fa-king‘></i>"
                });
                //新增視頻清除上傳
                $("#" + AddVideo_FileInput).on("fileclear", function (event) {
                    //初始化數據
                    $("#" + Add_divUpdateVideo).show();
                    FileInputVideo.VideoData = null;
                    FileInputVideo.IsInput = false;
                    FileInputVideo.VideoType = 1;
                });

                //新增視頻重置上傳
                $("#" + AddVideo_FileInput).on("filereset", function (event) {
                    //初始化數據 
                    $("#" + Add_divUpdateVideo).show();
                    FileInputVideo.VideoData = null;
                    FileInputVideo.IsInput = false;
                    FileInputVideo.VideoType = 1;
                });

                //選擇視頻後觸發
                $("#" + AddVideo_FileInput).on("fileloaded", function (event, file, previewId, index, reader) {
                    $("#"+Add_divUpdateVideo).hide();
                    FileInputVideo.ChangeInput(file);
           
                });
            },
            //選擇文件上傳
            ChangeInput: function (MyFile) {
                //隱藏編輯時視頻
                //檢驗是否為視頻文件1.avi, 2.wma, 3.flash, 4.mp4,5.3GP  其他格式的視頻目前沒有編寫後期完善
                if (!(MyFile.type == ‘video\/mp4‘))
                {
                    RapidDevelopmentFramework.Dialog.MessageBox("請上傳mp4視頻文件！", function () {
                        //視頻不符合規定，重新初始化上傳控件
                        FileInputVideo.Init();
                    });
                    return;
                }
                else
                {
                    var MaxSize = 1 * 8192 * 8192;
                    var size = MyFile.length;
                    if (size > MaxSize) {
                        RapidDevelopmentFramework.Dialog.MessageBox("請上傳小於20M的視頻文件！", function () {
                            //視頻不符合規定，重新初始化上傳控件
                            FileInputVideo.Init();
                        });
                        return;
                    }
                    var MyFileReader = new FileReader();
                    MyFileReader.onload = function (evt) {
                        var TempVideo = this.result;

                        if (MyFile.type == ‘video\/mp4‘) {
                            TempVideo = TempVideo.replace(‘data:video/mp4;base64,‘, ‘‘);
                            FileInputVideo.VideoType = 1;
                        } else {
                            TempVideo = null;
                            FileInputVideo.VideoType = 2;
                        }
                        //視頻數據
                        FileInputVideo.VideoData = TempVideo;
               
                        //已經上傳視頻
                        FileInputVideo.IsInput = true;

                    };
                    MyFileReader.readAsDataURL(MyFile);
                }

            }
        },
        //上傳音頻
        UploadAudio: function()
        {
                 
        },

        //分頁控件的初始化
        PagePagination: function () {

        },

    };
 

5. 因為RapidDevelopmentFramework.JS 全部都是基於面向對象進行開發的，所以在使用此框架的時候 ，直接調用裏面的方法即可 方便 快捷高效，使用起來非常的方便。後期我會繼續的進行完善這一套JS 類庫的封裝更多通用的方法。

以上內容全部是基於原創，如需引用 請進行標明請尊重個人的成果 謝謝！！！

封裝的一套簡單輕量級JS 類庫（RapidDevelopmentFramework.JS）