月度总结

李瑶月度总结

第一周学习了小程序：

小程序融合了很多前端开发界的概念，但是并没有采用任何一个框架，包括流行的REACT、VUE，还有CORDOVA。它不是三者中的任意一个，而是拼凑出一个新的框架。

是一个电商的的项目，具体有首页的页面渲染，第一部分为轮播图，用小程序文档中的组件swiper和其中的参数完成轮播图，下边的公布用的也是轮播图的组件，但参数是把轮播图的横向改为竖向的方向，然后就是下边商品的分类渲染，先是使用scroll-view实现横向滚动导航，方法使用wx.request根据ID点击分类出现相对应的商品分类，然后显示商品,根据商品ID显示详情信息

在HTML中我们常用的是px这个单位，而在微信小程序中，官方提供了rpx单位,rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx,11.后台交互/wx.request({})方法/渲染页面方法 解析

小程序的后台获取数据方式get/post具体函数格式如下：wx.request({})

第二周复习了js和vue

Js整理：

1  js是一种基于对象和事件驱动的并具有相对安全性的客户端脚本语言。也是一种广泛用于web客户端开发的脚本语言，常用来给html网页添加动态功能，如响应用户的各种操作。

2 js的数据类型有：

  基本数据类型：String、boolean、Number、undefined、null        引用数据类型：Object、Array、Date、RegExp、Function

3 如何判断数组数据类型：

[if !supportLists]1、[endif]通过专有方法判断如：push(),pop();(可自己给变量定义该方法，有时失效)                2、 obj instanceof Array 返回值判断；                        3、es5和jquery都有方法Array.isArray()。                4、toString.call(param) 判断；返回格式 [object Undefined]                5、obj.constructor === Function 返回值判断

4 js事件流:

“事件冒泡”：事件由最具体的元素接收，然后逐级向上传播；     “事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体元素；     “dom事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡；

5什么是Ajax和JSON，它们的优缺点:

 Ajax（Asynchronous Javascript And XML/异步的javascript和xml）。        优点：                可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量。                避免用户不断刷新或者跳转页面，提高用户体验。        缺点：                对搜索引擎不友好。                要实现ajax下的前后退功能成本较大                可能造成请求数的增加                跨域问题限制

JSON：json是一种轻量级的数据交换格式，ECMA（欧洲计算机制造商协会）的一个子集；                优点：轻量级，占用带宽小、易于人的阅读和编写，便于机器（js）解析，支持复合数据类型（数组，对象，字符串，数字），能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量。                缺点：相对xml通用性较差，数据可描述性较差；

6什么情况会出现undefined:当只声明变量，并未赋值初始化的时候这个变量的值就是undefined例如：console.log(a);var a = 10

7ull是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象。所以typeof返回object

8双等号的类型转换:

var undefined;        undefined == null; // true        1 == true;  // true        2 == true;  // false        0 == false; // true        0 == '';   // true        NaN == NaN; // false        [] == false; // true        [] == ![];  // true        // alert(!![])        //true        // alert(![])        //false        // alert([] == 0)        //true        // alert(false == 0)        //true

undefined与null 但不全等（===）     当为number与string时，会将string转换为number；     number和boolean时，会将boolean转换为number     number或string与Object，会将Object转换成number或string

9js中的数据类型转换

函数转换：parseInt()、parseFloat()、toString()     强类型转换：Boolean()、Number()、String()     弱类型转换：“==”、“-”、“+”、if（）

10 dom增删查改:

 增：                document.createElement(tag);                document.createTextNode();                document.createDocumentFragment()                 dom.appendChild(sondom);                dom.insertBefore(newdom,targetdom);        删：                document.removeChild();        改：                document.replaceChild();        查：                getElementById()                getElementsByTagName()                getElementsByName();

11,闭包是什么：

1，变量作用域：函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。

注意点：在函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明的是一个全局变量！

[if !supportLists]2，[endif]如何从外部读取函数内部的局部变量？

在函数内部，再定义一个函数。

[if !supportLists]3，[endif]闭包的概念

闭包就是能够读取其他函数内部变量的函数。

[if !supportLists]4，[endif]闭包的用途

[if !supportLists]1，[endif]可以读取函数内部的变量2，变量的值始终保持在内存中

[if !supportLists]5，[endif]使用闭包的注意点

[if !supportLists](1) [endif]由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

[if !supportLists](2) [endif]闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

 

Vue整理：

1，vue是一个构建用户界面的框架。是一个轻量级mvv框架，和angular一样是所谓的双向数据绑定，数据驱动和组件化的前端开发，通过简单的api

实现响应式的数据绑定和组合试图组件，容易上手，小巧。

2，常用指令：

v-model 双向数据绑定，一般用于表单元素。

v-for 对数组或对象进行循环操作，使用是v-for 不是v-repeat 

v-on 用来绑定时间，用法：v-on :时间 = ‘函数’

v-show/v-if 用来显示或隐藏元素，v-show 是通过display实现，v-if 是每次删除后在创建

3，事件和属性：

v-on:click = " 简写 @click=""   

$event 事件对象，里面包括事件相关信息，如事件源，时间类型，偏移量等

事件冒泡，原生js方式，依赖于事件对象，vue方式，不依赖于事件对象，@click.stop 来阻止事件冒泡；

键盘事件：@keydown.13 或keydown.enter

事件修饰符.stop  调用event.stopPropagation();

v-bind 用于属性绑定,用法 v-bind:属性=“”   举例 v-bind:src="" 简写  ：src=""

4，计算属性：

计算属性也是用来存储数据，具有这俩个特点：数据可以进行逻辑处理操作，对计算属性中的数据进行监视。

5，数据传递：

父子组件，在一个组件内部又定义了另一个组件，称为父子组件

 子组件只能在父组件中使用，默认情况下，子组件不能访问父组件数据。每个组件的作用域是独立的。

       组件间数据的通信：在调用组件时，绑定想要获取的父组件的数据，在子组件内部，使用props选项来生命获取

的数据，接收来自父组件的数据。例子：props:['msg']   props可以是数组，也可以是对象props:{} 允许配置高级设计比如类型判断

数据的校验，设置默认值props:{messge:String,age:Number,name:{type:String,rquired:true,default:19,validator:function(){}}},对象做数组的默认值，

对象必须使用函数返回。

组件中的数据有三种形式：data  props computed

父组件访问子组件数据方式：

a.在子组件中使用vm.$emit（事件名，数据） 出发一个自定义事件，事件名自定义

b.父组件在使用子组件的地方监听子组件出发事件，并在父组件中定义方法，用来获取数据

6，vue-router 路由：

主页新闻

7，mock.js：一个模拟JSON数据的工具，用于后台还未完成接口时的应用

8，vuex:

共享状态的一种模式

Vuex主要有四部分：

[if !supportLists]1. [endif]state：包含了store中存储的各个状态。

[if !supportLists]2. [endif]getter:类似于 Vue 中的计算属性，根据其他 getter 或 state 计算返回值。

[if !supportLists]3. [endif]mutation:一组方法，是改变store中状态的执行者。

[if !supportLists]4. [endif]action:一组方法，其中可以含有异步操作。

toString()和toLocaleString()有什么区别?

当数字是四位及以上时，toLocaleString()会让数字三位三位一分隔，像我们有时候数字也会三位一个分号

toString()和toLocaleString()两点区别：

1.当数字是四位数及以上时，有区别，区别看以上代码

2.当目标是标准时间格式时，用以上两种方法是有区别的