分类 技术-前端 下的文章

设计模式

单例模式 Singleton pattern

确保一个类只有一个实例,并提供一个全局访问点获取该实例
场景:资源管理器,数据库连接池,线程池

系统配置管理器,读取配置文件并生成唯一的配置对象
原型模式 Prototype pattern

通过复制现有对象而不是实例化类来创建对象
场景:对象的创建非常耗时,资源密集

依赖注入 Dependency Injection(DI)

控制反转 IoC Inversion of Control
具体来说,依赖注入的实现方式是通过将依赖对象的创建和维护责任转移到外部容器中,使得类不需要自己实例化,而是通过外部容器进行注入。这样,类之间的依赖关系就被解耦了,代码的可维护性和可测试性也得到了提高。

书籍推荐

听说只要啃透了代码大全就可以了?

官方文档

  1. app.config 配置应用级的选项
  2. app.component 注册应用级的资源,确保组件在任何地方都是可用的
  3. 创建多个共存的vue应用,在同一个页面上,用vue控制一个大型页面中特殊的一小部分,则创建多个小的应用实例,分别将他们挂到所需的元素上
  4. v-bind,将元素的id attribute与组件的dynamic ID属性保持一致,如果绑定null或者undefined,则移除该元素
  5. v-bind 可以直接简写成:id, v-bind:id也可以
  6. const count = ref(0)
    count.value = 0

直接接受参数,ref()
不然直接输出count就是{value:0}

  1. 避免一个页面一个createApp()
  2. <script setup>里面单独放函数,const和import
    <template>里面放html
  3. 用有.value的ref,而不是普通变量,具有深层响应性,哪怕是里面的嵌套,其变化也能被检测

const obj = ref({nest:... , arr:.. })

function mutateDeeply(){
obj.value.arr.push('baz')
}

  1. shallow ref 浅层ref,只有.value
  2. reactive()
    const state =reactvive({count:0})
  3. 计算属性 computed(),复杂状态的响应逻辑,那个list可以用到这个,会缓存,只有响应式依赖更新的时候才重新计算
  4. 计算属性只读,需要读写的时候,拼装get,set
  5. computed()返回的是快照
  6. v-for 基于一个数组渲染一个列表,需要用到 v-for="item in xxxx",页面用得上
    或者v-for = "(item,index) in items"
  7. 通过key管理状态,v-for,列表就地更新,默认模式,前提是不依赖子组件状态或者临时dom状态
  8. 变更方法,将旧数组换成新的
  9. 输入 <input v-model="text">
  10. watch 直接作用于ref,侦听器,每次响应式状态发生变化时出发回调函数,默认懒执行,数据源变化才执行回调
  11. watch 和 watchEffect,不太明确,跳过

enum PositionStatus {
// 已提交
submit,
// 审核中
reviewing,
// 招聘中
post,
// 已完成
complete,
// 已结束
close,
// 已编辑
edit,
// 已拉黑
block,
}

///使用索引输出对应的字符串
String getPositionString(int index) {
///检查索引是否在有效范围内
if (index < 0 || index >= PositionStatus.values.length - 1) {

throw RangeError.range(index, 0, PositionStatus.values.length - 1, "index");

}

///返回索引对应的名称
return PositionStatus.values[index].name;
}

///结合switch,有的时候需要判断颜色啥的
Color _judgeColor(Position position) {
switch (position) {

 case Position.submit :
   return Color(0xFF666666)

}

}

GetMaterialApp(

  
  home: const HomeRoutes(),
  routes: {
    "A": (context) => A(),
    "B": (context) => B(),
    "C": (context) => C(),
    "D": (context) => D(),
    "E": (context) => E(),
  },
);

///不停回退直到当前路由在指定页面
Get.until((route) => Get.currentRoute == '/A');

回到底部的主要tab页面,不加名字就行了
Get.until((route) => Get.currentRoute == '/');

虽然听上去有点神经,但是不理解后端的工作实在是没办法写前端的请求数据...于是打算做一个全面的梳理...基础差只能老老实实补上来了...怎么会有人在search页面卡四天啊...

入门级别的JS知识

  1. instanceof

跨iframe:如果两个对象来自不同的全局环境(例如,不同的iframe或窗口),即使它们的构造函数相同,instanceof 也可能返回 false。这是因为每个全局环境都有自己的构造函数和原型链。

null 和 undefined:instanceof 不能用于 null 或 undefined,因为这两个值不是对象。尝试对它们使用 instanceof 会抛出 TypeError。
自定义对象与内置对象:instanceof 也可以用于检测内置对象类型,如 Array、Date、RegExp 等。

const arr = [1, 2, 3];  
console.log(arr instanceof Array); 

JS的表达式和运算符

501728441198_.pic.jpg

  1. new,构造函数实例,new.target
  2. class: 【感觉很重要,有空再看看】

Js的class介绍

使用extend继承父类
      kind:getter,setter,method,field;
      location: static,instance;    (类本身,在所有实例之间共享;类的特定实例)
      visibility: public,private;
           getter,读取类的某个属性的值,提供对私有属性的访问但不暴露属性本身;
           setter,设置,修改 (和getter一样也可以delete)
           field,存储对象的状态信息

       getter,get语法,允许访问动态计算的属性,徐阿哟反应内部变量的状态而不需要显示方法调用(*flutter的getx状态控制和这个有关系吗?*)

       Getters 给你一种方法来定义一个对象的属性,但是在访问它们之前不会计算属性的值。getter 延迟计算值的成本,直到需要此值,如果不需要,你就不用支付成本。

       get与defineProperty的区别:前者定义在实例的原型上,后者在实例自身;

       公有字段(public fields):参与prototype的继承,writable,enumerable,configurable properties

       static,often utility functions,只在函数内部调用,适用于缓存、固定配置或其他不需要跨实例复制的数据。在类本身而不是类的实例上被访问。为了在同一类的另一个静态方法中调用静态方法或属性,可以使用 this 关键字。

WeChat75a84b3d8f3f4a06b302bb826f77225c.jpg

WeChat2ef28f0776b7e7fd68caf8f0be01a2c2.jpg

  1. 列表项目
  2. 列表项目
  3. 列表项目
  4. 列表项目