| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687 |
- /**
- * # 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(/<img[^>]*>/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(/<br[^>]*\/>/gi, '');
- newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:10px 0;"');
- return newContent;
- }
- export {
- toLogin,
- isLogin,
- normalToShow,
- successToShow,
- errorToShow,
- isArray,
- loadToShow,
- loadToHide,
- navigateTo,
- navigateBack,
- redirectTo,
- modelShow,
- isWeiXinBrowser,
- initPages,
- toUrl,
- saveLogin,
- refreshUser,
- cleanUser,
- testString,
- timeToDate,
- cmsGetList,
- cmsGetDetails,
- baseInfo,
- userInfo,
- uploadImage,
- checkEmail,
- checkMobile,
- formatRichText
- }
|