前端新知识总结

JQuery的链式调用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/jquery-2.0.0.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <input type="button"/>
    <input type="button"/>
    <body>
        <script type="text/javascript">
            $('input[type="button"]') //获取所有type类型为input的元素
            .eq(0)  //找到第一个按钮
            .click(function (){  //绑定click点击事件
                console.log("点击了第一个button")
            })
            .end()  //返回所有按钮
            .eq(1)  //找到第二个按钮
            .click(function (){  //绑定click点击事件
                console.log("点击了第二个button")
            })
        </script>
    </body>
</html>

这样做解决了JS代码、返回的都是同一个对象，提高代码效率。

但是jquery封装组件的时候如果不注意，很容易就会破坏这种链式调用，其实只要在封装组件的最后将当前实例的this进行return就可以了，切记切记。

JS命名污染

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/test.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <script type="text/javascript">
            function toDo(){
                console.log("js-->toDo222222")
            }
            toDo();
        </script>
    </body>
</html>

function toDo(){
    console.log("js-->toDo111111")
}

如上代码，在JS文件中写了一个toDo的方法，然后再HTML中也写了一个这样的方法，调用后输出的是HTML中的toDo方法，这就是命名污染。如何解决？用闭包

JS闭包

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/test.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <script type="text/javascript">
            function toDo(){
                console.log("js-->toDo222222")
            }
            toDo();
            new init().toDo();
        </script>
    </body>
</html>

JS代码

function init() {
    return {
        toDo: function toDo() {
            console.log("js-->toDo111111")
        }
    }
}

哎，这样是不是就解决了，其实方法还有很多啊。

参考链接：http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

以及：https://www.cnblogs.com/xiaohuochai/p/5728577.html

还有经典案例：https://blog.csdn.net/dovlie/article/details/76339244

CSS

box-sizing
　　content-box ：宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框
　　border-box : 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

positions
　　absolute : 决定定位，相对于static以外的第一个父元素
　　fixed ：决定定位，相对于window窗口
　　relative ： 生成相对定位的元素，相对于其正常位置进行定位，个人理解（为绝对定位提供父元素，添加了这个属性就作为子节点的用来决定定位的，简而言之提供了参照物）
　　static ： 默认值，没有定位
　　inherit ： 继承父类position的值