1.最近好久没有更新自己的博客了，一直在考虑自己应该写一些什么。4.2日从苏州回到南京的路上感觉自己的内心些崩溃和失落，我就不多说了? 猛然之间我认为自己需要找一下内心的平衡。决定开发属于自己一套快速开发的JS 框架。因为早前也一直想开发一套快速的JS 框架，但是种种原因一直没用突破点也就不了了之了，开发这套JS 的框架主要是为了方便自己使用以，及其他开发人员的使用。通用的功能包主要括JS 的校验 上传图片 视频 语音 以分页 时间插件的选择 和ajax 请求以及其他的第三方的插件的混合使用等等 。
2. 对于开发人员 无论是做PC端还是移动端使用传统的第三方插件比较多（主要包括JS 的验证 以及上传 文件插件的使用等等。虽然现在移动端使用JqueryWeUI 的比较多，但是还是脱离不了这些通用的功能），而且在多个页面使用大多数雷同的JS 造成了页面的JS 过多冗余，例如 首次加载页面过慢 直接影响到用户的体验，而且代码显示的过于冗余 以及繁琐 和复杂，如果有人离职了 造成了 后期维护人员 非常的头疼。所以基于这些原因以及和内心找到平衡我决定开发一套属于自己的快速开发的JS 框架，方便开发人员以及其他人员尽心学习和维护。
3.对于这个快速开发的JS 框架我想了好久，同时也琢磨了好久，到底什么才是我们需要的框架 高效 快捷 快速 方便 等等RapidDevelopmentFramework 就是具有这些个特点。因此我决定采用面向对象的方法进行封装属于自己的一套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("[`[email protected]#$^&*()=|{}‘:;‘,\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“‘。，、？]");
//关于特殊的字符的验证
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 类库的封装更多通用的方法。
以上内容全部是基于原创，如需引用 请进行标明请尊重个人的成果 谢谢！！！
时间： 2024-10-17 02:45:21