前端学习笔记三
前端学习笔记三
距离上次的笔记已经过了一个月了，也终于考完期末考，意味着又有三十多天的自在时间可以肝自己喜欢的了。
考试前其实积累了一些要记的东西，主要是几个插件的使用，包括分页插件、上传文件插件和滚动插件。然后考完试后的这几天，又回顾了一些基础的东西。
position属性
不得不说这个属性实在是很常见，又有很多问题。很多bug归根结底就是position运用不得当。这里从网上扒拉了几篇博客，结合起来看可以对这个问题有一个清晰的认识。
定位属性position使用详解（static、relative、fixed、absolute）
Position属性四个值：static、fixed、absolute和relative的区别和用法
Ajax
考试前使用分页插件时遇到一些问题，主要是异步Ajax的用法。我一直很容易把原生js的Ajax和Jquery封装好的jqAjax搞混。事实上Jquery的封装也确实没有什么新东西，只是把原先繁琐的操作简化了而已。这里我进行一点小小的总结。
首先要搞清楚一个问题，Ajax是由哪个对象提供的？浏览器内置的XMLHttpRequest（XHR）。所以，除非使用的不是Ajax，比如说Promise或者Fetch，要不然所有的操作都是基于这个对象的，Jquery也只是对这个对象进行一层封装。
其次要搞清楚XHR对象是如何实现异步的？虽然原理说起来很简单，但是实际使用却有很多问题要处理。比如说，发送到哪、发送什么、怎么知道发送成功了、怎么接受返回值等等这些问题。很多东西XHR已经帮我们封装好，不需要我们去理会。通过XHR去实现异步，我们只需要把握 发送请求 和 处理响应 这两个步骤就好了。
最后就是，还要弄清楚Jquery是如何封装原生的Ajax代码，方便我们操作的。甚至要体会一下Jquery链式调用的方便。这里有两篇博客，可以帮助我们理解以上的问题：
最后贴上Jquery.ajax的使用文档
复制
这是一个很小很小但是有时候很有用的功能。让我印象最深刻的，就是一个填写快递单的小程序（针对退货），可以直接在淘宝中复制店家信息，返回小程序页面，然后它会帮我们填上，简化了我们很多繁琐的操作。说实话，第一次用到的时候，觉得这个小程序真是太贴心了。
遇到这个功能的时候上网查了些资料，在这里记录下来。
常用插件
这个项目中我重点记录三个插件，分别是分页、滚动和上传。这几个功能自己实现也是ok的，但是对于目前的我来说难度有点高，为了进度只能使用插件了。有时间的话，这三个功能是要对照着淘宝自己实现一遍的。
pagination
因为过了很久了，插件使用中的一些问题都差不多忘了。这个插件我当时专研了很久，为了贴合项目的使用，迫于无奈还改动了一些源码。插件代码量不是很多，所以打算有机会的话好好专研一下。
Bootstrap fileinput
这个插件似乎是Bootstrap的官方插件，对于我们这个项目来说是最合适的。上传功能如果不看界面效果的话，原生的也能实现；如果要看界面，那自己手动调起来是真的挺麻烦的。
这里另外有一个FormData序列化的方法，我个人还不是很清楚它在上传中起到的作用。似乎只是针对上传数据的格式化？
perfect-scrollbar
这个插件主要是美化滚动条，里面使用异步的话可以实现无限滚动。
其它
这里是一些杂七杂八不成系统的记录。
js定时器
因为之前要实现消息轮询的功能（后来不是我做的），所以看了一下定时器的介绍。
禁用页面元素
这里面需要重点注意event.preventDefault()的用法。可能很多场合都会用到。
$(this).click(function (event) {
event.preventDefault();
}
窗体滚动和内滚动
项目中产品大佬希望禁掉窗体滚动，改成内滚动（这时候那个插件就派上用场了）。我自己稍微研究了一下，发现这块说容易也容易，限制窗体高度（calc计算）在屏幕范围内就行了；说难也难，因为除了上面那个不标准实现外（calc 比较新，浏览器支持的不多），也没什么好方法了。
下面贴上两篇博客，说实话超出能力范围，还没完全理解。
jquery模版插件
虽然这个插件jquery不更新了，但是确实好用，这里记录一下。
