Skip to main content

优雅的代码案例

记录一些代码写的比较好（圈复杂度低）的例子

独立功能​

复制文本到剪贴板​

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

//调用方法
copyToClipboard("复制文本");

获取某个日期是当年的第几天​

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

//调用方法
dayOfYear(new Date(2024,3,3));

将 RGB 颜色灰度化​

基于光感加权平均

const gray= (r, g, b) => 0.2126 * r + 0.7152 * g + 0.0722 * b;

//调用方法
gray(50, 100, 150);

解析 URL 中的参数​

const praseQuery = (url) => {
    const query = {};
    url.replace(/([^?&=]+)=([^&]+)/g, (_,key, value) => (query[key] = value));
    return query;
    };

//调用方法
praseQuery("http://localhost:8080?UserType=Role&GrantType=Menu");

筛选对象属性​

const pick = (obj,...props)=>Object.fromEntries(Object.entries(obj).filter(([key])=>props.includes(key)));

//调用方法
pick({a:1,b:2,c:3}, "a","b");//{a:1,b:2}

生成随机 HEX 颜色​

const randomColor = () => '#' + Math.floor(Math.random()*0xffffff).toString(16).padEnd(6,'0');

//调用方法
randomColor();

生成随机字符串​

const randomString = (len) => Math.random().toString(36).slice(2, len + 2);
//调用方法
randomString(10);

去掉字符串中的 HTML 标签​

const removeHTMLTag = (fragment)=>new DOMParser().parseFromString(fragment, "text/html").body.textContent||'';

//调用方法
removeHTMLTag("<div>123</div>"); // 123

数组解构​

复用率高的赋权页面​

在一个页面中完成菜单或API的赋权，赋权的对象又分为用户或角色

页面加载时判断该调用哪个方法

async mounted() {
        //获取路由参数
        this.query = this.$route.query;
        //获取用户类型
        const UserTypeDic = {
            User: "用户",
            Role: "角色"
        };
        this.query.UserTypeStr = UserTypeDic[this.query.UserType];
        //获取授权类型
        const GrantTypeDic = {
            Menu: "菜单",
            API: "API"
        };
        this.query.GrantTypeStr = GrantTypeDic[this.query.GrantType];
        //判断获取全部的菜单或API
        const getsAllPairs = {
            Menu: this.getsAllMenu,
            API: this.getsAllAPI,
        };
        //判断获取 用户或角色 的 菜单或API
        const getsPairs = {
            UserMenu: this.getsUserMenu,
            RoleMenu: this.getsRoleMenu,
            UserAPI: this.getsUserAPI,
            RoleAPI: this.getsRoleAPI,
        };
        //执行相应方法
        await getsAllPairs[this.query.GrantType]();
        await getsPairs[this.query.UserType + this.query.GrantType]();
    }