公告

👇👇👇扫我

图片
飞语
Search K

Appearance

tag:

  • 开发体验

开发体验 ​

vscode 卡顿 ​

.vscode/settings.json

json
{
  "files.watcherExclude": {
    "**/.git/**": true,
    "**/node_modules/**": true,
    "**/android/build/**": true,
    "**/ios/build/**": true,
    "**/dist/**": true,
    "**/coverage/**": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/android/build": true,
    "**/ios/build": true
  },
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/ios":true,
    "**/android":true
  },
  "workbench.editor.limit.enabled": true,
  "workbench.editor.limit.perEditorGroup": 10,
  "files.maxMemoryForLargeFilesMB": 4096,

  "editor.codeLens": false


}

设置 npm 淘宝镜像源 ​

npm --registry=https://registry.npm.taobao.org

npm config set registry https://registry.npm.taobao.org –global

npm config set disturl https://npm.taobao.org/dist –global

npm config set react-native-url https://cdn.npmmirror.com/dist/react-native

修改本地host文件 ​

C:\Windows\System32\drivers\etc

依赖安装 ​

volta node 版本管理 ​

地址
https://github.com/volta-cli/volta/releases/download/v1.0.6/volta-1.0.6-windows-x86_64.msi

安装
volta install node@16 || node@14 || node@latest

切版本
volta pin node@16

常用
volta list //查看当前环境的版本
volta list all //查看存在的所有版本
volta install node //安装最新版的nodejs
volta install node@12.2.0 //安装指定版本
volta install node@12 //volta将选择合适的版本安装
volta pin node@10.15 //将更新项目的package.json文件以使用工具的选定版本
volta pin yarn@1.14 //将更新项目的package.json文件以使用工具的选定版本

解决 vscode 无法直接运行脚本 ​

管理员 cmd => set-ExecutionPolicy RemoteSigned

以服务来启动静态文件 ​

pnpm install -g serve

pnpm run serve

pnpm 貌似比 yarn 和 npm 更快 ​

npm install -g pnpm

yarn 比 npm 更快 ​

npm install -g yarn

yarn 镜像源配置 ​

yarn confgig get
yarn config set registry https://registry.npm.taobao.org
yarn config set sass_binary_site "https://npm.taobao.org/mirrors/node-sass/
yarn config set phantomjs_cdnurl "http://cnpmjs.org/downloads
yarn config set electron_mirror "https://npm.taobao.org/mirrors/electron/
yarn config set sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/
yarn config set profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/
yarn config set chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver

node 版本过低依赖安装失败 ​

yarn config set ignore-engines true

git 代码提交规范 ​

类型描述
feat新特性，新功能
fix修改 bug
style样式修改
build发布版本，构建
chore新增依赖库，工具等
ci持续集成
docs文档修改
refactor代码重构
revert版本回退
test测试用例

推荐安装 vscode 插件 git-commit-plugin => 查看 show git commit template ​

前端命名规范 ​

语义命名简写
文档docdoc
头部headhd
主体bodybd
尾部footft
主栏mainmn
主栏子容器maincmnc
侧栏sidesd
侧栏子容器sidecsdc
盒容器wrapper/boxwrap/box
-元素-
导航navnav
子导航subnavsnav
面包屑navnav
菜单menumenu
选项卡tabtab
标题区head/titlehd/tt
内容区body/contentbd/ct
列表listlist
表格tabletb
表单formform
热点hothot
-js 动词-
get获取/set 设置
add增加/remove 删除
create创建/destory 移除
start启动/stop 停止
open打开/close 关闭
read读取/write 写入
load载入/save 保存
begin开始/end 结束
backup备份/restore 恢复
import导入/export 导出
split分割/merge 合并
inject注入/extract 提取
attach附着/detach 脱离
bind绑定/separate 分离
view查看/browse 浏览
edit编辑/modify 修改
select选取/mark 标记
copy复制/paste 粘贴
undo撤销/redo 重做
insert插入/delete 移除
add加入/append 添加
clean清理/clear 清除
index索引/sort 排
find查找/search 搜索
increase增加/decrease 减
play播放/pause 暂停
launch启动/run 运
compile编译/execute 执行
debug调试/trace 跟
observe观察/listen 监听
build构建/publish 发
input输入/output 输出
encode编码/decode 解
encrypt加密/decrypt 解密
compress压缩/decompress 解
pack打包/unpack 解包
parse解析/emit 生
connect连接/disconnect 断开
send发送/receive 接
download下载/upload 上传
refresh刷新/synchronize 同
update更新/revert 复原
lock锁定/unlock 解
checkout 签出/check in 签入
submit提交/commit 交
push推/pull 拉
expand展开/collapse 折
begin起始/end 结束
start开始/finish 完
enter进入/exit 退出
abort放弃/quit 离
obsolete废弃/depreciate 废

