2017.12.5-学习笔记：前端零碎知识点整理复习

前言：最近写了一个后台管理系统的页面和一个移动端商城的页面，后台用了bootstrap框架，移动端用了mui框架。这里整理一下零零碎碎的知识点，或许就有你需要的。

pc端

1.bootstrap 中容器 container 中的类[role aria sr-only(盲人设备的类，可以删除，简化html结构)]

2.html 新增的表单属性

• 1.autocomplete = "off" 关闭表单自动完成提示，默认 on
• 2.autofocus 输入域在页面载入时自动聚焦
• 3.placeholder 文本提示
• 4.multiple 多文件选择
• 5.form="formId" 给表单元素添加，允许该表单元素写在 form 的外面，值为 form 表单的 id
• 6.required 内容不能为空

3.bootstrapValidator(前端校验插件)

• 检验的内容必须在 form 表单内 ( 表单提交按钮的 type 必须为 submit )
• $("form").bootstrapValidator({args}) 初始化表单
  • arg1.excluded 不校验的数组
  • arg2.feedbackIcons 配置校验的小图标
  • arg3.fields 配置校验的规则
    (校验失败会禁用登录按钮)
• $form.data("bootstrapValidator").resetForm() 获取插件实例，调用重置样式方法
• $form.data("bootstrapValidator").updateStatus(args) 手动更新字段状态
  • args1：想要修改的字段
  • args2：改成什么状态 INVALID VALID
  • args3：指定显示的错误信息 callback
