- 博客(34)
- 资源 (10)
- 收藏
- 关注
RSS订阅原创 解密JavaScript模块化演进：从IIFE到ES Module，深入理解现代前端工程化基石
JavaScript模块化是前端工程化的基石，其发展经历了多个阶段：从最初的全局函数模式到命名空间模式，再到IIFE模式，逐步解决了命名冲突和代码组织问题。随后出现了CommonJS（服务端）、AMD/CMD（浏览器端）等模块化规范，最终ES6 Modules成为现代标准，实现了浏览器与服务器的通用解决方案。模块化技术有效提升了代码的可维护性、复用性和依赖管理能力，推动了前端开发的工程化进程。
2025-11-28 22:53:22
557
原创 解密浏览器事件与请求核心原理：从事件流到Fetch实战，前端通信必备指南
摘要 本文深入解析了前端开发中的浏览器事件模型和网络请求技术。首先详细介绍了DOM事件的发展历程，从DOM0级事件（直接属性赋值）到DOM2级事件（addEventListener队列机制），对比了两者的差异和兼容性处理。其次阐述了事件流的三个阶段（捕获→目标→冒泡）及其应用场景，通过示例代码演示了事件传播过程。最后讲解了事件委托技术原理，以及XMLHttpRequest和Fetch两种网络请求方式的实现差异。文章还提供了跨浏览器兼容方案和性能优化建议，帮助开发者深入理解事件机制和网络通信的核心原理。
2025-11-28 00:53:00
601
原创 深度解密JavaScript异步编程：从入门到精通一站式搞定
本文系统介绍了JavaScript异步编程的发展历程与核心技术。首先通过餐厅点餐的比喻，对比了同步编程的阻塞问题与异步编程的非阻塞优势。然后详细阐述了异步编程的三代演进：从最初的回调函数及其导致的"回调地狱"问题，到Promise标准化管道带来的链式调用改进，再到Async/Await语法糖使异步代码具有同步代码的清晰度。文章重点解析了Promise的实现原理，包括状态管理机制和手写实现resolve/reject的核心思路。最后简要提及了下一代异步编程技术如Top-level Awai
2025-11-27 00:48:51
880
原创 解密作用域与闭包：从变量访问到闭包实战一网打尽
本文深入解析JavaScript核心概念：作用域、作用域链、执行上下文和闭包。首先通过经典面试题引出问题，详细讲解三种作用域（全局/函数/块级）及其差异，特别是var、let、const的行为区别。接着剖析作用域链的变量查找机制，以及执行上下文的创建过程。重点阐述闭包原理，包括防抖等实际应用场景，并展示如何利用闭包实现面向对象的私有属性和模块模式。这些概念是JavaScript编程的基石，理解它们能帮助开发者写出更高质量的代码。
2025-11-25 07:30:00
544
原创 解密JavaScript面向对象(二)：深入原型链，彻底搞懂面向对象精髓
本文系统讲解了JavaScript原型链的核心概念与应用。首先通过模具生产的比喻形象解释原型思想，指出每个对象都有隐藏的[[Prototype]]属性。接着详细剖析原型链查找机制和6种对象创建方式（字面量、工厂模式、构造函数、原型模式、组合方式、Class语法糖），比较各自优缺点，重点推荐组合方式（构造函数+原型模式）。最后深入分析4种继承实现（原型链继承、构造函数继承、组合继承、原型式继承），指出组合继承是最常用方案。全文以代码示例佐证理论，帮助开发者透彻理解JavaScript原型系统设计。
2025-11-24 01:15:24
812
原创 解密JavaScript面向对象(一)：从新手到高手，手写call/bind实战
本文介绍了面向对象编程在JavaScript中的重要性及其核心概念。面向对象思想是现代前端框架的基础，能帮助开发者编写更优雅、可维护的代码。文章通过图书馆管理案例对比了面向过程和面向对象的实现差异，展示了面向对象的优势。同时深入讲解了JavaScript中的参数传递机制（基本类型值传递、对象类型引用传递）和this指向问题。最后详细剖析了call/apply/bind方法的实现原理，包括手写这些方法的完整代码和实现思路，帮助开发者深入理解this绑定机制。这些核心概念是掌握JavaScript编程的关键。
2025-11-21 14:33:08
464
原创 H5 新增内容总结【一】
语义化标签语义化标签优点1）提高可访问性；2）SEO；3）结构清晰，利于维护包括header（头部），main（主体），footer（页底）nav（导航），aside（侧边），article（独立内容）section（~div），figure（独立内容：上图下文；figcaption标题）hgroup（标题组合），mark（高亮）dialog（对话框，必须配合open属性）embed（加载插件标签）form表单类型email类型该类型会自动要求输入的地址格式正确，否则浏览器不允许提
2022-03-18 17:23:09
1022
原创 VUE环境安装
第一步：安装node前往node官网进行下载，按步骤安装即可，无需特别设置。安装完成后，环境变量会自行进行配置。验证：在cmd模式下，输入：node -vnpm -v会对应的显示出node的版本号和npm的版本号第二步 安装脚手架全局安装脚手架在cmd模式下，输入npm install --global @vue/cli注意：node的版本要高于8.9才能使用@vue/cli...
2020-02-18 10:48:12
287
原创 HTML input输入框在输入汉字时，拼音也会输入的问题
问题：该输入框仅可输入汉字、字母、数字原方案：<input id=“inputId” onkeyup=" this.value=this.value.replace('/[^\u4e00-u9fa5\da-zA-Z]/g', '') "/>异常：在输入中文时，对应的拼音也会填写到输入框中分析：中文状态下字母的输入也触发keyup事件，导致input输入框的值发生了改变解...
2020-02-18 10:35:42
6660
6
原创 谷歌浏览器中placeholder在获取光标后不消失的解决方案
在项目使用中发现，谷歌、火狐等浏览器在现实placeholder属性时存在问题：输入框获取光标后，提示字体不消失的问题，需自行设置如下：input:focus::-webkit-input-placeholder {color: transparent;}input:focus::-moz-input-placeholder {color: transparent;}input:focus:...
2020-01-14 15:33:40
994
原创 JAVA常用工具类(三) SystemUtils类
常用的函数操作，基于commons-lang-2.5。1.获取Java Home目录，返回FileSystemUtils.getJavaHome()2.获取Java IO临时目录文件，返回FileSystemUtils.getJavaIoTmpDir()3.获取Java版本，返回FloatSystemUtils.getJavaVersion()相对应的还有getJavaVersion...
2018-10-18 14:21:06
2188
原创 JAVA基础 之 关于序列化与反序列化
序列化Serializable，是指将JAVA对象转换为字符序列的过程，将对象的各属性保存起来，在适当的时候获取并使用。反序列化是和序列化相反的过程，就是把字符序列转化为对象的过程。在JAVA编码中被广泛提及，主要应用在以下情况中：1.持久化存储数据；2.进程间的远程通信。JAVA对象Person的实例化seriaObjectprivate static final String F...
2018-10-18 13:20:26
167
原创 JAVA常用工具类(二) ArrayUtils类
该工具类主要操作数组。以下数组的类型使用T代替，同一函数中T代表相同类型。T可包含的类型有：Object、boolean、int、byte、char、double、float、long、short。数组判断函数：1.判断是否存在，返回boolean：ArrayUtils.contains(T[] array, T objectToFind)2.判断是否为空，返回boolean：Arra...
2018-10-09 18:01:01
1356
原创 JAVA常用工具类(一) StringUtils类
该工具类是用于操作Java.lang.String类的。StringUtils类与String类的区别在于：此类是null安全的，即如果输入参数String为null，则不会抛出NullPointerException异常，代码更健壮。以函数isEmpty为例子：存在字符串stringTest， 若该字符串为空，返回1.使用String类判断方法为：if(null !=stringTes...
2018-10-08 18:11:08
5080
转载 myBatis sql中字符串比较
使用myBatis框架，编写sql文时，有时会用字符和传入参数的比较，使用‘==’或者‘！=’有时起不到作用，主要是使用的方法不正确。 方法1： 外层为双引号，内部的字符为单引号，需要将字符转换为String<if test="authNo=='2'.toString() ">方法2：<if test='authNo=="2"'>外层为单引号，内部的字符...
2018-08-04 14:03:47
2000
原创 阿里云的OSS云存储 上传文件
第一次使用阿里云的云存储，mark一下 1.首先，你需要申请购买到AccessKey 和 AccessKeySecret。 因权限问题，建议开通单独的RAM帐号 在云服务中开启新建一个bucket空间，用于存储上传的文件存储位置 2.编码工作开始: 1)maven中引入jar包 pom文件配置<dependency><groupI...
2018-08-04 13:31:09
1956
原创 高德地图开发之基本控件
高德地图提供了工具条、比例尺、定位、鹰眼、基本图层切换等常用的控件，使用控件需要先将插件的功能引入。引入方法1：插件和高德地图的JavaScript API同时加载 <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&plugin=AMap.ToolBar"></script>...
2018-07-24 20:12:47
348
原创 高德地图开发之点标注marker
在地图上添加点标记是常使用的方法，用它可以将任何你希望或感兴趣的点标注在地图上，同时也可以指定任意的图标或内容等。Marker就是这样一个用于在地图上添加点标记的类。
2017-08-25 14:46:28
20248
1
原创 PHPMailer实现PHP邮件发送
1.首先是下载PHPMailerhttp://code.google.com/a/apache-extras.org/p/phpmailer/2.解压从中取出class.phpmailer.php 和 class.smtp.php 放到你的项目的文件夹，因为我们等下会引用到它们.3.创建发送邮件的函数,其中你需要配置smtp服务器function postm
2017-08-25 13:39:58
320
转载 CSS 变量教程
原文转自[http://www.ruanyifeng.com/blog/2017/05/css-variables.html]今年三月，微软宣布 Edge 浏览器将支持 CSS 变量。这个重要的 CSS 新功能，所有主要浏览器已经都支持了。本文全面介绍如何使用它，你会发现原生 CSS 从此变得异常强大。一、变量的声明声明变量的时候，变量名前面要加两根连词线（--）。
2017-05-09 11:07:46
407
原创 文件上传ajaxFileUpload.js使用方法 包含后台接收方法
1. 引用ajaxfileupload.js文件，该文件依托于jquery，因此需要先引入jquery库。2. JSP页面编写方法。其中type为file的input框为了美观优化，是不显示，但是有用处的确实该部分。因此，需要调整好text和button类型的高度和宽度，与file类型的input对应。3. CSS部分。file的宽度略大于txt和uploa
2017-03-24 13:49:56
16315
原创 Jquery Datatable 单行修改保存后，页码不跳动的实现
使用表格显示时，经常有这样的场景：我们需要对当行的数据进行修改操作，点击修改弹出修改的页面，当修改结束后，刷新表格显示这样，通常dataTable会refreshi一遍，从第一页开始显示。为了更好的体验，当保存后，希望表格数据得到了刷新，当前页码数据也不会丢失，刷新时使用以下方法，而非refresh。$("#tableId").dataTable().api().draw(fals
2017-03-20 14:20:10
1202
原创 JQuery DataTable 序号列的显示
因项目需求，查询出DataTable显示序号的几种方式：1.前端分页。首先设置该序号列为空列，即{"data": null, "targets": 0 } //表示：第一列的值暂时设为null。在dataTable设置参数完成后，增加以下代码：/* 设置第一列 - 序列化 */ResultTable.on('order.dt search.dt', function()
2017-03-20 14:10:56
9342
原创 CSS绘制图标基础
CSS的功能不仅局限在调整元素样式上，绘制图形也是可行的。下面是其绘制图形的基本图形：1. 三角形.triangel {width:0;height:0;border-top:10px solid red;border-left:10px solid transparent;border-right:10px solid transparent; }2.圆形
2016-10-16 22:00:21
369
转载 jquery DataTables warning: Requested unknown parameter '1' from the data source...
在配置中加入以下代码即可，‘aoColumnDefs’ :{sDefaultContent : '',aTargets: ['_all']},具体原理还没弄明白，但是解决方法好用。
2016-09-05 21:00:27
703
原创 Xshell下中文乱码问题
使用git commit的时候，发现提交信息（中文格式）总是以一种【乱七八糟】的样子展示，同时，git log 也只能正常显示英文的提交信息，经过查询发现，是编码问题。解决方法：在打开的session中，右击选择 [属性] 在分组【终端】中，将encolding的格式由 默认 更改为UTF-8，重现连接即可。
2015-08-03 22:43:07
549
转载 常遇到的浏览器兼容性问题
1.就是ie6双倍边距的问题，在使用了float的情况下，不管是向左还是向右都会出现双倍，最简单的解决方法就是用display:inline;加到css里面去。2.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：
2015-05-21 15:52:06
563
原创 CSS样式优先级计算
CSS的样式优先级计算是一个四位数，而在css2中是一个3位数。首先，使用！important来定义样式是优先于其他所有样式的其次，该四位数选择，第一位为内联样式，及行内样式；第二位为id选择器，第三位为class选择器和属性选择器，最后一位为属性选择器最后，查看几个事例1. div{color:red} 优先级为0,0,0,1 而div span{color：green}优先级
2015-05-15 09:55:56
615
转载 外部引用CSS中 link与@import的区别
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的
2015-05-14 22:26:17
421
原创 eclispe下的web工程部署到外网中
1. 安装JDK并且配置环境变量JAVA_HOME(JDK的安装位置)CLASSPATH(.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;)Path(%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;)验证：win+R，打开运行，输入cmd，输入java -version, 出现下列信息，表示成功
2014-11-26 19:55:11
564
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人