asf
获得徽章 0
Rome 是什么？
Rome 是一个全新的前端工具链，旨在重新定义前端开发体验。它是一个一站式解决方案，涵盖了许多前端开发中常见的问题和任务。Rome 的主要目标是提供一致性和高性能，以加速前端开发流程。它的核心特点包括：
1. 依赖管理
Rome 提供了强大的依赖管理系统，可用于管理你的项目中的依赖关系。它支持 JavaScript、TypeScript 和 Flow，并能够准确地分析和处理依赖项，以确保你的项目始终保持一致。
// 安装依赖
rome deps add react
// 查看依赖树
rome deps list
这个特性非常有用，因为它将所有的依赖关系都纳入统一管理，无需依赖其他工具 #挑战每日一条沸点#
Rome 是一个全新的前端工具链，旨在重新定义前端开发体验。它是一个一站式解决方案，涵盖了许多前端开发中常见的问题和任务。Rome 的主要目标是提供一致性和高性能，以加速前端开发流程。它的核心特点包括：
1. 依赖管理
Rome 提供了强大的依赖管理系统，可用于管理你的项目中的依赖关系。它支持 JavaScript、TypeScript 和 Flow，并能够准确地分析和处理依赖项，以确保你的项目始终保持一致。
// 安装依赖
rome deps add react
// 查看依赖树
rome deps list
这个特性非常有用，因为它将所有的依赖关系都纳入统一管理，无需依赖其他工具 #挑战每日一条沸点#
展开
评论
点赞
要做权限控制，肯定需要一个code，无论是权限码还是角色码都可以，一般后端会一次性返回，然后全局存储起来就可以了，Vue vben admin是在登录成功以后获取并保存到全局的store中：
import { defineStore } from 'pinia';
export const usePermissionStore = defineStore({
state: () => ({
// 权限代码列表
permCodeList: [],
}),
getters: {
// 获取
getPermCodeList(){
return this.permCodeList;
},
},
actions: {
// 存储
setPermCodeList(codeList) {
this.permCodeList = codeList;
},
// 请求权限码
async changePermissionCode() {
const codeList = await getPermCode();
this.setPermCodeList(codeList);
}
}
})
接下来它提供了三种按钮级别的权限控制方式，一一来看。 #挑战每日一条沸点#
import { defineStore } from 'pinia';
export const usePermissionStore = defineStore({
state: () => ({
// 权限代码列表
permCodeList: [],
}),
getters: {
// 获取
getPermCodeList(){
return this.permCodeList;
},
},
actions: {
// 存储
setPermCodeList(codeList) {
this.permCodeList = codeList;
},
// 请求权限码
async changePermissionCode() {
const codeList = await getPermCode();
this.setPermCodeList(codeList);
}
}
})
接下来它提供了三种按钮级别的权限控制方式，一一来看。 #挑战每日一条沸点#
展开
评论
点赞
function pushList(type, component) {
const actions = {
common: (commonComponent) => componentCommonList.push(commonComponent),
dataShow: (dataShowComponent) =>
componentDataShowList.push(dataShowComponent),
form: (formComponent) => componentFormList.push(formComponent),
button: (buttonComponent) => componentButtonList.push(buttonComponent),
icons: (iconsComponent) => componentIconList.push(iconsComponent),
};
return actions[type](component);
}
在单独的物料中调用该返回函数，获取其中的type以及其他值，type的作用是用来区分该组件属于哪个种类，例如：
registerConfig.register({
type: "common",
preview: () => <NavigationTd />,
render: (blockStyles, block) => (
<NavigationTd
style={blockStyles.value}
class="renderNavigationBase"
{...block.componentProps}
></NavigationTd>
),
key: "一级导航栏",
}); #挑战每日一条沸点#
const actions = {
common: (commonComponent) => componentCommonList.push(commonComponent),
dataShow: (dataShowComponent) =>
componentDataShowList.push(dataShowComponent),
form: (formComponent) => componentFormList.push(formComponent),
button: (buttonComponent) => componentButtonList.push(buttonComponent),
icons: (iconsComponent) => componentIconList.push(iconsComponent),
};
return actions[type](component);
}
在单独的物料中调用该返回函数，获取其中的type以及其他值，type的作用是用来区分该组件属于哪个种类，例如：
registerConfig.register({
type: "common",
preview: () => <NavigationTd />,
render: (blockStyles, block) => (
<NavigationTd
style={blockStyles.value}
class="renderNavigationBase"
{...block.componentProps}
></NavigationTd>
),
key: "一级导航栏",
}); #挑战每日一条沸点#
展开
评论
点赞
中心画布区域
承载左侧小组件组装成一个大屏页面，有标尺、标线等，小组件在画布中可随意拖动并支持8点放大缩小，支持鼠标放置小组件上后鼠标右键菜单，功能有撤销上一步、删除该小组件等；
右侧配置项
主要有三个部分，小组件数据源配置，小组件外观属性配置，小组件事件配置；
3.拖拽原理
html5中的支持拖拽的属性「draggable」，draggable设置为"true"时，表示该元素可拖拽；当元素为图片、链接、文本时，draggable属性默认为"true"，无需手动设置，除非将上述三种元素禁用拖拽时，需手动设置draggable="false"；其它元素需要手动设置draggable="true"来支持该元素的可拖拽； #挑战每日一条沸点#
承载左侧小组件组装成一个大屏页面，有标尺、标线等，小组件在画布中可随意拖动并支持8点放大缩小，支持鼠标放置小组件上后鼠标右键菜单，功能有撤销上一步、删除该小组件等；
右侧配置项
主要有三个部分，小组件数据源配置，小组件外观属性配置，小组件事件配置；
3.拖拽原理
html5中的支持拖拽的属性「draggable」，draggable设置为"true"时，表示该元素可拖拽；当元素为图片、链接、文本时，draggable属性默认为"true"，无需手动设置，除非将上述三种元素禁用拖拽时，需手动设置draggable="false"；其它元素需要手动设置draggable="true"来支持该元素的可拖拽； #挑战每日一条沸点#
展开
评论
点赞
最近AIGC（AI Generated Content，利用AI生成内容）非常热，技术圈也受到了很大冲击。目前来看，利用LLM（Large Language Model，大语言模型）辅助开发还停留在非常早期的阶段，主要应用是辅助编码，即用自然语言输入需求，模型输出代码。更近一步的探索也仅仅是在此基础上的一层封装（比如copilot X、cursor）。
但即使在如此早期阶段，也对开发者的心智产生极大震撼，AI让程序员失业这样的论调甚嚣尘上。
LLM的爆发对前端意味着什么？本文尝试预测一波2024年之后的前端开发模式，这个预测遵循如下原则：
尊重技术客观发展规律。以当前已有技术为基础预测，而不是将预测建立在某种虚无缥缈的高端技术，或者假想某些技术突破重大瓶颈
尊重人性。程序员只是谋生的职业，新的开发模式即使再厉害，如果让程序员赚不到钱，那也是很难推广开的 #挑战每日一条沸点#
但即使在如此早期阶段，也对开发者的心智产生极大震撼，AI让程序员失业这样的论调甚嚣尘上。
LLM的爆发对前端意味着什么？本文尝试预测一波2024年之后的前端开发模式，这个预测遵循如下原则：
尊重技术客观发展规律。以当前已有技术为基础预测，而不是将预测建立在某种虚无缥缈的高端技术，或者假想某些技术突破重大瓶颈
尊重人性。程序员只是谋生的职业，新的开发模式即使再厉害，如果让程序员赚不到钱，那也是很难推广开的 #挑战每日一条沸点#
展开
评论
点赞
基于amis-editor的低代码编辑器的封装
优缺点
优点:
首先值得肯定是社区生态、文档是很好的，包括上手程度其实并不难
缺点：
lowcode-editor只是暂时不开源文档补全，带来了未知的风险。在处理中也要大量翻阅源码做实践。
功能生态并不面向未来，你可以看到并没有出码、生产低代码组件等
并没有协议约束，术语约束，带来的沟通成本可能会更高
amis核心原理
amis官网其实也描述的很简单，amis 的渲染过程是将 json 转成对应的 React 组件。先通过 json 的 type 找到对应的 Component，然后把其他属性作为 props 传递过去完成渲染 #挑战每日一条沸点#
优缺点
优点:
首先值得肯定是社区生态、文档是很好的，包括上手程度其实并不难
缺点：
lowcode-editor只是暂时不开源文档补全，带来了未知的风险。在处理中也要大量翻阅源码做实践。
功能生态并不面向未来，你可以看到并没有出码、生产低代码组件等
并没有协议约束，术语约束，带来的沟通成本可能会更高
amis核心原理
amis官网其实也描述的很简单，amis 的渲染过程是将 json 转成对应的 React 组件。先通过 json 的 type 找到对应的 Component，然后把其他属性作为 props 传递过去完成渲染 #挑战每日一条沸点#
展开
评论
点赞
在过去十年，不管是前端的工具链还是客户端的版本交付效能等都在快速演进，面向未来，我们升级工程体系走向终端工程一体化，覆盖前端及客户端工程师从研发交付到运维的全生命周期，利用低代码、极速构建、全链路运维、Serverless 等新型的工程技术，在卓越工程标准推动下引领终端工程师走向卓越。
可以看到，低代码是可以作为实践终端的一种技术方案，并且将其放在了第一位，那么什么是低代码，低代码能做什么事情，为什么使用低代码可以让终端开发工程师变的更加卓越？低代码对我们普通的一线开发又能带来什么改变或者赋能？ 好，接下来，我们就来聊一聊低代码。
#挑战每日一条沸点#
可以看到，低代码是可以作为实践终端的一种技术方案，并且将其放在了第一位，那么什么是低代码，低代码能做什么事情，为什么使用低代码可以让终端开发工程师变的更加卓越？低代码对我们普通的一线开发又能带来什么改变或者赋能？ 好，接下来，我们就来聊一聊低代码。
#挑战每日一条沸点#
展开
评论
点赞
用 Compose 加 scheme 路由的方式来处理界面跳转、曝光，就非常简单了, 每一个新界面就是一个 Composable，加上 @ComposeScheme 就完了
@ComposeScheme(
action = SchemeConst.ACTION_THINK_DETAIL,
alternativeHosts = [HolderActivity::class]
)
@SchemeLongArg(name = SchemeConst.ARG_ID)
@SchemeLongArg(name = SchemeConst.ARG_COMMENT_ID)
@Composable
fun ThinkDetailPage(navBackStackEntry: NavBackStackEntry) {
LogicPage(navBackStackEntry = navBackStackEntry) {
// content
}
}
@Composable
fun LogicPage(
navBackStackEntry: NavBackStackEntry,
saveToLatest: Boolean = false,
content: @Composable () -> Unit
) {
content()
LaunchedEffect(navBackStackEntry) {
val scheme = navBackStackEntry.arguments?.getString(SchemeKeys.KEY_ORIGIN)?.let { Uri.decode(it) }
if (scheme != null) {
// 上报 scheme，作为曝光
// 保存 scheme，如果用户退出了，直接重入这个界面。
// 这个在调试中很好用。例如某个界面，需要点5层才能进去，每次编译重启就要点5次才能看到这个界面，那就蛋疼了，所以如果每次把它记录起来，启动就进去，那开发就顺很多了
}
}
} #挑战每日一条沸点#
@ComposeScheme(
action = SchemeConst.ACTION_THINK_DETAIL,
alternativeHosts = [HolderActivity::class]
)
@SchemeLongArg(name = SchemeConst.ARG_ID)
@SchemeLongArg(name = SchemeConst.ARG_COMMENT_ID)
@Composable
fun ThinkDetailPage(navBackStackEntry: NavBackStackEntry) {
LogicPage(navBackStackEntry = navBackStackEntry) {
// content
}
}
@Composable
fun LogicPage(
navBackStackEntry: NavBackStackEntry,
saveToLatest: Boolean = false,
content: @Composable () -> Unit
) {
content()
LaunchedEffect(navBackStackEntry) {
val scheme = navBackStackEntry.arguments?.getString(SchemeKeys.KEY_ORIGIN)?.let { Uri.decode(it) }
if (scheme != null) {
// 上报 scheme，作为曝光
// 保存 scheme，如果用户退出了，直接重入这个界面。
// 这个在调试中很好用。例如某个界面，需要点5层才能进去，每次编译重启就要点5次才能看到这个界面，那就蛋疼了，所以如果每次把它记录起来，启动就进去，那开发就顺很多了
}
}
} #挑战每日一条沸点#
展开
评论
点赞
分类并非唯一，可以有不同角度，但都需遵从 MECE 原则（相互独立、完全穷尽） ，即做到不重不漏。
按页面加载链路分类：容器启动、资源加载、代码执行、数据获取、绘制渲染。
按资源性能分类：CPU、内存、本地 I/O、网络。该分类方法又被叫做 USE 方法（Utilization Saturation and Errors Method）。
按协作方分类：前端、客户端、数据后台、图片服务、浏览器引擎等。
按流程优化分类：前置、简化、拆分。
前置即调整流程，效果上可能是高优模块前置或并行，低优模块后置；
简化即缩减或取消流程，体积优化是简化，执行加速也是简化；
拆分即细粒度拆解流程，本身没有优化效果，是为了更好的进行前置和简
#挑战每日一条沸点#
按页面加载链路分类：容器启动、资源加载、代码执行、数据获取、绘制渲染。
按资源性能分类：CPU、内存、本地 I/O、网络。该分类方法又被叫做 USE 方法（Utilization Saturation and Errors Method）。
按协作方分类：前端、客户端、数据后台、图片服务、浏览器引擎等。
按流程优化分类：前置、简化、拆分。
前置即调整流程，效果上可能是高优模块前置或并行，低优模块后置；
简化即缩减或取消流程，体积优化是简化，执行加速也是简化；
拆分即细粒度拆解流程，本身没有优化效果，是为了更好的进行前置和简
#挑战每日一条沸点#
展开
评论
点赞