IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

前端

共 1396 篇文章

IT 2016-05-05 22:53:17 / 累计浏览 2,191

zepto/jQuery、AngularJS、React、Nuclear的演化

这篇文章梳理了前端开发中处理DOM交互的技术演化路径。从最初无框架时代直接在DOM元素上声明事件,导致全局变量污染和脚本执行时序问题开始,讲到开发者通过命名空间、工具函数库逐步封装DOM查询与事件绑定。接着展示了jQuery/zepto如何通过统一API将这些操作整合,极大简化了开发流程,但早期版本仍存在脚本加载期间交互失效的体验问题。文章通过代码示例直观对比了各阶段方案的痛点与改进,核心脉络在于:前端框架的演化始终围绕着解决“如何更优雅、更健壮地建立人机交互”这一刚需,从补丁式封装走向系统化的抽象层设计。

本机暂存
IT 2016-05-05 22:44:05 / 累计浏览 2,043

元素选择器 - Mini Query

这篇讲的是如何用寥寥几行代码实现一个简单但功能完整的元素选择器,并且巧妙地兼容了IE8以下的老式浏览器。 作者从一个实际的前端兼容性需求出发:虽然现代浏览器已经原生支持 querySelector 和 querySelectorAll,但在需要照顾低版本IE的项目中,开发者往往需要 hack。文章提出的核心方案原理清晰且富有巧思——通过动态创建一条CSS规则并应用到目标元素上,给它们打上一个临时标记(比如“Barret:Lee”这个属性)。接着,只需遍历页面所有元素(document.all),检查哪些元素“染上”了这个标记,就能将它们收集起来。完成任务后,再移除这条临时规则,保持页面清洁。 文章提供了完整的实现代码,其中可以看到对 IE8 等环境的针对性处理,例如修复 `querySelectorAll` 返回值的兼容性问题。这种利用CSS Rule作为“探针”来定位元素的方法,避免了复杂的DOM遍历,实现轻量而有效,对于需要处理历史遗留项目的开发者来说,是一个值得了解的小技巧。

本机暂存
IT 2016-05-05 22:41:53 / 累计浏览 1,463

JavaScript 代码执行效率对比工具

这篇文章介绍了一个用于对比JavaScript代码执行效率的轻量级工具。作者从小程序和大型工程对性能需求的不同出发,梳理了几种常见的性能测试方案,包括使用在线平台 jsperf.com、利用 `console.time` 计时以及自己编写计时器。 为了更直观地对比不同代码片段的性能差异,作者开发了这个名为 Performance 的工具。其核心设计思路是在设定的时间内(默认1000ms)循环执行指定的代码,并基于执行结果计算出一个相对的效率百分比。其中效率最高的代码会被标记为100%,其余代码则显示为相对的性能百分比,从而让性能高低一目了然。 文章提供了工具的在线演示页面和 GitHub 仓库地址,方便读者快速上手体验。对于正在编写框架或库、需要精细优化关键代码路径的前端开发者来说,这个工具提供了一种便捷的本地化性能评测与对比方式。

本机暂存
IT 2016-05-05 22:39:15 / 累计浏览 1,448

用javascript比较语义化版本号

在移动端混合开发场景中,根据APP或其内置浏览器的版本号来执行不同业务逻辑,是一个常见需求。这篇文章聚焦于如何用JavaScript去精确比较语义化版本号(如`6.1.5`这样的格式)。 作者首先澄清了版本号的标准格式(主版本号.子版本号.修正版本号),随后提供了一个清晰的JavaScript函数实现。这个函数的核心思路是将版本字符串按`.`拆分后,逐段比较数字大小,从而判断当前版本与目标版本的高低。文章通过几个简洁的示例,展示了具体的调用方式和结果。 值得注意的是,作者坦诚该方法实现较为基础,只支持完整的版本号串比较,无法单独比较主版本或子版本。文末还补充了一个实用范例:如何从微信浏览器的UA中提取版本号并进行条件判断,这为实际项目中的落地提供了直接参考。整体来看,文章从实际问题切入,给出了一个轻量、可用的解决方案。

本机暂存
IT 2016-04-21 13:31:32 / 累计浏览 2,361

聊聊前端

这篇文章是作者从前端新人到资深从业者的一路复盘,主要聊聊前端行业的认知、学习路径与职业发展。作者认为前端门槛看似低,但只停留在“切图”层面难以立足。他坦言学习过程漫长,能否学好与个人兴趣、对IT的理解、英语能力和坚持程度密切相关,绝非短期培训就能一蹴而就。 关于前端是否高薪,作者指出这需要技能支撑,并非人人可达。当前市场存在公司期望“全能”与求职者期望“高薪”的错位。他还分享了自己从培训班入门,通过模仿、写插件、研读jQuery源码、尝试整体架构,最终重视用户体验的成长路径,并强调了学习Git、Node.js、数据库等扩展技能的重要性。 整篇文章以过来人的口吻,坦诚分享了技术成长的心得与行业观察,提醒读者摆正心态,扎实积累。

本机暂存
IT 2016-04-20 13:15:30 / 累计浏览 1,847

谈谈 external 模式的打包

当项目依赖的第三方库越来越多,一次性打包整个应用的做法在国内网络环境下常常导致首屏加载缓慢。同时,开发过程中频繁的实时打包也因重复处理这些稳定不变的依赖而拖慢了构建速度。 这篇文章详细阐述了如何利用 browserify 或 webpack 的 **external 模式** 来优化打包策略。其核心思路是将 React、React Router 等更新频率低的第三方库,从主业务包中分离出来,生成独立的 JS 文件。通过 `