ife-task0003学习收获总结

时间:2022-11-14 14:27:04

+ 编写可维护的css原则是,尽量减少改动时要编辑的地方(减少代码重复)。

+ CSS布局奇淫技巧之-高度自适应

  高度自适应:通过绝对定位来解决高度自适应的问题,元素不设置高度,设置绝对定位,将top、bottom设置为0,可以设置自适应高度。

   ife-task0003学习收获总结

  额外补充: 通过绝对定位解决宽度自适应的问题

           ife-task0003学习收获总结

         ife-task0003学习收获总结

        不设置right的值的情况:宽度由内容撑开

       ife-task0003学习收获总结

+ 实现响应式布局:尽量实现弹性可伸缩的布局,减少媒体查询的使用。

+ 编写可维护的js(解耦应用逻辑/事件处理程序、解耦html/javascript、解耦css/javascript)

   解耦应用逻辑/事件处理程序(解耦html/javascript、解耦css/javascript):

   勿将event对象传给其他方法,只传来自event对象中所需的数据;

   任何可以在应用层面的动作都应该可以在不执行任何事件处理程序的情况下进行;

   任何处理事件程序都应该处理事件,然后将处理转交给应用逻辑。

+ 关于性能

    避免全局查找,避免使用with语句;

    避免不必要的属性查找,优化循环:例如减值迭代,避免双重解释:即不要将字符串作为参数传给eval()、Function构造函数、setTimeout();switch代替复杂的if-else提高性能。

    最小化语句数:例如用对象的字面量表达方式来创建和初始化一个对象,消除不必要的语句。   

    优化dom交互:减少对dom的操作

+ NaN(不是一个数)永远不会和其他任何值相等包括它自身(用isNaN()来判断一个数是否为NaN)。

+ fixfox不支持focusin(获得焦点)和focusout(失去焦点),所有的浏览器都支持blur(失去焦点)和focus(获得焦点)。

+ 正则表达式匹配日期yyyy-mm-dd

function isDate(time) {
  var re = /^([1-9][0-9]{3})-((0[1-9])|(1[0-2]))-((0[1-9])|([1-2][0-9])|(3[0-1]))$/;
  //var re = /^(\d{4})-(\d{2})-(\d{2})$/;
  var bo = re.test(time);
  return bo;
}

 + 如果一个跨作用域的对象被引用了一次以上,则把它存储在局部变量里再使用。

 + JSON.parse的问题

       下面出现的问题是因为拼接的json格式的数据不正确,所以在用JSON.parse方法将json字符串转化为javascript对象时出错。具体问题描述如下:

      下面左边没有数据呈现,因为报错

   ife-task0003学习收获总结

ife-task0003学习收获总结

部分json字符串:

ife-task0003学习收获总结

     拼接json格式字符串时在最后一个对象后面多加了一个","号,导致用JSON.parse转化出错。但是用eval()可以正常转化,看来用全局对象JSON来解析JSON数据要求更严格。

    javascript字符串与JSON字符串的最大的区别在于,JSON字符串必须使用双引号(单引号会出错),即json对象的属性必须加双引号。

    与javascript的对象字面量相比,JSON对象有两个不同的地方:没有声明变量(json中没有变量的概念),没有末尾的分号。

 

+ 闭包的问题

  ife-task0003学习收获总结

  ife-task0003学习收获总结

ife-task0003学习收获总结

 对应的js代码:

ife-task0003学习收获总结

 

ife-task0003学习收获总结对象初始化用字面量的形式,截图未更新

 

ife-task0003学习收获总结

  to be continued