欣欣博客_玉米_欣_CSDN博客-前端,js,框架领域博主

玉米_欣

码龄7年

于 2013-11-26 加入CSDN

获得成就

获得64次点赞
内容获得16次评论
获得81次收藏

荣誉勋章

兴趣领域

#前端

#JavaScript#前端框架#React.js#WebPack#面试#Vue.js#Node.js#ECMAScript 6#CSS#TypeScript#HTTPS#Flutter#小程序

TA的专栏

UI设计
1篇
前端
46篇
H5
7篇
js
21篇
开发工具
3篇
框架
11篇
移动端
5篇
项目
1篇
项目流程
1篇
微信开发
1篇
nodeJs
2篇
数据库
1篇
服务端
vue-js
1篇
用户行为分析
1篇
埋点
1篇
Mac
1篇
angular4
6篇
rollup
1篇
rxjs
1篇
typescript
1篇
积累
7篇
管理
1篇

vscode 设置打开新文件不覆盖前一个窗口

解决方法：1、ctrl/command+shift+p 快捷键打开输入 json 设置 ==> 选择首选项：打开工作区设置(json)2、在 json 设置中添加以下两行或将对应属性设置成 false/true"workbench.editor.enablePreview": false,"workbench.editor.showTabs": true...

发布博客于 1 月前

DOM事件中target和currentTarget的区别

target是事件触发的真实元素currentTarget是事件绑定的元素事件处理函数中的this指向是中为currentTargetcurrentTarget和target，有时候是同一个元素，有时候不是同一个元素（因为事件冒泡）当事件是子元素触发时，currentTarget为绑定事件的元素，target为子元素当事件是元素自身触发时，currentTarget和target为同一个元素。<body> <ul id="box"> <Li.

发布博客于 1 月前

只执行一次函数

只执行一次函数当实现支付，新增，保存等业务功能时，想要实现无论用户怎们点，我就执行一次的需求，那么我们就利用高阶函数的特性吧—函数作为返回值来实现吧。上代码function once (fn){ let done = false; return function(){ if(!done){ dont= true; fn.apply(this,arguments) } }}let pay = o

发布博客于 4 月前

标题跟随轮播切换

html <div class="box"> <nz-carousel [nzEffect]="effect" [nzAutoPlaySpeed]="'1500'" [nzAutoPlay]="true" (nzBeforeChange)="changeCarousel($event)"> <div nz-carousel-content *ngFor="let index of array"> .

发布博客于 4 月前

对比两个复杂的对象是否完全相等

