小实践总结

标签：

html
    1.公共头部、尾部的封装。
        将公用的html结构写成字符串，在页面加载时插入到网页结构中。
    2.数据与结构分离，先写好页面然后编成字符串由js动态生成到html结构里面。
js
    1.函数封装
        使用构造函数，原型传递的方法，需要新的方法时通过给函数的原型对象新的方法。
        function movePlay(parent,images) {
            var _this = this;
            this.parent = parent;
            this.images = images;
            this.timer = null;
        }
        
        movePlay.prototype.initImage = function() {
            ...
        }
        movePlay.prototype.initCss = function() {
            ...
        }
        movePlay.prototype.change = function(_this) {
            clearTimeout(_this.timer);
            _this.timer = setTimeout(_this.change,2000);  
           　　　 //这里因为setTimeout为window下的方法,所以在调用时this指针会指向window；

　　　　解决方法应该采用以下的书写方式
            _this.timer = setTimeout(function() {
                _this.change(_this);
            },2000);
        }

 　　　　　　//在构造函数内部使用事件结构时，也会遇到this指针发生改变的情况。因为触发事件结构的回调函数指向触发事件的对象而不是构造函数构造出来的对象。

　　　　解决方法应该在绑定事件的函数头部定义一个相对这个事件的全局变量var _this = this;使得_this指针指向构造函数构造出来的对象，在每次事件触发时_this仍能使用。其原因是在事件的回调函数相当于绑定该事件的函数的子元素，使用了父元素的变量，延长了_this的作用域。-------------------------回调函数相关知识；

　　　1.1调用的时候使用 var new_obj = new movePlay(parent, images);

　　　　　　说明：通过构造函数构造出来的对象，它的每个方法和属性是独立的。 不容易收到影响，在代码的维护和优化上比较好。
    2.面向对象
        例：购物车
            属性：
            var carModule = {
                name:‘aaa‘,
                bindEvent：function() {
                    this.plusMethod();
                },
                plusMethod:function() {
                    ...
                }
            }
    3.ajax异步请求
        用require对象：设置url属性，加载异步传输数据的方法loadAjaxData,$.ajax({...});

　4.css布局、样式

　　1.抽取骨架和模块 ，更高层次：扩展性、适应性；
　　2.各种布局方式的优缺点；
　　float布局
    　　优先显示：和网页加载顺序有关；直接修改html中模块上下顺序，实现某个模块的优先加载；
    　　切换列顺序：不改变html结构的情况下，直接修改float的值，使得左右模块互换；
    　　切换到不定宽：不支持；            不定宽；宽度改变布局/骨架不变

    　　不能自适应宽度；

　　BFC布局
　　    涉及清除浮动的原理？样式：.bd{overflow:hidden;zoom:1;}；
　　    触发haslayout，进行切割；    互不影响，互相切割；

　　　比如：

　　　<div class = "parent">

　　　　<div class = "content_l">

　　　　</div>

　　　　<div class = "content_r">

　　　　</div>

　　　</div>
    如上图的div结构，设置样式为：

　　.parent{overflow: hidden;zoom: 1;}

　　.content_l{float: left;}

　　.content_r{overflow: hidden;zoom: 1;}

　　像上面的代码，使用BFC布局，必须如.content_r的样式，且放在同级浮动元素的下面；
　　    特点：
        1.不支持优先显示；
        2.可以自适应宽度；    适应性和扩展性较强；!!
        3.切换列顺序；
        4.切换到不定宽；
　　定位布局
　　    特点：
      　　  1.不能自适应高度；
　　inline-block布局
　　    特点：
　　flex布局
　　    css3属性；在移动端开发

　　闭合浮动，父元素触发BFC，包含浮动元素；
　　清除浮动，
        流关系：
            浮动流
            文档流
        清除浮动——消除浮动流，回归文档流；
            加overflow:hidden;  原理:1.闭合浮动。2.清除浮动；

小实践总结

标签：

原文地址：http://www.cnblogs.com/foxNike/p/5553265.html