幫助類封裝
提示:這里是自己開發中所用的封裝類
例如:JSHelper封裝 DBHelper封裝 持續更新 (本人小白,不喜勿噴)
提示:寫完文章后,目錄可以自動生成,如何生成可參考右邊的幫助檔案
Hepler目錄
- 幫助類封裝
- 前言
- 一、JSHelper是什么?
- 二、使用步驟
- 1.引入庫
- 2.創建jsHelper.js檔案
- 3 使用Jshelper.js實體
- 總結
前言
提示:Helper類封裝,把日常使用的代碼進行封裝,避免重復書寫相同的代碼
提示:以下是本篇文章正文內容,下面案例可供參考
一、JSHelper是什么?
Jshelper 是自己把ajax進行封裝 以及一起其他的資料驗證,比如是否為字串 是否為數字,
二、使用步驟
1.引入庫
代碼如下(示例):
首先參考原生jquery
其次參考自己創建的Jshelper.js檔案,
可以放到母版頁下面
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/jsHelper.js"></script>
2.創建jsHelper.js檔案
代碼如下(示例):
//BMCW.Common
(function ($) {
"use strict";
/**
* jsHelper 名稱可以進行更改
* 如涉及到jsHelper更改,所有jsHelper都需要更改
*/
window.jsHelper = window.jsHelper || {};
$.extend(jsHelper, {
/**
* 版本號
* @type {Number}
*/
version: "3.3.1",
/**
* 是否為函式
* @param {*} fn 物件
* @return {Boolean} 是否函式
*/
isFunction: function (fn) {
return typeof fn === "function";
},
/**
* 是否是數字或者數字字串
* @param {String} value 數字字串
* @return {Boolean} 是否是數字或者數字字串
*/
isNumeric: function (value) {
return !isNaN(parseFloat(value)) && isFinite(value);
},
/**
* 是否字串
* @param {String} value
* @return {Boolean}
*/
isString: function (value) {
return typeof value === "string";
},
/**
* 是否數字
* @param {Number} value
* @return {Boolean}
*/
isNumber: function (value) {
return typeof value === "number";
},
/**
* 是否bool型別
* @param {Boolean} value
* @return {Boolean}
*/
isBoolean: function (value) {
return typeof value === "boolean";
},
/**
* 是否為空
* @param {Object} value
* @return {Boolean}
*/
isNullOrEmpty: function (value) {
if (value) {
value = value.toString().replace(/(^\s*)|(\s*$)/g, "");
if (value == "null" || value == "") {
return true;
} else {
return false;
}
} else {
if (value === 0 || value === false) {
return false;
}
return true;
}
},
/**
* 獲取查詢字串變數
*/
getQueryString: function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURIComponent(r[2]);
return null;
},
/**
* @description ajax請求
* @param {object} option
* @example
* common.ajax({url:"www.baidu.com",type:"Get",success:function(){}});
*/
ajax: function (option) {
option.type = option.type || "GET";
option.type = option.type.toUpperCase();
if (option.type == "POST") {
option.data = JSON.stringify(option.data);
}
var a = {
url: option.url || "",
type: option.type,
async: option.async || true,
data: option.data || {},
dataType: option.dataType || "json",
headers: option.headers || null,
contentType: option.contentType || "application/json",
timeout: option.timeout || null,
beforeSend: option.beforeSend || null,
complete: option.complete || function () { },
success: option.success || null,
error: option.error || null,
}
$.ajax(a);
},
/**
* 獲取表單內容 json格式
*/
seariallizeJson: function (formid) {
var obj = {};
var fields = $(formid).serializeArray();
jQuery.each(fields, function (i, fields) {
if (obj[this.name]) {
/*
表單中可能有多個相同標簽,比如有多個label,
那么你在json物件o中插入第一個label后,還要繼續插入,
那么這時候o[label]在o中就已經存在,所以你要把o[label]做嵌套陣列處理
*/
//如果o[label]不是嵌套在陣列中
if (!obj[this.name].push) {
obj[this.name] = [o[this.name]]; // 將o[label]初始為嵌套陣列,如o={a,[a,b,c]}
}
obj[this.name].push(this.value || ''); // 將值插入o[label]
} else {
obj[this.name] = this.value || ''; // 第一次在o中插入o[label]
}
});
return obj;
}
});
})(jQuery);
3 使用Jshelper.js實體
jsHelper.seariallizeJson(引數)//引數資料;
jsHelper.ajax({
url: url, //請求路徑
data: data, //請求資料
type: "POST",//請求方式
success: function (rt) {
}
});
總結
提示:這里對文章進行總結:
以上是自我使用總結,
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/296604.html
標籤:其他
