野草_前端-CSDN博客

原创微信小程序入门笔记（下）

经过了两个多月，项目完成上线。在这过程遇到了更多的坑，总结如下：微信的坑bindlongtap与bindtap同时有的时候，longtap会触发tap事件。但是从某个版本开始可以使用longpress，它不会触发tap事件。wx.showToast字数限制，大概不能超过7、8个字。仔细想一下也是可以理解的，因为toast是几秒之后自动消失的，文字太多用户也读不过来。wx.showModal按钮

2017-12-23 16:02:30 1917

原创微信小程序入门笔记（上）

目前项目正在开发中，总结地比较少，也不全，后续会更新。踩坑点scroll-view标签设置横向滚动时，需要以下设置设置滚动项display：inline-block; 设置滚动视图容器white-space: nowrap;滚动项不要用float背景图可以用base64格式，或者网络图片，不能用本地图片；本地图片只能用image标签，也就是说本地图片不能用作雪碧图image标签有默认的

2017-12-23 16:01:17 1599

原创【荐】Angular官方代码风格指南

本文为笔者对Angular官网风格指南的整理版本，删除／增加了部分内容。另外，原文对每个规范都作出了原因的解释，个别还有示例，需要的请点击查看原文。原链接：英文文档／中文文档单一职责单一文件一个文件定义一样东西，比如一个组件、一个服务、一个管道、一个指令每个文件最多不要超过400行单一函数定义功能单一的函数一个函数最多不要超过75行命名规范文件名采用feature.type.*

2017-12-23 15:59:59 1096

原创【荐】深入Angular自定义表单控件

推荐文章Maxim Koretskyi ： Never again be confused when implementing ControlValueAccessor in Angular forms 推荐理由在大型复杂的管理后台项目中，很有可能你会遇到需要自定义表单控件（Custom form control）。很多文章都介绍了此时应该定义ControlValueAccessor，也展示了

2017-12-23 15:58:30 2583

原创【2017年8月刊】Angular 散摘

前言：这是我在年中做自我总结的时候给自己定的新尝试，想法来源于@王下邀月熊的《前端每周清单》系列。但鉴于自己的知识面窄能力有限，就把内容限制在最近正在研究的Angular上了。本来取名叫《Angular前端月报》，想想自己能看的／理解的文章也不多，就改名叫《Angular散摘》。写这篇其实不太容易，肚子里没什么墨水，硬是把自己以前写的东西拉过来凑凑数，成了这样一篇，也算是给自己的一个交代。

2017-08-31 19:34:32 545

原创【荐】Angular 最佳实践

推荐文章Armen Vardanyan ： Angular: Best Practices 推荐理由作者根据自身的项目实践，总结出了一些Angular的最佳实践。主要包涵了TypeScript类型的最佳使用，组件的合理使用，通用服务的封装，模版的合理定义。

2017-08-30 09:32:01 1987

原创【荐】Angular如何防御XSS攻击

XSS攻击是比较常见的网站攻击方式，Angular框架也考虑到了这点，专门做了一些处理。本文就Angular如何防御XSS攻击做了简单介绍。

2017-08-18 17:02:59 5785

Angular开发者常常会犯以下的错误：框架名称：没有Angular 1和Angular 2，只有AngularJS和Angular。Angular的第三方库，建议用ngx-为前缀，而不是ng2-。因为Angular每6个月会更新一次，你懂的。。。ngOnChanges监听输入对象的变化，但仅限于它的引用，也就是说，如果对象的某个属性发生变化，Angular是不会触发onChanges的。解决方法：

2017-08-03 19:24:59 951

原创绘制随机不规则三角彩条——小谈EvanYou个人主页的实现

缘起最近感觉自己搭的一个项目资料汇总的项目，主页真的是一点美感都没有，非常简单粗暴。就想来点改版，让主页显得高大上一点。改版前的效果是这样的：寻思着怎么改版，刚开始想就简单加个背景图，换掉table显示方式吧。就在网上搜索背景图，搜着搜着就鬼使神差地来到了Evan You的个人主页。这不是我第一次看到他的主页，但正是这个契机让我想要不就copy这种风格吧。初印象当我第一次看到这个主页的时候，我觉

