layui源码详细分析系列之文件上传模块

upload模块

从今天的文章开始,将会采用自己动手实现的方式+分析作者思路的形式来讲解layui框架的其他模块。采取这样的目的也是为了更好地提高自己,希望通过该框架学习到更多的东西。

upload模块时layui框架内置模块之一,该模块实现文件上传的功能。文件上传是一个常用的功能,现在有好多主要用于文件上传的插件,而且非常好用。今天依照layui官网对该内置模块功能的描述,实现了下简易版的demo,后台使用Node.js(搭建简易web服务器非常方便,以后打算深入学习Node.js,虽然我现在偶尔还在写Java),具体效果如下:
layui源码详细分析系列之文件上传模块_第1张图片

这个demo逻辑比较简单,对于文件上传采用面向对象的思想,设计上采用IIFE来组织整体,具体思路如下:

  1. 整体采用IIFE来组织该demo的js文件
  2. 该demo中文件上传是采用input[type=”file”]来实现文件的选择,使用form表单来实现文件上传,iframe来接受服务器传递的数据
  3. 定义call对象,用于定义不需要暴露的相关辅助函数
  4. 该js模块中主要是创建Upload构造函数,在该构造函数中实现配置参数的合并以及该demo所有html结构的节点的动态创建
  5. 在构造函数上创建upload函数来实现点击之后打开文件以及提交表单等相关动作的处理

demo的组织结构图如下:
layui源码详细分析系列之文件上传模块_第2张图片

上面的demo因为使用iframe的问题会存在跨域的问题,下面分析layui框架upload模块的实现方式,框架中该模块的组织结构如下:
layui源码详细分析系列之文件上传模块_第3张图片

可见框架中该模块的代码量相对来说还是比较少的,从上图中可以看出,在该框架中作者也是采用from+iframe的方式来处理文件上传的。

仔细阅读源码后发现框架作者还实现了拖拽上传的功能,使用拖拽事件来实现,上面说过使用iframe会产生跨域问题,在该模块中作者捕获异常,有相关的提示,具体iframe跨域的处理,没有看到相关的处理。

虽然知道跨域的产生原因,但是对其处理方法CORS以及JSONP方式没有深入了解过,知识略懂,以后还要对于跨域问题深入研究下。

该模块具体的代码分析以及demo相关分析逻辑图会上传到我的GitHub上,明天周末会研究并实践一些项目,下周应该开始富文本编辑器的实现以及分析。

致远行的你我

你可能感兴趣的:(layui源码分析,源码,javascript,layui,框架)