工作日志-面向对象编程

Posted 2021-03-26 wangziqiang123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了工作日志-面向对象编程相关的知识，希望对你有一定的参考价值。

1.搜索连动事件

2.页面显示动作

3.没有数据返回需要一个空的无数据页面

4.事件触发，动态生成的元素绑定数据使用模板，在template中传入相应得到函数

var config = {
    userId:'.../'
    show:function() {
        //这里添加方法
    }
}

如何解决移动端input输入值触发拼音键入事件

var cpLock = true;
input.addEventListener('input',function(){
    //监听input的输入事件
    if(cpLock){
        //执行函数
    }
})
document.addEventListener('compositiononstart',function(){
    //开启中文
    cpLock = false;
})
document.addEventListener('compositiononend',function(){
    cpLock = true; 
})

IScroll的移动问题

首先 iscroll有很多版本普通版 prop版无限版。。。
new IScroll(‘.querySelector’)

固定样式

div class = 'wrapper'
    div id = 'scroll'
        ul 
--->   这是滑动得到元素  li

滑动原理

id = scroll 的高度需要超过 wrapper的高度才能滑动其中的元素要不然不能滑动

只用prop版的IScroll才能监听到‘onscroll’事件
它会计算 id = scroll中每一的高度来生成 maxScrollY 赋值给id 中的translateY
IScroll中的new出的对象的方法

myScroll.scrollTo(x,y,time,easzing);
myScroll.slideDown
myScroll.refresh() –>在动态生成的元素加入到内部后需要刷新已重新计算滑动高度
让一个元素居中
flex布局
- display:flex;justify-content:center; align-items:center;

页面写法

一般先写一个function init() {}
1. 先初始化头部配置这是遗留问题目前需要减去 44px;
2. 初始化内容高度app-content overflow-hidden 使他能在一页中显示
3. 如果需要内容滑动的直接在这里初始化iscroll中滑动模块的高度.wrapper的高度
4. 页面中其他元素以对象形式出现的需要重置
5. 需要拿userInfo 拼接图片另外getObjectFromSessition是异步的需要一个回调函数
  getUserinfo(function(){
  1. 一般这里执行 loading()
    })

//初始化页面
init();

input输入框获取焦点问题

div 包裹一个input标签里面一个delete标签
点击delete标签时 input.val(‘’) 置空 input.focus() –>会有问题
当点击div时会触发 input的focus()很bug
iscroll 如果每次生成生成列表的时候 new IScroll iscroll的click事件为true 生成的click事件会叠加在下次执行的时候多次执行

以面向对象的形式写网页

var config = {
    page:1,
    node:$('.content'),
    mask:$('.mask'),
    _isShow:false,
    data:{
        "0001":"最新发布",
        "0005":"车龄最短"
    },
    get isShow() {
        return this._isShow;
    },
    set isShow(val) {
        this._isShow = val; 
    },
    listen:{},
    //利用对象监听  同一函数触发时的多个操作
    addEvent:function(type,fn) {
        if(typeof this.listen[type] == 'function' && Array.isArray(this.listen[type]))  {
             this.listen[type].push(fn);
        }else {
            this.listen[type] = [];
            this.listen[type].push(fn);
        }
    },
    fireE:functon(type){
        if(typeof this.listen[type] == 'function' && Array.isArray(this.listen[type]))  {
             for(var i =0;i<this.listen[type].length;i++) {
                 this.listen[type][i]();
             }
        }
    },
    removeE:function(type,fn) {
        if(typeof this.listen[type]) {
            //循环type中 所有事件 删除原来的
            for(var i = 0 ;i < this.listen[type].length;i++) {
                if(this.listen[type][i] === fn) {
                    this.listen[type].splice(i,1);
                }
            }
        }
    },
    //加入一些dom操作方法
    showDelet:function() {
        //显示删除按钮
    }
    refresh:function(data) {
        this.data = [];
        this.page = 1 ;
        this.node.html('');
    },
    //定义模版
    pushHtml:function() {
        var page = this.page;
        var template = _.template(this.temp.html(),{data:data,page:page,token:token,userId:userId})
    },
    //动态生成的元素再追加事件
    setNode:function() {
        this.node.html(val);
        this.addListen(this.page)
    },
    addListen:function(page) {
        $('[page=page'+page+']').off('click).on('click',function(){
            var id = $(this).data('id');
        })
        myScroll.refresh();
    },
}
var orderByList = {
    list:$('.header'),
    mask:$('.mask'),
    select:$('.select'),
    showSelect:function() {
        this.list.hide();
        this.list.mask();
        this.select.show();
    }
}
//封装方法
function loadData(putData,cb,caller) {
    AladdingTools.request('post',AppInter..,putData,function(data){
        if(data=='001') {
            typeof cb === 'functionn' && cb();
        }
    })
}
function getSessionData(cb,called) {
    AladdinTools.getObjectFromSession(config.searchKey,function(data){
        cb&&typeof cb === 'function'&& cb.call(called,data);
    })
}
function bindEvent() {
    1.  设置左箭头返回键
    2.  设置右箭头返回键
    3.  其他
}
function load() {
    myscroll的一些设置
}
function init() {
    //定义页面高度
    pageHeight = document.body.clientHeight - 44 ;
    $('.app-content').height(pageHeight);
    $('.iscroll-content').height(pageHeight - 50);
    getUserInfo(function(){
        load(funtion(){
            bindEvent;
        })
    })
}
//get 和 set 的用法
get --> config.isShow; -->false;
set --> config.isShow = true;
调用  config.isShow  -->true;