自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

马优晨

撰写自己前端开发心得

  • 博客(30)
  • 资源 (2)
  • 论坛 (6)
  • 收藏
  • 关注

原创 实现一个MVVM和promise

vue 原理解析:1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数3、实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图...

2018-12-27 11:55:42 168

原创 双向数据绑定原理

数据劫持VueJS 则使用 ES5 提供的 Object.defineProperty() 方法,监控对数据的操作,从而可以自动触发数据同步。并且,由于是在不同的数据上触发同步,可以精确的将变更发送给绑定的视图,而不是对所有的数据都执行一次检测。 var obj = {}; Object.defineProperty(obj,'a',{ ...

2018-12-27 11:31:20 2566

原创 webpack 打包

webpack 中每个模块有一个唯一的 id,是从 0 开始递增的。整个打包后的 bundle.js 是一个匿名函数自执行。参数则为一个数组。数组的每一项都为个 function。function 的内容则为每个模块的内容,并按照 require 的顺序排列。识别入口文件,识别模块依赖,来打包代码。webpack做的就是分析代码,转换代码,编译代码,输出代码Webpack的两个最核心的...

2018-12-27 11:17:41 939

原创 JS的节流、防抖

以下场景往往由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。1.window对象的resize、scroll事件2.拖拽时的mousemove事件3.射击游戏中的mousedown、keydown事件4.文字输入、自动完成的keyup事件函数防抖(debounce)在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。模拟一段a...

2018-12-27 10:55:08 134

原创 数组对象排序

根据字段排序var by = function(name){ return function(o, p){ var a, b; if (typeof o === "object" && typeof p === "object" && o && p) { a = o[name]; b = p[name];...

2018-12-27 09:42:51 117

原创 判断true的正确做法

if(foo){} //不够严谨if(!!foo) {} //更为严谨,返回booleantypeof(5) //返回numbertypeof(!!5) // 更为严谨,返回boolean原理:!!可将其他类型的值转换为boolean类型...

2018-12-26 18:03:43 2473

原创 数字千位分割

使用toLocaleString()toLocaleString() 方法返回这个数字在特定语言环境下的表示字符串var a=1234567894532;var b=673439.4542;console.log(a.toLocaleString()); // "1,234,567,894,532"console.log(b.toLocaleString()); // "673...

2018-12-26 17:28:37 398

原创 表单数据重置技巧

在很多表单数据处理,可能都要要求数据可以重置。但是重置的时候,需要每一条数据都重置,这个效率很低,这里说一个技巧。上图是我们原来的重置数据,下图是我们优化后处理数据:在mounted时保存form 默认值, 然后在reset时 重新把initForm值赋给searchFrom就可以 重新初始化数据了,有了这个 就不需要reset时一个一个设置初始值了,还可以根据需要使用mounted, ...

2018-12-26 16:54:50 816 1

原创 git提交时报错:Updates were rejected because the tip of your current branch is behind

遇到这个问题别慌,这个说明你当前的分支代码不是最新的代码,你需要去更新一下master分支push前先将远程repository修改pull下来git checkout mastergit pull origin mastergit push -u origin master然后checkout 出你的分支 假定叫 AAgit checkout AAgit merge...

2018-12-26 16:16:23 1483

原创 渐进式图片加载 progressive-image

效果如上图所示,代码如下所示:第一步安装$ npm install progressive-image --save $ yarn add progressive-image第二步HTML + JS +CSSHTML<main id="app"> <template v-for="item in imgs"> <div class="...

2018-12-25 16:41:27 3843

原创 H5页面在 ios 端滑动不流畅的问题

解决方案:body {overflow-x: hidden}即,给 body 元素添加overflow-x:hidden。然后在滚动容器内加overflow-y: auto

2018-12-25 11:48:41 669

原创 两列布局左边定宽,右边自适应

效果图:代码如下:<html> <head> <title>文章标题</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" conte

2018-12-25 11:35:22 217

原创 editorconfig常用配置

【通配符】* 匹配除/之外的任意字符串** 匹配任意字符串? 匹配任意单个字符[name] 匹配name中的任意一个单一字符[!name] 匹配不存在name中的任意一个单一字符{s1,s2,s3} 匹配给定的字符串中的任意一个(用逗号分隔) {n...

2018-12-25 10:43:17 4577

原创 代替for循环的常见问题

问题一:去除数组中的 false值const arrContainsEmptyVal = [3, 4, 5, 2, 3, undefined, null, 0, ""];const compact = arr => arr.filter(Boolean); compact(arrContainsEmptyVal);问题二:去除数组中小于等于2的数const arrContains...

2018-12-24 18:03:03 450

原创 工作中的git实际使用

创建分支名分支名统一格式:类型_任务编号_项目_模块_本次修改内容例如:feature/T123_stuapp_index_xxxxx //基本分支hotfix/T321_www_pay_xxxxxxx //修BUG分支release/T321_www_pay_xxxxxxx //测试分支git分支生命周期使用在开始一次新开发时,从master主...

2018-12-19 17:52:07 375

原创 mongDB update 修改器

mongDB 的update 修改器主要是用来修改,添加,以及删除数据使用:基本数据://链接到数据库var db=connect('youchen');// set修改器 ① ---直接添加数据db.test.update({'name':'马优晨'},{$set:{"sex":100,"age":100}});db.test.update({'name':'马优晨'},...

2018-12-19 17:09:07 84

原创 连接moogDB数据库

一、启动mongDB数据库二、查看有哪些数据库三、切换到某个数据库并查看下面有什么表四、连接数据库因为上面现在已经切换到了 log 数据库,我们现在可以去连接login这张表进行插值。var userName="mayouchen"; //声明一个登录名 var timeStamp=Date.parse(new Date()); //声明登录...

2018-12-19 11:08:52 414

原创 mongDB批量插值

一、启动mongDB数据库二、查看有哪些数据库三、切换到某个数据库并查看下面有什么表四、批量将数据插入到表中因为上面现在已经切换到了 log 数据库,我们现在可以去连接login这张表进行插值。var db = connect('log'); //链接数据库// 批量插入var startTime = (new Date()).getTime();/**********...

2018-12-19 10:55:36 104

原创 typescript继承和重写

类的继承和重写在这里通过一个例子,说一下typescript继承和重写 //父类 class Gege{ public name:string; public age:number; public sex:string; public constructor(sex:string,name:string,age:number){...

2018-12-18 11:59:43 15199

原创 typescript接口定义

接口描述:接口的使用,这里讲的是接口的使用 (其实就是定义一些规定)//数据接口interface Learn{ sex:string, infer:string, ha?:Boolean, //可选参数}//函数接口interface Say{ (name:string,sex:string):boolean;}let le:Learn = {sex:'m...

2018-12-18 10:54:45 886

原创 如何使用nginx

Nginx的优点支持海量高并发:采用IO多路复用epoll。官方测试Nginx能够支持5万并发链接,实际生产环境中可以支撑2-4万并发连接数。内存消耗少:在主流的服务器中Nginx目前是内存消耗最小的了,比如我们用Nginx+PHP,在3万并发链接下,开启10个Nginx进程消耗150M内存。免费使用可以商业化:Nginx为开源软件,采用的是2-clause BSD-like协议,可以免费...

2018-12-17 17:45:41 3989

原创 一个简单的if else优化

优化前优化后:

2018-12-17 17:39:46 1205

原创 typescript的命名空间

命名空间的作用防止变量冲突;构建大型项目时候大家可以分成不同的模块开发;命名空间写法命名空间可以将代码包裹起来,只对外暴露需要在外部访问的对象。namespace + 空间名;命名空间内的对象通过export关键字对外暴露;命名空间引入通过import可以引入这个模块,并且在在引用命名空间时,可以通过import关键字起一个别名命名空间实例namespace shuai...

2018-12-17 16:20:34 842

原创 每输入四个字符添加一个中划线

代码很简单,如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>test</titl

2018-12-14 11:31:51 577

原创 typescript赋值

TS支持像JS一样的对象赋值原始对象赋值let mayouchen = { name:'yoga', age:1000, eat:function(){ console.log("1234567890"); }}console.log(mayouchen.eat());//引用数据类型定义 array String Date RegExp引用类型...

2018-12-14 10:20:13 3124

原创 typescript的数据类型

TypeScript中的数据类型有:Undefined :Number: 数值类型;string : 字符串类型;Boolean: 布尔类型;enum: 枚举类型;any : 任意类型,一个牛X的类型;void: 空类型;Array : 数组类型;Tuple : 元祖类型;Null : 空类型。举例子:基本类型var age:number = 18;va...

2018-12-13 14:40:29 319

原创 Typescript常见三种函数类型

Typescript有常见三种函数类型:分别是普通的函数;有可选参数的函数;有剩余参数的函数;普通函数function findMan(age:number):string{ return 'find the '+ age + 'years'}有可选参数的函数function findPeople(age:number,name?:string):string{ if...

2018-12-13 14:23:38 2416

原创 element UI 制作模糊搜索框

如图所示,当你输入某个关键字时,去掉用某个接口,然后通过关键字获取数据。View Code<el-autocomplete class="inline-input" v-model="form.tName" :fetch-suggestions="querySearch" pl

2018-12-13 10:10:42 5142 3

原创 element UI 制作带快捷选项的时间选择器

如上图所示,带有快捷键的日期选择器:View Code<el-date-picker v-model="createTime" type="daterange" align="right" unlink-panels range-separator="to&

2018-12-13 09:48:02 2942

原创 使用vue-amap

(图一) 页面预览 :当前位置(红色 图标处)(图二)页面预览: 文字设置 + 弹框设置(图三) 搜索插件 + toolBar 插件(图四) 时间轴插件<template> <div class="amap-page-container"> <!-- 搜索框 --> <el-amap-search-box c...

2018-12-03 14:18:38 4607 2

jqueryGoToTop.zip

前端页面回到底部按钮,滚动超过一屏会出现,一屏幕内会消失,点击会将页面缓慢滚动到顶部,非常实用。可以替换滚动图标,可以设置滚动时间。

2020-06-22

ejs常用操作.zip

ejs数据处理,express数据处理,欢迎下载。数据渲染,数据遍历,引入文件,动态处理数据,数据转移和非转移 等等~~~~

2020-06-20

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除