封装JavaScript类库---开篇（一）

一、动机背景

　　首先是想提高自己的前端水平，其次是项目需求，再次是为了弄明白前端的某些高级写法。

　　去年2-4月份在A公司做的一个项目，这个项目包括三个系统：PC端Web站点，PC端后台管理平台，微信端（后期还有APP）。业务是问卷设计、问卷调查以及统计分析等。我直接进入开发阶段，并且还是主责开发人员，加上一个前端开发（只写静态页面），公司这边也没有任何的平台框架代码的积累（现在想想这个项目真的是深坑啊）。然后我就拿着前端写的那些个静态页面进行数据库设计、前后端整合开发、微信端开发。像这种问卷设计界面由于前端的自由度太大，涉及到很多动态的Dom元素和Dom的操作，所以前端的工作量是相当的大，加上我之前的公司是用自家的平台进行开发的，所以我也是一边学习一边开发，可想而知前端写得跟屎一样。

　　直到前段时间，我在目前的B公司又遇到H5的项目（前端是MUI，服务器端是nodejs，后端数据获取是Java WebService），一个来月整个项目开发完成（业务比较简单）。发现自己写的H5页面中存在很多重复的代码，一是这样很不美观，二是项目文件过多加载缓慢（移动端必须得考虑加载速度），再加上时间比较充足，所以就想着对前端代码进行封装。

二、准备工作

　　左图是我做的问卷调查网站，别人重构的后的一个前端类库，右图是一个开源的JavaScript模块渲染引擎doT.js（刚好在项目中有用到）。

　　经过对比可以看到结构是差不多，细节部分稍有区别。所涉及到的JavaScript概念有：匿名函数、立即执行函数、立即执行匿名函数、作用域、作用域链和闭包。

　　匿名函数：没有函数名的函数。

　　立即执行函数：马上执行的函数。

　　立即执行匿名函数:马上执行的没用函数名的函数。

　　作用域：变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。

　　作用域链：作用域组成的有序集合。

　　闭包：能够读取其他函数内部变量的函数（定义在一个函数内部的函数）。

　　（详细内容讲解持续更新，包括上下文对象、原型链、call/apply等）

三、构建类库

　　分析整合各个JS，分析系统、页面的加载顺序和逻辑。

      类库构建大思路如下图：