2017-08-02 11:55:23 3375

原创 Angular变化检测机制：改善的脏检查

前端展示的页面是由视图和数据共同构成的，视图模板定义了页面的框架，而数据定义了页面具体的显示内容。而数据发生变化的时候，我们需要及时将变化的内容更新到视图中，否则用户看到的数据就是不正确的。系统及时感知到数据模型的变化，然后通过计算更新到视图中，这是每个前端框架都需要解决的问题。这前一半部分就是所谓的变化检测。数据何时变化接下来的问题是，数据何时变化，哪些因素会引起数据变化？

2017-07-15 12:53:10 7058

原创 Angular4简单入门笔记

本文是笔者在学习开发过程中的总结输出，目的在于让初次接触Angular的开发者对该框架能有整体的认识，并且能快速上手开发工作。

2017-07-15 12:47:55 6875 2

翻译【译】手把手教你用ngrx管理Angular状态

本文将与你一起探讨如何用不可变数据储存的方式进行Angular应用的状态管理：[ngrx/store](https://github.com/ngrx/store)——Angular的响应式Redux。本文将会完成一个小型简单的Angular应用，最终代码可以在[这里](https://github.com/auth0-blog/pet-tags-ngrx)下载。

2017-07-08 17:34:39 19931 3

翻译【译】webpack正式发布v3.0.0

原文链接： webpack 3: Official Release!! 作者：Sean T. Larkin 翻译：野草发布webpack 2之后，我们就跟社区承诺：我们将发布大家投票出来的功能特性，而且会保证更快更稳定的发布周期。不会再有一年才出来的测试版本，不会再有不兼容的重大改变。我们承诺我们会保证大家的权益，因为你们才使得wepack如此欣欣向荣。现在webpack团队

2017-06-20 22:32:40 2004

翻译【译】理解Node事件驱动架构

Node中的绝大多数对象，比如HTTP请求，响应，流，都是实现了`EventEmitter`模块，所以它们可以触发或监听事件。 const EventEmitter = require('events');能体现事件驱动机制本质的最简单形式就是函数的回调，比如Node中常用的`fs.readFile`。在这个例子中，事件仅触发一次（当Node完成文件的读取操作后），回调函数也就充当了事件处理者的身份。

2017-06-09 09:47:54 1782 2

原创 JavaScript单线程异步的背后——事件循环机制

感觉这篇文章拖了很久，好尴尬的拖延症。刚接触前端的时候，知识面是支离破碎的，甚至我都不知道我不知道的，比如事件。现在，慢慢的，我知道我不知道的，比如事件循环机制。然后花时间去了解，就变成我知道我知道的。说实话，这个我也就朦朦胧胧知道了一点。正文从这里开始～～～说起JavaScript特性，单线程运行当然是其中很重要的一点。那什么是单线程，什么是多线程呢？单线程就是事件要一件一件地做，排在前面的事情没

2017-05-16 21:08:44 2131 2

翻译【译】现在是行动的最佳时机

原标题：今天你必须掌握你成败的三大原因 —— 你远比你想象的要厉害有件事情困扰了我很久，世界上最具天分最有创造力的人并没有得到应有的关注。可能你也注意到了。不论公平与否，事实就是最负盛名的艺术家、企业家或者发明家并

2017-05-15 18:58:26 546

翻译【译】谈谈产品视角：你的，还是我的？

关于本文：原文地址翻译地址译者：野草觉得有点作用的，欢迎去github点个赞，谢谢~~正文从这里开始~~~我的电脑图标还记得Windows桌面的我的电脑图标吗？这个小图标背后包含了你电脑中所有的资料，包括你所有的代码，所有的工作，所有数字化的你，是不是有点厉害？！微软在新版的Windows中将图标变成了计算机，然后又换成了此电脑。他们是因为“我的”一词具有误导性？还是觉得跟实际情况不符？

2017-05-05 18:00:20 413

原创如何搭建Swagger接口文档

Swagger是规范RESTful API服务的语言或者说工具，不仅可以用来定义接口，还可以测接口，一举两得。我不知道这个工具的流行程度如何，至少我知道的是网上的中文资料很少，也没有如何在实际中使用起来的教程。经过一两天的研究，总结一个简单的搭建手册。Swagger的核心工具主要为三个：Swagger-UI：API展示和测试页面Swagger-Editor：所见即所得式编辑工具Swagger-

2017-05-05 17:54:28 1114

原创 JS模块化简单实现

曾经花了一段时间去看RequireJS源码，虽然就两千行左右的代码，但原谅我的愚笨，真的有点看不懂。想想，还是自己实现一个再说。简单目标实现类似requireJS的功能，涉及到的功能// 定义模块，三个参数define(id, deps, factory)// 执行模块，两个参数require(deps, factory) 简单分析先上一个简单的例子，进行分析：require(['main']

2017-04-27 09:26:49 7143

翻译【译】Vue框架引入JS库的正确姿势

关于本文：原文地址翻译地址译者：野草在Vue.js应用中，可能需要引入Lodash，Moment，Axios，Async等非常好用的JavaScript库。当项目变得复杂庞大，通常会将代码进行模块化拆分。可能还需要跑在不同的环境下，比如浏览器，服务端。如何在各个模块和组件文件中引入需要的库呢？找到一种简单靠谱的方式，可以省去很多的麻烦。错误示范全局变量法最不靠谱的方式就是将导入的库挂在

2017-04-24 20:37:42 9885

翻译【译】JS继承常见误区扫盲

关于本文：原文地址翻译地址译者：野草什么鬼！！！当程序员遇到违反“最小惊讶原则”，违反他们直觉的时候，他们会不由自主地发出这句感叹！举个栗子： .1 + .2 0.30000000000000004 什么鬼！！！(+﹏+)~@当我遇到一些资深前端开发，却不知道JavaScript原型继承(Prototypal inheritance)的时候，我也情不自禁地发出“什

2017-04-16 22:37:31 484

原创小记JS模块化

有很长一段时间，我对JS模块化的概念就是处于模糊的状态。感觉自己的智商真的有点低。后来，突然发现模块化其实就是C++中的include功能，说白了有点像类的封装。茅塞顿开！！！本文就稍微整理下JS的模块化。模块化的背景当项目变得复杂，可能会出现的问题：命名冲突按需加载依赖管理问题于是就有了模块的必要性。除了解决以上两个问题之外，模块化还有的好处是：可维护性代码复用我们来看看目前有哪些解

2017-04-16 22:30:35 372

原创 Babel简单学习笔记

ES6出来很久了，项目中没有用到，我也一直没仔细去看。一直抱着先把ES5打扎实再说，然后时间在不知不觉中过去了。我还是了解地太少太少了。终于，开始踏出接触新知识的第一步了。Babel的作用就是将ES6代码转译成现代浏览器基本都支持的ES5代码。本文简单记录Babel的入门。文章较水，就是以自己的理解整理网上现有的一些资源教程，供自己参考。安装先把安装Babel命令行工具和预设置：npm instal

2017-04-16 22:28:37 1376

翻译【译】用Flow编写更好的JavaScript代码

关于本文：原文地址翻译地址译者：野草// 本文发表于前端早读课【第8**期】你是否经常在debug那些简单可避免的bug？可能你给函数传参的时候搞错了参数的顺序，或者本来应该传个Number类型的参数，你传了一个String类型？JavaScript的弱类型是这一类bug的罪魁祸首，静态类型语言中不存在此类bug。Flow就是JavaScript的静态类型检查工具，由Facebook团队于2

2017-04-01 16:45:43 6834

原创小记ES5和ES6的类

ES6中的类只是语法糖，它并没有改变类实现的本质。举个例子，在ES5中定义一个类：function Person(name) { this.name = name; }Person.prototype.sayHello = function(){ return 'Hi, I am ' + this.name;}而用ES6的写法重写一下，检测类型发现Person本质上仍然是函数：

2017-03-29 16:20:30 4775

翻译【译】成为一名函数式码农系列之六

你已经学了函数式编程相关的所有新知识，你可能开始困惑：“然后呢？我如何才能在我的工作中实践起来？”这得具体问题具体分析。如果你工作中用的是像[Elm](http://elm-lang.org/)或者[Haskell](https://www.haskell.org/)这类纯函数语言，那这些知识很容易就能运用起来。如果你只能用某种命令式语言（这种情况很常见），比如JavaScript，你还是能运用大部分我们之前

2017-03-28 21:18:28 573

原创前端开发中的地理定位问题小总结

项目中遇到地理定位的问题，没遇过不知道，遇过就发现这是个比较坑的问题。这个问题其实困扰了我挺久的，还不如一次性了解清楚。所以本文进行了一些小总结，先简单总结我看过的关于定位技术的资料，然后介绍前端开发中的可选定位方案，以及存在的一些问题。定位技术概念上很好理解，就是定位你在哪里的技术。常见的定位方式有基站定位，WiFi定位，IP定位，GPS定位等。基站定位基站是能进行信号交换的站点。手机能接受信号，

2017-03-23 16:24:58 19136 2

原创《一线大厂如何面试前端工程师》听后感

这是由三个人联合主讲的面试经验非技术帖。【康康的分享】——从平台的角度康康陈述得挺流畅，音色也不错。很书面化，像个正式的主持人。简历硬条件公司学校学历稳定性面试要点沟通能力学习能力解决问题能力面试流程2-3技术面hr面【winter的分享】—— 从面试者的角度小吐槽：温大神的ppt做得真的很一般。草根如何准备简历：成就：有成就的写成就公司背景学校背景发表论文开源

2017-03-23 16:07:38 3409

翻译【译】成为一名函数式码农系列之四

关于本文：原文地址翻译地址译者：野草本文发表于前端早读课【第882期】往期回顾：成为一名函数式码农系列之一成为一名函数式码农系列之二成为一名函数式码农系列之三柯里化(Currying)还记得上一篇我们讲的吗？当mult5接受1个参数，而add接受2个参数时，mult5和add 的函数复合遇到了麻烦。其实解决这个问题很简单，我们只需限定所有的函数只能接受1个函数。听起来有点难以接受？相信我，并

2017-03-23 10:05:30 274

原创你不知道的JS读书笔记5—原型继承

查阅了挺多资料，也看了很久。网上列了好些继承的方法，各种方法，比如原型式继承，原型链继承，组合继承，寄生式继承，寄生组合式继承等。我挺不喜欢这样的方法的，感觉像是背答案一下，我也不知道这名称是谁取。猜猜应该来源某本权威的书，网上有很多类似的博文。我就说说我能理解的部分，以及整理成我理解的方式。不当之处，欢迎指出！类继承面向对象设计语言中比较经典的概念就是继承，那继承是什么？

2017-03-17 14:30:44 380

翻译【译】关键渲染路径

关于本文：原文地址翻译地址译者：野草 // 本文发表于前端早读课【第8**期】有一个很经典的面试题：当你在浏览器输入一个网址并按下回车之后发生了什么？今天我们就来说说当浏览器从服务器获取了HTML文件之后经历了什么。事实上，从获取HTML文件直到浏览器以像素点的方式在屏幕中绘制出页面的内容确实经历了很多步骤，这些步骤我们称之为关键渲染路径(Critial Rendering Path)

2017-03-13 23:25:53 341

原创《编写优雅的前端业务代码》听后感

这场知乎live主要拿了一份现实工作中的业务代码进行一步步地优化分析。每个人的收获都是不一样的。我就以我的水平去总结一下这场live，也说说我的收获。原来的代码一共300行不到的js，用jquery写的。整个代码结构，就是前面定义少许变量，然后一堆函数，一堆事件的绑定，中间夹杂着几个函数的调用，算是初始化的功能吧。对这份代码的整体感受，代码格式整洁，有些注释，太多DOM操作，太多样式的计算看得有点眼

2017-03-12 11:14:42 3559

原创你不知道的JS读书笔记4—原型与原型链

JS中一提到面向对象编程，就避免不了谈到原型链，因为在JS中类的继承是基于原型链的。花了些时间整理原型，原型链，可能还是有点绕。不当之处，欢迎指出。简单例子我们先从一个简单的例子入手，尝试阐述这些概念。function Animal(name, species, n){ this.name = name; this.species = species || 'animal';

2017-03-10 17:20:25 309

原创你不知道的JS读书笔记3—对象与类

关于JS对象，我觉得大家应该再熟悉不过了。下面就总结一点我不算很熟悉的，或者需要注意的知识点。然后顺便提一下传统中的类，JavaScript是怎么模拟实现的。对象基础知识对象，是由无序的键值对组成，而且键是字符串。如果不是字符数据类型，会自动调用toString方法转化为字符类型。

2017-03-06 17:13:37 238

原创 JS事件简单总结

这个其实不是很好描述，有可能是由用户发起的，比如鼠标事件，键盘事件，窗口事件，表单事件，也有可能是页面加载资源过程中的事件。常见的事件比如：click, dbclick, keydown, keypress, keyup, mousemove, wheel, scroll, focus, blur, load, unload, abort, error, resize, change, select, submit。

2017-03-04 20:08:51 485

翻译【译】深入学习JavaScript闭包

闭包（closure）是JavaScript中最基本的概念，也是每个前端工程师都应该彻底掌握的概念。网上有很多教程，通俗易懂地解释了闭包的概念，却鲜有深入探讨闭包背后的机制和原理。笔者在工作中深有感悟，彻底地理解和掌握某个知识点的本质，会让你在工作中游刃有余。因此经过笔者深入地学习调研之后，本文全面而透彻地分析闭包的运行方式，以及运行背后的机制。

2017-03-03 18:56:36 289

原创 JS浅拷贝和深拷贝的小整理

这个话题应该是说大也大，说不大也不大。我就简单给自己总结整理一下。记得16届春招网易校招的最后一个笔试题，实现一个深拷贝。说这个话题之前，先扯一下JS的基本数据类型。大家都知道JS中的数据类型分为基本类型：string, number, boolean, null, undefined引用类型：Object，特殊的有Array, Function, Date

2017-03-01 22:06:49 877

原创数据双向绑定的分析和简单实现

简介自从Angularjs火起来之后，双向绑定经常被提及。双向绑定概念其实很简单，就是视图（View）的变化能实时让数据模型（Model）发生变化，而数据的变化也能实时更新到视图层。我们所说的单向数据绑定就是从数据到视图这一方向的关系。对于数据双向绑定，我们需要考虑的问题如下：如何监听页面View的变化？如何将View的变化更新到Model？如何监听Model的变化？如何将Model变化更新到View

2017-02-27 20:45:37 2116

原创 RegularJS资料整理

据说，RegularJS是基于动态模版实现的用于构建数据驱动型组建的新一代类库。结合了AngularJS的脏检查机制的数据双向绑定和ReactJS组件化的思想，用起来应该和VueJS差不多（因为我没用过VueJS）。RegularJS是极具网易特色的库，项目中在用，稍微研究研究。搜索了一下网上所有有关的资料，还真的不多。这是我能找到的所有靠谱资料。官网资料http://

2017-02-27 16:45:17 3541

原创你不知道的JS读书笔记2—this对象

本文是在《你不知道的JS》上阅读了其他的资料之后整理的。this是很重要的一个对象，它不指向它本身不指向它的作用域，它指向函数调用所处的位置。需要分析函数的调用栈，调用位置就是调用栈中当前函数的上一个函数。

2017-02-21 11:51:21 309

立方体投影

空空如也