前端常接触的相关名词

  • SEO(Search Engine optimization): 搜索引擎优化
  • SEM(Search Engine Marketing): 搜索引擎营销
  • CDN(Content Delivery Network): 内容分发网络,即多个服务器副本为不同地域用户提供服务,常见的网站加速方式。
  • IP:独立 IP 访问的用户
  • PV(Page Vistor):页面浏览量或点击量(每刷新一次网页,向服务器提交一次请求,算一次)
  • UV(Unique Vistor):独立访客数(类似于几个账户登陆过网站)
  • OOP(Object Oriented Programming): 面向对象程序设计(计算机程序是由单个能够起到子程序作用的单元或对象组合而成)
  • MVC(Model View Controller): 模型-视图-控制器,一种软件设计典范,用一种业务逻辑、数据、界面分离的方式组织代码

    曾经看到有人将 MVC 遥控器控制电视的过程,感觉很形象:Controller是遥控器,Model是遥控器里的芯片,View是电视画面

  遥控器按哪个键,芯片就发送哪种信号给电视机,电视机换台。而整个操作过程我们只关注需要按遥控器的哪个键即可,怎么发射的信号,并不关心。

  • MVVM(Model-View-View-Model): 双向数据绑定模型,当Model变化时,ViewModel会自动更新,当ViewModel变化时,Model也会自动变化。故又称为Model-View-Binder
  • OCP(Open Close Principle)原则: 设计模式六大原则之开闭原则。其含义是说一个软件实体应该通过扩展来实现变化,而不是通过修改已有的代码来实现变化。

 

前端相关:

  • HTML(Hyper Text Markuo Language): 超文本标记语言,由W3C(国际万维网联盟)维护。
  • XML(Extensible Markup Language): 可扩展标记语言,是一种数据格式,如同 json 一样。

    被设计用来描述数据(XML) ,被设计用来显示数据(HTML)

 

  • CSS3 Sprit : CSS3雪碧图(精灵)
  • CSS BEM 命名方式:BEM意思就是块(block)、元素(Element)、修饰符(Modifier)
  • CSS Reset:将原有元素的样式也一并去掉,以便各个元素在不同浏览器下显示一致
  • CSS Normalize:保留元素原有样式,新制定一套规则,使各个元素在不同浏览器下显示一致

 

  • dpi / ppi : 设备像素密度,指单位面积内像素的多少
  • dpr : 设备像素比(= 设备像素 / CSS像素),即一个设备像素中含有多少个物理像素
  • 响应式:针对不同分辨率设备进行的适配式设计,以利用@media规则为主要手段
  • 自适应:忽略@media,以比例布局为主,目的是适应不同的浏览器窗口大小

 

  • SPA:single page web application 即单页应用。重前端,数据都要通过Ajax同步、提交。在URL中采用#来作为当前视图的地址,页面不会重载。
  • PWA:Progressive WEB APP 是一种理念,使用多种技术来增强web app的功能。在移动端利用标准化框架,让网页应用呈现和原生应用相似的体验。

 

Web安全:

  • XSS(Cross Site Script):跨站脚本攻击,为避免与CSS混淆,故写成XSS。XSS 的原理是恶意攻击者往 Web 页面里插入恶意可执行网页脚本代码。
  • CSRF(Cross-Site Request Forgery):跨站请求伪造攻击。攻击者可以盗用并模拟用户身份向服务器发送请求。
  • SQL注入(SQL Injection):程序没有过滤用户的输入,使攻击者成功的向服务器提交恶意的 SQL 查询代码,程序在接收后错误的将攻击者的输入作为查询语句的一部分执行,导致原始的查询逻辑被改变。

 

通信相关:

  • WAN(Wide Area Network): 广域网
  • LAN(Local Area Network): 局域网
  • MAN(Metropolitan Area Network):城域网
  • WLAN(Wireless LAN): 无线局域网
  • WIFI(Wireless Fidelity): 与蓝牙技术一样,同属于办公室和家庭中使用的短距离传输技术

    WLAN与WIFI的区别:WIFI是WLAN的一个标准,WIFI包含于WLAN中,属于WLAN协议中的一项新技术

转载于:https://www.cnblogs.com/Kuro-P/p/8736098.html

