大前端通用知识学习 - 从抽象层面来汇总整体知识框架，利用AI快速掌握新知识【未完待续】-优快云博客

本文链接：https://blog.youkuaiyun.com/wangsenling/article/details/140952560

通用前端的概念

大前端的学习，结合自己多年开发学习的经验，发现前端都具有几个特征，而这几个特征，很多人只能用具体的表象来描述，比如用安卓方式来说明，用IOS的方式来说明，或者QT的方式来说明等等。

我用比较简单的语言概括就是：

前端应该就是学习配置，外加用指定的语言来实现具体的行为。

实现具体的行为这个事情，在AI时代，已经不算一件难事，目前ChatGPT-4o已经能够通读代码上下文，给出合理的逻辑代码，只要你表达准确，一行代码都不需要写，目前我们的团队，正在改变着开发习惯，而所有程序员的改变，也估计就在这两年了。

所谓配置

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

所谓语言

所谓语言，就是任何一个开发 UI 组件的人都必须使用一种语言来开发，不然他自己也顶不住，此外任何一个 UI 组件，都应该给予更多的自定义能力，这样才能满足不同开发者的各种需求，否则这个 UI 组件不会被普及。
为此，UI 组件开发者必然要先预定义一些事件和行为，并且还允许你能重写这些行为的默认能力。

事件是什么？

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

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

通用知识

常见的事件

无论你学习那个自带UI组件的产品，都需要记忆这些事件，通过完全的掌握html下的所有事件，就能借助AI的能力，快速掌握其他UI组件的对应事件，这样的话，基本上你就不用去一五一十地去学习具体的写法了。

每个UI组件的事件都要从 0 开始记忆（没有AI的时代），而每个框架都有大量的这类东西需要记，而你为了减少这种记忆的痛苦性，可利用已掌握知识推测其他 UI 组件可能的事件（但具体怎么实现这些代码，收集过程是持续痛苦的）。

例如在已知 html 的 input 组件的 blur，change，focus事件，你就可以定向去找安卓的这些事件。

现在在 AI 的加持下，这些代码都是信手拈来了，我们再也不用像几年前很痛苦的一点点收集代码，然后再一遍遍的编译运行测试，只有经历过上个时代的学习者们才能体会到的快感。

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) {
                // 可以在这里处理文本改变之后的逻辑
            }
        });
    }
}

UI组件的操作

UI组件都会有静态配置和动态创建两种模式，就像html里面的标签，这是一个通式，所以，快速学习的时候，就要准备这些操作。
1. 静态的东西都比较简单，就是往里面塞属性，大部分是要掌握动态的创建，像网页版的响应式开发，例如vue框架就直接把这个繁琐的过程给你封装了。
2. 动态的东西对于强语言来说，就是List这种列表的掌握，如果创建对象并append追加进去，同时又如何渲染，对于弱语言来说，就显得更加随意，但AI时代，再复杂人都不用搞了，直接写出来html的js代码，然后让其翻译成JAVA，Objective-C即可，生命大大得到了节省
3. UI组件的常见表现，显示和隐藏，移除和追加，创建和销毁，其他的动画等都应该属于一种事件来编写的。

通信机制

进程间通信和远程通信
1. 进程间通信在html层面不明显，但是也有，例如两个iframe之间如何通信，window.postmessage，后续还追加了MessageChannel等，这些都是进程间通信，无论那个前端框架都需要掌握这种进程间通信，例如安卓开发中的Intent等
2. 远程通信，http和websocket两者如何建立，如何获取，这个每个语言都有每个语言的特比，且都有封装好的库
3. 我们需要知道远程数据获取后，如果将数据与UI组件相结合，根据数据动态调整UI组建的状态，以及样式，只要能做到这里，前端的事情基本就搞完了。

本地API

网页开发的前端和大前端的区别就在于本地API的调用上，因为网页前端被困束在浏览器的环境里，谷歌把尽可能能做得能包的都给你封装了，并且还严格限制了大量权限，所以网页前端人员被保护的很好，并不知道如何去调用这些操作，但是到了大前端后，所有这些东西都可以暴露给你，或者中转给你（小程序），这样你就可以发挥更多的编程能力，借助这些api实现更复杂的逻辑。

本地存储

网页开发最大的点是将服务器放在远程，本地通过请求远程服务器获取自己需要的数据，这样的好处是中心化处理，处理完毕后再将结果返回。
而大前端的开发，因为拥有了本地API的能力，则并不完全需要远程提供各种可取用的数据，甚至自己就可以调用本地的API，利用本地的存储设备或者存储软件，本地文件进行数据的存储。因此，对于大前端开发者来说，本地数据，例如Sqlite这种很小又很强的数据库就显得特别重要。当然每个前端都提供了自己的存储，例如网页localstorage，安卓的SharedPreferences，每种存储再根据自己的作用域范围，不断扩大，其实也就是换个名，增加一种权限，来实现数据的共享。

直接与语言库集成

这个就牛逼了，无论啥东西，最终都能打包成一个dll，exe，或者.so文件，这个可执行文件本身就是二进制的，只要编译器能认，那么就能运行，因为大前端用了调用本地执行可执行文件的权力，那就意味着它可以运行这类文件，只要这类文件提供了类似于http或者websocket的服务，那么大前端就可以用通信机制调用这些接口，或者直接exec执行这些脚本，输入音视频，然后让其返回解码后的内容。这样内容就又大大提升了。