使用面向对象并模块化开发倒计时组件（重写）

每日简报

一、学习任务

• 移动端页面的自适应完善
• amd规范以及require.js深入学习
• 重写倒计时模块，初步实现组件效果
• es6的学习es6文档

---

二、知识点、问题及解决

• 响应式布局实现，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式
  1. 设置 Meta 标签<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">注意：IDE默认格式会给出。
  2. 通过媒介查询来设置样式@media
     @media screen and (min-width:900px){ .card .card-info{ margin: 3%; position: relative; top: 3%; left: 9px; }}
  3. 注意：宽度要用百分比 :#head { width: 100% }
  4. 栅格系统（后续了解）
  5. em和rem深入学习：两者都是相对单位，em相对于父元素，rem相对于根元素，显然，em是很容易变化的，修改不容易，而css3新引入的rem就可以直接修改根元素的大小
  6. 巧用绝对定位position:absolute和相对定位position:relative
     在一个小的模块里使用绝对定位是很有用的，是相对于父元素的绝对，所以在父元素上要加上相对定位，不然是找不到父元素的。
• amd规范以及requireJS
  1. define和require这两个定义模块、调用模块的方法，合称为AMD
  2. RequireJS的基本思想是，通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载。
  3. 首先，将require.js引入到页面：<script type="text/javascript" data-main="../js/main.js" src="../js/require.js" ></script>其中data-main就相当于c语言的main函数，是一个入口，主代码的脚本文件。
  4. config配置
     在我的main.js中require.config({ paths:{ "timer":"js/timer" }})主要一个是路径，还有baseurl以及shim垫片现在未接触到，后续碰到不规范的组件引用需要注意。
  5. define方法：define(function () { function Timer() {} return timer})因为我的模块暂时没有依赖项，不然是要添加['module1', 'module2']的，在最后的回调函数就相当于是这个封装组件的一个暴露接口，且必须有返回一个对象，这其中有涉及到闭包的思想，以及作用域。
  6. require方法
     先加载依赖组件，其后是当前面的组件都加载了之后，执行的回调函数，该回调函数就用来完成具体的任务。

	require(
        ["timer"],function(timer){
            document.getElementsByClassName('add')[0].function(){
            var container=document.getElementById('countdownbox');
            // let a = new Timer();
            let a = new timer()
            a.init(container)   
        }});

• errs
  1. 在define定义模块中，return函数的位置放的不对，应该是在对应的function之后，在define定义的最后面。
  2. 作用域问题，大模块中包着小模块，但是外面是娶不到里面的值的，这也是闭包问题，解决：timer放到模块外面来，或者用this指向。

---

三、思考与总结

1. 对响应式布局有了一个大更为直观的认识，熟悉并实践了相关的方法，包括百分比，flex弹性布局，em/rem，以及媒体查询，meta标签等等。这对后续的小程序或者移动端开发来说都是非常重要的。
2. 对于模块化有了初步的实践，使用面向对象并模块化编程写一个倒计时模块，将之前的代码重写，带给我不一样的感受，有一种不断返厂升级的感觉，自己距离项目开发又近了一步，不积跬步无以成千里。要不断的积累。