对象的复杂程度{ attr1:{a:1,b:2}, attr2:'aaa', attr3:[1,2,3], attr4:[{abc:1,bcd:34,cd:'lalla'},{abc:134,bcd:55,cd:'lekif'}] .....}不考虑对象key的顺序实现代码diffObject(obj1, obj2) { if (!(obj1 instanceof Object) || !(obj2 instanceof Object)) {/* 判断不是对象 */

发布博客于 11 月前

angular6 实现全屏，退出全屏，监听esc事件更换相应图标

全屏和退出全屏注意error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.类似相关错误，处理办法//全屏const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement &a...

发布博客于 2 年前

angular6使用sockjs-client+stompjs进行websocket连接的方法

安装sockjs、stompjsnpm install sockjs-client --savenpm install stompjs --save引入import SockJS from 'sockjs-client';import Stomp from 'stompjs';使用 this.socket = new SockJS(`/iot-mdg/gs-topic-web...

发布博客于 2 年前

判断一个数组中是否存在某个对象（数组中有多个对象，此时给一个对象，根据对象中的某个key判断出这个数组中是否存在这个对象）

数组arr：[{name:'wang':age:18},{name:'zhu':age:21}],对象obj：{name:'yu',age:22}根据obj的name判断arr中是否存在objlet index=this.arr.findIndex((item)=>{ if(obj.name===item.name){ return true; ...

发布博客于 3 年前

判断一个数组中是否存在某个对象（数组中有多个对象，此时给一个对象，根据对象中的某个key判断出这个数组中是否存在这个对象）

数组arr：[{name:'wang':age:18},{name:'zhu':age:21}],对象obj：{name:'yu',age:22}根据obj的name判断arr中是否存在objlet index=this.arr.findIndex((item)=>{ if(obj.name===item.name){ return true; ...

发布博客于 3 年前

设置placeholder的颜色

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #000; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #000; opacity: 1; } input:-ms-input-placeholder { c...

发布博客于 3 年前

密码：大写字母小写字母数字特殊字符（四种里至少三种）

正则表达式：大写字母小写字母数字特殊字符（四种里至少三种）第一种：/((^(?=.*[a-z])(?=.*[A-Z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=.*\d)(?=.*[A-Z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=.*\d)(?=.*[a-z])(?=.*\W)[\da-zA-Z\W]{8,16}$)|(^(?=...

发布博客于 3 年前

前端小技巧日常积累

检查用户名是否合法$scope.check_name=function(data){ var reg = new RegExp(&quot;^[\u4E00-\u9FA5A-Za-z_0-9]+$&quot;); if(!data||!reg.test($scope.dialogDatas.mingcheng)){ $scope.is_regularname=true; ...

发布博客于 3 年前

李东朔讲OKR

管理体系是一个动态的生态系统要素人产品利润起源目标管理对于知识企业原来的管理阻碍了员工的能动性组织的上级管理者和下级管理人员共同确定组织的目标，根据对每一个人所预期的结果来规定他们的主要责任范围，并且利用这些指标来直到他们所管理的活动和评价每个成员做出的贡献。信念：每个人都想做好自己的工作，如果给员工创造一个适合的环境24个月8个季度2年OKR 核心：一个管理人如何...

发布博客于 3 年前

实现上移下移置顶置底效果

up down top bottom

发布博客于 4 年前

angular4系列之ViewEncapsulation

ViewEncapsulation

发布博客于 4 年前

Typescript（基础类型）

typescript 基础类型

发布博客于 4 年前

rxjs基础知识

发布博客于 4 年前

Rollup基础篇

发布博客于 4 年前

angular4系列之初识

angular4 初识

发布博客于 4 年前

angular4系列之动态创建组件

Angular如何在组件中动态加载组件

发布博客于 4 年前

angular4之父子组件之间的传值

angular4 组件之间的通信

发布博客于 4 年前

angular4系列之国际化

angular4 ie18n 国际化

发布博客于 4 年前

Mac 常用快捷键

Command+M: 最小化窗口Command+T: 在浏览器中打开新的选项卡Command+W: 关闭窗口Command+Q: 退出程序截图：全屏截图：Command+Shift+3, 使用快捷键后会马上截获当前的全屏。保存到桌面上区域截图：Command+Shift +4, 使用快捷键后会出现带坐标的瞄准器，拖拽选择要截图的区域。程序窗口截图： Command+Shift

发布博客于 4 年前

判断某年某月有多少天

判断某年某月有多少天的简便方法

发布博客于 4 年前

日期小插件

var flag = Array();var start = '2017-07-01'var end = '2017-08-01'SetFlag(start,end);for(var i=0;i<flag.length;i++){ console.log(flag)} //日期加上天数后的新日期 function AddDays(date,days){ va

发布博客于 4 年前

代码埋点

网站统计的基本流程首先，用户的行为会触发浏览器对被统计页面的一个http请求，这里姑且先认为行为就是打开网页。当网页被打开，页面中的埋点javascript片段会被执行，用过相关工具的朋友应该知道，一般网站统计工具都会要求用户在网页中加入一小段javascript代码，这个代码片段一般会动态创建一个script标签，并将src指向一个单独的js文件，此时这个单独的js文件会被浏览器请求到并执行，这个

发布博客于 4 年前

VueJs2.0入门--之后台管理系统（vue.js +vue-router+vuex+element-ui+axios）

步骤vue-cli npm i vue-cli -g 安装 element-ui npm i element-ui -S安装 vuex npm install vuex -s安装 axios npm install axios安装 scss npm install node-sass –save-dev npm install sass-loader –save-dev知识点

发布博客于 4 年前

nginx中的nginx.conf.default配置

转自：http://blog.csdn.net/github_26672553/article/details/51791506

发布博客于 4 年前

nodejs操作mysql数据库

0.准备首先安装mysql和navicat 配置：1.什么是数据库在应用中很多数据一定要保存起来，例如操作日志，用户信息，聊天记录（数据的重要性的体现）需要支持数据存储的容器，数据库主要就是当做数据存储的容器（可以将变量化（瞬时状态）的数据变成持久化数据）【游离状态：变量，计算机一关闭就小时了。持久化：变量转换成文件，永久存在】数据库原理：test文本就是一个最简单的数据库2.使用数据库

发布博客于 5 年前

nodeJS

1.什么是nodeJs基于Google浏览器的v8引擎，本质上是一个虚拟机，将用户写入的js编译成二进制去操作计算机底层是一门服务端语言，服务端主要作用是构建应用支撑和构建后台服务特点：单线程异步执行，支持高并发，通过异步回调函数拿到所有请求，如抢票。异步并发量比同步高上手简单涉足范围广2.es6方式写nodejs搭建nodejs es6环境安装：安装cnpm insta

发布博客于 5 年前

微信开发订阅号

1.申请微信个人公众号2.开通新浪云服务器因为微信中打开的页面必须要放在公网服务器上面3.获取微信的实例demo,包括php,node,java等版本index.php 写页面（php,jsp,asp,ejs）项目加载主页面(我们在这里进行调用微信接口开发)微信项目主页面,直接运行就可以看到主页面。 jsp 服务端模板引擎—-能够在html里面用其他语言写内容weixin.ph

发布博客于 5 年前

cordova

1.搭建cordova(phonegap)混合开发环境cordova需要虚拟机安卓或者iOS 1. 安装cordova到全局 cnpm install cordova -g 2. 创建cordova项目 cordova create MyApp 3. 给项目添加平台支持 - cd MyApp - cordova platform add ios 4. 运行项目 c

发布博客于 5 年前

Apache Cordova 3.x -- deviceready事件

Cordova框架中第一个应该掌握的就是这个deviceready事件。采用Cordova开发的应用在运行的时候，Cordova提供的通过HTML5调用Native功能并不是立即就能使用的，Cordova框架在读入HTML5代码之后，要进行HTML5和Native建立桥接，在未能完成这个桥接的初始的情况下，是不能调用Native功能的。在Cordova框架中，当这个桥接的初始化完成后，会调用他自身

发布博客于 5 年前

混合开发基础

1.混合开发的解决方案方案一：dcloud(hbuilder)国内一款通用的框架，性能比phonegap高方案二：phonegap（Adobe公司所出的将phonegap捐献给了Apache）,cordova最经典的一款混合开发的框架方案三：APICloud 编写都是在本地打包在云端方案四：react native 国外比较火方案五：WEX5方案六：微信里面做混合开发2.混合开发原理

发布博客于 5 年前

混合开发与第三方插件

1.掌握manifest.json使用一个项目的核心配置，比如原生app权限（核心功能模块，如果不选，功能无法实现），项目启动图片，项目默认图标 - 说明：替换元素以后，必须保存mainfest文件，之后必须打包成apk或ipa，安装到手机才可以2.如何往项目里面添加支持原生的第三方库在manifest进行修改，修改sdk(支持第三方的库)3.实现支付

发布博客于 5 年前

angular项目流程功能实现

1.项目结构：-----view-----controller-----service 公共方法的使用,主要封装一些常用api，面向于方法----model2.完成项目流程是什么？a:企业中项目实现流程①：实际的问题导致了需求产生②：企业核心技术（CTO 首席技术执行官）负责人或者产品（PM productmanager）对需求采取更深分析（CTO--找

发布博客于 5 年前

angular项目流程功能实现

angular项目流程功能实现1.项目结构—-view —-controller —-service 公共方法的使用，主要封装一些常用api,面向于方法 —-model2.完成项目流程是什么？a:企业中项目实现流程①：实际的问题导致了需求产生②：企业核心技术（CTO 首席技术执行官）负责人或者产品（PM productmanager）对需求采取更深分析（CTO–找产品部门沟通）。③

发布博客于 5 年前

Homebrew简介和基本使用

一、Homebrew是什么Homebrew是一款Mac OS平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令，就可以实现包管理，而不用你关心各种依赖和文件路径的情况，十分方便快捷。援引官方的一句话：又提示缺少套件啦？别担心，Homebrew 随时守候。Homebrew – OS X 不可或缺的套件管理器。二、Homebrew安装1. 要求

发布博客于 5 年前

angular依赖注入和路由

依赖注入：DI指的是将一个功能注入到另一个不相干的模块里面去，让这个功能变成这个模块的一个部分，叫做依赖注入，类似在一个功能模块里面调用另一个模块（模块化）只是模块化是在一个调用的里面主动去引入和查找另一个被调用的模块，而依赖注入是被调用者主动声明，并且将自己注入到调用者内部原因：为了将一些公共api封装起来，通过注入的方式进行调用angualrjs的依赖注入主要是由于将一些功能

发布博客于 5 年前

AngularJs入门

为什么要使用Angular Js1.产生的核心是为了解决数据绑定的问题2.提供了一套从前端到后端的解决方案以及自定义了一套事件标准3.提倡分层面进行开发，所以angularjs是一套MVC框架特性：1.MVC模式编程上讲2.模块系统3.指令系统4.依赖注入5.双向数据绑定从数据绑定上来讲是MVVM6.更适合做pc端项目，移动端不是很好如何使用angu

发布博客于 5 年前

Vue路由

基于vue-router实现组件化的页面切换如何进行组件化进行开发：1.将所有组件都拆分出来放在文件夹components里面。2.将项目涉及的每个页面看成是一个组件。3.然后在每个页面中引入需要构成视图的组件，将组件在该页面中嵌套成一个具体的页面。4.再通过入口文件进行加载和初始化。使用单文件组件实现组件化开发：规范：1.编码注释规范2.项目目

发布博客于 5 年前

尝尝nodeJs 的味道

nodeJs1.基本:nodejs基于Google浏览器v8引擎主旨：可以用js写服务端写服务端：编程方式：基于commonjs进行编程a: 编程时候：require nodejs 系统提供一些模块，比如说url模块见下文I:nodejs提供的模块：http,https,file(io)文件流读取，qs(用来做转换的模块),request(做代理的时候使用

发布博客于 5 年前

es6----知道()=>么

1.http-server启动服务安装一个服务：启动服务：检测本地是否支持Es6,在浏览器的控制台输入Promise：(因为Prom)开发环境里面使用es6用 webpack 作为转移工具，来写ES6 如果浏览器不支持，就用webpack可以转成es5要下载工具：node环境中下载：babelbabel-corebabel-e

发布博客于 5 年前

VueJs的组件化

组件化：目的：让页面的元素的使用性和复用性更高。使用：1.通过Vue.extend()声明组件2.将组件注册到Vue容器里面3.声明Vue管理边界定义：组件就是将一些html+css+js封装成了一个整体，通过整体之间嵌套实现页面构建1.声明组件：Vue.extend({}) 实现对象里面的一些参数达到组装组件过程Vue.extend()Vue是个构造

发布博客于 5 年前

VueJS

1.VueJS 目的：VueJs的产生核心是为了解决：a: 解决数据绑定的问题，b: vue框架产生的主要目的是为了开发大型单页面应用，c: 它还支持组件化，也就是可以将页面封装成若干个组件，采用积木式进行编程，这样使页面复用性达到最高（支持组件化）。2.VueJS 特性：I: MVVM模式（数据变量（model）发生改变视图（view）也改变，视图（view）改变，数

发布博客于 5 年前

模块化开发

1.什么是模块化？模块指的是具有相同属性和行为的事物的集合。在前端中，我们习惯将一些属性比较类似和行为比较类似的内容放在同一个js文件里面，把这个js文件称为模块。目的：为了分工及协作，使每个js文件只关注自身关注的事情，让每个js文件各行其职。解决了js之间相互调用问题2.什么是commonjs规范模块化指的就是遵守commonjs规范，解决不同js模块之前相互调用问题

发布博客于 5 年前

移动端布局

1.移动端布局方案：viewport 视口:表示的是当前所看到的屏幕的大小（浏览器）width=device-width 当前浏览器宽度和真实屏幕宽度一样的initial-sacle 页面加载当前浏览器和真实屏幕之间缩放比例2.主流移动端布局方式：(1)媒体查询：基于@media属性获取屏幕宽度，根据不同宽度加载不同的css实现---响应式布局(2)百分比：页面中任

发布博客于 5 年前

初步玩一玩zepto

Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery 。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API，所以你能把你主要的精力放到应用开发上。需要注意的是Zepto的一些可选功能是专门针对移动端浏览器的；因为它的最初目标在移动端提供一个精简的类似jquery的js库。你可以绑定以下四种Touch事件来了

发布博客于 5 年前

Webpack小教程

首先呢，我们先来认识一下它吧。。吼吼~webpack是一个module bundler,我们暂且管他叫“模块管理工具”。实现模块化的方法有很多，比如说使用script标签导入js模块，顺序不好把握且我们需要自己梳理可能的冲突和依赖；使用Commonjs规范来解决问题，它使我们在服务器端的模块得到了重用，但是在浏览器端，网络的请求都是异步的，无法并行的require多个module。

发布博客于 5 年前

Gulp.js入门小教程

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。方便极了哦~~cmd --- node -v (检查一下node是否配置好)--- 进入自己的项目路径比如 d: --- cd Documents\HBuilderProject\gulp--- 安装可以自动执行的组件 npm install gulp --- 接着安装 n

发布博客于 5 年前

H5元素周期表

还记得化学上的元素周期表么，现在是前端时代了呢，咱给来了H5周期表学学html5吧~~先看一下效果喽，还是比较方便的哦~~吼吼来共享一下代码吧~~ H5周期表--来自欣欣博客 html

发布博客于 5 年前

JS原生之-----带导航的轮播图jq版

带导航的轮播图jq版

发布博客于 5 年前

JavaScript中This到底指哪个对象?

JavaScript中This到底指哪个对象?

发布博客于 5 年前

JS原生之------放烟花喽

js原生烟花效果运动的运用

发布博客于 5 年前

JS原生之--圆周运动（转转转）

js原生实现球体的圆周（椭圆）运动

发布博客于 5 年前

JS原生之----滚动条

自定义滚动条，可滑可点可拖拽~~吼吼帅

发布博客于 5 年前

html+css小技巧大用处

1.用css border写下拉小三角：.sanjiao{ width:0;height：0； border-top:4px solid #ccc; border-right:2px solid transparent; border-left:2px solid transparent;} 2.图片设置右下边框，最外边框用外盒子边框

发布博客于 5 年前

小技巧小经验之-----居中

/*图片居中*/ dt{height:100px;width:100px;text-align:center;}dt span{ width:0;height:50%;display:inline-block;}dt img{vertical-align:middle;}/*span为参照物，只有inline-block类型可以用vertical-align这个属性

发布博客于 5 年前

JavaScript之----匿名函数、闭包

匿名函数匿名函数就是没有名字的函数(function () { alert("匿名函数（）");})//匿名函数的调用(function () { alert("匿名函数（）");})();(function (name) { alert(name);})("lis

发布博客于 5 年前

JavaScript之----继承

一：原型链继承继承是面向对象中一个比较核心的概念，ECMAScript只支持继承，不支持接口实现，而实现继承的方式依靠原型链完成。function Box(){ this.name="lee";}function Desk(){ this.age = 100;}Desk().prototype = new Box(); //De

发布博客于 5 年前

JavaScript之----面向对象和原型

ECMAScript有两种开发模式：1、函数式（过程化），面向对象（oop）【好处：有了引用类型的对象可直接调用这个对象对应的方法】任何一个事物都可以看成是一个对象1、创建对象var stu1 = new Object(); //小丽等于新老婆()；stu1.name="小丽";//属性name就是一个变量stu1.study =function(){

发布博客于 5 年前

JavaScript之--引用类型、作用域、基本包装类型、内置对象Math

引用类型例：function test(arr,str){ arr[0] =5; str = new String("world");}var arr1 =[1,2,3];var strs = new String("hello");test(arr1,strs);alert(arr[0]);//显示5

发布博客于 5 年前

JavaScript之---function类型--学习笔记

function类型在ECMAScript中，Function（函数）类型实际上是引用类型，每个函数都是Function类型的对象，而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的引用类型变量1、函数的声明方式： ①普通的方式：function fun(num1,num2){

发布博客于 5 年前

JavaScript之正则表达式捕获

接JavaScript基础学习笔记使用exec()方法返回数组包含了和正则表达式匹配的正则表达式var reg =/[a-z]+\s\d{4}/;var str = "hello 2020";reg.exec(str);捕获性分组，非捕获性分组var reg =/([a-z]+)\s(\d{4})/;var str = "hello 2020";alert(

发布博客于 5 年前

UI阅读笔记

“设计不仅仅是它的外观怎样或者感觉如何，而是它是如何工作的。——史蒂夫·乔布斯” “简洁是终极的复杂。——莱昂纳多·达·芬奇” “设计是一项计划，它将所有元素以最好的方式组织起来去完成一个特定的目标。——查尔斯·埃姆斯” 没有争论，就没有变革！ ● 用户仅在三秒内就能对你的页面做出判定● 为了吸引访问者的注

发布博客于 5 年前

如何做好UI设计

UI是User Interface(用户界面)的缩写，说起产品UI设计通常的认识就是“图形界面的设计”而产品的交互设计往往被忽略！一个好的交互设计对产品的成功起着很关键的作用。UI所做的就是用户最先接触到的东西，也是一般性的用户唯一接触到的东西。用户对于界面视觉效果和软件操作方式的易用性的关心，要远远大于他对底层到底用什么样的代码去实现的关心。如果说程序是一个人的肌肉和骨骼，那么UI设计就是人的外

发布博客于 5 年前

javascript基础学习笔记

编者寄言：本文主要为编者读书笔记，在文章里面很多话是掺杂了编者自己的见解，如果有哪里出现错误或者用词不严谨，请友善留言，编者会及时去更改。本文很多地方只是简单说了一下应该注意的地方，具体代码部分请自行上网查找，给您带来的困扰，非常抱歉。这篇文章的主要目的是给一些自学以及对 javascript刚刚入门的朋友提供一些从编码习惯方面的帮助，如果您觉得这篇文章对您有帮助，请给编者点赞留

发布博客于 5 年前

HTML5新增元素（下）

本文主要为编者学习笔记，在文章里面很多话是掺杂了编者自己的见解，如果有哪里出现错误或者用词不严谨，请友善留言，编者会及时去更改。这篇文章的主要目的是给一些自学以及对 HTML5 刚刚入门的朋友提供一些帮助，如果您觉得这篇文章对您有帮助，请给编者点赞留言，鄙人感激不尽。【接HTML5新增元素（上）】10、文件的保存：很多时候绘制完成的图片需要保存，那么我们就可以使用canvas AP

发布博客于 5 年前

HTML5新增元素（上）

一、新增元素1、header元素表示页面中的一个内容区块或整个页面的标题。 header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等。注意：一个页面内并没有限制header的出现次数，也就是说我么可以在同一页面内，不同的内容区块上分别加上

发布博客于 5 年前

HTML与 Css 基础知识

一相关概念HTML：Hypertext Makeup Language,超文本标记语言。XHTML：Extensible Hypertext Makeup Language,可扩展超文本标记语言HTML5：是第五次重大修改W3C：word wide web consortioum万维网联盟，创建于94年，是Web领域最具权威和影响力的国际中立性技术标准机构。WHATWG:We

发布博客于 5 年前