<think>嗯,用户这次明确要求了解模板(template)在前端开发中的作用和应用场景,看来ta对这个概念的应用层面更感兴趣。结合之前的对话历史,用户已经理解了编程中模板的通用定义,现在想聚焦在前端领域的具体实践。从引用的资料来看,用户提供了四个有价值的参考:[^1]说明模板引擎的基本用途,[^2]展示了一个Vue.js的实际项目案例,[^3]提到Mustache模板的性能优势,[^4]虽然讲微前端但也涉及模块化思想。这些引用恰好覆盖了技术原理、实际项目、性能优化和架构设计四个维度,正好可以用来组织回答。用户可能是前端开发者或学习者,ta的问题很务实,不满足于抽象定义,需要看到具体价值。考虑到ta之前接受过技术性较强的解释(如C++模板元编程),这次回答可以保持技术深度但更侧重实用场景。准备从三个层面展开:核心作用(为什么用)、典型应用场景(怎么用)、进阶发展方向(如何用好)。特别要注意:1.每个作用都要对应真实的前端痛点,比如数据绑定解决DOM操作繁琐问题2.场景描述要具体,像电商商品展示这种场景比笼统说“动态内容”更有说服力3.必须包含引用的Mustache性能案例(用户特意提供了第三方数据支撑)4.补充脚手架工具这个容易被忽略的应用场景(通过引用[^2]的Vue项目延伸)突然想到用户引用的微前端内容[^4]虽然不直接相关,但说明ta可能接触复杂项目,可以悄悄埋个伏笔——在提及“跨技术栈复用”时带一句微前端,作为延伸话题的钩子。最后检查所有技术名词都有中文解释(如SSR),避免中英文混杂。代码示例选最直观的数据绑定片段就够了,毕竟Vue单文件组件的template标签在引用[^2]的项目里能看到完整案例。</think> 模板在前端开发中通过**分离逻辑与视图**实现高效动态渲染,结合引用资料具体分析其作用与应用场景如下: --- ### 一、核心作用 1. **动态内容生成(数据绑定)** 将数据注入预设结构生成动态HTML,避免手动拼接字符串: ```html <!-- Mustache 示例 --> <div>{{ user.name }}</div> ``` 当数据`{user: {name: "Alice"}}`注入后自动渲染为`<div>Alice</div>`[^1][^3]。 2. **逻辑解耦** 模板引擎独立处理渲染逻辑(如条件语句/循环),业务代码仅关注数据: ```html <!-- Vue 条件渲染 --> <div v-if="isVIP">会员专享</div> ``` 视图逻辑从JavaScript业务代码中抽离,提升可维护性[^1][^2]。 3. **性能优化** 如Mustache的**预编译机制**将模板预先转化为JavaScript渲染函数,执行效率提升32%(10万文章生成场景[^3]): ```js // 预编译伪代码 const render = precompile('<div>{{ title }}</div>'); render({ title: 'Hello' }); // 高速执行 ``` --- ### 二、关键应用场景 | **场景** | **作用** | **技术实现** | **案例** | |--------------------------|-----------------------------------|-----------------------------|-----------------------------| | **动态页面渲染** | 数据驱动视图更新 | Vue/React模板、Mustache | 电商商品列表实时加载[^1] | | **静态站点生成(SSG)** | 编译时生成静态HTML | Gatsby(基于Mustache)[^3] | 博客平台10万文章快速构建 | | **组件化开发** | 复用UI结构 | Vue单文件组件(`.vue`) [^2] | Avian-Template项目组件库 | | **多端适配** | 一套模板适配不同终端 | 条件注释+响应式模板 | 同一模板生成PC/移动端页面 | | **微前端集成** | 跨技术栈统一渲染层 | 主应用集成子应用模板[^4] | 独立模块共用头部/底部模板 | --- ### 三、实践案例解析 #### 1. **静态站点生成优化(引用[^3])** Gatsby使用Mustache模板将Markdown转为HTML: ``` 流程: Markdown内容 → Mustache模板引擎 → 预编译优化 → 生成静态HTML ``` **性能提升关键**:预编译避免每次请求时的模板解析开销。 #### 2. **组件化开发(引用[^2])** 如Avian-Template项目通过Vue模板实现: ```html <!-- 按钮组件模板 --> <template> <button :class="['btn', type]"> <slot>默认按钮</slot> </button> </template> ``` 通过`<slot>`实现内容插槽,支持多处复用同一UI结构。 --- ### 四、演进趋势 1. **编译时优化** 现代框架(如Svelte)将模板编译为原生JS,彻底移除运行时解析开销。 2. **类型安全模板** TypeScript+模板(如Vue 3)实现模板内表达式类型检查: ```ts // 模板内自动校验message类型 <div>{{ message.toUpperCase() }}</div> ``` 3. **跨平台模板** 一套模板同时生成Web/小程序/Native界面(如Taro框架)。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值