工作日志-面向对象编程

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;

下一篇：面试题

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