月度总结

李瑶月度总结

第一周学习了小程序:

小程序融合了很多前端开发界的概念,但是并没有采用任何一个框架,包括流行的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.当目标是标准时间格式时,用以上两种方法是有区别的


 

 

 

 

你可能感兴趣的:(月度总结)