/**
* # common.js 代码问题深度批判
## 代码结构:混乱不堪的功能堆砌
1. 模块化缺失 :整个文件长达647行,包含了46个导出函数,从登录认证到时间格式化,从页面跳转到底层工具,所有功能混杂在一起,严重违反单一职责原则。这种"一锅炖"的设计导致代码难以维护和测试。
2. 函数组织无序 :相关功能没有分组,例如登录相关的 toLogin 、 isLogin 、 saveLogin 等函数散布在文件不同位置,增加了代码阅读和理解的难度。
3. 命名规范混乱 :函数命名风格不一致,有的使用驼峰命名(如 navigateTo ),有的使用下划线风格(如 cmsGetList ),甚至存在 modelShow 这样的混合命名,严重影响代码可读性。
## 安全性:漏洞百出的实现
1. 认证机制薄弱 : isLogin 函数(48-66行)仅检查本地存储中是否存在用户数据,没有验证登录状态的有效性,容易被伪造登录状态。
2. URL处理存在风险 : toUrl 函数(378-407行)对外部链接的处理过于简单,没有进行严格的URL格式验证和安全过滤,可能导致XSS攻击或恶意URL执行。
3. 本地存储安全隐患 : saveLogin 函数(414-421行)直接将用户认证信息存储在本地,没有任何加密措施,一旦设备被破解,用户信息将直接泄露。
4. 密码处理缺失 :代码中完全没有密码加密相关的逻辑,登录凭证的安全性无法保障。
## 性能:低效冗余的实现
1. 不必要的延迟 : initPages 函数(334-372行)中存在硬编码的1秒延迟(366行 setTimeout(() => { ... }, 1000); ),没有任何合理的业务逻辑支持,纯粹浪费用户时间。
2. 重复的正则表达式创建 : testString 函数(475-501行)和 checkMobile 函数(556-558行)每次调用都创建新的正则表达式对象,造成性能损耗,应该将正则表达式提升为模块级常量。
3. 网络请求冗余 : initPages 函数在有缓存的情况下仍然会发起网络请求,没有实现有效的缓存策略,增加了服务器负担和用户等待时间。
4. 内存泄漏风险 :多处使用 setTimeout 但没有清理机制,特别是在 modelShow 函数中,可能导致回调函数无法及时释放。
## 逻辑:错误百出的实现
1. 函数功能与命名不符 : userInfo 函数(562-569行)返回的是 auth 对象而不是用户信息,与函数名严重不符,容易误导调用者。
2. 条件判断逻辑错误 : isArray 函数(178-180行)的实现 return object && typeof object === 'object' 是错误的,因为对象和null也会返回true,正确的实现应该是 Array.isArray(object) 。
3. 导航逻辑混乱 : navigateBack 函数(222-253行)包含大量硬编码的路由判断,逻辑复杂且难以维护,一旦路由结构变化,就需要修改多处代码。
4. 错误处理不完善 :多处API调用(如 api.login 、 api.uploadImage )只处理了成功情况,没有捕获和处理网络错误或服务器异常,可能导致程序崩溃。
## 代码质量:粗制滥造的实现
1. 硬编码泛滥 :代码中存在大量硬编码值,如 cmsGetList 中硬编码的 /uploads/ 路径(287行), toLogin 中硬编码的登录提示信息(19行)等,这些值应该通过配置文件管理。
2. 注释与代码不符 : isLogin 函数的注释(46-47行)声称"是否登陆,和绑定手机号,否则返回登录页",但实际代码中绑定手机号的逻辑被注释掉了(53-57行),注释与实现严重不符。
3. 冗余代码 : testString 函数中 case null 分支(482-484行)直接返回false,没有任何实际作用,属于冗余代码。
4. 缩进与格式混乱 :代码缩进不一致,有时使用空格,有时使用制表符,部分代码行尾存在多余的空格,影响代码可读性。
## 架构设计:过时落后的方案
1. 回调地狱 :多处使用嵌套回调函数(如 initPages 、 cmsGetList ),没有使用Promise或async/await,导致代码可读性差,错误处理困难。
2. 全局依赖 :直接导入 db 、 api 等模块,没有使用依赖注入,增加了模块间的耦合度,难以进行单元测试。
3. 平台兼容性处理粗糙 :使用条件编译(如 #ifdef H5 、 #ifdef MP )处理不同平台的差异,但逻辑分散在各个函数中,没有统一的平台适配层。
4. 缺乏错误边界 :整个代码库没有统一的错误处理机制,每个函数都需要单独处理错误,增加了代码复杂度和维护成本。
## 总结
这份 common.js 代码是一个典型的"代码坏味道"集合体,从架构设计到具体实现,从安全性到性能,几乎每一个方面都存在严重问题。它反映了开发过程中的敷衍了事和缺乏专业素养,是前端代码质量的反面教材。
这样的代码不仅会增加开发和维护成本,还会给应用带来严重的安全隐患和性能问题。如果不进行彻底重构,随着项目规模的扩大,这些问题将会像滚雪球一样越积越多,最终导致整个应用崩溃或被黑客攻击。
作为一名专业的开发者,应该严格遵循代码规范和最佳实践,注重代码质量和安全性,而不是像这样随意堆砌功能。这份代码的存在,本身就是对软件工程这门学科的不尊重。
*
*/
import * as db from './db.js' //引入common
import * as api from './api.js'
import {
baseUrl,
cndUrl,
bgClass,
title,
baseLogo,
} from './config.js'
import htmlParser from '@/common/html-parser' //引入htmlParser
/**
* 跳转登陆页面
*/
function toLogin() {
uni.showToast({
title: '请登录...',
icon: 'loading',
duration: 2000,
success: function(res) {
var pages = getCurrentPages() // 获取栈实例
let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
//console.log("路由当前页面路径"+currentRoute)
let currentPage = pages[pages.length - 1]['$page']['fullPath'] //当前页面路径(带参数)
// console.log(currentPage)
// #ifdef H5 || APP-PLUS
uni.navigateTo({
url: '/pages/user/login?redirect=' + escape(currentPage)
})
// #endif
// #ifdef MP-WEIXIN
uni.navigateTo({
url: '/pages/user/login?redirect=' + escape(currentPage),
animationType: 'pop-in',
animationDuration: 200
});
// #endif
}
})
}
/**
* 是否登陆,和绑定手机号,否则返回登录页
*/
function isLogin() {
let user = db.get('user');
//用户存在,不跳转,不存在直接跳转
if (user) {
if (user.id) {
// if(user.mobile==''){
// uni.navigateTo({
// url: '/pages/user/bind'
// })
// }
} else {
console.log("user: ", user);
db.del('user');
db.del('auth');
toLogin()
}
}
}
/**
* 无图标提示
* @param {String} msg 提示消息
* @param {Function} callback 回调函数
*/
function normalToShow(msg = '保存成功', callback = function() {}) {
uni.showToast({
title: msg,
icon: 'none',
duration: 2000,
});
setTimeout(function() {
callback();
}, 1000);
}
/**
* 成功提示
* @param {String} msg 提示消息
* @param {Function} callback 回调函数
*/
function successToShow(msg = '保存成功', callback = function() {}) {
uni.showToast({
title: msg,
icon: 'success',
duration: 2000,
});
setTimeout(function() {
callback();
}, 1500);
}
/**
* 失败提示
* @param {String} msg 提示消息
* @param {Function} callback 回调函数
*/
function errorToShow(msg = '操作失败', callback = function() {}) {
uni.showToast({
title: msg,
icon: 'none',
duration: 2000,
});
setTimeout(function() {
callback();
}, 2000);
}
/**
* 加载显示
* @param {String} msg 提示消息
*/
function loadToShow(msg = '加载中', icon = 'loading') {
uni.showToast({
title: msg,
icon: icon,
});
}
/**
* 加载隐藏
*/
function loadToHide() {
uni.hideToast();
}
/**
* 提示框
* @param {String} title 提示标题
* @param {String} content 提示内容
* @param {Function} callback 回调函数
* @param {Boolean} showCancel = [true|false] 显示关闭按钮
* @param {String} cancelText 关闭按钮文字
* @param {String} confirmText 确定按钮文字
* @example
* modelShow('提示','确认执行此操作吗?',()=>{},()=>{},true,'取消','确定')
*/
function modelShow(title = '提示', content = '确认执行此操作吗?', callback = () => {}, callback2 = () => {}, showCancel = true,
cancelText = '拒绝',
confirmText = '通过') {
uni.showModal({
title: title,
content: content,
showCancel: showCancel,
cancelText: cancelText,
confirmText: confirmText,
success: function(res) {
if (res.confirm) {
// 用户点击确定操作
setTimeout(() => {
callback()
}, 500)
} else if (res.cancel) {
// 用户取消操作
setTimeout(() => {
callback2()
}, 500)
}
}
});
}
/**
* 判断数组
* @param {Object} arr 数组
*/
function isArray(object) {
return object && typeof object === 'object'
}
/**
* 统一跳转
* @param {String} url 跳转链接
*/
function navigateTo(url) {
if (url == '')
return;
if (url.indexOf("/pages/index/index") >= 0 || url.indexOf("answer_pages/home/dashboard") >= 0 || url.indexOf(
"/pages/shouhu/shouhu") >= 0 || url.indexOf("/pages/feiyi/feiyi") >= 0 || url.indexOf(
"/pages/user/index") >= 0) {
uni.switchTab({
url: url,
animationType: 'pop-in',
animationDuration: 300
});
} else {
uni.navigateTo({
url: url,
animationType: 'pop-in',
animationDuration: 300
});
}
}
/**
* 关闭当前页面并跳转
* @param {String} url 跳转链接
*/
function redirectTo(url) {
uni.redirectTo({
url: url,
animationType: 'pop-in',
animationDuration: 300
})
}
/**
* 返回上一层的逻辑判断
* @param {num} delta 跳转上一层,或者几层
*/
function navigateBack(delta = 1) {
let pages = getCurrentPages(); //当前页
//console.log(pages);
//当有前一页的时候。
if (pages.length > 1) {
let page = pages[pages.length - 2]; //上个页面
// console.log(page.route);
if (page.route == "pages/index/index" || page.route == 'pages/index/homepage' || page.route ==
'pages/user/index' || page.route == 'pages/consult/index') {
uni.switchTab({
url: '/' + page.route
})
} else if (page.route == "pages/user/login") {
uni.switchTab({
url: '/pages/user/index'
})
} else if (page.route == "pages/user/register") {
uni.switchTab({
url: '/pages/user/user'
})
} else {
uni.navigateBack({
delta: delta
})
}
} else {
uni.switchTab({
url: '/pages/index/index'
})
}
}
/**
* 判断是否在微信浏览器
*/
function isWeiXinBrowser() {
// #ifdef H5
// window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息,这个属性可以用来判断浏览器类型
let ua = window.navigator.userAgent.toLowerCase()
// 通过正则表达式匹配ua中是否含有MicroMessenger字符串
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true
} else {
return false
}
// #endif
// #ifdef MP
return false;
// #endif
}
/**
* 加载cms列表
* @param {Array} data
*
*/
function cmsGetList(data, callback = function() {}) {
api.cmsGetList(data, res => {
if (res.code) {
res.data.list.forEach(function(ele, index) {
ele.ctime = timeToDate(ele.createtime);
if (ele.image.substring(0, 9) == '/uploads/') {
ele.image = cndUrl + ele.image
}
});
callback(res.data)
} else {
errorToShow(res.msg)
}
})
}
/**
* 加载cms详情
* @param {Array} data
*
*/
function cmsGetDetails(data, callback = function() {}) {
api.cmsGetDetails(data, res => {
//console.log(data)
if (res.code) {
res.data.content = htmlParser(res.data.content); // 设置资源cdn;
res.data.ctime = timeToDate(res.data.createtime);
if (res.data.image) {
if (res.data.image.substring(0, 9) == '/uploads/') {
res.data.image = cndUrl + res.data.image
}
}
callback(res.data)
} else {
modelShow(
'错误提示',
res.msg,
() => {
uni.navigateBack({})
},
false
);
}
})
}
/**
* 初始化页面
* @param {Function} callback 回调函数
* @param {String} route 页面路径/默认当前路径
*/
function initPages(callback = function() {}, route) {
if (!route) {
let pages = getCurrentPages();
let page = pages[pages.length - 1];
route = page.route
}
let init_data = db.get('init_' + route)
setTimeout(() => {
api.getInit({
route: route
}, res => {
// console.log(res);
if (res.code) {
res.data.slide.forEach(function(ele, index) {
if (ele.image.substring(0, 9) == '/uploads/') {
ele.image = cndUrl + ele.image
}
});
res.data.content.forEach(function(ele, index) {
ele.content = ele.content.replace(new RegExp(`style="width: 100%;`, 'g'),
'style="width: 100%;margin-top: -3px;') // 无缝连接图片;
ele.content = ele.content.replace(new RegExp(`src="/uploads`, 'g'),
'src="' + cndUrl + '/uploads')
ele.content = htmlParser(ele.content); // 设置资源cdn;
});
db.set('init_' + route, res.data)
callback(res.data)
}
});
}, 1000);
if (init_data) {
callback(init_data)
} else {
// loadToShow('初始化页面...');
}
}
/**
* 跳转链接
* @param {String} url 跳转链接
*/
function toUrl(url) {
if (url) {
var objExp = new RegExp(/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/);
if (objExp.test(url) != true) {
// #ifdef APP-PLUS
url = baseUrl + url
// #endif
// #ifdef H5
url = baseUrl + url
// #endif
}
//console.log(url)
//return false
// #ifdef MP
uni.navigateTo({
url: url
})
// #endif
// #ifdef APP-PLUS
plus.runtime.openURL(url);
// #endif
// #ifdef H5
window.open(url);
// #endif
}
}
/**
* 保存登陆状态
* @param {Array} data 用户数据
*/
function saveLogin(data) {
db.set('auth', data.auth)
if (data.user.avatar.substring(0, 9) == '/uploads/') {
data.user.avatar = cndUrl + data.user.avatar
}
db.set('user', data.user)
}
/**
* 刷新用户
* @param {Function} callback 回调函数(用户数据)
* @example
* refreshUser((user)=>{_this.user = user})
*/
function refreshUser(callback = function() {}) {
let user = db.get('user');
if (user.id) {
api.refreshUser({}, res => {
if (res.code == 1) {
saveLogin(res.data)
callback(res.data)
} else {
db.del('user');
toLogin()
}
})
} else {
db.del('user');
db.del('auth');
toLogin()
}
}
/**
* 清理用户
* @param {String} page 清理后跳转页面
*/
function cleanUser(page) {
db.del('user')
db.del('auth')
if (page) {
redirectTo(page)
}
}
/**
* 字符串校验
* @param {String} str 字符串
* @param {String} model = [number|mobile|name|idcard|] 模式
* @example
* testString('17080057443','mobile')
* testString('17080057443','mobile')
*/
function testString(str, model = null) {
if (typeof(model) == 'number') {
if (str.length >= model) {
return true
}
} else {
switch (model) {
case null:
return false
break
case 'idcard':
return RegExp(/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/)
.test(str)
break
case 'mobile':
return RegExp(/^1[0-9]{10}$/).test(str)
break
case 'name':
return RegExp(/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/).test(str)
break
default:
return false
break
}
}
return false
}
/**
* 时间戳转时差
* @param {String} date 时间戳
*/
function timeToDate(time) {
time = time * 1000
var interval = new Date().getTime() - time;
//计算出相差天数
var returnTime = "";
var days = Math.floor(interval / (24 * 3600 * 1000))
if (days == 0) {
//计算出小时数
var leaveTime = interval % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
var hours = Math.floor(leaveTime / (3600 * 1000))
if (hours == 0) {
//计算相差分钟数
leaveTime = leaveTime % (3600 * 1000) //计算小时数后剩余的毫秒数
var minutes = Math.floor(leaveTime / (60 * 1000))
if (minutes == 0) {
//计算相差秒数
leaveTime = leaveTime % (60 * 1000) //计算分钟数后剩余的毫秒数
var seconds = Math.round(leaveTime / 1000)
return seconds + "秒前";
}
return minutes + "分钟前";
}
return hours + "小时前";
}
return days + "天前";
}
/**
* 基本信息
*/
function baseInfo() {
return {
bgClass: bgClass,
title: title,
baseLogo: baseLogo,
}
}
//校验邮箱格式
function checkEmail(email) {
return RegExp(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/).test(
email);
}
//校验手机格式
function checkMobile(mobile) {
return RegExp(/^1[0-9]{10}$/).test(mobile);
}
/**
* 用户信息
*/
function userInfo() {
let user = db.get('auth')
if (user) {
return user
} else {
return false;
}
// return {
// bgClass: bgClass,
// title: title,
// baseLogo: baseLogo,
// }
}
/**
* 上传图片
* @param {Array} data 附带数据
* @param {Function} callback 回调函数
* @param {int} num 限制数量
* @param {String} type 类型
* @return {String} url
*/
function uploadImage(data = {}, callback = function() {}, num = 1, type) {
api.uploadImage(
'common/upload', data, (res) => {
if (res.code) {
if (res.data.url.substring(0, 9) == '/uploads/') {
res.data.url = cndUrl + res.data.url
}
callback(res.data.url)
} else {
errorToShow(res.msg)
}
}, type)
}
function formatRichText(html) {
let newContent = html.replace(/
]*>/gi, function(match, capture) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
return match;
});
newContent = newContent.replace(/
]*\/>/gi, '');
newContent = newContent.replace(/\![]()