• success.form.bv (注册表单校验成功事件)
  $form.on("success.form.bv",function(e){ e.preventDefault();// 阻止浏览器默认行为 (reture false 会阻止下面代码执行)})

4.$.ajax({}) 中的

• dataType:'json' 如果后端返回的响应头有 text/html 就要加
• data:$form.serialize() 将表单中所有 name 属性和值拼成一个字符串，表单序列化

5.ajax (全局事件)

• $(document).ajaxStart(fn) 只要发送 ajax 就执行 fn
• $(document).ajaxComplete(fn) 每一个ajax 结束就执行 fn
• $(document).ajaxStop(fn) 当所有的 ajax 结束就执行 fn

6.NProgress.js(进度条插件)

• NProgress.configure({showSpinner:false})
• NProgress.start() 开启进度条
• NProgress.done() 结束进度条
  要放在 ajax 全局函数中 代码：

  // 关闭小圆环
  NProgress.configure({showSpinner: false});
  // 注册 ajax 全局事件
  $(document).ajaxStart(function() {
    // 开启进度条
    NProgress.start();
  });
  $(document).ajaxStop(function() {
    // 结束进度条,这边是虚拟一秒后
    setTimeout(function() {
      NProgress.done();
    }, 1000);
  });

7.modal (模态框)

• $("selector").modal.show()显示
• $("selector").modal.hide()隐藏

8.jQuery 注册事件不会覆盖 要用 off 解绑 off("click") 不传参数默认解绑所有事件

• 注册事件和触发事件是两码事
• 在外部事件内部注册事件，当触发外部事件时会注册内部事件，如果没触发内部事件，会一直保留注册内部事件的状态，当下次触发内部事件时，会触发之前累积注册的所有的内部事件，所以，为了避免多次触发累积的事件，在注册内部事件前，加上 off()，先解绑内部事件的注册状态，在注册内部事件，这样触发内部事件的时候，就不会累积。

9.cookie 和 session

• cookie 每次请求都会携带
• session 里面存储用户的登录信息 (PHPSESSID)
• 七天免登录：设置cookie 的有效期是7天
• 销户：删除 session
• 因为 http 是无状态的，但如果想保持一个登录的状态，就要用到状态保持的东西，也就是 cookie 和 session

奶茶店 的例子：
奶茶店，喝5倍送一杯奶茶；
服务员记不住每次来喝奶茶的人(无状态)；
奶茶店给第一次来喝奶茶的客人，准备一张小卡片，小卡片有个编号，编号是唯一的，奶茶店在本子上记录每个编号喝了几杯奶茶；
客户的小卡片：cookie；
奶茶店的小本子：session；

10.location 和 history

• location.href ==> 整个url
• location.reload() ==> 刷新页面
• location.search ==> 获得 包含?后的参数
• location.hash ==> 锚点，包含#后的参数
• history.go(1) ==> 前进
• history.forward() ==> 前进
• history.go(-1) ==> 后退
• history.back() ==> 后退
• <a href="javascript:history.go(-1)"></a>伪协议，页面不跳转，执行 js 代码
• 用于获取 url 参数的工具对象

// 用对象包裹工具函数，防止全局变量污染
var tools = {
  // 获取参数对象的函数
  getParamObj: function () {
    // 获取参数
    var search = location.search;
    // 参数解码
    search = decodeURI(search);
    // 取出？后的参数
    search = search.slice(1);
    // 将参数按 & 分割为数组
    var arr = search.split("&");
    // 准备一个空对象
    var obj = {};
    // 遍历这个参数数组
    arr.forEach(function (e) {
      将数组中每一项按 = 切割为键值对数组
      var key = e.split("=")[0];
      var value = e.split("=")[1];
      // 给对象添加属性和值
      obj[key] = value;
    })
    // 返回这个对象
    return obj;
  },
  // 获取某个属性的属性值的函数
  getParam: function (key) {
    // 返回调用 上面函数 返回出来的对象 的 key 属性的值
    return this.getParamObj()[key]
  }
}

11.登录验证的两种方法

• 1.后端 node.js 处理，规定路径，前端按后端的路径写名称
• 2.前端 根据后端的接口 作出判断

12.模版引擎

• 1.引包
• 2.准备模版
• 3.准备数据
• 4.模版与数据绑定 == 结构
  template("tpl",data)
• 5.渲染到页面
  $("div").html(template("tpl",data))
• 6.修改模版

<% 用于写复杂的逻辑的百分号语法 %>
{{each rows v i}}
  {{v.id}}
  {{v.name}}
{{/each}}

• 模版引擎内能用template("tpl",data)中 data 对象 的属性，如果是数组，要用{list:arr}包装成对象
• 模版引擎中用 @ 处理标签
• 模版中删除某些文本内容用replace的链式写法

13.bootstrap-paginator(分页插件)

• 1.准备一个盒子 必须是 ul
• 2.在 success 里初始化 渲染分页
• 3.参数：bootstrapMajoyVersion、currentPage、totalPages、onPageClicked(a,b,c,page)
• 4.自定义内容：itemTexts(type,page,current) 设置返回值 return
• 5.title属性：tooltipTitles(type,page,current) 设置返回值 return
• 6.useBootstrapTooltip:true 使用 bootstrap 风格的 title

14.dom 对象的 reset() 方法，重置表单

15.fileupload(文件上传插件) ==> formdate 实现的

16.input:hidden 隐藏域 的 value 来保存 id

利用bootstrapValidator表单校验时要手动修改使它成功$form.data("bootstrapValidator").updateStatus(args)

17.表格内容居中

• 设置给 td:text-align: center;vertical-align middle;

18.栅格系统 类前缀

• 超小屏幕 手机 (<768px).col-xs-
• 小屏幕 平板 (≥768px).col-sm-
• 中等屏幕 桌面显示器 (≥992px).col-md-
• 大屏幕 大桌面显示器 (≥1200px).col-lg-
• 列偏移 .col-md-offset-* ==> 这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）

19.bootstrap 登录页的表单 用水平排列的表单 要在 form 中添加 .form-horizontal 类，将 label 标签和控件组水平并排布局

20.jQuery中切换上下滑动 slideToggle()

21.使用数组接收上传图片的结果 利用数组的长度，判断上传图片的张数

---

移动端

1.transform:translateZ(0) -- 开启 gpu 加速

2.&yen; ==> ¥￥前一个是代码，后一个是中文状态下直接输入，好像也差不多

3.mui 区域滚动

• 1.html 结构

<div class="mui-scroll-wrapper">
  <div class="mui-scroll">
    <!--这里放置真实显示的DOM内容-->
  </div>
</div>

• 2.js 初始化 scroll 控件
  mui(".mui").scroll 是一个对象

mui('.mui-scroll-wrapper').scroll({
 scrollY: true, //是否竖向滚动
 scrollX: false, //是否横向滚动
 startX: 0, //初始化时滚动至x
 startY: 0, //初始化时滚动至y
 indicators: true, //是否显示滚动条
 deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
 bounce: true //是否启用回弹
});

4.视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">

• width：用于设置layout viewport(布局视口)的宽度

• initial-scale：设置页面的初始缩放比和 layout viewport(布局视口)的宽度

• user-scalable：当设置为no时，可禁止用户缩放页面。但请不要这样去做。

5.设置标题图标

<link rel="icon" href="./favicon.ico">

• 名字固定：favicon.ico
• 位置根目录

6.设置了绝对定位的元素会默认在原来标准流中的位置，要设置 left 和 top 值

7.datepicker日期插件 和 ueditor富文本编辑插件

8.数据存储的位置

• 存数据库(服务端)
  • 1.缺点：发请求，消耗服务器性能
  • 2.缺点：如果要存数据库，要求用户先登录，用户体验不好
  • 3.优点：安全，不会被用户篡改
• 存本地(浏览器端)
  • 1.优点：本地操作，快
  • 2.优点：不会占用服务器的资源
  • 3.缺点：不安全，容易被清除或者修改
    对于不是特别重要的数据，存本地，丢了也不影响
    对于重要的数据，必须存在数据库，甚至还需要加密。(密码)

9.本地缓存

1.cookie

• 大小：4k
• 获取方式：每次请求都会携带cookie
• 生命周期：如果不设置过期时间，默认是会话级别的cookie，浏览器关闭就失效，可以设置过期时间document.cookie="name=zs;max-age=60;path=/"
  过期时间：Expires / Max - Age（秒）
• cookie还有路径问题：子目录可以访问父目录的cookie，父目录无法访问子目录的cookie，通常设置cookie的路径是根路径

2.sessionStorage

• 大小：5兆左右
• 获取方式：必须手动获取，自动携带 getItem()
• 生命周期：关闭浏览器就失效，多窗口不共享

3.localStorage

• 大小：5兆左右
• 获取方式：必须手动获取，自动携带 getItem()
• 生命周期：只要不手动清除，永久存在，多窗口共享
• 存储的是字符串，操作的是数组或者对象

// 存储
localStorage.setItem("name","value");
// 获取
localStorage.getItem("name");
// 删除
localStorage.removeItem("name");
// 存对象要先转json，取出来再转
localStorage.setItem("obj",JSON.stringify(obj));

10.BFC和浮动

• 1.在标准流中，如果一个盒子没有高度，它的高度由子盒子来撑开

• 2.清除浮动的核心：使用一个额外的盒子，这个盒子不能浮动，并且要清除浮动，不和浮动元素在一起
  如果使用额外标签法清除浮动，缺点是需要一个额外的盒子。
  伪元素清浮动.clearfix::after{content:'';display:block;clear:both;}

• 3.bfc(block formatting context) 盒子

  • 1.触发了 bfc 的盒子是一个独立的盒子，bfc 盒子不允许子元素去影响别的盒子。
  • 2.bfc 盒子不需要清除浮动
  • 3.可以用于自适应布局，左边固定，右边自适应(原先是加 margin-left)
  • 4.解决 margin 塌陷(由于外边距合并)

• 4.触发 bfc 的方式：

  • 1.overflow: hidden scroll auto
  • 2.float: left right
  • 3.position: absolute fixed
  • 4.display: inline-block

• overflow:hidden 清除浮动的缺点：不能和position配合使用，因为超出的尺寸的会被隐藏

11.表单内的 button 有提交功能，类似于 submit，注册点击事件的时候e.preventDefault禁用默认行为

12./^1\d{10}&/.test(mobile) ==> 手机正则

13.mui 的下拉刷新的 click 事件无效，要用 tap 事件

14.dom.dataset; 原生js获取自定义属性，所有 data- 开头的自定义属性都会存储到 dataset 中

• 利用data- 自定义属性 存储一部分信息，再js中通过dom.dataset; 获取这个自定义属性对象，直接传到模版引擎中，作为参数对象，在模版中就可以使用这些自定义属性中存储的信息

15.html.replace(/\n/g,"") ==> 去除出 html 字符串中所有换行

16.html 中属性不分大小写

17.mui 中动态添加的组件 要重新初始化

• 例如数字框、input框、switch开关
  mui("selector").numbox();
  mui('.mui-input-row input').input();
  mui('.mui-switch')['switch']();

18.$(":checked") 选取所有被选中的元素（复选框或单选按钮）

19.toFixed(2) ==> 四舍五入保留2位小数

20.回跳页面的方法

// 当前页设置一个参数
  location.href="login.html?retUrl="+location.href;

// 目标页判断有没有带有设定的参数
  if (location.search.indexOf("retUrl") === -1) {
    location.href = "user.html";
  } else {
    search = search.replace("?retUrl=", "");
    location.href = search;
  }

21.mui 的下拉刷新结束和开始方法用 可以到实例 mui('selector').pullRefresh() 中找方法（因为原文档错误）

// 刷新结束方法 ==> 选择器容器最好用mui-scroll-wrapper区域滚动的选择器
mui('selector').pullRefresh().endPulldownToRefresh();

// 开始刷新方法 ==> 选择器容器最好用mui-scroll-wrapper区域滚动的选择器
mui('selector').pullRefresh().pulldownLoading();

22.文本域 防止拖拽缩放 resize:none 自适应宽度 不设 cols 设置宽度 100%

23.点击按钮发送ajax请求，渲染二级菜单并显示，发送过的再点击就不发送请求，只显示

• 利用 ul 中的 li 的 length 判断是否再次发送请求，发送过就渲染过，就有长度，否则没有

24.返回上一页 <a href="javascript:history.go(-1)">

25.单行以及多行文本溢出用省略号显示

• 单行文本溢出用省略号显示（设置三个属性）

  - overflow:hidden; //超出的文本隐藏
  - text-overflow:ellipsis; //溢出用省略号显示
  - white-space:nowrap; //溢出不换行

• 多行文本溢出用省略号显示

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;//将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2;//这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。

26.jQuery 获取当前点击元素下标 $(this).index()

27.a 标签内 target="_blank" 打开新标签

---

---

Knowledge changes the mind