前言
在开发过程中，咱们常常会应用 console.log 来输入一些信息，以便于咱们调试。然而，当咱们的我的项目越来越大，咱们的 console.log 也会越来越多，这时候咱们就须要对 console.log 进行治理，以便于咱们更好的调试。
- 以埋点为例子，本地开发中，咱们个别是通过打印埋点来看是否失效，这时候
埋点日志可能跟其它日志混在一起，咱们很难找到咱们想要的日志，这时候咱们就须要对埋点日志进行治理，以便于咱们更好的调试。
logN.success("埋点", "page_click_report", { eventName: "page_click_report", params: { user_id: "linwu", age: "18", height: "171cm", sex: "male", wx: "linwu-hi" }});
有时候在混合H5开发的时候，接口并不是走XHR而是由客户端提供的JSBridge申请，这时候咱们就要对log进行一些解决，以便于咱们更好的调试。
Log函数
间接copy上面的代码到我的项目中，能够间接应用,童叟无欺啊亲
type Color = 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'error';const COLORS: Color[] = ['primary', 'success', 'info', 'warning', 'danger', 'error'];const COLOR_MAP: Record<Color, string> = { primary: '#2d8cf0', success: '#19be6b', info: '#909399', warning: '#ff9900', danger: '#35495E', error:"#FF0000"};const getColor = (type: Color) => COLOR_MAP[type];const createLog = <T extends any[]>( fn: (type: Color, ...args: T) => void): Record<Color, (...args: T) => void> => { return COLORS.reduce((logs, type) => { logs[type] = (...args: T) => fn(type, ...args); return logs; }, {} as Record<Color, (...args: T) => void>);};const nsLog = (type: Color, ns: string, msg: string, ...args: any[]) => { const color = getColor(type); console.log( `%c ${ns} %c ${msg} %c ${args.length ? '%o' : ''}`, `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`, `border:1px solid ${color}; padding: 1px; border-radius: 0 4px 4px 0; color: ${color};`, 'background:transparent', ...args );};export const logN = createLog(nsLog);const sLog = (type: Color, msg: string, ...args: any[]) => { const color = getColor(type); console.log( `%c ${msg} ${args.length ? '%o' : ''}`, `color: ${color};`, ...args );};export const logS = createLog(sLog);const bLog = (type: Color, msg: string, ...args: any[]) => { const color = getColor(type); console.log( `%c ${msg} ${args.length ? '%o' : ''}`, `background:${color}; padding: 2px; border-radius: 4px; color: #fff;`, ...args );}; export const logB = createLog(bLog);
示例
// Usage:logS.primary("Primary message");logN.success("接口", "https://api.juejin.cn/user_api/v1/user/get_info_pack",{ "err_no": 0, "err_msg": "success", "data": { "user_basic": { "user_id": "3450719496318734", "user_name": "linwu", "company": "腾讯", "job_title": "高级前端开发工程师", "avatar_large": "https://p9-passport.byteacctimg.com/img/user-avatar/6c748ea6567c4afdd9f54dde04dbbfdf~300x300.image", "description": "☀高级前端开发工程师\r\n就任于腾讯等多家互联网大厂\r\n《古代Javascript高级教程》、《古代Typescript高级教程》、《深入浅出Dart》作者", "favorable_author": 1, "builder": 0, "book_author": 0, "can_tag_cnt": 0, "is_select_annual": false, "select_annual_rank": 0, "annual_list_type": 0, "university": { "university_id": "0", "name": "", "logo": "" }, "major": { "major_id": "0", "parent_id": "0", "name": "" }, "student_status": 0, "study_point": 0, "identity": 0, "is_vip": false, "is_logout": 0, "become_author_days": 49 }, "user_counter": { "followee_count": 0, "follower_count": 620, "post_article_count": 110, "digg_article_count": 111, "got_digg_count": 2072, "got_view_count": 104959, "post_shortmsg_count": 3, "digg_shortmsg_count": 3, "select_study_event_count": 0, "select_online_course_count": 0, "collection_set_article_count": 29, "recommend_article_count_daily": 36, "got_article_collect_count_daily": 0 }, "user_growth_info": { "user_id": 3450719496318734, "jpower": 7711, "jscore": 813.2, "jpower_level": 5, "jscore_level": 5, "jscore_title": "先锋掘友", "author_achievement_list": [ 1 ], "vip_level": 0, "vip_title": "", "jscore_next_level_score": 2000, "jscore_this_level_mini_score": 500, "vip_score": 0 } }});logN.error("接口", "https://api.juejin.cn/user_api/v1/user/get_info_pack",{ "err_no": 0, "err_msg": "fail", });logB.info("VERSION v1.0.0");
小册
整顿两本小册，一本是前端面试小册，一本是图解算法，浏览体验都很好,欢送增加我微信linwu-hi获取