封裝的一套簡單輕量級JS 類庫（RapidDevelopmentFramework.JS）
1.最近很久沒有更新本身的博客了，一直在考慮本身應該寫一些什麼。4.2日從蘇州回到南京的路上感受本身的心裏些崩潰和失落，我就很少說了? 猛然之間我認爲本身須要找一下心裏的平衡。決定開發屬於本身一套快速開發的JS 框架。由於早前也一直想開發一套快速的JS 框架，可是種種緣由一直沒用突破點也就不了了之了，開發這套JS 的框架主要是爲了方便本身使用以，及其餘開發人員的使用。通用的功能包主要括JS 的校驗 上傳圖片 視頻 語音 以分頁 時間插件的選擇 和ajax 請求以及其餘的第三方的插件的混合使用等等 。
2. 對於開發人員 不管是作PC端仍是移動端使用傳統的第三方插件比較多（主要包括JS 的驗證 以及上傳 文件插件的使用等等。雖然如今移動端使用JqueryWeUI 的比較多，可是仍是脫離不了這些通用的功能），並且在多個頁面使用大多數雷同的JS 形成了頁面的JS 過多冗餘，例如 首次加載頁面過慢 直接影響到用戶的體驗，並且代碼顯示的過於冗餘 以及繁瑣 和複雜，若是有人離職了 形成了 後期維護人員 很是的頭疼。因此基於這些緣由以及和心裏找到平衡我決定開發一套屬於本身的快速開發的JS 框架，方便開發人員以及其餘人員盡心學習和維護。
3.對於這個快速開發的JS 框架我想了很久，同時也琢磨了很久，到底什麼纔是咱們須要的框架 高效 快捷 快速 方便 等等RapidDevelopmentFramework 就是具備這些個特色。所以我決定採用面向對象的方法進行封裝屬於本身的一套JS 類庫。javascript
4.廢話很少說 直接上代碼。如下代碼所有采用面向對象的方法進行開發，若有部分的猿們理解不了多看看JavaScript 原理就適應了。java
/****************************************************
*做者：LowKeyC
*說明：RapidDevelopmentFramework工具箱，版本2.0
*版本號：V2.0
*建立日期：2017年6月25日 星期日
*****************************************************/jquery
/*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 類庫的封裝更多通用的方法。android
以上內容所有是基於原創，如需引用 請進行標明請尊重我的的成果 謝謝！！！ios
相關文章
- 1. 輕量級的mvc框架封裝
- 2. Vue封裝一個簡單輕量的上傳文件組件
- 3. 輕量級封裝DbUtils&Mybatis之二Dbutils
- 4. 一個最簡單的類JQuery封裝
- 5. echart js簡單封裝
- 6. 封裝簡單的axios庫
- 7. js簡單函數封裝
- 8. js簡單封裝樣式
- 9. 簡單輕量級的RPC框架—HRPC
- 10. JS類的封裝
- 更多相關文章...
- • C# 封裝 - C#教程
- • Hibernate的一級緩存 - Hibernate教程
- • Docker容器實戰(一) - 封神Server端技術
- • Github 簡明教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 輕量級的mvc框架封裝
- 2. Vue封裝一個簡單輕量的上傳文件組件
- 3. 輕量級封裝DbUtils&Mybatis之二Dbutils
- 4. 一個最簡單的類JQuery封裝
- 5. echart js簡單封裝
- 6. 封裝簡單的axios庫
- 7. js簡單函數封裝
- 8. js簡單封裝樣式
- 9. 簡單輕量級的RPC框架—HRPC
- 10. JS類的封裝