git 打 tag 规范 ​

版本基本控制规范首先版本号基本的规范是 Major.Minor.Patch

也就是 Major 是主版本号、Minor 是次版本号、而  Patch 为修订号。每个元素必须以数值来递增。

例如：1.9.1 -> 1.10.0 -> 1.11.0。只有三个号，并没有上图出现的那种四个号。主版本号每次一个比较大的功能 的发版，可以理解为一次迭代，具体也可以根据自己开发的项目来定。每次递增时，次版本号和修订号都要归零。次版本号每次做出小的功能新增时，发布的版本号。每次递增时，修订号都要归零。修订号修复 bug 时发布的版本。

前端常用代码片段 ​

js
console.assert
console.time console.timeend;
console.profile;
console.trace
// 下划线转换驼峰
function toHump(name) {
    return name.replace(/\_(\w)/g, function(all, letter){
        return letter.toUpperCase();
    });
}
// 驼峰转换下划线
function toLine(name) {
  return name.replace(/([A-Z])/g,"_$1").toLowerCase();
}
//callback函数即onload功能
function loadScript(url, callback){
    var script = document.createElement ("script")
    script.type = "text/javascript";
    if (script.readyState){ //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" || script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else { //Others
        script.onload = function(){
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
// 清浏览器缓存
navigator.serviceWorker.getRegistrations()
                .then(function (registrations) {
                    console.log(registrations,'str');
                    for (var index in registrations) {
                        // 清除缓存
                        console.log(index,registrations[index]);registrations[index].unregister();
                    }
                });

// 获取URL GET参数
function GetQueryString(name){
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if(r!=null)return  unescape(r[2]); return null;
}
// 获取当前页面名称
function strPage(){
    var strUrl = window.location.href;
    var arrUrl = strUrl.split("/");
    var strPage = arrUrl[arrUrl.length - 1];
    if (strPage.indexOf("?") > -1) {
        var pageName = strPage.split("?");
        strPage = pageName[0];
    }
    return strPage;
}
// 根据屏幕分辨率
function IsPhone(){
    mobile_flag = false;
    var screen_width = window.screen.width;
    var screen_height = window.screen.height;
    if(screen_width < 500 && screen_height < 820){
        mobile_flag = true;
    }
    return mobile_flag;
}
// 操作系统
function isMobile() {
    var isMobile = {
        Android: function () {
             return navigator.userAgent.match(/Android/i) ? true : false;
        },
        BlackBerry: function () {
             return navigator.userAgent.match(/BlackBerry/i) ? true : false;
        },
        iOS: function () {
             return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
        },
        Windows: function () {
             return navigator.userAgent.match(/IEMobile/i) ? true : false;
        },
        any: function () {
             return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
        }
     };
     // 是移动设备
     return isMobile.any();
}


// 设置cookie
function SetCookie(name, value) {
    if (value) {
        var Days = 365;
        var exp = new Date();
        exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
        document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString();
    }
}
// 获取cookie
function GetCookie(name) {
    if (document.cookie.length > 0) {
        var begin = document.cookie.indexOf(name + '=');
        if (begin !== -1) {
            // cookie值的初始位置
            begin += name.length + 1;
            // 结束位置
            var end = document.cookie.indexOf(';', begin);
            if (end === -1) {
                // 没有;则end为字符串结束位置
                end = document.cookie.length;
            }
            return unescape(document.cookie.substring(begin, end));
        }
    }
    return null
    // cookie不存在返回null
}
// 清除某个cookie
function DelCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = SetCookie(name);
    if (cval && cval != null) {
        document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString();
    }
}
// 清除所有cookie
function ClearCookie() {
    var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
    if (keys) {
        for (var i = keys.length; i--;) {
            document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString();
        }
    }
}
// LRU缓存
class LRUCache {
    constructor(size){
        this.size = size;
        this.cache = new Map();
    }
    get(key){
        const hasKey = this.cache.has(key);
        if(hasKey){
            const val = this.cache.get(key);
            this.cache.delete(key);
            this.cache.set(key, val);
            return val;
        }else{
            return -1;
        }
    }
    set(key, value){
        const hasKey = this.cache.has(key);
        if(hasKey){
            this.cache.delete(key);
        }
        this.cache.set(key, value);
        if(this.cache.size > this.size){
            // this.cache.keys().next().value用于获取最前面（即使用次数最少的key）,然后删除
            this.cache.delete(this.cache.keys().next().value);
        }
    }
}
// 事件分发
class EventBus {
  constructor() {
    // 初始化事件列表
    this.eventObject = {};
    this.onceKeys=[];
  }
  //发布事件
  publish(eventName,...args){
    Object.values((this.eventObject[eventName])||{}).forEach(o=>o?.(...args));
    let event=this.onceKeys.find(o=>o.em===eventName);
    event&&delete this.eventObject[event.em]?.[event.fm];
  }
  //订阅事件
  subscribe(eventName,fn=()=>{},once=false){
    once&&this.onceKeys.push({em:eventName,fm:fn});
    this.eventObject[eventName]??={};
    this.eventObject[eventName][fn]=fn;
    return ()=>{
        delete this.eventObject[eventName][fn];
    }
  }
  //清除事件
  clear(eventName){
      if(eventName){
        delete this.eventObject[eventName]
      }else{
        this.eventObject={};
      }
  }
}

// 将时间戳转换为人性化时间
function AS_Time(timestamp) {
    function zeroize(num) {
        return (String(num).length == 1 ? '0': '') + num;
    }
    // 当前时间戳
    let curTimestamp = parseInt(new Date().getTime() / 1000);
    // 参数时间戳与当前时间戳相差秒数
    let timestampDiff = curTimestamp - timestamp;
    // 当前时间日期对象
    let curDate = new Date(curTimestamp * 1000);
    // 参数时间戳转换成的日期对象
    let tmDate = new Date(timestamp * 1000);
    let Y = tmDate.getFullYear(),
    m = tmDate.getMonth() + 1,
    d = tmDate.getDate();
    let H = tmDate.getHours(),
    i = tmDate.getMinutes(),
    s = tmDate.getSeconds();
    if (timestampDiff < 60) {
        // 一分钟以内
        return "刚刚";
    } else if (timestampDiff < 3600) {
        // 一小时前之内
        return Math.floor(timestampDiff / 60) + "分钟前";
    } else if (curDate.getFullYear() == Y && curDate.getMonth() + 1 == m && curDate.getDate() == d) {
        return '今天' + zeroize(H) + ':' + zeroize(i);
    } else {
        let newDate = new Date((curTimestamp - 86400) * 1000);
        // 参数中的时间戳加一天转换成的日期对象
        if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
            return '昨天' + zeroize(H) + ':' + zeroize(i);
        } else if (curDate.getFullYear() == Y) {
            return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
        } else {
            return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
        }
    }
}
// 响应耗时
function AS_ResTime(){
    let ResTime = window.performance;
    function RAM(size) {
        return Math.floor(size / 1024 / 1024, 4) + 'MB';
    };
    function consume(time) {
        return time + 'ms';
    };
    let data = {
        'ram':RAM(ResTime.memory.usedJSHeapSize),
        'tcp':consume(ResTime.timing.connectEnd - ResTime.timing.connectStart),
        'res':consume(ResTime.timing.responseEnd - ResTime.timing.responseStart),
    };
 window.onload = function() {
         console.log("dom渲染耗时：" + consume(ResTime.timing.domComplete - ResTime.timing.domLoading));
 };
    return data;
}

强制删除文件 ​

rmdir /s /q gradle-8.0.1-all

2023.08.13 rn 环境 node 16.20.2 java 11.0.17 rn 版本 { "expo": "~49.0.6", "expo-status-bar": "~1.6.0", "react": "18.2.0", "react-native": "0.72.3" }

提高用户体验的10个优秀案例 ​

  1. 一、特殊场景下的差异化设计

  2. 二、优化指引路径提高操作效率

  3. 三、温馨提示降低用户的过度依赖

  4. 四、隐藏式设计提高版面利用率

  5. 五、更人性化的模式设计

  6. 六、定制化的播放页模式设计

  7. 七、缩放预览满足对细节的体验

  8. 八、满足用户好奇心的设计

  9. 九、可以标记和叠加的点赞设计

  10. 十、差异化的短视频推荐设计

阅读量: 0
评论量: 0