bootstrap模板开发知识点笔记

bootstrap模板开发知识点笔记：如何让代码写的通用性更强：console.log() 是十分消耗性能的 所以 该方法 只会出现在 测试的时候,项目上线了 会出掉 console.log()。

bootstrap模板开发知识点笔记

• 如何让代码写的通用性更强
  • 关于dom元素的值
    • 通过先获取dom元素 然后根据dom元素获取
      • 高度
      • 宽度
      • 子元素个数
      • 默认的样式等等
  • 不要在代码中出现magicNumber
    • 代码中写死具体的数值 style.transition='all .3s'; 或者 distance+=10; 对于代码量足够大的项目 如果大量使用 magicNumber 那么维护起来 是致命的
    • 实际开发中 在代码最开始的时候 定义 一大堆的变量
    • 成熟的js代码一般都是 先定义变量
  • 移动端click事件的触发 会延迟200毫秒
  • 为了提升用户体验,能够实时触发
    • 一般会自己封装一个 叫做 tap的方法
      • 手指快速点击
    • touch的事件只有三个
      • 左右滑动,长按都是封装出来的
    • 如何算tap事件(手指点上去 不移动 快速松开)
      • touchstart
        • 记录开始时间
      • touchmove
        • 手指不动是不会触发的
        • 只要能够执行这个方法 就默认认为 失效
        • 不移动逻辑 可以再这里处理
      • touchend
        • 记录跟开始时间的差值
  • console.log() 是十分消耗性能的 所以 该方法 只会出现在 测试的时候,项目上线了 会出掉 console.log()
  • 使用老版本的谷歌浏览器 刚切换到 移动端视口时,才能够看到click的延迟效果,如果刷新以后 就看不到了
  • 手机测试
    • 比较low的方法
      • 直接拷贝到手机上 然后 通过手机的资源管理器 打开html页面 指定使用浏览器即可
      • 手机登陆qq
      • 电脑登陆qq
        • 发送到我的设备
        • 手机qq打开网站,选择使用浏览器
        • 注意iphone 只支持 使用 qq浏览器才能够打开
    • 公司上班时,会有一个专门的测试服务器
      • 写好了网站以后 上传即可
    • wamp
      • 配置完毕以后
      • 讲自己的移动站点 丢到这里面
      • 保证手机跟电脑在同一个局域网中(连着同一个wifi)
        • 手机打开浏览器输入 电脑的 ip地址 即可访问
  • 解决左侧点击到li标签的问题
    • /* 为了 让 a标签的点击范围 正大 避免 出现用户 点击li标签的情况 */ width: 100%; display: block; height: 100%;
• 响应式
  • 基本概念
    • 针对所有设备
    • 目的是开发一次即可
    • 会根据设备的屏幕尺寸改变而改变布局
  • 技术的选取
    • 老项目
      • 推出的时候手机还没有今天这么流行
      • 重新开发一个移动端的站点
    • 新项目
      • 直接做响应式站点
    • 性能考虑
      • 在时间,金钱允许的情况下 各开发一个版本 是最好的
    • 响应式网站的缺点
      • 代码较多
      • 维护较为复杂
    • 工作中是否选用
      • 看leader(组长,技术经理)
        • 选择项目使用的 技术
    • 开发时间
      • 一般情况 是快于 1+1
  • 直接使用js 也是能够实现该效果的 只不过 可能代码较多
  • 直到CSS3中 推出了 媒体查询
    • 就是 可以通过css 去获取 一些 设备的信息
• 媒体查询
  • 一定要记得写空格,如果漏写空格 会出现无效的情况
  • 空格可以多些
  • 语法
    • @media screen and (max-width: 1000px)
      • 屏幕尺寸 小于 等于 1000px的时候 引用 括号内的样式
    • @media screen and (min-width: 480px)
      • 屏幕尺寸 大于 等于 480px的时候 使用括号内的样式
    • 每一个 @media中 都可以 写 多个元素的样式
  • 前面的样式会被后面的样式覆盖
• 前端框架
  • 有一堆预定义的代码
    • html,css
    • 也有一部分封装的js
  • 可以直接使用
    • 直接使用定义好的class
    • 直接使用它定义好的 html层次结构(组件)
    • js插件
  • 也可以改参数使用
• bootstrap
  • 2.x
    • 早期的,目前很难看到
  • 3.x
    • 目前较为流行的版本 其中使用较多的是 3.3.5
  • 4.x
    • 在测试中,更为侧重于移动端
• bootstrap模板
  • • html5新语义标签的兼容性js
  • • 低版本ie中 实现 媒体查询的 js
• 栅格系统
  • shan ge
  • .container (固定宽度)
    • row
      • column
    • 在某个范围内 取值是一定的
  • .container-fluid(100% 宽度)
    • row
      • column
    • 会根据父盒子进行缩放
  • 默认讲一行分为 12份, 在 col后面对应的数字 标示 改容器 占几份
    • col-md-1 占一份
  • 如果 超过了12 换行
  • 如果想要在 不同的品目宽度上 实现不同的布局 可以 通过添加 col-lg col-md col-sm col-xs来进行区分
  • 如果 只写了 col-lg 那么会在小于 1200的宽度下 占一行
  • 如果 只写了 col-lg col-md 那么会在小于 992x的宽度下 占一行
  • 如果 只写了 col-lg col-md col-sm那么会在小于 768的宽度下 占一行
  • 如果 只写了 col-lg col-md col-sm col-xs 会在 对应的 屏幕宽度下 使用 设置的值
• 任务
  • boostrap 自己去探索 非常好玩 ^_^
  • 京东list页面的 使用纯js写完
  • 预习
    • wjs的demo
    • index页面的zepto使用
      • 语法跟jq基本一样