zoukankan      html  css  js  c++  java
  • 前端学习笔记三

    前端学习笔记三

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

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

    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 的对比

    你真的会使用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模板插件

  • 相关阅读:
    IOS开发之-Xcode插件
    IOS开发之-NS**概述
    python 中文乱码 问题深入分析
    Django入门示例之被解放的姜戈——03 所谓伊人(模板及模板处理)
    td太多内容显示...
    div 居中CSS实现
    取得页面元素类型 转
    aspose.words 处理word转PDF
    jacob 操作word转pdf
    ajax 数据回传
  • 原文地址:https://www.cnblogs.com/ChanWunsam/p/10300084.html
Copyright © 2011-2022 走看看