这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

1.课程要点：

• 写好js的一些原则：

1. 各司其职
2. 组件封装
3. 过程抽象

HTML/CSS/JS 各司其责应当避免不必要的由 JS 直接操作样式，可以用 class 来表示状态纯展示类交互寻求零 JS 方案

2.课程重点内容：

• 结构：HTML
• • 轮播图是一个典型的列表结构，我们可以使用无序列表
    元素来实现
  • 表现：CSS
    • • 使用 CSS 绝对定位将图片重叠在同一个位置
    • • 轮播图切换的状态使用修饰符 (modifier)
    • • 轮播图的切换动画使用 CSS transition
  • 行为：JS
    • • API设计应保证原子操作、职责单一、满足灵活性。
    • 行为：控制流
    • • 使用自定义事件来解锁
    • 解耦
    • • 将控制元素抽取成插件
    • • 插件与组件之间通过依赖注入方式建立联系
    • • 将HTML模板化、更易于扩展
    • 抽象
    • • 将通用的组件模型抽象出来
    • 过程抽象
    • • 用来处理局部细节控制的一些方法
    • • 函数式编程思想的基础应用
    • 高阶函数
    • • 以函数作为参数
    • • 以函数作为返回值
    • • 常用于作为函数装饰器

  3.代码编写练习

          //1.parseInt(变量)   可以把 字符型的转换为数字型  得到的是整数
          var age = prompt('请输入您的年龄');
          console.log(parseInt(age));
          console.log(parseInt(3.14)); //得到3  取整
          console.log(parseInt(3.99)); //得到3  取整  不四舍五入
          console.log(parseInt('120px')); //  得到120  会去掉单位
          console.log(parseInt('rem120px')); // NAN
          //2. parseFloat(变量)  可以把 字符型转换为数字型 得到的是小数 浮点数
          console.log(parseFloat('3.14'));
          console.log(parseFloat('120px')); //  得到120  会去掉单位
          console.log(parseFloat('rem120px')); // NAN
          //3. 利用 Number(变量)
          var str = '123';
          console.log(Number(str));
          console.log(Number('12'));
          //4. 利用 算数运输  - * / 隐式转换
          console.log('12' - 0);
          console.log('123' - '120');
          console.log('123' * 1);
  </script>