smaller_coder的博客

原创 JDK 8.0新特性

1、Optional2、lanmda条件：1.方法的参数或局部变量类型必须为接口!!!，才能使用Lambda2.接口中有且仅有一个抽象方法 针对一个接口中，是否有大于一个抽象方法？JDK8为我们新增了一个注解:@FunctionalInterface。它能够帮助我们检测这个接口是不是只有一个抽象方法，如果有两个抽象方法，则会报错。3、接口和抽象类、抽象防范接口：用interface修饰，只能定义抽象方法和①静态常量，子类可以同时实现多个接口。并且实现全部的抽象方法...

原创 动态路由流程

原创 axios使用总结（一）

1、baseURL、timeoutaxios.create({ baseURL:'', timeout:500 // 链接超时 当发送时间超过1秒就不再发送了})2、transformRequest 在发送到服务器前，对参数进行拦截、修改请求数据axios.create({ baseURL:'', transformRequest: [function (data) { // `transformRequest` 允许在向服务器发送前，修

原创 vue 响应式原理

不废话，直接上源码function vue() { this.$data = { aaa: 1 }; this.el = document.getElementById('app'); this.virtualdom = ''; this.observe(this.$data); this.render()}vue.prototype.observe = functi...

原创 gird布局

<div className="container"> <div className="item">1</div> <div className="item">2</div> <div className="item">3</div> &...

原创 如何在react项目中使用修饰器语法且不报错

在你的项目里执行 :npm install customize-cra react-app-rewired @babel/plugin-proposal-decorators --save在你的根目录即 和src同级的地方新建js文件 config-overrides.js 粘贴下方代码:const{override,addDecoratorsLegacy}=require...

原创 react Context

1、 父组件父组件：import PropTypes from 'prop-types' // 声明Context对象属性 static childContextTypes = { propA: PropTypes.string, methodA: PropTypes.func } // 返回Context对象，方法名是约定好的 getChild...

原创 react 创建界面的2种常见方式以及react hooks

1、无状态state，function组件import React, { Component } from 'react'import ChildTest from './test'function Test(props) { return ( <div className="safe-wrap"> <ChildTest camera="测试"...

原创 sass知识点总结

1、 声明变量$width:80px.nav{ width:$width}//变量引用其他变量$highlight-color: #F90;$highlight-border: 1px solid $highlight-color;.selected { border: $highlight-border;}2、子组合选择器和同层组合选择器：>、+和~;...

原创 react-redux与mobx

react中的状态管理有很多，我们今天讲的是react-redux 和 mobx。一：mobx1、根目录index.jsimport { Provider } from 'mobx-react'ReactDOM.render(<Provider locale={zh_CN}><App store={AppStore} /></Provider&gt...

原创 react-router-dom 之 Link 与NavLink

本文主要记录react项目react-router的使用,主要介绍两种，Link 和 NavLink//menuList.js 导航条import { NavLink ,Link} from 'react-router-dom'<NavLink exact to={childItem.path} data-index={number} className= {store.c...

原创 webPack项目优化

const path = require('path')const uglifyPlugin = require('uglifyjs-webpack-plugin'); //const isProduction = process.env.NODE_ENV === 'production';function resolve(dir) { return path.join(__dirn...

原创 全局注册组件

1、全局注册组件import vue from 'Vue'function changeStr(str) { return str.charAt(0).toUpperCase() + str.slice(1);}const requireComponent = require.context('.', false, /\.vue$/);console.log(requireC...

原创 WF项目问题总结

1、 后台接口对接时，参数传递方式 urlcode 是一种编码方式，就是把http请求串的url 进行urlcode的编码，让httpserver 可以识别，不至于http的client、server 之前出现乱码或者误解。例如： Content-Type: text/html;charset:utf-8;application/x-www-form-urlencoded ：...

原创 前端面试总结（三）

1. 双向绑定watcher的内部实现2. vue虚拟dom的底层渲染原理3. HTTP缓存策略对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。对于比较缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存HTTP缓存有多种规则，根据是否需...

原创 前端面试总结(一)

1. Created和mounted等生命周期函数分别都适合做什么操作不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例对象中定义箭头函数，th...

原创 前端面试总结（二）

1. JS 或者 OC实现多继承function obj1 () { this.aaa = '124' // body...} obj1.prototype.b = function aa () { console.log('111') }function obj2 () { this.bbb = '123' // body...} obj2.prototy...

原创 TARO 实践问题总结

1. 事件如何获取自定义组件的自定义属性？2. form提交表单时，点击无反应3. 网络请求,Taro.request(), 是promise的封装，返回promise对象4. taro实现小程序tabbar5. taro 实现路由跳转，以及路由传参数Taro.navigateTo({ url: '/pages/page/path/name' })componentWill...

原创 vue-amap 学习总结

1. 使用 <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>2.在定制化程度较高的项目中，开发者可能只想通过 vue-amap 引入高德地图，而部分实例化的操作直接基于高德地图的 sdk 完成。这个时候就需要 lazyAMapApiLoaderInstance。lazyAMapApiL...

原创 js数组语法汇总

1. split(''"), 字符串转数组,返回一个新的数组2. slice(start,end),字符串截取，[1,2,3,5].slice(-1) => [5],返回截取后的数组，不改变原数组3. splice()，删除或者添加字符串 [].splite(1,1,'2'), 在下标为1的位置开始 删除1个元素，添加“2”到这个位置,改变原来数组4. push(),结尾添加元...

原创 Axios 爬坑总结

1. axios 发 post 请求，后端接收不到参数axios会帮我们转换请求数据和响应数据以及自动转换 JSON 数据，也就是说，我们的Content-Type变成了application/json;charset=utf-8 然后，因为我们的参数是 JSON 对象，axios 帮我们做了一个 stringify 的处理。而且查阅 axios 文档可以知道：axios 使...

原创 JS函数详解

一：函数的三种构造形式函数声明1. function foo(){}2. （function foo（）{}） //函数表达式3. !function foo2(){ //函数表达式 console.log('cc')}1. 不可以匿名2. 在执行上下文中会进行声明前置，并且会覆盖前面的声明3. 不可以立即执行4. 可以通过函数名访问函数表达式1. ...

原创 VUE项目问题总结

Vue.extend()是得到了一个Vue的子类，需要 new Vue.extend()来得到一个新的vue对象， 需要注意的是propsData 用来传输props的值extends 和mixin的区别extend可以看作是单继承，mixin是多继承，extend的执行优先级高于mixin，mixin会覆盖前面的继承数据es6语法 const {autoClose,…rest} =...

原创 vue-router使用经验总结

1. 引入router的时候，通常的做法是在一个js模块中，写法如下，但是这样会有一个性能问题，如果是服务端渲染时，每次请求都会生成一个新的router，内存不会释放，导致内存泄漏export default new Router({// mode: 'history', //后端支持可开scrollBehavior: () =&gt; ({ y: 0 }),routes: con...

转载 块级作用域

首先，ECMAScript和JavaScript关系： ECMAScript是一个国际通过的标准化脚本语言。JavaScript由ECMAScript和DOM、BOM三者组成。可以简单理解为：ECMAScript是JavaScript的语言规范，JavaScript是ECMAScript的实现和扩展。1. 块作用域{ }JS中作用域有：全局作用域、函数作用域。没有块作用域的概念。...

原创 小程序经验分享（二）

小程序最初的设计是真正想要用户信息的情况下去才获取信息，开发者并没有按照小程序的期望去做，导致用户在试用的时候产生一下问题：开发者在首页直接调用wx.getUserInfo进行授权 开发者没有处理用户拒绝弹框的情况 有部分开发小程序强制要求用户授权头像昵称等信息才能继续使用小程序 开发者默认将wx.login和wx.getUserInfo绑定试用，这个是有小程序 为了提升用户体检，...

原创 VUEX知识总结

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同： Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。 你不能直接改变 store 中的状态。改变 st...

原创 JS数组知识总结

1.创建数组字面量[]new Array(n) //n 代表的是数组长度 表示undefined * 100new Array(true, false, null, 1, 2, “hi”) // 等价于[true, false, null, 1, 2, “hi”];数组长度删除数组增加数组var arr = [];arr[0] = 1;arr[1] = 2;arr.pu...

原创 你真的真了解js对象吗

废话不多说，直奔主题obj.hasOwnPropertydelete obj.z可以删除隐式全局变量，但不可已删除显示全局变量。全局变量其实是global对象(window)的属性。x = 10;var y = 20;delete x; //true;delete y; //false不能删除一个对象从原型继承而来的属性，但是可以直接从原型上删掉它；  fu...

原创 小程序经验分享（一）

1. 组件-外部样式：小程序为我们提供外部样式用于适应组件在不同地方使用时的样式灵活性，但是我们在开发时发现一个问题，就是传入的外部样式有时候不能生效，原因：组件中的默认样式与传入的外部样式目前版本并不存在优先级高低、前后覆盖的概念，所以会出现外部样式失效问题解决方案：外部样式后面加上 “！important”，提高样式的优先级2. 改变组件样式除了外部样式类，还有一...

原创 VUE框架整理

1. v-bind：id 《=》 ：id 和 v-on：click 《=》@click2. 计算属性只有getter方法，可以手动添加setter方法3. v-if与v-show的区别，v-show dom中仍然会渲染4. 对象更改检测 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。5. 作用域插槽&lt;h3 slot-scope="s...

转载 vue-bus

vue-bus一个 Vue.js 事件中心插件，同时支持 Vue 1.0 和 2.0原因Vue 2.0 重新梳理了事件系统，因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。虽然依然保留了父子组件间的事件流，但有诸多限制，比如不支持跨多层父子组件通信，也没有解决兄弟组件间的通信问题。Vue 推荐使用一个全局事件中心来分发和管理应用内的所有...

转载 从URL输入到页面展现到底发生什么

打开浏览器从输入网址到网页呈现在大家面前，背后到底发生了什么？经历怎么样的一个过程？先给大家来张总体流程图，具体步骤请看下文分解！从URL输入到页面展现总体来说分为以下几个过程: DNS 解析:将域名解析成 IP 地址 TCP 连接：TCP 三次握手 发送 HTTP 请求 服务器处理请求并返回 HTTP 报文 浏览器解析渲染页面 ...

原创 ES6-rest参数和扩展运算符

翻看ES6代码，很多时候都会看到三个点(...)的存在,它在ES6语法中，有两种应用形式，分别为函数中的rest参数，以及扩展运算符REST参数rest参数和一个变量名搭配使用，生成一个数组，用于获取函数多余的参数，说不清楚，还是代码实例演示    function input(...params){        console.log(params)    }         ...

原创 Node.js学习笔记

node.js 慢慢的已经成为前端开发必须掌握的技术，仿佛不会node.js 都不好意思说自己是前端，本篇文章就和大家讨论一下node.js 是什么以及普通的语法，算是一个基本的入门node.js是什么？概念：node.js不是一门语言，而是js的一个运行环境特性：事件驱动、非阻塞I/O作用：实现现代真正意义的前后端分离，帮助前端人员有更大的操作空间首先让我学习几个Node 公...

原创 小程序学习（三）

模版， &lt;template name="msgItem"&gt;   &lt;view&gt;     &lt;text&gt; {{index}}: {{msg}} &lt;/text&gt;     &lt;text&gt; Time: {{time}} &lt;/text&gt;   &lt;/view&gt; &lt;/temp

原创 小程序学习（二）

&lt;import&gt;  import可以在该文件中使用目标文件定义的template import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template &lt;include&gt; 引入全部的wxml include 可以将目标文件除了 &lt;template/&gt; &lt;...

原创 小程序学习（一）

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。 自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。 事件对象： targ...

转载 浅谈CSS3中display属性的Flex布局

最近在学习微信小程序，在设计首页布局的时候，新认识了一种布局方式display:flex1 .container {2 display: flex;3 flex-direction: column;4 align-items: center;5 background-color: #b3d4db;6 }编译之后的效果很明显，界面的布局也很合理，看起来很清晰。那么...

原创 IOS内存管理知识总结（一）

    最近优化公司在优化app，总结几个内存管理的知识点。    首先我们要清楚    1. “堆”和“栈” Objective-C的对象在内存中是以堆的方式分配空间的,并且堆内存是由你释放的，就是releaseOC对象存放于堆里面(堆内存要程序员手动回收)非OC对象一般放在栈里面(栈内存会被系统自动回收)堆里面的内存是动态分配的，所以也就需要程序员手动的去添加内存、回收内存按管理方式分对于栈...