工作日志-面向对象编程

1.搜索连动事件

2.页面显示动作

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

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

      
1
2
3
4
5
6
      
var config = {
userId:'.../'
show:function() {
//这里添加方法
}
}
  • 如何解决移动端input输入值触发 拼音键入事件

            
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
            
    var cpLock = true;
    input.addEventListener('input',function(){
    //监听input的输入事件
    if(cpLock){
    //执行函数
    }
    })
    document.addEventListener('compositiononstart',function(){
    //开启中文
    cpLock = false;
    })
    document.addEventListener('compositiononend',function(){
    cpLock = true;
    })
  • IScroll的移动问题

  1. 首先 iscroll有很多版本 普通版 prop版 无限版。。。
  2. new IScroll(‘.querySelector’)
  3. 固定样式

            
    1
    2
    3
    4
            
    div class = 'wrapper'
    div id = 'scroll'
    ul
    ---> 这是滑动得到元素 li
  4. 滑动原理

  • id = scroll 的高度需要超过 wrapper的高度才能滑动其中的元素 要不然不能滑动
  1. 只用prop版的IScroll才能监听到‘onscroll’事件
  2. 它会计算 id = scroll中每一的高度 来生成 maxScrollY 赋值给id 中的translateY
  3. 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事件会叠加 在下次执行的时候多次执行

以面向对象的形式写网页

      
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
      
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;

原文:大专栏  工作日志-面向对象编程


猜你喜欢

转载自www.cnblogs.com/wangziqiang123/p/11657530.html