±à¼ÍƼö: |
±¾ÎÄÖ÷Òª½éÉÜǰ¶ËµÄÉè¼ÆÄ£Ê½ÊÇʲô£¬Éè¼ÆÄ£Ê½µÄÖÖÀ࣬ǰ¶Ë³£ÓõļÆÄ£Ê½Ó¦ÓÃʵÀý£¬Ï£Íû¶ÔÄúµÄѧϰÓÐËù°ïÖú¡£
±¾ÎÄÀ´×Ôwebǰ¶Ë¿ª·¢£¬ÓÉ»ðÁú¹ûÈí¼þAlice±à¼¡¢ÍƼö¡£
|
|
ǰ¶ËµÄÉè¼ÆÄ£Ê½ÊÇʲô
Éè¼ÆÄ£Ê½Ò»¸ö±È½Ïºê¹ÛµÄ¸ÅÄͨË×À´½²£¬ËüÊÇÈí¼þ¿ª·¢ÈËÔ±ÔÚÈí¼þ¿ª·¢¹ý³ÌÖÐÃæÁÙµÄһЩ¾ßÓдú±íÐÔÎÊÌâµÄ½â¾ö·½°¸¡£
µ±È»£¬ÔÚʵ¼Ê¿ª·¢Öв»ÓÃÉè¼ÆÄ£Ê½Í¬ÑùÒ²ÊÇ¿ÉÒÔʵÏÖÐèÇóµÄ£¬Ö»ÊÇÔÚÒµÎñÂß¼±È½Ï¸´ÔÓµÄÇé¿öÏ£¬´úÂë¿É¶ÁÐÔ¼°¿Éά»¤ÐÔ±ä²î¡£
ËùÒÔËæ×ÅÒµÎñÂß¼µÄÀ©Õ¹£¬Á˽ⳣÓÃÉè¼ÆÄ£Ê½½â¾öÎÊÌâÊǷdz£ÓбØÒªµÄ¡£
ǰ¶ËµÄÉè¼ÆÄ£Ê½µÄ»ù±¾×¼Ôò
µ¥Ò»Ö°ÔðÔÔò£ºÃ¿¸öÀàÖ»ÐèÒª¸ºÔð×Ô¼ºµÄÄDz¿·Ö£¬ÀàµÄ¸´ÔӶȽµµÍ¡£
¿ª±ÕÔÔò£ºÒ»¸öʵÌ壬ÈçÀࡢģ¿éºÍº¯ÊýÓ¦¸Ã¶ÔÀ©Õ¹¿ª·Å£¬¶ÔÐ޸Ĺرգ¬ÈóÌÐò¸üÎȶ¨¸üÁé»î¡£
ÀïÊ½Ìæ»»ÔÔò£ºËùÓÐÒýÓûùÀàµÄµØ·½±ØÐëÄÜ͸Ã÷µØÊ¹ÓÃÆä×ÓÀàµÄ¶ÔÏó£¬Ò²¾ÍÊÇ˵×ÓÀà¶ÔÏó¿ÉÒÔÌæ»»Æä¸¸Àà¶ÔÏ󣬶ø³ÌÐòÖ´ÐÐЧ¹û²»±ä¡£±ãÓÚ¹¹½¨À©Õ¹ÐÔ¸üºÃµÄϵͳ¡£
ÒÀÀµµ¹ÖÃÔÔò£ºÉϲãÄ£¿é²»Ó¦¸ÃÒÀÀµµ×²ãÄ£¿é£¬ËüÃǶ¼Ó¦¸ÃÒÀÀµÓÚ³éÏó£»³éÏó²»Ó¦¸ÃÒÀÀµÓÚϸ½Ú£¬Ï¸½ÚÓ¦¸ÃÒÀÀµÓÚ³éÏó¡£Õâ¿ÉÒÔÈÃÏîĿӵÓб仯µÄÄÜÁ¦¡£
½Ó¿Ú¸ôÀëÔÔò£º¶à¸öÌØ¶¨µÄ¿Í»§¶Ë½Ó¿ÚÒªºÃÓÚÒ»¸öͨÓÃÐÔµÄ×ܽӿڣ¬ÏµÍ³Óиü¸ßµÄÁé»îÐÔ¡£
µÏÃ×ÌØÔÔò£¨×îÉÙ֪ʶÔÔò£©£ºÒ»¸öÀà¶ÔÓÚÆäËûÀàÖªµÀµÄÔ½ÉÙÔ½ºÃ£¬Ò²¾ÍÊÇ˵һ¸ö¶ÔÏóÓ¦µ±¶ÔÆäËû¶ÔÏóÓо¡¿ÉÄÜÉÙµÄÁ˽⡣
Éè¼ÆÄ£Ê½µÄÖÖÀà
1¡¢ ´´½¨ÐÍģʽ
Ò»°ãÓÃÓÚ´´½¨¶ÔÏó¡£
°üÀ¨£ºµ¥Àýģʽ,¹¤³§·½·¨Ä£Ê½,³éÏ󹤳§Ä£Ê½,½¨ÔìÕßģʽ,ÔÐÍģʽ¡£
2¡¢½á¹¹ÐÍģʽ
ÖØµãΪ¡°¼Ì³Ð¡±¹ØÏµ£¬ÓÐ×ÅÒ»²ã¼Ì³Ð¹ØÏµ£¬ÇÒÒ»°ã¶¼ÓС°´úÀí¡±¡£
°üÀ¨£ºÊÊÅäÆ÷ģʽ,ÇŽÓģʽ,×éºÏģʽ,×°ÊÎÆ÷ģʽ,Íâ¹Ûģʽ,ÏíԪģʽ,´úÀíģʽ,¹ýÂËÆ÷ģʽ¡£
3¡¢ÐÐΪÐÍģʽ
Ö°ÔðµÄ»®·Ö£¬¸÷×ÔΪÕþ£¬¼õÉÙÍⲿµÄ¸ÉÈÅ¡£
°üÀ¨£ºÃüÁîģʽ£¬½âÊÍÆ÷ģʽ£¬µü´úÆ÷ģʽ£¬ÖнéÕßģʽ£¬±¸Íü¼ģʽ£¬¹Û²ìÕßģʽ£¬×´Ì¬Ä£Ê½£¬²ßÂÔģʽ£¬Ä£°å·½·¨Ä£Ê½£¬·ÃÎÊÕßģʽ£¬ÔðÈÎÁ´Ä£Ê½¡£
ǰ¶Ë³£ÓõļÆÄ£Ê½Ó¦ÓÃʵÀý
1¡¢µ¥Àýģʽ
µ¥ÀýģʽÓÖ³ÆÎªµ¥Ìåģʽ£¬±£Ö¤Ò»¸öÀàÖ»ÓÐÒ»¸öʵÀý£¬²¢Ìṩһ¸ö·ÃÎÊËüµÄÈ«¾Ö·ÃÎʵ㡣һ¸ö¼«ÓпÉÄÜÖØ¸´³öÏֵġ°ÊµÀý¡±,
Èç¹ûÖØ¸´´´½¨£¬½«»á²úÉúÐÔÄÜÏûºÄ¡£Èç¹û½èÖúµÚÒ»´ÎµÄʵÀý£¬ºóÐøÖ»ÊǶԸÃʵÀýµÄÖØ¸´Ê¹Óã¬ÕâÑù¾Í´ïµ½ÁËÎÒÃǽÚÊ¡ÐÔÄܵÄÄ¿µÄ¡£
È«¾Öµ¯´°ÊÇǰ¶Ë¿ª·¢ÖÐÒ»¸ö±È½Ï³£¹æµÄÐèÇó£¬Ò»°ãÇé¿öÏ£¬Í¬Ò»Ê±¼äÖ»»á´æÔÚÒ»¸öÈ«¾Öµ¯´°£¬ÎÒÃÇ¿ÉÒÔʵÏÖµ¥Àýģʽ£¬±£Ö¤Ã¿´ÎʵÀý»¯Ê±·µ»ØµÄʵ¼ÊÉÏÊÇͬһ¸ö·½·¨¡£
class MessageBox {
show() {
console.log("show");
}
hide() {}
static getInstance() {
if (!MessageBox.instance) {
MessageBox.instance = new MessageBox();
}
return MessageBox.instance;
}
}
let box3 = MessageBox.getInstance();
let box4 = MessageBox.getInstance(); console.log(box3 === box4); // true |
ÉÏÃæÕâÖÖÊDZȽϳ£¼ûµÄµ¥ÀýģʽʵÏÖ£¬µ«ÊÇÕâÖÖ·½Ê½´æÔÚһЩ±×¶Ë¡£ÒòΪËüÐèÒªÈõ÷Ó÷½Á˽⵽ͨ¹ýMessage.getInstanceÀ´»ñÈ¡µ¥Àý¡£
ÓÖ»òÕß¼ÙÉèÐèÇó±ä¸ü£¬¿ÉÒÔͨ¹ý´æÔÚ¶þ´Îµ¯´°£¬ÔòÐèÒª¸Ä¶¯²»Éٵط½£¬ÒòΪMessageBox³ýÁËʵÏÖ³£¹æµÄµ¯´°Âß¼Ö®Í⣬»¹ÐèÒª¸ºÔðά»¤µ¥ÀýµÄÂß¼¡£
Òò´Ë£¬¿ÉÒÔ½«³õʼ»¯µ¥ÀýµÄÂß¼µ¥¶Àά»¤£¬ÊµÏÖÒ»¸öͨÓõġ¢·µ»ØÄ³¸öÀà¶ÔÓ¦µ¥ÀýµÄ·½·¨¡£
function getSingleton(ClassName)
{
let instance;
return () => {
if (!instance) {
instance = new ClassName();
}
return instance;
};
}
const createMessageBox = getSingleton(MessageBox);
let box5 = createMessageBox();
let box6 = createMessageBox();
console.log(box5 === box6); |
ÕâÑù£¬Í¨¹ýcreateMessageBox·µ»ØµÄʼÖÕÊÇͬһ¸öʵÀý¡£Èç¹ûÔÚijЩ³¡¾°ÏÂÐèÒªÉú³ÉÁíÍâµÄʵÀý£¬Ôò¿ÉÒÔÖØÐÂÉú³ÉÒ»¸öcreateMessageBox·½·¨£¬»òÕßÖ±½Óµ÷ÓÃnew
MessageBox()£¬ÕâÑù¾Í¶Ô֮ǰµÄÂß¼²»»áÓÐÈκÎÓ°Ïì¡£
2¡¢¹¤³§Ä£Ê½
¹¤³§Ä£Ê½ÌṩÁËÒ»ÖÖ´´½¨¶ÔÏóµÄ·½·¨£¬¶ÔʹÓ÷½Òþ²ØÁ˶ÔÏóµÄ¾ßÌåʵÏÖϸ½Ú£¬²¢Ê¹ÓÃÒ»¸ö¹«¹²µÄ½Ó¿ÚÀ´´´½¨¶ÔÏó¡£
ǰ¶Ë±¾µØ´æ´¢Ä¿Ç°×î³£¼ûµÄ·½°¸¾ÍÊÇʹÓÃlocalStorage£¬ÎªÁ˱ÜÃâÔÚÒµÎñ´úÂëÖи÷ÖÖgetItemºÍsetItem£¬ÎÒÃÇ¿ÉÒÔ×öÒ»ÏÂ×î¼òµ¥µÄ·â×°¡£
let themeModel
= {
name: "local_theme",
get() {
let val = localStorage.getItem(this.name);
return val && jsON.parse(val);
},
set(val) {
localStorage.setItem(this.name, jsON.stringify(val));
},
remove() {
localStorage.removeItem(this.name);
},
};
themeModel.get();
themeModel.set({ darkMode: true }); |
ÕâÑù£¬Í¨¹ýthemeModel±©Â¶µÄget¡¢set½Ó¿Ú£¬ÎÒÃÇÎÞÐèÔÙά»¤local_theme¡£µ«ÉÏÃæµÄ·â×°Ò²´æÔÚһЩ¿É¼ûµÄÎÊÌ⣬Èç¹ûÐèÒªÐÂÔö¶à¸ö
name£¬ÄÇôÉÏÃæµÄÄ£°å´úÂëÐèÒªÖØÐÂд¶à±éÂð£¿ÎªÁ˽â¾öÕâ¸öÎÊÌ⣬ÎÒÃÇ¿ÉÒÔ´´½¨Model¶ÔÏóµÄÂß¼½øÐзâ×°¡£
const storageMap
= new Map()
function createStorageModel(key, storage = localStorage)
{
// Ïàͬkey·µ»Øµ¥Àý
if (storageMap.has(key)) {
return storageMap.get(key);
}
const model = {
key,
set(val) {
storage.setItem(this.key, JSON.stringify(val););
},
get() {
let val = storage.getItem(this.key);
return val && JSON.parse(val);
},
remove() {
storage.removeItem(this.key);
},
};
storageMap.set(key, model);
return model;
} const themeModel = createStorageModel('local_theme',
localStorage)
const utmSourceModel = createStorageModel('utm_source',
sessionStorage) |
ÕâÑù£¬ÎÒÃǾͿÉÒÔͨ¹ýcreateStorageModelÕâ¸ö¹«¹²µÄ½Ó¿ÚÀ´´´½¨¸÷ÖÖ²»Í¬±¾µØ´æ´¢µÄ¶ÔÏ󣬶øÎÞÐè¹Ø×¢´´½¨¶ÔÏóµÄ¾ßÌåϸ½Ú¡£
3¡¢²ßÂÔģʽ
²ßÂÔģʽ£¬¿ÉÒÔÕë¶Ô²»Í¬µÄ״̬£¬¸ø³ö²»Í¬µÄËã·¨»òÕß½á¹û¡£½«²ã¼¶ÏàͬµÄÂß¼·â×°³É¿ÉÒÔ×éºÏºÍÌæ»»µÄ²ßÂÔ·½·¨£¬¼õÉÙif...else´úÂ룬·½±ãÀ©Õ¹ºóÐø¹¦ÄÜ¡£
±íµ¥Ð£ÑéÊÇÎÒÃÇ×î³£¼ûµÄ³¡¾°ÁË£¬ÎÒÃÇÒ»°ã¶¼»áÏëµ½ÓÃif...elseÀ´Åжϡ£
function onFormSubmit(params)
{
if (!params.name) {
return showError("ÇëÌîдêdzÆ");
}
if (params.name.length > 6) {
return showError("êdzÆ×î¶à6λ×Ö·û");
}
if (!/^1\d{10}$/.test(params.phone))
return showError("ÇëÌîдÕýÈ·µÄÊÖ»úºÅ");
}
// ...
sendSubmit(params)
} |
½«ËùÓÐ×ֶεÄУÑ鹿Ôò¶¼¶ÑµþÔÚÒ»Æð£¬´úÂëÁ¿´ó£¬ÅŲéÎÊÌâÒ²ÊÇÒ»¸ö´óÂé·³¡£ÔÚÓö¼û´íÎóʱ£¬Ö±½Óͨ¹ý return
Ìø¹ýÁ˺óÃæµÄÅжϣ»Èç¹ûÎÒÃÇÏ£ÍûÖ±½Óչʾÿ¸ö×ֶεĴíÎóÄØ£¬ÄÇô¸Ä¶¯µÄ¹¤×÷Á¿ÓÖ²»ÉÙ¡£
²»¹ý£¬ÔÚantd¡¢ELementUIµÈ¿ò¼ÜÊ¢ÐеÄÄê´ú£¬ÎÒÃÇÒѾ²»ÔÙÐèҪдÕâЩ¸´ÔÓµÄ±íµ¥Ð£Ñ飬µ«ÊǶÔÓÚËûÃǵÄʵÏÖÔÀí£¬ÎÒÃÇ¿ÉÒÔ¼òµ¥Ä£Äâһϡ£
// ¶¨ÒåÒ»¸öУÑéµÄÀ࣬Ö÷Òª±©Â¶Á˹¹Ôì²ÎÊýºÍvalidateÁ½¸ö½Ó¿Ú
class Schema {
constructor(descriptor) {
this.descriptor = descriptor; // ´«È붨ÒåµÄУÑ鹿Ôò
}
// ²ð·Ö³öһЩ¸üͨÓõĹæÔò£¬±ÈÈçrequired(±ØÌî)¡¢len(³¤¶È)¡¢min/max(×îÖµ)µÈ£¬¿ÉÒÔ¾¡¿ÉÄܵظ´ÓÃ
handleRule(val, rule) {
const { key, params, message } = rule;
let ruleMap = {
required() {
return !val;
},
max() {
return val > params;
},
validator() {
return params(val);
},
};
let handler = ruleMap[key];
if (handler && handler()) {
throw message;
}
} validate(data) {
return new Promise((resolve, reject) => {
let keys = Object.keys(data);
let errors = [];
for (let key of keys) {
const ruleList = this.descriptor[key];
if (!Array.isArray(ruleList) || !ruleList.length)
continue; const val = data[key];
for (let rule of ruleList) {
try {
this.handleRule(val, rule);
} catch (e) {
errors.push(e.toString());
}
}
}
if (errors.length) {
reject(errors);
} else {
resolve();
}
});
}
}
// ÉùÃ÷ÿ¸ö×ֶεÄУÑéÂß¼
const descriptor = {
nickname: [
{ key: "required", message: "ÇëÌîдêdzÆ"
},
{ key: "max", params: 6, message:
"êdzÆ×î¶à6λ×Ö·û" },
],
phone: [
{ key: "required", message: "ÇëÌîдµç»°ºÅÂë"
},
{
key: "validator",
params(val) {
return !/^1\d{10}$/.test(val);
},
message: "ÇëÌîдÕýÈ·µÄµç»°ºÅÂë",
},
],
};
// ¿ªÊ¼¶ÔÊý¾Ý½øÐÐУÑé
const validator = new Schema(descriptor);
const params = { nickname: "", phone:
"123000" };
validator.validate(params).then(() => {
console.log("success");
}).catch((e) => {
console.log(e);
}); |
SchemaÖ÷Òª±©Â¶Á˹¹Ôì²ÎÊýºÍvalidateÁ½¸ö½Ó¿Ú£¬ÊÇÒ»¸öͨÓõŤ¾ßÀ࣬¶øparamsÊÇ±íµ¥Ìá½»µÄÊý¾ÝÔ´£¬Òò´ËÖ÷ÒªµÄУÑéÂ߼ʵ¼ÊÉÏÊÇÔÚdescriptorÖÐÉùÃ÷µÄ¡£½«³£¼ûµÄУÑ鹿Ôò¶¼·ÅÔÚruleMapÖУ¬±È֮ǰ¸÷ÖÖ²»¿É¸´ÓõÄif..elseÅжϸüÈÝÒ×ά»¤ºÍµü´ú¡£
4¡¢×´Ì¬Ä£Ê½
״̬ģʽÔÊÐíÒ»¸ö¶ÔÏóÔÚÆäÄÚ²¿×´Ì¬¸Ä±äµÄʱºò¸Ä±äËüµÄÐÐΪ¡£×´Ì¬Ä£Ê½µÄ˼·ÊÇ£ºÊ×ÏÈ´´½¨Ò»¸ö״̬¶ÔÏó±£´æ×´Ì¬±äÁ¿£¬È»ºó·â×°ºÃÿÖÖ¶¯×÷¶ÔÓ¦µÄ״̬£¬È»ºó״̬¶ÔÏó·µ»ØÒ»¸ö½Ó¿Ú¶ÔÏó£¬Ëü¿ÉÒÔ¶ÔÄÚ²¿µÄ״̬Ð޸ĻòÕßµ÷Óá£
³£¼ûµÄʹÓó¡¾°£¬±ÈÈç¹ö¶¯¼ÓÔØ£¬°üº¬Á˳õʼ»¯¼ÓÔØ¡¢¼ÓÔØ³É¹¦¡¢¼ÓÔØÊ§°Ü¡¢¹ö¶¯¼ÓÔØµÈ״̬£¬ÈÎÒâʱ¼äËüÖ»»á´¦ÓÚÒ»ÖÖ״̬¡£
// ¶¨ÒåÒ»¸ö״̬»ú
class rollingLoad {
constructor() {
this._currentState = 'init'
this.states = {
init: { failed: 'error' },
init: { complete: 'normal' },
normal: { rolling: 'loading' },
loading: { complete: 'normal' },
loading: { failed: 'error' },
}
this.actions = {
init() {
console.log('³õʼ»¯¼ÓÔØ£¬´óloading')
},
normal() {
console.log('¼ÓÔØ³É¹¦£¬Õý³£Õ¹Ê¾')
},
error() {
console.log('¼ÓÔØÊ§°Ü')
},
loading() {
console.log('¹ö¶¯¼ÓÔØ')
}
// .....
}
}
change(state) {
// ¸ü¸Äµ±Ç°×´Ì¬
let to = this.states[this._currentState][state]
if(to){
this._currentState = to
this.go()
return true
}
return false
}
go() {
this.actions[this._currentState]()
return this
}
}// ״̬¸ü¸ÄµÄ²Ù×÷
const rollingLoad = new rollingLoad()
rollingLoad.go()
rollingLoad.change('complete')
rollingLoad.change('loading') |
ÕâÑù£¬ÎÒÃǾͿÉÒÔͨ¹ý״̬±ä¸ü£¬ÔËÐÐÏàÓ¦µÄº¯Êý£¬ÇÒ״̬֮¼ä´æÔÚÁªÏµ¡£ÄÇô£¬¿´ÆðÀ´ÊDz»ÊǺͲßÂÔģʽºÜÏñÄØ£¿Æäʵ²»È»£¬²ßÂÔÀàµÄ¸÷¸öÊôÐÔÖ®¼äÊÇÆ½µÈƽÐеģ¬ËüÃÇÖ®¼äûÓÐÈκÎÁªÏµ¡£¶ø×´Ì¬»úÖеĸ÷¸ö״̬֮¼ä´æÔÚÏ໥Çл»£¬ÇÒÊDZ»¹æ¶¨ºÃÁ˵ġ£
5¡¢·¢²¼-¶©ÔÄģʽ
·¢²¼¡ª¶©ÔÄģʽÓֽй۲ìÕßģʽ£¬Ëü¶¨Òå¶ÔÏó¼äµÄÒ»ÖÖÒ»¶Ô¶àµÄÒÀÀµ¹ØÏµ£¬µ±Ò»¸ö¶ÔÏóµÄ״̬·¢Éú¸Ä±äʱ£¬ËùÓÐÒÀÀµÓÚËüµÄ¶ÔÏó¶¼½«µÃµ½Í¨Öª¡£
·¢²¼¶©ÔÄģʽ´ó¸ÅÊÇǰ¶Ëͬѧ×îÊìϤµÄÉè¼ÆÄ£Ê½Ö®Ò»ÁË£¬³£¼ûµÄʼþ¼àÌýaddEventListener£¬¸÷ÖÖÊôÐÔ·½·¨onload¡¢onchange£¬vueÏìӦʽÊý¾Ý£¬×é¼þͨÐÅredux¡¢eventBusµÈ¡£
³£¼ûµÄ»ñÈ¡µÇ¼ÐÅÏ¢£¬¼ÙÉèÎÒÃÇ¿ª·¢Ò»¸öÉ̳ÇÍøÕ¾£¬ÍøÕ¾ÀïÓÐ header Í·²¿¡¢nav µ¼º½¡¢ÏûÏ¢ÁÐ±í¡¢¹ºÎï³µµÈÄ£¿é¡£
Õ⼸¸öÄ£¿éµÄäÖȾÓÐÒ»¸ö¹²Í¬µÄǰÌáÌõ¼þ£¬¾ÍÊDZØÐëÏÈÓà ajax Òì²½ÇëÇó»ñÈ¡Óû§µÄµÇ¼ÐÅÏ¢¡£
±ÈÈçÓû§µÄÃû×ÖºÍÍ·ÏñÒªÏÔʾÔÚ header Ä£¿éÀ¶øÕâÁ½¸ö×ֶζ¼À´×ÔÓû§µÇ¼ºó·µ»ØµÄÐÅÏ¢¡£Òì²½µÄÎÊÌâͨ³£Ò²¿ÉÒÔÓûص÷º¯ÊýÀ´½â¾ö£º
login.succ(function(data){
header.setAvatar( data.avatar); // ÉèÖà header Ä£¿éµÄÍ·Ïñ
nav.setAvatar( data.avatar ); // ÉèÖõ¼º½Ä£¿éµÄÍ·Ïñ
message.refresh(); // Ë¢ÐÂÏûÏ¢Áбí
cart.refresh(); // ˢйºÎï³µÁбí
}); |
ÎÒÃÇ»¹±ØÐëÁ˽â header Ä£¿éÀïÉèÖÃÍ·ÏñµÄ·½·¨½ÐsetAvatar¡¢¹ºÎﳵģ¿éÀïË¢Ðµķ½·¨½Ðrefresh£¬ÕâÖÖÇ¿ñîºÏÐÔ»áʹ³ÌÐò±äµÃ²»Ò×ÍØÕ¹¡£
ÄÇô»ØÍ·¿´¿´ÎÒÃǵķ¢²¼¡ª¶©ÔÄģʽ£¬ÕâÖÖģʽÏ£¬¶ÔÓû§ÐÅÏ¢¸ÐÐËȤµÄÒµÎñÄ£¿é¿ÉÒÔ×ÔÐж©ÔĵǼ³É¹¦µÄÏûϢʼþ¡£
µ±µÇ¼³É¹¦Ê±£¬µÇ¼ģ¿éÖ»ÐèÒª·¢²¼µÇ¼³É¹¦µÄÏûÏ¢£¬¶øÒµÎñ·½½ÓÊܵ½ÏûÏ¢Ö®ºó£¬¾Í»á¿ªÊ¼½øÐи÷×ÔµÄÒµÎñ´¦Àí£¬µÇ¼ģ¿é²¢²»¹ØÐÄÒµÎñ·½¾¿¾¹Òª×öʲô¡£
// ·¢²¼µÇ¼³É¹¦µÄÏûÏ¢
$.ajax( 'http://xxx.com?login', function(data){
// µÇ¼³É¹¦
login.trigger( 'loginSucc', data); // ·¢²¼µÇ¼³É¹¦µÄÏûÏ¢
});
// ¸÷Ä£¿é¼àÌýµÇ¼³É¹¦µÄÏûÏ¢
var header = (function(){ // header Ä£¿é
login.listen( 'loginSucc', function(data){
header.setAvatar( data.avatar );
});
return {
setAvatar: function( data ){
console.log( 'ÉèÖà header Ä£¿éµÄÍ·Ïñ' );
}
}
})();
var nav = (function(){ // nav Ä£¿é
login.listen( 'loginSucc', function( data ){
nav.setAvatar( data.avatar );
});
return {
setAvatar: function( avatar ){
console.log( 'ÉèÖà nav Ä£¿éµÄÍ·Ïñ' );
}
}
})(); |
·¢²¼¡ª¶©ÔÄģʽ¿ÉÒԹ㷺ӦÓÃÓÚÒì²½±à³ÌÖУ¬ÕâÊÇÒ»ÖÖÌæ´ú´«µÝ»Øµ÷º¯ÊýµÄ·½°¸¡£±ÈÈ磬ÎÒÃÇ¿ÉÒÔ¶©ÔÄajaxÇëÇóµÄerror¡¢succµÈʼþ¡£
»òÕßÈç¹ûÏëÔÚ¶¯»µÄÿһ֡Íê³ÉÖ®ºó×öһЩÊÂÇ飬ÄÇÎÒÃÇ¿ÉÒÔ¶©ÔÄÒ»¸öʼþ£¬È»ºóÔÚ¶¯»µÄÿһ֡Íê³ÉÖ®ºó·¢²¼Õâ¸öʼþ¡£
ÔÚÒì²½±à³ÌÖÐʹÓ÷¢²¼¡ª¶©ÔÄģʽ£¬ÎÒÃǾÍÎÞÐè¹ý¶à¹Ø×¢¶ÔÏóÔÚÒì²½ÔËÐÐÆÚ¼äµÄÄÚ²¿×´Ì¬£¬¶øÖ»ÐèÒª¶©ÔĸÐÐËȤµÄʼþ·¢Éúµã¡£
6¡¢µü´úÆ÷ģʽ
µü´úÆ÷ģʽÊÇÖ¸ÌṩһÖÖ·½·¨Ë³Ðò·ÃÎÊÒ»¸ö¾ÛºÏ¶ÔÏóÖеĸ÷¸öÔªËØ£¬¶øÓÖ²»ÐèÒª±©Â¶¸Ã¶ÔÏóµÄÄÚ²¿±íʾ¡£
µü´úÆ÷ģʽ¿ÉÒ԰ѵü´úµÄ¹ý³Ì´ÓÒµÎñÂß¼ÖзÖÀë³öÀ´£¬ÔÚʹÓõü´úÆ÷ģʽ֮ºó£¬¼´Ê¹²»¹ØÐĶÔÏóµÄÄÚ²¿¹¹Ô죬Ҳ¿ÉÒÔ°´Ë³Ðò·ÃÎÊÆäÖеÄÿ¸öÔªËØ¡£
JS Ò²ÄÚÖÃÁ˶àÖÖ±éÀúÊý×éµÄ·½·¨ÈçforEach¡¢reduceµÈ¡£¶ÔÓÚÊý×éµÄÑ»·´ó¼Ò¶¼Çá³µÊì·ÁË£¬ÔÚʵ¼Ê¿ª·¢ÖУ¬Ò²¿ÉÒÔͨ¹ýÑ»·À´ÓÅ»¯´úÂë¡£
Ò»¸ö³£¼ûµÄ¿ª·¢³¡¾°ÊÇ£ºÍ¨¹ý ua Åжϵ±Ç°Ò³ÃæµÄÔËÐÐÆ½Ì¨£¬·½±ãÖ´Ðв»Í¬µÄÒµÎñÂß¼£¬×î»ù±¾µÄд·¨µ±È»ÊÇif...else¡£
const PAGE_TYPE
= {
app: "app", // app
wx: "wx", // ΢ÐÅ
tiktok: "tiktok", // ¶¶Òô
bili: "bili", // BÕ¾
kwai: "kwai", // ¿ìÊÖ
};
function getPageType() {
const ua = navigator.userAgent;
let pageType;
// ÒÆ¶¯¶Ë¡¢×ÀÃæ¶Ë΢ÐÅä¯ÀÀÆ÷
if (/xxx_app/i.test(ua)) {
pageType = app;
} else if (/MicroMessenger/i.test(ua)) {
pageType = wx;
} else if (/aweme/i.test(ua)) {
pageType = tiktok;
} else if (/BiliApp/i.test(ua)) {
pageType = bili;
} else if (/Kwai/i.test(ua)) {
pageType = kwai;
} else {
// ...
}
return pageType;
} |
²Î¿¼²ßÂÔģʽµÄ˼·£¬ÎÒÃÇ¿ÉÒÔ¼õÉÙ·ÖÖ§ÅжϵijöÏÖ£¬½«Ã¿¸öƽ̨µÄÅжϲð·Ö³Éµ¥¶ÀµÄ²ßÂÔ:
function isApp(ua) {
return /xxx_app/i.test(ua);
}
function isWx(ua) {
return /MicroMessenger/i.test(ua);
} function isTiktok(ua) {
return /aweme/i.test(ua);
} function isBili(ua) {
return /BiliApp/i.test(ua);
} function isKwai(ua) {
return /Kwai/i.test(ua);
} let platformList = [
{ name: "app", validator: isApp },
{ name: "wx", validator: isWx },
{ name: "tiktok", validator: isTiktok
},
{ name: "bili", validator: isBili
},
{ name: "kwai", validator: isKwai
},
];
function getPageType() {
// ÿ¸öƽ̨µÄÃû³ÆÓë¼ì²â·½·¨
const ua = navigator.userAgent;
// ±éÀú
for (let { name, validator } in platformList)
{
if (validator(ua)) {
return name;
}
}
} |
ÕâÑù£¬Õû¸ögetPageType·½·¨¾Í±äµÃ·Ç³£¼ò½à£º°´Ë³Ðò±éÀúplatformList£¬·µ»ØµÚÒ»¸öÆ¥ÅäÉÏµÄÆ½Ì¨Ãû³Æ×÷ΪpageType¡£
ÕâÑù¼´Ê¹ºóÃæÐèÒªÔö¼Ó»òÒÆ³ýƽ̨Åжϣ¬ÐèÒªÐ޸ĵĽö½öÒ²Ö»ÊÇplatformListÕâ¸öµØ·½¶øÒÑ¡£
µü´úÆ÷ģʽÊÇÒ»ÖÖÏà¶Ô¼òµ¥µÄģʽ£¬¼òµ¥µ½ºÜ¶àʱºòÎÒÃǶ¼²»ÈÏΪËüÊÇÒ»ÖÖÉè¼ÆÄ£Ê½¡£Ä¿Ç°µÄ¾ø´ó²¿·ÖÓïÑÔ¶¼ÄÚÖÃÁ˵ü´úÆ÷¡£
×ܽá
ÔÚ½«º¯Êý×÷ΪһµÈ¶ÔÏóµÄÓïÑÔÖУ¬ÓÐÐí¶àÐèÒªÀûÓöÔÏó¶à̬ÐÔµÄÉè¼ÆÄ£Ê½£¬ÕâЩģʽµÄ½á¹¹Óë´«Í³ÃæÏò¶ÔÏóÓïÑԵĽṹ´óÏྶͥ£¬Êµ¼ÊÉÏÒѾÈÚÈëµ½ÁËÓïÑÔÖ®ÖУ¬ÎÒÃÇ¿ÉÄܾ³£Ê¹ÓÃËüÃÇ£¬Ö»ÊDz»ÖªµÀËüÃǵÄÃû×Ö¶øÒÑ¡£
ÉîÈëÀí½âËûÃÇ£¬²¢ÓÐÒâʶµØÈ¥Ê¹ÓÃÉè¼ÆÄ£Ê½À´ÓÅ»¯´úÂ룬ÌáÉýЧÂÊ£¬Ê¹ÎÒÃǵÄϵͳÓиüºÃµÄÍØÕ¹ÐÔ²ÅÊÇÎÒÃÇ×·ÇóµÄ¡£
|