前端学习笔记三

前端学习笔记三

距离上次的笔记已经过了一个月了,也终于考完期末考,意味着又有三十多天的自在时间可以肝自己喜欢的了。

考试前其实积累了一些要记的东西,主要是几个插件的使用,包括分页插件、上传文件插件和滚动插件。然后考完试后的这几天,又回顾了一些基础的东西。

position属性

不得不说这个属性实在是很常见,又有很多问题。很多bug归根结底就是position运用不得当。这里从网上扒拉了几篇博客,结合起来看可以对这个问题有一个清晰的认识。

定位属性position使用详解(static、relative、fixed、absolute)

使用position:sticky实现粘性布局

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链式调用的方便。这里有两篇博客,可以帮助我们理解以上的问题:

AJAX 之 XHR, jQuery, Fetch 的对比

扫描二维码关注公众号,回复: 5011087 查看本文章

你真的会使用XMLHttpRequest吗?

最后贴上Jquery.ajax的使用文档

复制

这是一个很小很小但是有时候很有用的功能。让我印象最深刻的,就是一个填写快递单的小程序(针对退货),可以直接在淘宝中复制店家信息,返回小程序页面,然后它会帮我们填上,简化了我们很多繁琐的操作。说实话,第一次用到的时候,觉得这个小程序真是太贴心了。

遇到这个功能的时候上网查了些资料,在这里记录下来。

前端复制功能的插件比较

利用剪切板JS API优化输入框的粘贴体验

常用插件

这个项目中我重点记录三个插件,分别是分页、滚动和上传。这几个功能自己实现也是ok的,但是对于目前的我来说难度有点高,为了进度只能使用插件了。有时间的话,这三个功能是要对照着淘宝自己实现一遍的。

pagination

pagination官网地址

Jquery前端分页插件pagination使用

因为过了很久了,插件使用中的一些问题都差不多忘了。这个插件我当时专研了很久,为了贴合项目的使用,迫于无奈还改动了一些源码。插件代码量不是很多,所以打算有机会的话好好专研一下。

Bootstrap fileinput

官网地址

Bootstrap fileinput使用教程

这个插件似乎是Bootstrap的官方插件,对于我们这个项目来说是最合适的。上传功能如果不看界面效果的话,原生的也能实现;如果要看界面,那自己手动调起来是真的挺麻烦的。

这里另外有一个FormData序列化的方法,我个人还不是很清楚它在上传中起到的作用。似乎只是针对上传数据的格式化?

FormData序列化及file文件上传

perfect-scrollbar

官网地址

js滚动条美化perfectScrollbar插件使用方法

这个插件主要是美化滚动条,里面使用异步的话可以实现无限滚动。

其它

这里是一些杂七杂八不成系统的记录。

js定时器

JavaScript的单线程性质以及定时器的工作原理

因为之前要实现消息轮询的功能(后来不是我做的),所以看了一下定时器的介绍。

禁用页面元素

移除或禁用html元素的点击事件

这里面需要重点注意event.preventDefault()的用法。可能很多场合都会用到。

$(this).click(function (event) {
event.preventDefault();
}

窗体滚动和内滚动

项目中产品大佬希望禁掉窗体滚动,改成内滚动(这时候那个插件就派上用场了)。我自己稍微研究了一下,发现这块说容易也容易,限制窗体高度(calc计算)在屏幕范围内就行了;说难也难,因为除了上面那个不标准实现外(calc 比较新,浏览器支持的不多),也没什么好方法了。

下面贴上两篇博客,说实话超出能力范围,还没完全理解。

滚动详解

子元素scroll父元素容器不跟随滚动JS实现

jquery模版插件

虽然这个插件jquery不更新了,但是确实好用,这里记录一下。

jQuery Templates模板插件

猜你喜欢

转载自www.cnblogs.com/ChanWunsam/p/10300084.html