- 博客(37)
- 收藏
- 关注
RSS订阅原创 每天十分钟学好ES6---新集合Set和Map
Set和map是ES6提供的新的数据结构，加上数组和对象，就有了4种数据集合，这4种集合都可以使用遍历器（Iterator）进行处理。一、SetSet类似于数组，但是成员都是唯一的，没有重复，也因为这个特性，可用来做特殊处理，比如去除数组重复成员等。Set本身就是一个构造函数，用来生成Set数据结构。1.1 Set基本用法让我们看一下let s = new Set()let s2 = new Set(['a','b','c','d','a'])// 元素个数console.log(s2.s
2021-07-02 16:42:27
202
原创 每天十分钟学好ES6--数组
es6的数组相关部分主要包括：扩展运算符公共api数组空位的处理其中公共api主要包括：Array.fromArray.ofcopyWithin、find、findIndex、fill、entries、keys、values、inclues我在数组这部分主要分享扩展运算符部分，公共api只需要参照官方使用方法即可很好的使用，空位的处理由于不够统一，所以建议数组使用时避免使用空位。一、数组的扩展运算符扩展运算符三个点…， 是rest参数的逆运算，将数组转为逗号分隔的参数序列con
2021-06-23 17:07:26
170
原创 每天十分钟学好ES6--function函数的扩展
es6中函数的扩展需要掌握的重点有：函数参数与解构赋值默认值结合使用rest参数箭头函数=>尾调用优化一、函数参数的默认值首先看一下函数参数默认值的一段代码：function foo ({x, y = 5}) { console.log(x, y)}foo({}) // undefined 5foo({x:1}) // 1 5foo({x: 1, y: 2}) // 1 21.1 es6函数默认值的写法有几个好处：比es5简洁阅读代码的人可以立刻意识到哪些参数可以
2021-06-23 15:36:50
214
2
原创 每天十分钟学好ES6--关于解构赋值的彩虹屁
解构赋值是es6中很简单实用的小语法，今天一定要给它吹一下彩虹屁。说他简单，是因为在es6规范中，排位在第二，也就是let和const之后就是他了，语法篇章也不多，还没说多少就开始说应用，应用的部分又说的很精彩。所以说解构赋值真的是既简单又好用，应用范围真的太广了，并且对于初识ES6的小伙伴真的很友好。首先让我们先看一下解构赋值的语法：let [a, b, c] = [1, 2, 3]let [head, ...tail] = [1, 2, 3, 4]let [x, y='1'] = [2]l
2021-06-10 15:51:48
146
原创 每天十分钟学好ES6--async和Generator是一对好基友
async 函数是ES7标准引入的一、什么是async函数1、async 让异步代码变得像同步代码一样返回一个promise对象promise对象的结果由async函数执行结果的返回值决定2、Generator 的好基友（语法糖）虽然说async函数是Generator函数的好基友，但是一点也不省油，首先让我们看一下它们的区别2.1 好基友的不同点通过下面两段代码可以发现，async函数就是将Generator函数的星号*替换成async，将yield替换成await// Gener
2021-05-19 15:26:19
119
2
原创 每天十分钟学好ES6--掌握Promise就是这么简单
为什么使用PromisePromise是异步编程的一种解决方案，比传统的回调函数和事件，更加合理和强大。有没有遇到过这种需求，一个请求完毕后才能发起另一个请求。这样的话另一个请求就要嵌套进前一个请求中了，一个两个还好，但想象下要是有四五个呢，那代码将会变得非常难看和难以维护（回调地狱）。而promise的出现正是要解决这个问题的。1、Promise的原理：Promise本身是ES6的一个内置类（注意它的开头字母大写），而它的作用就是保存一个异步操作，并提供相关的api去获取其异步操作的结果和设置多个
2021-05-18 17:33:36
134
2
原创 步步为营--深入研究react技术栈 系列二 (事件、组件性能优化)
一、React 事件处理React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:1、事件绑定属性写法React 事件绑定属性的命名采用驼峰式写法，而不是小写。如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)<button onClick={activateLasers}> 激活按钮</button>2、阻止默认事件在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为， 你必
2020-08-14 17:37:51
221
原创 步步为营--深入研究react技术栈 系列一 (jsx、组件、数据流)
一、React简介React 是一个用于构建用户界面的 JavaScript 库。把用户界面抽象成一个个的组件，通过引入jsx语法，复用组件更容易，同时保证组件结构清晰。React 特点专注于视图层React不是完成的MVC/MVVM框架，很多人认为 React 是 MVC 中的 V（视图）Vitual DOMReact把真实的DOM树转换成js对象树，也就是Vitual DOM，通过对DOM的模拟，最大限度地减少与DOM的交互，因此更加高效。每次数据更新后，重新计算Vitual D
2020-08-12 18:37:30
303
原创 手把手，从无到有精通小程序开发系列二(分包、自定义组件)
实战一、分包1.1 配置分包1.2 打包原则二、自定义组件2.1创建子组件2.2 组件传值2.3 组件间事件通信2.3.1 首先在父组件约定事件名2.3.2子组件绑定事件一、分包背景：2017.01.09 小程序上线时，微信限制了代码包不能超过1MB 大小，（现在是2M了）限制大小是出于对小程序启动速度的考虑，希望用户在使用任何一款小程序时，都能获得一种“秒开”体验。然而，2MB 的大小也限制了小程序功能的扩展，小程序业务的发展可能需要更大的体积。那么，能否有一种方案，在增加小程序包大小的同时，
2020-08-07 17:05:56
1087
原创 手把手，从无到有精通小程序开发系列一（基本框架、生命周期）
小程序入门1 小程序的由来2 小程序与普通网页开发的区别3 开始4 小程序配置文件4.1 配置文件4.2 主体文件4.2.1 app.json文件4.2.2 app.js 文件1 小程序的由来微信面临的问题是如何设计一个比较好的系统，使得所有开发者在微信中都能获得比较好的体验。这个问题是之前的 JS-SDK 所处理不了的，需要一个全新的系统来完成，它需要使得所有的开发者都能做到：快速的加载更强大的能力原生的体验易用且安全的微信数据开放高效和简单的开发这就是小程序的由来
2020-07-29 15:03:54
734
原创 手把手，从无到有带你用vue进行项目实战 系列二(cdn、gzip性能加速篇）
一、前言在系列一中桃子叔叔介绍了使用iview-cli构建项目框架并基于框架进行的相关改造，主要包括：路径规范dev-server配置启用热更新封装axios解决跨域需要温习的小伙伴请点击此处回顾手把手，从无到有带你用vue进行项目实战 系列一(搭建框架篇)二、问题经过以上的改造，已经能够满足基本生产开发的需求了，运行npm run dev便可以查看开发环境...
2018-08-14 20:41:55
5798
原创 手把手，从无到有带你用vue进行项目实战 系列一(搭建框架篇)
前言之前公司在vue使用上大多都是后台应用，使用的是iview-admin框架，加起来也做了不少的项目，整体的感觉是非常舒服，首先在ui方面：iview的ui清新简单，组件完整且没有坑，基本上各种情况都帮你想到，按照文档直接来就行。框架方面，iview-admin已经帮你集成好了包括router、vuex、i18n、sass或less、axios在内的诸多插件，并使用webpack...
2018-05-10 14:07:16
39454
8
原创 桃子叔叔为您解析webpack-dev-server主要的配置属性
webpack-dev-server 配置属性众所周知webpack-dev-server有三种配置方式，有配置文件方式、package.json方式和纯node的API实现方式，桃子叔叔推荐使用的是第一种：webpack.config.js输出对象中的devServer属性中写配置。其中的原因也是很简单，这种方式最有利于大型前端项目的部署和后期维护，为什么呢？balabalabala～～～～...
2018-04-25 17:56:49
11121
3
原创 可视化格式模型：css的浮动、定位、盒模型
桃子叔叔原创，转帖请注明桃子叔叔有话说： 在很多前端工程师的认知里，前端三剑客中js是重中之重，学好了js，掌握了spa框架和自动化工程化的一系列工具就无敌了，而往往忽略了css基础的知识，特别是平时忙于业务，随便问上一嘴，基本都是磕磕巴巴，很难像js一样了然于胸。桃子叔叔今天特意回头去看css最基础最重要但也是最容易忽视的部分，拿起来温习，希望可以和小伙伴们一起切磋，有任何...
2018-02-24 15:21:29
508
原创 javascript正则表达式知识点全面梳理
一、使用方式1、字面量模式var reg = /is/g全局匹配'is'2、构造函数RegExpvar reg = new RegExp('is','g');二者区别：正则表达式字面量始终共享同一个RegExp实例，而使用RegExp每次创建一个新的实例，如下面的代码：var re=null;for(var i =0;i&lt;4;i++){...
2018-02-08 18:06:40
604
原创 手把手，从无到有带你用vue进行项目实战 系列三(深入剖析vue篇）
相关链接：手把手，从无到有带你用vue进行项目实战 系列一(搭建框架篇)手把手，从无到有带你用vue进行项目实战 系列二（cdn、gzip性能加速篇）对Vue的解析主要分为简介、核心内容、组件、路由和状态管理四部分一、简介Vue.js主要有四个特点简单小巧 ： Vue.js压缩后只有17k 渐进式 ： 可以一步步有阶段的使用而不必一开始使用所有东西 响应式 ： 保持...
2017-12-14 15:42:40
5556
原创 Typescript代码实例解析
简介：TypeScript 是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法。语法特性类 Classes 接口 Interfaces 模块 Modules 类型注解 Type annotations 编译时类型检查Compile time type checking Arrow 函数 (类似 C# 的 Lambda
2017-09-21 12:03:27
3626
原创 全面理解Javascript的面向对象(二)--创建对象与继承
在前文全面理解Javascript的面向对象(一)中详细介绍了面向对象的主要知识点，可以帮助大家很细致的了解js面向对象的概念，本文作为补充，主要从对象的构建和继承的方式两方面进行分析。一、创建对象主要的几种方式1 工厂模式工厂模式抽象了创建具体对象的过程,用函数封装以特定接口创建对象的细节。function createPerson(name,age,job) { var o = new
2017-04-18 20:50:04
377
原创 前端性能优化 -- 14个最佳实践
如今浏览器能够实现的特性越来越多，并且网络逐渐向移动设备转移，使我们的前端代码更加紧凑，如何优化，就变得越来越重要了。 开发人员普遍会将他们的代码习惯优先于用户体验。但是很多很小的改变可以让用户体验有个飞跃提升，所以任何一点儿小小的优化都会提升你网站的性能。 前端给力的地方是可以有许多种简单的策略和代码习惯让我们可以保证最理想的前端性能。我们这个系列的主题就是要告诉你一些前端性能优化的最佳实践，只需
2017-04-18 10:46:47
5234
6
原创 Angular2 入门教程
一、 入门1、初识Angular2写一个Angular2的Hello World应用相当简单，分三步走：引入Angular2预定义类型import {Component,View,bootstrap} from "angular2/angular2";import是ES6的关键字，用来从模块中引入类型定义。在这里，我们从angular2模块库中引入了三个类型： Component类、View类和
2017-04-17 19:37:28
8184
2
转载 深入理解 CSS3 弹性盒布局模型
深入理解 CSS3 弹性盒布局模型Web 应用的样式设计中，布局是非常重要的一部分。布局用来确定页面上不同组件和元素的尺寸和位置。随着响应式用户界面的流行，Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率。响应式用户界面设计中最重要的一环就是布局。需要根据窗口尺寸来调整布局，从而改变组件的尺寸和位置， 以达到最佳的显示效果。这也使得布局的逻辑变得更加复杂。本文介绍的是
2017-04-12 16:54:50
576
原创 9个必须掌握的Javascript处理数组的方法
一 迭代方法ES5为数组定义了5个迭代方法，这些方法大大方便了处理数组的任务，支持这些方法的浏览器有 IE9+,Firefox2+,Safari3+,Opera9.5+和Chrome。1 every对数组中每一项进行给定函数，如果每一项都返回true，则返回truevar numbers = [1,2,3,4,5,4,3,2,1];var everyResult = numbers.every(fu
2017-04-07 10:21:44
8991
1
原创 全面理解Javascript的面向对象(一)
由于Javascript的各种设计模式在实现上和传统的面向对象语言的实现相差很大，初学者或者后端转前端的小伙伴刚开始接触js时会一头雾水，本文把js重要的几个点摘出来，更简单直接的帮助大家去理解js的面向对象和实现。文中除了对基础知识的介绍外，最大的篇幅用来介绍高阶函数及其应用。因为在js开发中闭包和高阶函数应用很多，许多设计模式也是通过闭包和高阶函数实现的，理解好闭包和高阶函数，有助于继续学习js
2017-03-31 10:02:42
1289
原创 从无到有构建angular1框架
既然是从无到有构建angular1 的框架，就要首先从angular的基本知识说起，本文将从以下几个方面介绍：Angularjs 技术框架 指令集Service、Route Application由于angular1和angular2是完全不同的两个框架，angular2在性能提升等方面都做了很多改进，有想了解ng2朋友可以查看博客：从无到有构建Angular2 后台管理系统的前端架构博客中
2017-03-08 10:49:14
7014
原创 从无到有构建Angular2 后台管理系统的前端架构
该项目很久已不做维护，谢谢大家的支持 最近公司的项目需求，需要设计一套后台管理系统的前端框架，我使用了Angular-cli构建Angualr2的模板，并按照需求，添加了ng2-charts/ng2-smart-table/file-upload等ng2的插件，项目的源码地址在：https://github.com/taoziUncle/ng2-admin-master项目的结构如下：...
2017-03-07 17:09:56
17842
15
原创 js高级提升（一）数据类型
一、undefined/null/NaN1、undefined1）当使用var声明变量但未初始化就是undefinedvar message;alert(message); //undefinedalert(typeof message); //undefined2)尚未定义的变量不是undefinedalert(age); //报错2、null表示一个空指针对象aler
2016-12-20 18:16:48
891
原创 gulp学习笔记（二）gulpfile文件示例
安装依赖npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev提醒下，如果以上命令提示权限错误，需要添加 sudo 再次尝试。新建gulpfile文件现在，组件都安装完毕，我们需要新建gulpfile文件以指定gulp需要为我们完成什么任务。gulp只有五个方法： task ， run ， wa
2016-11-22 20:32:47
751
原创 gulp学习笔记（一）轻松入门
一、简介1、介绍What is gulp?gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。 gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript、coffee、sass、less、html/im
2016-11-22 20:30:44
396
原创 javascript 代理模式
代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。实例一、图片懒加载图片懒加载是指，图片的加载应该在页面全部加载完后，再去加载。这样能够提高加载的速度和网页的体验性。实际操作就是，将原来网页的src独立出来，将原来图片使用一个loading.gif代替，然后在js里面手动创建个img去加载这个src，当加载完后把src替换就可以了。var myImage=(funct
2016-05-24 17:28:02
787
原创 javascript策略模式
在程序设计中，经常遇到一个功能有很多方案可以选择，一个过程下有很多条件分支。最初的实现方案是对每个情况用if－els判断，如下：var calculateBonuw=function(level,salary){ if(level=='s'){ return salary*4; }el
2016-05-24 14:45:54
455
原创 javascript中的this、apply、call
1、js的值总是指向对象，具体指向哪个对象是在运行时给予函数的执行环境动态绑定的。this指向大体分为4种：作为对象的方法调用作为普通函数调用构造器调用call、appy调用首先看一下下面的例子：window.name="nikon"; var myObject={ name:'stven',
2016-05-23 22:23:00
367
原创 js中undefined,null,NaN的区别
1. js中undefined,null,NaN的区别js中undefined,null,NaN的区别类型分析：js中的数据类型有undefined,boolean,number,string,object等5种，前4种为原始类型，第5种为引用类型。var a1;var a2 = true;var a3 = 1;var a4 = "Hello";var
2016-05-23 22:21:00
305
原创 javascript原型模式
在原型变成思想中，类并不是必须的，对象并不一定要从类中创建，一个对象通过克隆另一个对象而得到。1、原型模式实现的关键是语言本身提供了clone方法，es5提供了Object.creat方法。如下：var Plane=function(){ this.blood=1000; this.attackLevel=1; thi
2016-05-23 20:54:53
395
原创 javascript 闭包详解＋示例（一）
闭包形成与变量的作用域及变量生命周期密切相关1、变量的作用域当在函数中声明一个变量，如果之前没有带上var，这个变量会变成全局变量，全局变量容易造成命名冲突。在js中，内部变量可以看到外部变量，外部变量无法看到内部变量，变量的搜索是从内到外的var a=1;var func1 = function(){var b = 2;var func2 = function(){
2016-05-23 14:42:01
602
原创 前端性能优化
如今浏览器能够实现的特性越来越多，并且网络逐渐向移动设备转移，使我们的前端代码更加紧凑，如何优化，就变得越来越重要了。 开发人员普遍会将他们的代码习惯优先于用户体验。但是很多很小的改变可以让用户体验有个飞跃提升，所以任何一点儿小小的优化都会提升你网站的性能。 前端给力的地方是可以有许多种简单的策略和代码习惯让我们可以保证最理想的前端性能。我们这个系列的主题就是要告诉你一些前
2016-05-22 11:33:19
8144
翻译 前端性能优化－－预加载技术
当我们谈到前端的性能时，总是会提到比如合并、压缩、缓存或者在服务器上开启gzip之类的，目的都是为了让页面加载的更快。资源预拉取（prefetch）则是另一种性能优化的技术。通过预拉取可以告诉浏览器用户在未来可能用到哪些资源。Pre-fetching会提示浏览器那些未来一定或可能使用到的资源，有时在当前页面见效，有些则在未来可能打开的页面生效。 作为开发者，我们比浏
2016-05-22 09:56:40
14994
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人