English | 中文
-
Collection of common front-end methods to facilitate normal development
-
Applicable to mobile terminal,
PC
terminal, mobile terminal first (some methods come from the Internet) -
Modular development for easy reference
-
Support
tree shaking
to reduce packing volume
This tool is currently divided into four modules
Form
: It contains general form validation methods, character judgment of user input information, etc.Common
: It contains some methods that are often used in mobile terminal developmentInfo
: It contains some information about the current mobile deviceAjax
: It contains the encapsulatedajax
request method
- use the
npm
method
npm i fecmjs
// 1. Use all modules
import * as Fecmjs from 'fecmjs';
const {Form, Normal, Info} = Fecmjs;
const flag = Form.checkEmail('limingcan562@163.com');
console.log(flag); // true
// 2. When you only need to use some functions, you can import some modules (recommended)
import {Form, Normal, Info} from 'fecmjs';
const flag = Form.checkEmail('limingcan562@163.com');
console.log(flag); // true
- Use
<script></script>
to import
<script src="https://cdn.xxxx/fecmjs.min.js"></script>
<script>
var Form = Fecmjs.Form;
var flag = Form.checkEmail('limingcan562@163.com');
console.log(flag); // true
</script>
parameter name | description | default value |
---|---|---|
src |
URL of the image to load | '' |
Example:
Common
.loadImage('http://xxxx')
// loaded successfully
.then(img => {
})
// Failed to load
.catch(err => {
});
parameter name | description | default value |
---|---|---|
delay |
delay time | 500 |
Example:
Common
.wait(1000)
// Execute after a delay of 1s
.then( => {
});
parameter name | description | default value |
---|---|---|
autoClose |
Whether to close automatically | true |
delay |
how many seconds after which to automatically close | 1000 |
text |
prompt text | loading... |
closedFn |
closed callback | () => {} |
Example:
Common
.showTips({
autoClose: false,
delay: 2000,
text: 'please waiting',
closedFn: () => {
console.log('closed');
}
});
Description: Applicable when autoClose: false
of showTips
Example:
Common.closeTips();
parameter name | description | default value |
---|---|---|
domEle |
dom element |
{} |
Example:
const dom = document.getElementById('ele');
const isShow = Common.isVisibleArea(dom);
// element is in viewport
if (isShow) {
}
// element is not in viewport
else {
}
parameter name | description | default value |
---|---|---|
ID |
ID card (only supports mainland ID cards) | '' |
Example:
const flag = Form.checkID('441522xxxxxxxxxxxx');
// ID card format is correct
if (flag) {
}
// wrong ID format
else {
}
parameter name | description | default value |
---|---|---|
email |
mailbox | '' |
Example:
const flag = Form.checkEmail('xxxx@gmail.com');
// Email format is correct
if (flag) {
}
// Email format error
else {
}
parameter name | description | default value |
---|---|---|
phone |
mobile phone number (only supports mainland mobile phones) | '' |
Example:
const flag = Form.isPhoneNum('1581xxxxx81');
// phone number format is correct
if (flag) {
}
// Wrong format of phone number
else {
}
parameter name | description | default value |
---|---|---|
min |
minimum value to generate | 0 |
max |
maximum value to generate | 0 |
Example:
// will generate random numbers from 1 to 10
const num = Form.isPhoneNum(1, 10);
parameter name | description | default value |
---|---|---|
content |
String content | `` |
Example:
const str = Form.removeEmoji('hello,I am 🍁');
console.log(str); // hello,I am
parameter name | description | default value |
---|---|---|
val |
string content | '' |
Example:
const str = Form.allChinese('How are you?');
console.log(str); // false because there is a special character question mark
parameter name | description | default value |
---|---|---|
val |
string content | '' |
Example:
const str = Form.allEnglish('hello world');
console.log(str); // false because of spaces
parameter name | description | default value |
---|---|---|
str |
string content | '' |
Example:
const str = Form.allEnglish('??!');
console.log(str); // true
parameter name | description | default value |
---|---|---|
str |
string content | '' |
Example:
const str = Form.allEnglish('hello, I am lMC');
console.log(str); // hello, IamlMC
attribute name | description | value description |
---|---|---|
platform |
is the mobile terminal or the pc terminal. |
pc : pc sidemobile : mobile side |
screenType |
mobile phone screen type | X : full screennormal : normal screen (iphone5, 6, 7)short : smaller screen than normal screen |
sysTem |
device system | ios : ios system android : android Android system not moblie : current non-mobile terminal |
isWechat |
Is the current WeChat environment | true : the current WeChat environment false : the current non-WeChat environment |
Equivalent to a global configuration
parameter name | description | default value |
---|---|---|
config.type |
request type | POST |
config.debug |
Whether to enable interface printing information (recommended to be disabled in production environment) | 0 |
config.debugStep |
Whether to enable printing of the four steps of xhr connection for debugging | 0 |
config.headers |
Set request headers. GET request, the value is: application/x-www-form-urlencoded; charset=UTF-8; POST request, the value is: application/x-www-form-urlencoded; charset=UTF-8 ;When passed When data is of type FormData , the setting will be invalid |
{} |
config.url |
request URL | '' |
config.data |
request parameters | {} |
config.timeout |
interface timeout | 3000 |
config.success |
Status code 200 Successful callback, res is the result returned by the interface |
res => {} |
config.fail |
The status code is not 200 The failure callback, res is the result returned by the interface |
res => {} |
config.always |
A callback triggered on success or failure, res is the result returned by the interface |
res => {} |
config.timeoutFn |
Interface timeout callback, res native event callback object |
res => {} |
config.error |
interface error callback, res native event callback object |
res => {} |
config.fieldName |
The field representing the status code returned by the backend | ret |
config.successCode |
The success status value returned by the backend | success |
config.responseDataName |
backend data field name | data |
Example:
import {Ajax} from 'fecmjs';
const ajax = new Ajax({
debug: 0,
url: 'xxxxx',
timeout: 2000
});
ajax.base({
success: res => {
console.log('状态码200 成功');
if (ret.ret === 0) {
// do someting
} else {
// fail
}
},
fail: res => {
console.log('状态码非200 失败');
}
});
Enter some of the parameters that can be passed in to the default global parameters. If they are passed in again, the default global parameters will be overwritten.
Example:
ajax.base({
type: 'get',
debug: 0,
url: 'xxxxx',
timeout: 2000,
success: res => {
console.log('status code 200 success');
if (ret.ret === 0) {
// do something
} else {
// fail
}
},
fail: res => {
console.log('Failure with status code other than 200');
}
});
- This method is encapsulated once again with the
base
method according to the data format returned by the backend. So when you want to use it, you need to configurefieldName
,successCode
,failCode
andresponseDataName
in thenew Ajax()
method - When the status code is
200
and the success status returned by the backend is satisfied, then the function is successful and returns aPromise
. The parameters in thethen
function are the data returned by the backend - When the status code is
200
, and the non-successful status returned by the backend is satisfied, or it is triggered when the interface is called,timeFn
,error
will trigger thecatch
function - The input parameter
config
only accepts the following parametersdata
url
type
headers
timeout
debug
debugStep
When entering the
catch
function, you can judge the type of the current error according to theerr
parameter of thecatch
function
Possible values for the catch
function err._type
(parameter):
possible values | value description |
---|---|
connect error |
connection error |
connect timeout |
connection timeout |
connect fail |
connection fail |
interface fail |
The connection is successful, the interface returns a non-success status code |
other errors |
Other errors, possibly due to your own code writing errors |
Example:
// 1. Suppose the data returned by the backend successfully is in the format:
/**
* @ret is config.fieldName
* @success is config.successCode
* @data is config.responseDataName
*/
{
ret: 'success',
data: {
name: 'lmc',
age: 27
}
}
// 2. Initialize configuration
const ajax = new Ajax({
fieldName: 'ret',
successCode: 'success',
responseDataName: 'data'
});
// 3. call
ajax.rebuild({
type: 'get',
debug: 0,
url: 'xxxxx',
timeout: 2000,
})
// interface succeeded
.then(res => {
// res ==> data: {name: 'lmc', age: 27}
})
// If ret !== 'success', fail (including timeFn, error, will trigger catch)
.catch(err => {
// connect error
if (err._type === 'connect error') {
}
// connect timeout
else if (err._type === 'connect timeout') {
}
// interface fail
else if (err._type === 'interface fail') {
}
// other errors
else if (err._type === 'other errors') {
}
})
In dis/ajax.min.js
, there are Ajax
modules extracted separately, which can also be directly used
import Ajax from 'fecmjs/plugin/ajax.esm';
const ajax = new Ajax({
debug: 0,
url: 'xxxxx',
timeout: 2000
});
ajax.base({
type: 'get',
url: 'xxxx',
data: {
type: 5,
},
timeout: 1000,
success: res => {
console.log('succss', res);
},
fail: res => {
console.log('fail', res);
}
});
<script src="./ajax.min.js"></script>
<script>
const ajax = new Ajax({
debug: 0,
url: 'xxxxx',
timeout: 2000
});
ajax.rebuild({
type: 'get',
url: 'xxxx',
data: {
type: 5,
},
timeout: 1000,
})
.then(res => {
console.log('succss', res);
})
.catch(res => {
console.log('fail', res);
});
</script>