前端模块化

一、模块化的理解 1.什么是模块? 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信 2.模块化的进化过程 全局function模式 : 将不同的功能封装成不同的全局函数 编码: 将不同的功能封装成不同的全局函数 问题: 污染全局命名空间, 容易引起命名冲突或数据不安全,而且模块成员之间看不出直接关系 function m1(){ //... } function m2(){ //... } namespace模式 : 简单对象封装 作用: 减少了全局变量,解决命名冲突 问题: 数据不安全(外部可以直接修改模块内部的数据) let myModule = { data: 'www.baidu.com', foo() { console.log(`foo() ${this.data}`) }, bar() { console.log(`bar() ${this.data}`) } } myModule.data = 'other data' //能直接修改模块内部的数据 myModule.foo() // foo() other data 这样的写法会暴露所有模块成员,内部状态可以被外部改写。 IIFE模式:匿名函数自调用(闭包) 作用: 数据是私有的, 外部只能通过暴露的方法操作 编码: 将数据和行为封装到一个函数内部, 通过给window添加属性来向外暴露接口 问题: 如果当前这个模块依赖另一个模块怎么办? // index.html文件 <script type="text/javascript" src="module.js"></script> <script type="text/javascript"> myModule.foo() myModule.bar() console.log(myModule.data) //undefined 不能访问模块内部数据 myModule.data = 'xxxx' //不是修改的模块内部的data myModule.foo() //没有改变 </script> // module.js文件 (function(window) { let data = 'www.baidu.com' //操作数据的函数 function foo() { //用于暴露有函数 console.log(`foo() ${data}`) } function bar() { //用于暴露有函数 console.log(`bar() ${data}`) otherFun() //内部调用 } function otherFun() { //内部私有的函数 console.log('otherFun()') } //暴露行为 window.myModule = { foo, bar } //ES6写法 })(window) 最后得到的结果: ...

October 5, 2024

Vue实例挂载

一、思考 我们都听过知其然知其所以然这句话 那么不知道大家是否思考过new Vue()这个过程中究竟做了些什么? 过程中是如何完成数据的绑定,又是如何将数据渲染到视图的等等 一、分析 首先找到vue的构造函数 源码位置:src\core\instance\index.js function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword') } this._init(options) } options是用户传递过来的配置项,如data、methods等常用的方法 vue构建函数调用_init方法,但我们发现本文件中并没有此方法,但仔细可以看到文件下方定定义了很多初始化方法 initMixin(Vue); // 定义 _init stateMixin(Vue); // 定义 $set $get $delete $watch 等 eventsMixin(Vue); // 定义事件 $on $once $off $emit lifecycleMixin(Vue);// 定义 _update $forceUpdate $destroy renderMixin(Vue); // 定义 _render 返回虚拟dom 首先可以看initMixin方法,发现该方法在Vue原型上定义了_init方法 源码位置:src\core\instance\init.js Vue.prototype._init = function (options?: Object) { const vm: Component = this // a uid vm._uid = uid++ let startTag, endTag /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { startTag = `vue-perf-start:${vm._uid}` endTag = `vue-perf-end:${vm._uid}` mark(startTag) } // a flag to avoid this being observed vm._isVue = true // merge options // 合并属性,判断初始化的是否是组件,这里合并主要是 mixins 或 extends 的方法 if (options && options._isComponent) { // optimize internal component instantiation // since dynamic options merging is pretty slow, and none of the // internal component options needs special treatment. initInternalComponent(vm, options) } else { // 合并vue属性 vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) } /* istanbul ignore else */ if (process.env.NODE_ENV !== 'production') { // 初始化proxy拦截器 initProxy(vm) } else { vm._renderProxy = vm } // expose real self vm._self = vm // 初始化组件生命周期标志位 initLifecycle(vm) // 初始化组件事件侦听 initEvents(vm) // 初始化渲染方法 initRender(vm) callHook(vm, 'beforeCreate') // 初始化依赖注入内容,在初始化data、props之前 initInjections(vm) // resolve injections before data/props // 初始化props/data/method/watch/methods initState(vm) initProvide(vm) // resolve provide after data/props callHook(vm, 'created') /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { vm._name = formatComponentName(vm, false) mark(endTag) measure(`vue ${vm._name} init`, startTag, endTag) } // 挂载元素 if (vm.$options.el) { vm.$mount(vm.$options.el) } } 仔细阅读上面的代码,我们得到以下结论: ...

October 4, 2024

Let/Const

Var 在 ES6 出现之前,必须使用 var 声明。但是,前端开发出现的一些问题与使用 var 声明的变量有关。这就是为什么必须要有新的方法来声明变量。首先,让我们在讨论这些问题之前更多地了解 var。 var 的作用域 作用域本质上是指变量/函数可供访问的范围。var可以在全局范围声明或函数/局部范围内声明。 当在最外层函数的外部声明var变量时,作用域是全局的。这意味着在最外层函数的外部用var声明的任何变量都可以在windows中使用。 当在函数中声明var时,作用域是局部的。这意味着它只能在函数内访问。 要进一步了解,请查看下面的示例。 var greeter = 'hey hi'; function newFunction() { var hello = 'hello'; } 这里,greeter是全局范围的,因为它存在于函数外部,而hello是函数范围的。因此,我们无法在函数外部访问变量hello。因此,如果我们这样做: var tester = 'hey hi'; function newFunction() { var hello = 'hello'; } console.log(hello); // error: hello is not defined 我们会收到错误消息,这是由于函数外部没有hello导致的。 var 变量可以重新声明和修改 这意味着我们可以在相同的作用域内执行下面的操作,并且不会出错 var greeter = 'hey hi'; var greeter = 'say Hello instead'; 又比如 var greeter = 'hey hi'; greeter = 'say Hello instead'; var 的变量提升 变量提升是 JavaScript 的一种机制:在执行代码之前,变量和函数声明会移至其作用域的顶部。这意味着如果我们这样做: console.log(greeter); var greeter = 'say hello'; 生面的代码会被解释为: var greeter; console.log(greeter); // greeter is undefined greeter = 'say hello'; 因此,将var声明的变量会被提升到其作用域的顶部,并使用 undefined 值对其进行初始化. ...

October 2, 2024

XSS防御

一、简述 跨站脚本(Cross-site scripting,简称为:CSS, 但这会与层叠样式表(Cascading Style Sheets,CSS)的缩写混淆。因此,跨站脚本攻击缩写为XSS)是一种网站应用程序的安全漏洞攻击。 XSS攻击通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript,但实际上也可以包括Java、 VBScript、 LiveScript、ActiveX、 Flash 或者甚至是普通的HTML。攻击成功后,攻击者可能得到包括但不限于更高的权限(如执行一些操作)、私密网页内容、会话和cookie等各种内容。 二、XSS类型 最常见的几种分类:反射型(非持久型)XSS、存储型(持久型)XSS、DOM型XSS、通用型XSS、突变型XSS。 反射型XSS 反射型XSS只是简单的把用户输入的数据从服务器反射给用户浏览器,要利用这个漏洞,攻击者必须以某种方式诱导用户访问一个精心设计的URL(恶意链接),才能实施攻击。 举例来说,当一个网站的代码中包含类似下面的语句: <?php echo "<p>hello,$_GET['user']</p>"; ?> 如果未做防范XSS,用户名设为<script>alert("Tz")</script>,则会执行预设好的JavaScript代码。 漏洞成因 当用户的输入或者一些用户可控参数未经处理地输出到页面上,就容易产生XSS漏洞。主要场景有以下几种: 将不可信数据插入到HTML标签之间时;// 例如div, p, td; 将不可信数据插入到HTML属性里时;// 例如:<div width=$INPUT></div> 将不可信数据插入到SCRIPT里时;// 例如:<script>var message = ” $INPUT “;</script> 还有插入到Style属性里的情况,同样具有一定的危害性;// 例如<span style=” property : $INPUT ”></span> 将不可信数据插入到HTML URL里时,// 例如:<a href=”[http://www.abcd.com?param=](http://www.ccc.com/?param=) $INPUT ”></a> 使用富文本时,没有使用XSS规则引擎进行编码过滤。 对于以上的几个场景,若服务端或者前端没有做好防范措施,就会出现漏洞隐患。 攻击流程 反射型XSS通常出现在搜索等功能中,需要被攻击者点击对应的链接才能触发,且受到XSS Auditor(chrome内置的XSS保护)、NoScript等防御手段的影响较大,所以它的危害性较存储型要小。 存储型XSS ​ 存储型(或 HTML 注入型/持久型)XSS 攻击最常发生在由社区内容驱动的网站或 Web 邮件网站,不需要特制的链接来执行。黑客仅仅需要提交 XSS 漏洞利用代码(反射型XSS通常只在url中)到一个网站上其他用户可能访问的地方。这些地区可能是博客评论,用户评论,留言板,聊天室,HTML 电子邮件,wikis,和其他的许多地方。一旦用户访问受感染的页,执行是自动的。 漏洞成因 ​ 存储型XSS漏洞的成因与反射型的根源类似,不同的是恶意代码会被保存在服务器中,导致其它用户(前端)和管理员(前后端)在访问资源时执行了恶意代码,用户访问服务器-跨站链接-返回跨站代码。 攻击流程 DOM型XSS 通过修改页面的DOM节点形成的XSS,称之为DOM Based XSS。 ...

October 2, 2024

数据类型

前言 请讲下 JavaScript 中的数据类型? 前端面试中,估计大家都被这么问过。 答:Javascript 中的数据类型包括原始类型和引用类型。其中原始类型包括 Null、Undefined、Boolean、String、Symbol、BigInt。引用类型指的是 Object。 没错,我也是这么回答的,只是这通常是第一个问题,由这个问题可以引出很多很多的问题,比如 Null 和 Undefined 有什么区别?前端的判空有哪些需要注意的? typeof null 为什么是 object? 为什么 ES6 要提出 Symbol? BigInt 解决了什么问题? 为什么 0.1 + 0.2 !== 0.3? 你如何解决这个问题? 如何判断一个值是数组? … 弱类型语言 因为 JavaScript 是弱类型语言或者说是动态语言。这意味着你不需要提前声明变量的类型,在程序运行的过程中,类型会被自动确定,也就是说你可以使用同一个变量保存不同类型的值 var foo = 42; // foo is a Number now foo = "bar"; // foo is a String now foo = true; // foo is a Boolean now 这一特性给我们带来便利的同时,也给我们带来了很多的类型错误。试想一下,假如 JS 说是强类型语言,那么各个类型之间没法转换,也就有了一层隔阂或者说一层保护,会不会更加好维护呢?——这或许就是 TypeScript 诞生的原因。 对 JavaScript 的数据类型掌握,是一个前端最基本的知识点 null 还是 undefined 定义 undefined 表示未定义的变量。null 值表示一个空对象指针。 ...

October 1, 2024

盒子模型

前端盒子模型是网页布局的基础概念,对于前端开发者来说,理解盒子模型是至关重要的。 1. 盒子模型的组成部分 内容(Content): 盒子中实际显示的文本或图像部分。内容区的大小由 width 和 height 属性确定。 内边距(Padding): 内容与边框之间的空间。它用于增加内容与边框之间的距离,可以通过 padding、padding-top、padding-right、padding-bottom 和 padding-left 属性进行设置。 边框(Border): 环绕在内边距和内容周围的边界。可以设置边框的宽度、样式和颜色。相关属性包括 border、border-width、border-style 和 border-color。 外边距(Margin): 盒子外部的空间。用于控制元素与元素之间的间距。可以通过 margin、margin-top、margin-right、margin-bottom 和 margin-left 属性进行设置。 2. 标准盒子模型与替代盒子模型 标准盒子模型(content-box): 默认的盒子模型。width 和 height 只包含内容区,不包括内边距和边框。因此,元素的实际占用空间是 width + padding + border。 替代盒子模型(border-box): 通过设置 box-sizing: border-box,使得 width 和 height 包括内边距和边框,这样内容区的大小会自动调整以适应总高度和宽度。这样做通常可以避免许多布局问题。 示例 .box { box-sizing: content-box; /* 默认值 */ width: 200px; padding: 20px; border: 5px solid black; } 在标准模型下: 总宽度 = 200px + 20px (左内边距) + 20px (右内边距) + 5px (左边框) + 5px (右边框) = 250px .box { box-sizing: border-box; /* 替代模型 */ width: 200px; padding: 20px; border: 5px solid black; } 在替代模型下: ...

September 30, 2024

HTML 5 新特性

HTML5 新特性 语义标签 增强型表单 视频和音频 Canvas绘图 SVG绘图 地理定位 拖拽API WebWorker WebStorage WebSocket 语义标签 语义化标签使得页面的内容结构化,可以使开发者更方便清晰地构建页面的布局 标签 描述 <header> 定义了文档的头部区域 <footer> 定义了文档的尾部区域 <nav> 定义文档的导航 <section> 定义文档中的书 <acticle> 定义页面独立的内容区域 <aside> 定义页面侧边栏内容 <details> 定义用户可以看到或隐藏的额外细节 <summary> 标签包含details元素的标题 <dialog> 定义对话框 <figure> 定义自包含内容,如图表 <main> 定义文档主内容 增强型表单 HTML5新增input输入特性,改善更好的输入控制和验证 输入类型 描述 color 主要用于选取颜色 date 选取日期 datetime 选取日期(UTC时间) datetime-local 选取日期(无时区) month 选择一个月份 week 选择周和年 time 选择一个时间 email 包含email地址的输入域 number 数值的输入域 url url地址的输入域 tel 定义输入电话号码的字段 search 用于搜索域 range 一个范围内数字值的输入域 HTML5也新增了五个表单元素 ...

September 24, 2024

AI编程工具

AI编程工具正在重塑软件开发的工作方式。从简单的代码补全到自主完成复杂任务的编程Agent,这个领域在短短两三年内经历了巨大的变化。本文梳理AI编程工具的核心概念、工作原理和实践方法。 一、AI编程工具的演进 1.1 三代AI编程工具 graph LR G1["第一代代码补全Copilot (2021)"] --> G2["第二代对话式编程ChatGPT (2022)"] G2 --> G3["第三代编程AgentCursor/Devin (2024+)"] 代际 交互方式 能力范围 代表产品 第一代 行内补全,按Tab接受 单行/单函数级别 GitHub Copilot 第二代 对话框问答 代码片段级别 ChatGPT、Claude 第三代 Agent模式,自主执行 跨文件/跨系统级别 Cursor、Windsurf、Devin 1.2 当前主流工具对比 工具 类型 核心特点 GitHub Copilot IDE插件 最早的AI编程助手,集成在VS Code/JetBrains等主流IDE中 Cursor 独立IDE 基于VS Code深度定制,Agent模式、多文件编辑 Windsurf 独立IDE Codeium推出,强调"Flow"模式的流畅体验 Claude Code CLI工具 终端中运行的编程Agent,适合命令行工作流 Devin 云端Agent 全自主编程Agent,自带开发环境 Amazon Q Developer IDE插件 AWS深度集成,擅长云原生开发 二、AI编程工具的工作原理 2.1 代码补全的原理 代码补全是最基础的能力。以Copilot为例: graph LR CTX["上下文收集当前文件内容打开的相关文件光标位置"] --> PROMPT["构造Prompt"] PROMPT --> LLM["LLM(Codex/GPT-4)"] LLM --> SUGGEST["补全建议"] SUGGEST --> USER["用户Tab接受 / Esc拒绝"] 上下文收集是关键——模型看到的上下文越好,补全质量越高: ...

May 2, 2026

Block底层原理

基础概念 Block 是 Apple 在 C 语言基础上扩展的语法特性(也称为 Closure / 闭包),它允许将一段代码和其执行时需要的上下文环境封装为一个可传递的对象。Block 在 Objective-C 和 C/C++ 中均可使用,是 GCD、动画 API、回调等场景的核心机制。 // Block 的声明与调用 void (^myBlock)(NSString *) = ^(NSString *name) { NSLog(@"Hello, %@", name); }; myBlock(@"World"); 一个核心问题是:Block 是函数指针还是对象? 答案是——Block 本质上是一个 OC 对象。它的底层是一个包含 isa 指针的 C 结构体,满足 OC 对象的基本条件;同时它也包含一个函数指针(FuncPtr),指向 Block 实际执行的代码。因此可以说,Block 是一个用对象形式包装了函数指针和捕获变量的特殊 OC 对象。 底层数据结构 通过 clang -rewrite-objc 可以将 Block 语法转换为 C++ 代码,观察其底层结构。这个转换虽然不完全等同于最终编译产物,但准确反映了 Block 的数据布局和调用机制。 编译器转换示例 对以下源码: int main() { int a = 10; void (^block)(void) = ^{ NSLog(@"%d", a); }; block(); return 0; } Clang 会将其转换为如下结构: ...

May 2, 2026

KISS原则

什么是KISS原则? KISS(Keep It Simple, Stupid)原则是软件工程中最重要的设计原则之一。它的核心理念是:简单的解决方案比复杂的解决方案更好。 核心思想 简单不等于简陋 KISS 原则强调的"简单"是指: 易于理解:代码的意图一目了然 易于修改:改动时不会牵一发而动全身 易于调试:出问题时容易定位原因 易于测试:测试用例简单直接 简单不意味着功能缺失或代码草率,而是用最直接的方式解决问题。 复杂性的代价 不必要的复杂性会带来: 更高的学习成本:新成员需要更长时间理解代码 更多的 bug:复杂逻辑更容易出错 更难维护:修改一处可能影响多处 更慢的开发速度:需要考虑更多的边界情况 graph LR A[复杂性增加] --> B[理解成本上升] A --> C[Bug 概率上升] A --> D[维护难度上升] B --> E[开发效率下降] C --> E D --> E iOS开发中的KISS实践 1. 选择简单的架构 // 过度设计:小项目使用复杂的 VIPER 架构 // 每个模块都有 View, Interactor, Presenter, Entity, Router // 一个简单的列表页面需要创建 5+ 个文件 // KISS:根据项目规模选择合适的架构 // 小项目:MVC 就足够了 class UserListViewController: UIViewController { private var users: [User] = [] override func viewDidLoad() { super.viewDidLoad() loadUsers() } private func loadUsers() { Task { users = try await UserService.shared.fetchUsers() tableView.reloadData() } } } // 随着项目增长,再逐步引入更复杂的架构 2. 避免过早优化 // 违反 KISS:过早引入复杂的缓存机制 class ImageLoaderOverEngineered { private let memoryCache = NSCache<NSString, UIImage>() private let diskCache: DiskCache private let networkQueue = DispatchQueue(label: "imageLoader", attributes: .concurrent) private let cacheQueue = DispatchQueue(label: "cacheQueue") private var pendingRequests: [URL: [(UIImage?) -> Void]] = [:] private let requestLock = NSLock() func loadImage(from url: URL, completion: @escaping (UIImage?) -> Void) { // 复杂的多级缓存、请求合并、线程同步逻辑... // 对于大多数 App 来说,这可能是过度设计 } } // KISS:从简单开始 class SimpleImageLoader { private let cache = NSCache<NSString, UIImage>() func loadImage(from url: URL) async -> UIImage? { let key = url.absoluteString as NSString // 先检查缓存 if let cached = cache.object(forKey: key) { return cached } // 从网络加载 guard let (data, _) = try? await URLSession.shared.data(from: url), let image = UIImage(data: data) else { return nil } // 存入缓存 cache.setObject(image, forKey: key) return image } } // 当真正遇到性能问题时,再逐步优化 3. 简化条件逻辑 // 违反 KISS:复杂的嵌套条件 func processOrder(_ order: Order) -> Result<Receipt, OrderError> { if order.items.count > 0 { if order.customer != nil { if order.customer!.isVerified { if order.paymentMethod != nil { if order.shippingAddress != nil { if order.totalAmount > 0 { // 终于可以处理订单了... return .success(Receipt()) } else { return .failure(.invalidAmount) } } else { return .failure(.noShippingAddress) } } else { return .failure(.noPaymentMethod) } } else { return .failure(.unverifiedCustomer) } } else { return .failure(.noCustomer) } } else { return .failure(.emptyOrder) } } // KISS:使用 Guard 早期返回 func processOrderSimple(_ order: Order) -> Result<Receipt, OrderError> { guard !order.items.isEmpty else { return .failure(.emptyOrder) } guard let customer = order.customer else { return .failure(.noCustomer) } guard customer.isVerified else { return .failure(.unverifiedCustomer) } guard order.paymentMethod != nil else { return .failure(.noPaymentMethod) } guard order.shippingAddress != nil else { return .failure(.noShippingAddress) } guard order.totalAmount > 0 else { return .failure(.invalidAmount) } return .success(Receipt()) } 4. 使用标准库而非自己实现 // 违反 KISS:自己实现数组去重 func removeDuplicatesManual<T: Hashable>(from array: [T]) -> [T] { var seen = Set<T>() var result = [T]() for element in array { if !seen.contains(element) { seen.insert(element) result.append(element) } } return result } // KISS:使用标准库 let uniqueArray = Array(Set(array)) // 或保持顺序 let uniqueOrderedArray = array.reduce(into: [T]()) { result, element in if !result.contains(element) { result.append(element) } } // 更简单:使用 Swift Algorithms import Algorithms let unique = array.uniqued() 5. 避免过度泛型化 // 违反 KISS:过度泛型,难以理解 protocol DataProviding { associatedtype DataType associatedtype ErrorType: Error func fetch() async throws -> DataType } protocol DataTransforming { associatedtype Input associatedtype Output func transform(_ input: Input) -> Output } class GenericDataLoader< Provider: DataProviding, Transformer: DataTransforming > where Provider.DataType == Transformer.Input { // 复杂的泛型约束... } // KISS:简单直接的实现 class UserLoader { func loadUsers() async throws -> [User] { let data = try await APIClient.shared.fetch("/users") return try JSONDecoder().decode([User].self, from: data) } } // 当真正需要复用时,再考虑抽象 6. 简化 API 设计 // 违反 KISS:过多的配置选项 func createButton( title: String, titleColor: UIColor = .white, titleFont: UIFont = .systemFont(ofSize: 16), backgroundColor: UIColor = .blue, cornerRadius: CGFloat = 8, borderWidth: CGFloat = 0, borderColor: UIColor = .clear, shadowColor: UIColor = .black, shadowOffset: CGSize = .zero, shadowRadius: CGFloat = 0, shadowOpacity: Float = 0, contentInsets: UIEdgeInsets = .init(top: 12, left: 24, bottom: 12, right: 24), isEnabled: Bool = true, // ... 更多参数 ) -> UIButton { // ... } // KISS:提供简单的默认实现和预设样式 enum ButtonStyle { case primary case secondary case destructive case text } func createButton(title: String, style: ButtonStyle = .primary) -> UIButton { let button = UIButton() button.setTitle(title, for: .normal) switch style { case .primary: button.backgroundColor = .systemBlue button.setTitleColor(.white, for: .normal) button.layer.cornerRadius = 8 case .secondary: button.backgroundColor = .systemGray5 button.setTitleColor(.systemBlue, for: .normal) button.layer.cornerRadius = 8 case .destructive: button.backgroundColor = .systemRed button.setTitleColor(.white, for: .normal) button.layer.cornerRadius = 8 case .text: button.backgroundColor = .clear button.setTitleColor(.systemBlue, for: .normal) } return button } // 使用简单 let primaryButton = createButton(title: "Submit") let cancelButton = createButton(title: "Cancel", style: .secondary) 7. 选择合适的数据结构 // 违反 KISS:用复杂的数据结构解决简单问题 class UserStatusManager { private var statusTree: RedBlackTree<String, UserStatus> private var statusIndex: [String: TreeNode<String, UserStatus>] // 复杂的树结构来管理用户状态... } // KISS:简单的字典就够了 class SimpleUserStatusManager { private var userStatus: [String: UserStatus] = [:] func setStatus(_ status: UserStatus, for userId: String) { userStatus[userId] = status } func getStatus(for userId: String) -> UserStatus? { return userStatus[userId] } } 如何平衡简单与功能 渐进式复杂度 遵循"简单开始,按需增长"的原则: ...

May 2, 2026