- 博客(90)
- 收藏
- 关注
RSS订阅原创 深入理解JS中call，apply及bind的用法
apply语法：func.apply(thisArg, [argsArray])参数thisArg：调用func的this值，如果处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象 argsArray：调用func的传参（参数需要放到一个数组中）核心概念（借用）举个栗子有一天你一时兴起想做个红烧肉，但万事具备只欠口锅，但是买一个又不...
2019-12-11 16:31:30
195
原创 防抖函数
<!DOCTYPE html><html lang="en"><body> <button id="debounce">点击触发</button> <script> window.onload = function () { var myDeb
2019-03-14 18:16:49
570
原创 Redux
module/index.jsimport {combineReducers} from 'redux'const initData={ name:'hkj'}export const setData=(data)=>{ return { type:'SET_DATA', data }}const dataRedu...
2019-02-20 13:49:35
141
原创 DeviceEventEmitter RN事件派发
A页面import {DeviceEventEmitter} from 'react-native'//...if(***){ DeviceEventEmitter.emit('eventName',param)}B页面import {DeviceEventEmitter} from 'react-native'// ...componentDidMount...
2019-02-19 18:16:15
223
转载 js事件委托
起因：1、这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的；2、其实我一直都没弄明白，写这个一是为了备忘，二是给其他的知其然不知其所以然的小伙伴们以参考；概述：那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上...
2019-01-18 11:07:37
116
原创 redux
import { createStore } from "redux"; export default function() {/* 定义不同触发类型 */const addAction = {type: "ADD"};const delAction = {type: "DEL"};/* 根据规则定义不同action的计算函数 */function co...
2018-11-09 18:24:03
126
原创 react-router
1.引入 import React from 'react'; import { BrowserRouter as Router, Route, Link} from "react-router-dom";2.基本用法 app.js:import React from "react";import Header from "./header/index";imp...
2018-11-09 18:23:33
117
原创 react
1.jsx jsx模板定义 const dom=( <div>hello world</div> ) 等于 const dom=React.createElemenet('div','hello world') 模板挂载 ReactDOM.render(dom,document.getElementBy...
2018-11-09 18:22:56
110
原创 小程序基础
1 文件目录结构 pages:页面 utils:工具类 app.json:全局配置文件，pages(路由），window(全局样式) project.config.json:个性化配置文件，当重新安装工具时，配置可进行移植 WXML:类似.vue文件，小程序封装了标签。 WXSS:css文件，增加了适配手机尺寸的单位。app.wxss为全局样式。 ...
2018-10-26 19:48:18
189
原创 vue自定义指令
自定义指令1.用途 可定制指令对dom进行操作。2.1全局指令注册 Vue.directive('name',{fun})2.2局部指令注册 directives:{ 'name':{fun} }3.fun（指令钩子函数详解） bind:第一次绑定到元素时调用 unbind:解绑时调用，也只调用一次 insert:绑...
2018-10-16 18:30:29
959
转载 原型及原型链
构造函数创建对象我们先使用构造函数创建一个对象：function Person() {}var person = new Person();person.name = 'Kevin';console.log(person.name) // Kevin在这个例子中，Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person。很简单吧，接下来进入正题...
2018-10-09 16:17:39
123
原创 git版本回退
文件（add）->暂存区（commit）->本地仓库（push）->中央仓库撤销：push之前的撤销操作1.文件修改但未add，撤销文件修改git checkout -- filename2.文件add后但未commit，撤销提交git reset HEAD filename git checkout -- filename3.commit后但未push...
2018-09-29 17:35:10
162
原创 less
1.变量（用于定义常用参数）@color:#fff;body{ color:@color;}变量计算 可以加减乘除@color:#234152;@deep-color:@color + #111; //叠加后为#345163@width:10px;#header{ width:@width * 3;}变量覆盖@color:#222;@color:...
2018-09-25 11:34:06
160
原创 Nuxt.js
1.简介Nuxt.js是vue的服务器(SSR)渲染框架。2.SSR在服务端将VUE页面渲染成HTML。这种生成页面的html是有内容的，能够被搜索引擎捕获。并且这种方式加快了首屏加载时间。3.目录结构assets //资源文件，less，jscomponents //vue组件layouts //布局组件middleware //中间件...
2018-09-21 18:17:05
629
原创 移动端适配
@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) { html,body { font-size:33.75px; } } @media only screen and (max-width: 960px), onl...
2018-09-19 18:10:05
166
原创 gulpfile.js
var gulp = require("gulp")var less = require('gulp-less')var useref = require('gulp-useref')var browserSync = require("browser-sync")var uglify = require("gulp-uglify")var minifyCss = require('g...
2018-09-14 17:38:35
161
原创 axios
请求方法axios.get(url, [config]);axios.post(url, [data[config]]);axios([config]); GET请求axios.get('/user', { params: { id: 123 } }).then(res => { retu...
2018-08-10 18:25:28
445
原创 css3自定义滚动条样式
CSS3自定义滚动条样式滚动条组成::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条滑块::-webkit-scrollbar-track 滚动条滑动轨道::-webkit-scrollbar-button 滚动条两端按钮::-webkit-scrollbar-track-piect...
2018-08-09 10:43:03
259
转载 eslint书写规范
eslint — js书写规范一、安装npm install -g eslint 安装eslint编辑器安装插件eslint（具体安装方法根据不同编辑器而不同）二、使用使用方法一：eslint --init npm中用命令新建eslintrc.js文件eslint yourfile.js npm中用命令检查自己文件中的错误使用方法二：手动在项目的根目录下新建eslintrc...
2018-08-08 14:03:19
930
原创 前端性能优化
1.减少http请求合并css，js，图片（雪碧图）2.压缩文件将html，css，js进行压缩3.将css放在顶部，将js放在底部因为浏览器加载js的时候，浏览器处于阻塞状态。如果放在头部，页面会等js下载完毕才开始渲染。有可能导致加载时候出现页面空白。将js放在底部可优化渲染页面，减少空白时间。4.开启缓存设置http头信息：expires（1.0版本） cache-contr...
2018-07-27 18:49:42
111
转载 js闭包
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结补充：闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。 闭包的三个特性：1.函数嵌套函数2.函数内部可以引用外部的参数和变量3.参数和变量不会被垃圾回收机制回收 闭包的定义及其优缺点：闭包 是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方...
2018-07-25 15:07:58
141
转载 手机端屏幕适配
*{margin:0;padding:0;outline:0a{text-decoration:nonebody,html{font-size:20px;font-family:'Microsoft YaHei,微软雅黑';height:100%;-webkit-input-placeholder{color:#ccc::-moz-placeholder{col...
2018-07-25 11:58:00
194
原创 js节流函数
在浏览器 DOM 事件里面，有一些事件会随着用户的操作不间断触发。比如：重新调整浏览器窗口大小（resize），浏览器页面滚动（scroll），鼠标移动（mousemove）。也就是说用户在触发这些浏览器操作的时候，如果脚本里面绑定了对应的事件处理方法，这个方法就不停的触发。这并不是我们想要的，因为有的时候如果事件处理方法比较庞大，DOM 操作比如复杂，还不断的触发此类事件就会造成性能上的损失，导...
2018-07-12 21:04:17
5420
转载 apply，call使用详解
Js apply()使用详解转载自：http://blog.csdn.net/business122/article/details/8000676Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享.. 如有什么不对的或者...
2018-07-11 16:54:33
152
原创 svg常用
创建<svg width="100%" height="100%" version='1.1' viewBox='0 0 100 100'xmlns="http://www.w3.org/2000/svg"><rect width='100' height='100' fill='red'/> //插入形状</svg>width:svg宽度height:..
2018-06-27 16:48:48
233
原创 vue keep-alive
keep-alive包裹动态组件时可对该组件进行缓存。propsinclude:字符串或正则表达式，匹配的组件将被缓存。exclude:与include相反<keep-alive> <component></component> //缓存component</keep-alive><keep-alive include='a'> ...
2018-06-06 23:25:24
254
原创 浏览器兼容问题
解决方法1.引入html5shiv.js解决低版本ie浏览器无法识别html5新增标签的问题。 必须加载在head中2.引入respond.js 使低版本ie浏览器支持媒体查询。3.引入rem.js 使低版本浏览器支持字体单位rem。 放在body末尾4.引入样式重置表统一浏览器默认样式，例如不同浏览器margin和padding不同的问题，保证渲染一致性。5.常见css问题5.1块级元素浮动以后...
2018-06-04 17:57:47
107
原创 Web Worker
Web Worker1.特征长时间运行，理想的运行启动性能，以及理想的内存消耗。用于支持多线程编程，它在web程序中可并发执行多个脚本，彼此间相互独立。分为两种线程 Dedicated Worker专用线程，Shared Worker共享线程。2.简单示例a.html<html> <script> window.onload=function(){ ...
2018-05-31 17:31:48
187
转载 $.ajax
$.ajax()方法详解jquery中的ajax方法参数总是记不住，这里记录一下。 1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.timeout: 要求为Number类型的参数，设置请求超时时...
2018-05-31 11:48:47
134
原创 jsonp详解
1.跨域问题普通的ajax请求普通文件存在跨域无法访问的问题，因为同源策略会被浏览器阻止方法。同源：协议，地址端口号都相同叫同源，其中任何一个不同都不叫同源。解决：网页中调用js文件时不受跨域问题影响，也就是说可以访问其他域名下的js，后来发现所有包含src这个属性的标签都有跨域的能力。因此可以将请求地址放在js的src中然后利用回调函数来进行跨域访问。2.简单文件访问实现远程服务器有一个文件：a...
2018-05-31 11:39:55
140
转载 天猫样式重置表
@charset "utf-8";/* -----------H-ui前端框架-----------------------H-ui.reset.css v1.2重定义浏览器默认样式H-ui.reser CSS file for H-uiCopyright H-ui Inc.http://www.H-ui.netdate:2014.10.09Created & Modified by gu...
2018-05-24 10:15:29
433
转载 reset.css
@charset "utf-8";/* -----------H-ui前端框架-----------------------H-ui.reset.css v1.2重定义浏览器默认样式H-ui.reser CSS file for H-uiCopyright H-ui Inc.http://www.H-ui.netdate:2014.10.09Created & Modifi...
2018-05-24 10:09:29
1109
转载 async异步操作解读
小编推荐：掘金是一个高质量的技术社区，从 ECMAScript 6 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP，技术干货尽在掌握..本章介绍 Brian Terlson 提议的 ECMAScript 2017 新特性 Async Functions(异步函数) 。概述async(异步) 函数变体以下是已经存在的异步函数变体。请注...
2018-05-23 17:04:29
926
原创 vue数据请求
1.vue-resourcemain.js文件import vueResource from 'vue-resource';Vue.use(vueResource);***.vue文件this.$http.get(url).then(response=>{ console.log(response.body);});2.axios***.vue文件import axios from '...
2018-05-22 18:04:12
357
原创 vue非父子组件传值，中央总线模式
import Vue from 'vue'const bus = new Vue();export default bus;<template> <div id='footer'> <h1>this is footer</h1> <button @click='sendMessage'>给hea...
2018-05-22 11:24:51
369
原创 vue子组件主动获取父组件属性方法
<template> <div id="index"> <h1>this is index</h1> <my-header></my-header> </div></template><scr
2018-05-22 11:07:53
20211
原创 vue父组件主动获取子组件方法属性
<template> <div id="index"> <h1>this is index</h1> <my-header ref='header'></my-header> <button @click='attack'>触发子组件
2018-05-22 11:03:58
3273
原创 Vue子组件向父组件传值
<template> <div id="index"> <h1>this is index</h1> <my-header @sendMessage='getMessage'></my-header> </div></temp
2018-05-22 10:56:20
190
原创 vue父组件向子组件传值
<template> <div id="index"> <h1>this is index</h1> <my-footer :index='this'></my-footer> <!--将父组件属性方法传入子组件--> </div
2018-05-22 10:22:20
181
原创 koa笔记
Koa笔记1.基本apictx.response.body = `**`; //设置访问页内容ctx.response.type = 'html'; //设置访问页类型，可选，html，json，text，xmlctx.requset.accepts('html'); //判定客户端页面访问类型，返回boolean类型ctx.url ==== '/index'; ...
2018-05-19 09:35:28
156
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人