York's Blog

2018-04-18

jQuery

封装一个函数
function getSiblings(node){}

再封装一个
function addClass(node, classes){}

addClass(优化后)

命名空间

命名空间

能不能把 node 放在前面

方法一：扩展 Node 接口
直接在 Node.prototype 上加函数
方法二：新的接口 BetterNode

第二种叫做「无侵入」。

通过选择器获取元素

获取多个元素
nodes
代码优化：如果出现类似的代码，就存在优化的可能

了解jQuery的思想

jQuery是个构造函数，接受一个参数，这个参数可能是节点或者选择器，返回方法对象来操作这个节点
jQuery的基本类型

链式操作

jQuery的各种版本

混淆版(压缩版)，内部没有空格、回车、注释等，变量名比较短，节约空间。84.6k
未混淆版(不压缩版)，比较大一些，人可以看得懂源代码。261k
source map 文件,出错后会chrome会显示原始代码。128k

jQuery下载地址
如果对象是由jQuery构造出来的，变量名前最好加$

HTML、CSS、JS 内容、样式与行为分离

如果不分离，html负责样式，会使内容的结构有很多无用的标签，html会变得很复杂，很难区分标签的真正结构
css表示内容，用户选不中文字，js取不到
css负责行为如果css很复杂的逻辑，css就会很慢
js控制样式 $div.show()无法预测 $div.hide() 很可能会影响布局

前端工程师基本素养，不要让图片变形

页面切换，计时器会偷懒，让计时器在页面切换的时候停止，切回本页面的时候计时器继续执行

document.addEventListener('visibilitychange',function () {
    if(document.hidden){
        window.clearInterval(timer)
    }else{
        timer=setInterval(function () {
            mkLeave($(getImg(n))).one('transitionend',function (e) {
             mkEnter($(e.currentTarget)) 
            })
            mkCurrent($(getImg(n+1)))
            n++
        },3000)
    }
})

为什么会报这个错误:

1	Uncaught TypeError: $sons[i].on is not a function at fuqimoqako.js:6

写jQuery的时候, 一定要分清$sons[i]和sons.eq[i]的区别
前者是DOM对象,它只有原生的js方法
后者是jQuery对象,它也只有jQuery的方法,注意,jQuery对象并没有原生的js方法

append 插在后面 prepend插在前面
clone(true)复制标签下所有的东西 clone()||clone(false) 只复制标签自己
如果hide()和show()没有反应，在中间加个offset()

Comments