通用前端的学习

通用前端的概念

通用前端的概念是我自创的,也是我多年开发全栈时的个人理解,结合自己对各种语言的比较,发现前端都具有几个特征,而这几个特征,很多人只能用具体的表象来描述,比如用安卓方式来说明,用IOS的方式来说明,或者QT的方式来说明等等。

让我得出一个结论,前端应该就是学习配置,外加使用其指定的语言来编写自己需要实现的行为。

所谓配置

  1. 无论Android,IOS,QT,Flutter等,他们都自定义了自己的一套UI组件,如果我们想要使用他们这些组件,就要遵守他们的配置规则,这些东西都起源于早期的 XML 这种标签形式,这种标签以其丰富的属性(可以用来将语义化理解最低)让你指定具体的样式和行为,HTML 也是这种标签的演化品。

所谓语言

  1. 所谓语言,就是任何一个开发 UI 组件的人都必须使用一种语言来开发,不然他自己也顶不住,此外任何一个 UI 组件,都应该给予更多的自定义能力,这样才能满足不同开发者的各种需求,否则这个 UI 组件不会被普及。

  2. 为此,UI 组件开发者必然要先预定义一些事件和行为,并且还允许你能重写这些行为的默认能力。

事件是什么?

事件就是代码逻辑执行过程中可能发生的各种行为的一种标记,后续通过这种标记,提取绑定在该事件下的所有代码行为进行执行。

所以 UI 组件必然有一堆事件定义。

需要记的通用知识

配置和事件每次更换框架时都要从 0 开始记忆,而每个框架都有大量的这类东西需要记忆,而你为了减少这种记忆的痛苦性,早期没有 AI 时只能在充分掌握一种 UI 组件的前提下,推测其他 UI 组件可能的事件和行为,例如在已知 html 的 input 组件的 blur,change,focus 等事件的基础上,你就可以定向去找安卓的这些事件和行为的定义。

在有 AI 的 加持下,这些代码都是信手拈来了,感谢时代的馈赠!

java 复制代码
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        EditText editText = findViewById(R.id.editText);
        // 处理焦点变化
        editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                if (hasFocus) {
                    Toast.makeText(MainActivity.this, "获得焦点", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(MainActivity.this, "失去焦点", Toast.LENGTH_SHORT).show();
                }
            }
        });
        // 处理点击事件
        editText.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "点击了EditText", Toast.LENGTH_SHORT).show();
            }
        });
        // 处理文本改变
        editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
                // 可以在这里处理文本改变之前的逻辑
            }
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                // 可以在这里处理文本改变的逻辑
            }
            @Override
            public void afterTextChanged(Editable s) {
                // 可以在这里处理文本改变之后的逻辑
            }
        });
    }
}
相关推荐
前端架构师-老李9 分钟前
React 中 useCallback 的基本使用和原理解析
前端·react.js·前端框架
木易 士心39 分钟前
CSS 中 `data-status` 的使用详解
前端·css
明月与玄武42 分钟前
前端缓存战争:回车与刷新按钮的终极对决!
前端·缓存·回车 vs 点击刷新
牧马少女1 小时前
css 画一个圆角渐变色边框
前端·css
zy happy1 小时前
RuoyiApp 在vuex,state存储nickname vue2
前端·javascript·小程序·uni-app·vue·ruoyi
小雨青年1 小时前
Cursor 项目实战:AI播客策划助手(二)—— 多轮交互打磨播客文案的技术实现与实践
前端·人工智能·状态模式·交互
小光学长2 小时前
基于Vue的儿童手工创意店管理系统as8celp7(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
meichaoWen2 小时前
【Vue】Vue框架的基础知识强化
前端·javascript·vue.js
jingling5552 小时前
Flutter | 基础环境配置和创建flutter项目
前端·flutter
mapbar_front2 小时前
如何判断一个领导值不值得追随
前端