//

作者:lofayo    发布于:

源码的学习很重要,不要操之过急,慢慢来,一点一点体会。

1、源码都是匿名自执行函数

        
理解:看源码之前可能都会问,为什么源码里都是些匿名自执行函数?

        
这是由js语法决定的,在js里,变量的作用域是以函数代码块来区分,而不是直接以代码块区分,所以为了保证同名变量在不同地方的不污染,以及内存泄漏,因此才采用了匿名函数自执行来实行相关功能

// 一个方法的实现:匿名函数自执行
(function(undefined) {
    if (String.prototype.trim === undefined) { // fix for iOS 3.2
        String.prototype.trim = function() {
            return this.replace(/^\s+|\s+$/g, '');
            //Regular Expression: 剪掉头或尾的一个或多个空格
        };
    }
    //设置对象实例的原型
    Object.setPrototypeOf = Object.setPrototypeOf || function(obj, proto) {
        obj['__proto__'] = proto;
        return obj;
    };

})();

2、逻辑思维考虑的不全出的错

        
理解:所谓的内容为空,包含:真的是空内容,还有内容都是空字符串。以下判断方法特别妙:

mui("input").each(function(){
    if(!this.value || trim(this.value)=="")
    //内容为空,或者空字符就做如下处理
})
//附上源代码,感觉写得那么流畅:
var check = true;
mui(".mui-input-group input").each(function () {
  //若当前input为空,则alert提醒
  if(!this.value||trim(this.value)==""){
    var label = this.previousElementSibling;
    mui.alert(label.innerText+"不允许为空");
    check = false;
    return false;
  }
});
//校验通过,继续执行业务逻辑
if(check){
  //.....
}

3、对mui.each()用法的理解

  • mui.each(obj, handler) 遍历数组或json对象
var arr = [1,2,3];
mui.each(arr, function(index, curValue){
    console.log(curValue*curValue);
})

//这个方法的返回值不是个数组,只是对每个元素执行某种运算
  • mui("").each(handler) 遍历DOM对象
mui("input").each(function(){
    console.log(this.value);
})

4、了解到一个CSS属性

        
理解:块级元素宽度默认为父元素宽度的100%,如果直接是body的下的div同样如此,但是,如果div下包含的元素宽度和超过窗口宽度,这时候div的宽度不会计算为包含宽度的和,而依然是100%那么宽。所以,对于CSS里有些东西看起来很假,既然是你儿子了,但是你的宽度却不将它就算在内。

滑块的实现思想: 设置子元素display:inline-block; width: 100%;, 父元素white-space: nowrap

  .slider {
    white-space: nowrap;
  }

  .slider-item {
    width: 100%;
    display: inline-block;
  }

  <div class="slider">
    <div class="slider-item">111</div>
    <div class="slider-item">222</div>
  </div>    
format_list_numbered

(无)

  1. 1. 1、源码都是匿名自执行函数
  2. 2. 2、逻辑思维考虑的不全出的错
  3. 3. 3、对mui.each()用法的理解
  4. 4. 4、了解到一个CSS属性
vertical_align_top

Copyright © 2017 每天寻求一点变化

Powered by Hexo & Theme - Vateral