函数式变编程
前言背景引入123456789101112131415161718192021222324252627282930313233// 问题： 上接浏览器原理 —— 参数 parse// 1. 数组在url中展示形式// location.search => '?name[]=progressive$%coding&name[]=objective$%coding&name[]=functional$%coding'// 2. 参数提取拼接成数组// ['progressive$%coding', 'objective$%coding', 'functional$%coding']// 3. 手写方法，转换成数组对象// [{name: 'Progressive Coding'}, {name: 'Objective Coding'}, {name: 'Functional...
typeScript
TS 的基础概念什么是 TS JS 的一个超集，在原有的语法基础上，添加强类型并切换为基于类的面向对象语言 面向项目TS - 面向解决大型的复杂项目、架构、代码维护复杂场景JS - 脚本化语言，用于面向简单页面场景 自主检测TS - 编译时，主动发现并纠正错误JS - 运行时，执行报错 类型检测TS - 强类型语言，支持动态和静态的类型检测JS - 弱类型语言，无静态类型选项 运行流程TS - 依赖编译，依靠编译打包实现在浏览器端的运行JS - 可直接在浏览器端运行 复杂特性TS - 模块化、接口、泛型 TS 基础类型和语法 boolean、string、number、array、null、undefined、tuple 123456789let isEnable: boolean = false;let className: string = "baidu";let classNum: number = 2;let u: undefined = undefined;let n: null = null;// 统一方式 &...
浏览器详解
BOMlocation location.href: https://www.baidu.com/search?class=browser&id=2#comments .orgin => ‘https://www.baidu.com‘ .protocol => ‘https:’ .host => ‘www.baidu.com’ .port => ‘’. .pathname => ‘/search/‘ .search => ‘?class=browser&id=2’ .hash => ‘#comments’ .assign(‘’) // 跳转到指定 path => 替换 pathname .replace(‘’) // 同上，同时替换浏览历史 .reload() .toString() // 产出当前地址字符串 URI & URL: uniform resource identifier /...
移动端开发
移动端适配方案媒体查询1234567891011121314151617181920212223@media screen and (max-width: 960px) { body { background-color: #ff6699; }}@media screen and (max-width: 768px) { body { background-color: #00ff66; }}@media screen and (max-width: 550px) { body { background-color: #6633ff; }}@media screen and (max-width: 320px) { body { background-color: #ffff00; ...
微前端
简介微前端概念 微前端的概念来自于后端微服务。 微服务是一种开发软件的架构和组织方法， 其中软件由明确定义的 API 进行通信的小型独立服务组成。 微服务的主要思想 将应用分解为小的，互相连接的微服务，一个微服务完成某个特定功能。 每个微服务都有自己的业务逻辑和适配器，不同的微服务，可以使用不同的技术去实现。 使用统一的网关 进行调用。 微服务的主要思路是化繁为简，通过更加细致的划分，使得服务内容更加内聚，服务之间耦合性降低，有利于项目的团队开发和后期维护。把微服务的概念应用到前端就是微前端。 微前端的发展史 2014 年 MartinFowler 和 JamesLewis 共同提出了微服务的概念 2018 年 第一个基于微前端的工具 single-spa 在 github 上开源 2019 年 基于 single-spa 的 qiankun 框架问世 2020 年 Module Federation（Webpack5）把项目中的模块分为本地模块和远程模块，远程模块在运行时异步从所谓的容器中加载。 微前端的特点 技术栈无关...
Vue 源码解析 组件通信
props / $emit$parent / $children$dispatch 一直递归找父组件，然后执行父组件中对应的 $emit 方法 1234567Vue.prototype.$dispatch = function (eventName, newValue) { let parent = this.$parent; while (parent) { parent.$emit(eventName, newValue); parent = parent.$parent; // 继续递归接着往上找 }}; $broadcast 一直往归找子元素，执行对应的方法执行 123456789101112Vue.prototype.$broadcast = function (eventName, newValue) { let children = this.$children; function broad(children) { children.forEach((child)...
Vue 源码解析 keep-alive
用法1234567891011121314<!-- 逗号分隔字符串 --><keep-alive include="a,b"> <component :is="view"></component></keep-alive><!-- 正则表达式 (使用 `v-bind`) --><keep-alive :include="/a|b/"> <component :is="view"></component></keep-alive><!-- 数组 (使用 `v-bind`) --><keep-alive :include="['a', 'b']"> <component...
Vue 源码解析 指令
用法 全局: Vue.directive —-> 存放在 Vue.options['directives']中局部: 组件内的 directive 选项中定义 —-> 存放在 vm.$options['directives'] 中 123456789<input v-focus></input>;// 注册一个全局自定义指令 `v-focus`Vue.directive("focus", { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus(); },}); 监听时机钩子触发时机 init 触发时机: 已创建 VNode，在 patch 期间发现新的虚拟节点时被触发 回调参数: VNode create 触发时机: 已基于 VNode 创建了 DOM 元素 回调参数: emptyNode 和 VNode activate 触发时机:...
Vue 源码解析 过滤器
概述 质上就是一个 JS 函数 用法 双花括号插值中和在 v-bind 表达式中 123{{ message | capitalize }}v-bind:id="rawId | formatId" 定义 组件的选项中定义局部过滤器，优先级高 123456789export default { filters: { capitalize: function (value) { if (!value) return ""; value = value.toString(); return value.charAt(0).toUpperCase() + value.slice(1); }, },}; 创建 Vue 实例之前使用全局 API，Vue.filter 定义全局过滤器 12345Vue.filter("capitalize", function (value)...
Vue 源码解析 全局方法
Vue.extend 使用基础 Vue 构造器，创建一个子类: 先创建一个类 Sub，接着通过原型继承的方式将该类继承基础 Vue 类，然后给 Sub 类添加一些属性以及将父类的某些属性复制到 Sub 类上，最后将 Sub 类返回 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192// 创建构造器<div id="mount-point"></div>;var Profile = Vue.extend({ template: "<p>{{firstName}} {{lastName}} aka...
