- 博客(80)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 ReactNative 最新教程
2018年8月 ReactNative 最新教程第一次尝试录制视频教程，希望大家会喜欢。还是希望大家多多支持，给我多提提意见。感谢感谢视频地址 https://i.youku.com/i/UNDQwODE3NTU3Ng==/playlists?spm=a2hzp.8244740.0.0...
2018-08-29 09:50:11
1775
原创 如何追踪线上的 js 错误
前情提要这个问题从我接手的第一个项目开始就遇到过这个问题，那时候还是在游戏组实习，就听隔壁前端组的大喊大叫，为什么有用户反应又出了什么什么问题，怎么又又用不了了。程序员小哥很淡定的说：“用户用什么浏览器？怎么重现？”。这个问题对于程序员来说是比较常见的，可能潜意识里面很难理解，竟然有用户不知道自己用的是什么浏览器。然后客服就去沟通用户。用户反馈：“啊，不就是手机自带的浏览器！”程序员：“他用什么手机？什么版本，安卓还是ios，安卓版本多少？发生错误之前都做了什么操作？”客服：“？”用户：“？”
2021-06-08 18:10:32
831
2
原创 2019最新ios开发教程预告（一个web前端怎么学ios开发）
工作需要，想掌握ios开发，看了看教程，比较多的都是oc。虽然有些c语言基础，但是写js这么多年了，基本上其他语言都不会写了。还好官方出了Swift，也是一个脚本语言，估计上手比较简单吧。所以… …嗯，是的我还没看，但是后续我会写一个专栏来教你，如何学习ios开发。嗯，是的，一个零基础的人教你如何零基础开发。感觉挺愚蠢的。当然，如果我没学会的话，那就没有后续了。...
2019-10-24 17:48:56
490
原创 如何做性能优化
概况在前端开发中，最常面对的一个问题就是性能优化，所以这里整理了一部分的方法和工具，保证你的网站快速加载，以避免用户下载。当你构建现代Web网站时，包括pc端和移动H5，如果你要快速并保持快速，那么衡量，优化和监控是非常重要的。性能在任何在线网页能否成功中起着重要作用，因为高性能网站比表现不佳的网站更好地吸引和留住用户。网站应专注于优化用户体验。像Lighthouse这样的工具会突出显示这些...
2018-11-13 09:32:59
485
原创 源码共读-UMI-4 test help
接上一个博客源码共读-UMI-3，接下来，我们来继续执行 umi test 从第一个博客中我们知道，执行umi test会执行lib/scripts/test.jslib/scripts/test.jsimport test from '../test';const args = process.argv.slice(2);const watch = args.indexOf(...
2018-05-21 17:27:19
1193
原创 源码共读-UMI-3
接上一个博客源码共读-UMI-2，接下来，我们来继续执行 umi generate 从第一个博客中我们知道，执行umi generate 会执行lib/scripts/ generate.jslib/scripts/generate.jsimport yParser from 'yargs-parser';import generate from '../generate';...
2018-05-07 18:35:10
1353
1
原创 源码共读-UMI-2
接上一个博客源码共读-UMI-1，接下来，我们来继续执行 umi build 从上一个博客中我们知道，执行umi build 会执行lib/scripts/ 下面对应的js文件，即此处为build.jslib/scripts/build.jsimport chalk from 'chalk';import yParser from 'yargs-parser';import bu...
2018-05-01 22:07:55
2341
原创 源码共读-UMI-1
#!/usr/bin/env node声明文件执行环境 nodeconst spawn = require('cross-spawn');const chalk = require('chalk');chalk是一个颜色的插件const script = process.argv[2];const args = process.argv.slice(3);pr...
2018-04-28 18:38:48
1939
翻译 设计系统
Designing Systems设计系统在我的上一篇文章中，我解释说，作为一名开发人员，您并不创建应用程序，而是创建系统，即对其环境做出响应的活实体（浏览器、服务器、……）。在这篇文章中，我将描述一个为了创建系统您可以遵循的过程。这个过程是受到了Donella H.Meadows的出色工作的启发，B-Method是我在大学里学过的，并且是领域驱动设计。这个过程由5个步骤组成：
2018-01-23 15:48:22
488
翻译 用JavaScript进行系统思考
用JavaScript进行系统思考每次我需要修复一个bug，我都遵循相同的工作流程：当QA团队中的某个人发现了一个bug，她/他就会给我发送一个bug报告，其中包含了重现问题的步骤。如果我不懂STR，我通常会去找她/他，这样她/他就可以在她/他的电脑上给我看bug。这种工作流在许多公司中似乎相当常见，我经常对自己说，在bug发生之前，它必须有更好的方法来获取应用程序的上下文。动态绑定
2018-01-22 15:28:19
356
原创 一个Angular的开发脚手架
Oniangular一个Angular开发的脚手架，前端UI框架使用NG-ZORRO，服务端用koa2。 相关技术：Angular2、Koa2、NG-ZORRO等。 项目使用的是Angular5，这里用Angular2代称是便于关联网友搜索。 github地址：https://github.com/xiaohuoni/angular 求星星实际解决问题Angular2 项目上线（常用的是编译
2017-12-12 22:16:06
1948
原创 Angular最新教程-第十四节 指令 结构型指令 属性型指令 自定义指令
在 Angular 中有三种类型的指令： 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。组件组件就是拥有模板的指令，这个我们在第五节编写第一个组件中就已经牛刀小试过了。 入门的内容就那么多的，不了解的还是回去再简单的看看。结构型指令结构型指令就是通过添加和移除DOM元素改变DOM布局
2017-10-13 11:48:25
2246
原创 Angular最新教程-第十三节 管道Pipes 自定义管道
自定义管道运行ng generate pipe pipes/cny-currency 因为自定义管道使用的比较少，所以我们把管道都新建到pipes文件目录下。 打开\src\app\pipes\cny-currency.pipe.ts 这里我们编写了一个简单的管道，在输入的前面加上人民币符号，输出。 这里应该都很好理解，name是我们在html中使用的名字。 transform是
2017-10-09 14:59:02
721
原创 Angular最新教程-第十二节 管道Pipes 内置管道
管道就是将输入的数据->通过某种转换->输出期望的值。 最常见的就是把服务端下发的时间戳转化成前端需要的时间字符串。 比如服务器下发的时间是1507519139， 而我们需要展示的时间是2017/10/9 11:18:59， 或者2017-10-9 11:18:59类似这样子的字符串， 就可以使用管道。内置管道Angular中提供了一部分常见的内置管道。DatePip
2017-10-09 14:23:09
4108
1
原创 Angular最新教程-第十一节 路由四 （嵌套路由）
今天我们继续来看路由。 嵌套路由的使用还是蛮频繁的，使用场景场景一： 商城类应用会有大分区里面的小分区， 虽然也可以靠携带不同的路由参数来识别， 但是他们都在同一个视图里面，就会有一个很明显的问题。 有的分类内容比较多，列表很长，有些分类内容比较少，列表很短。 当从内容丰富的分类切换到内容很少的分类的时候， 会出现，内容很少的页面，下半部分会有一大片的空白。 滚动条也保留在原来的位置
2017-09-29 11:06:02
2046
原创 Angular最新教程-第十节 路由三（路由器钩子函数、路由守卫）
我们在实际开发中，会有这样一种场景。 有些页面是允许访客登录的，有些页面是强制用户登录的。 后者，我们希望当用户没有登录的时候，无法直接进去页面， 而是先跳转到登录页面，或者先给出让用户登录的提示。路由守卫两种方法选一种就好了，文件名有冲突哦。推荐第二种。 方法一： 在src/app目录下新建guards文件夹 在src/app/guards目录下新建login.guard.t
2017-09-28 17:51:03
1986
原创 Angular最新教程-第九节 路由二（路由策略、base标签、路由参数）
路由策略我们上一节课中提到了{provide:LocationStrategy,useClass:HashLocationStrategy} 上一节课中我们说明了html中传统的锚标示路由。 这里我们再看新的路由的另一种实现方式了。 是HTML5的新规则，在不需要刷新页面的轻快下，允许在代码中创建新的浏览器记录并显示适当的URL。 简单的说，就是你可以用代码修改地址栏的URL而不刷新页
2017-09-28 15:30:37
1263
原创 Angular最新教程-第八节 路由一（路由配置）
Angular之所以被称为单页面应用，就是因为我们在改变浏览器URL的时候， 不触发刷新当前页面的行为，我们看到的所有的界面，其实是在一个主URL中。 这个功能（功能？现象？表现？随便吧！）就是通过路由实现的。 下面我们先简单的看一个关于路由的例子。 当我们点击上面的导航栏时，当前页面的地址会变成类似http://localhost:63342/test.html#about 尾部带的
2017-09-28 12:11:23
1761
原创 Angular最新教程-第七节HTTP get post 设置头部 跨域访问
和angular1一样angular4要是有http库，用来调用外包的API。 为了不使发起的请求，导致当前进入等待而没有响应，HTTP请求都是异步的。 这个之前我们聊过类似的，JavaScript中的异步处理方法。 1、callback回调的方式。 2、promise，这个可以参考我很早之前的一篇博客。http://blog.youkuaiyun.com/onil_chen/article/detai
2017-09-27 11:01:06
11768
原创 Angular最新教程-第六节编写响应式导航栏
这节课我们讲解如何使用bootstrap 4 编写响应式布局。 参考图我们还是参照Angular中文社区http://www.angularjs.cn/ 图中标注红色的部分，我自己不是很喜欢，所以做了一点小改动。 他这里也没有做响应式布局，所以样式就不抄他的，我们自己重写。 首先我们先简要的分析一下这个navbar。 整体是一个黑色的navbar。 参考代码：<nav class="
2017-09-26 14:19:18
4865
1
原创 Angular最新教程-第五节编写第一个组件
讲了四节了，一行代码都没有敲，虽说磨刀不误砍柴工，但我们也是时候，上场砍点啥啦。 今天我们就来编写我们的第一个组件，效果图如下。 首先我们使用angular-cli的generate命令来帮我们自动化创建组件。 $ ng generate component site_status 通过分析效果图我们知道了我们有8个数据需要绑定到页面上。 我们先打开src\app\site-sta
2017-09-22 16:01:23
1465
原创 Angular最新教程-第四节详细说明初始化项目
首先我们打开我们新建的项目。 我们先来看一下新建项目的目录结构。查看项目目录结构src文件夹你的应用代码位于src文件夹中。 所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。 这个文件夹之外的文件都是为构建应用提供支持用的。 根目录src/文件夹是项目的根文件夹之一。 其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下，和src/平级。 运
2017-09-20 15:07:12
1597
原创 Angular最新教程-第三节在谷歌浏览器中调试Angular
这节课，我们将要了解的是如何使用VS Code安装Chrome扩展对Angular进行调试。步骤一：确保环境确保将谷歌浏览器安装在其默认位置。 确保在VS Code中安装了插件：Debugger for Chrome 使用npm在全局范围内安装了angular/cli （我们第一节课中就讲过这个了，你也可以在确认一下。Windows用户快捷键win+r ，输入 ng -v） 使用angular
2017-09-13 11:56:52
11080
1
原创 Angular最新教程-第二节使用git、svn和码云做版本控制
上一节课我们已经创建了一个新的项目， 这节课我们了解一下如何创建码云（https://git.oschina.net/）管理我们的代码。 在工作中，不管是自己一个人开发，还是团队开发，都会涉及到版本控制。 比较常用的版本控制软件有svn和git。 （如果你会使用git，会版本控制，那你就不需要在往下看了。git clone这个地址https://git.oschina.net/xiaohuO
2017-09-12 10:43:30
1524
原创 Angular最新教程-第一节环境搭建和新建项目
步骤一：安装开发环境在开始学习angular之前，我们要先设置好开发环境。 一般现在的的开发环境基本上都是nodejs， 因为基本上都有使用了nodejs的npm管理和安装依赖包。 如果你的电脑上已经安装过nodejs，那你可以现在命里行中输入node -v 和 npm -v查看他们的版本。 angular 要求node 6.9.x 和 npm 3.x.x 以上的版本。 如果你电脑上的
2017-09-11 16:33:37
2274
原创 全栈工程师之路-中级篇之小程序开发-入门教程完结报告
首先，说说小程序开发的完结，基本上的东西，在我们前面的章节中，都已经提到过了。我觉得掌握这些内容，足够你开始开发小程序了。接下来，就要我们根据实际的项目需求去实现了，如果遇到教程中没有提到的东西，可以查阅官方的API，也可以在公众号后台联系我，或者联系我本人微信号，联系方式在左侧的侧边栏里面有。源码在码云https://git.oschina.net/x
2017-09-07 09:39:44
1159
原创 全栈工程师之路-中级篇之小程序开发-第三章第五节获取用户权限、下载文件、保存到相册、用户拒绝授权重新授权
继上一节课，我们已经简要说明了将图片保存到相册的流程和方法。 这节课我们围绕这个问题，展开讲解获取用户权限，将网络图片下载到临时文件，最后保存到相册。获取用户权限 wx.authorize 使用方法如下：// 可以通过 wx.getSetting 先查询一下用户是否授权了wx.getSetting({ success(res) { if (!res.aut
2017-09-06 10:13:30
5973
3
翻译 在JavaScript中includes()和indexOf()的比较
ES2016 规格包括数组数据结构的 includes() 方法。 Includes() 方法检查是否数组包含某些元素，返回 true 或 false 。 但在 ES5 我们习惯于执行操作 indexOf （） 方法。
2017-09-05 17:11:40
2208
原创 全栈工程师之路-中级篇之小程序开发-第三章第四节点击查看大图，保存壁纸
由于获取详情那些接口的豆瓣API，都有权限限制。 所以，电影详情页面和电影搜索页面我们就不做了。 接下来我们来看一些还蛮实用和有趣的小功能。点击查看大图wx.previewImage我们在moviecard模板中加入点击事件。 如图所示，详细的在前面的章节中已经讲解过了。 然后在index.js中加入点击查看大图的函数 保存预览，点击首页的电影的图片。 我们可以
2017-09-05 09:41:26
1047
原创 全栈工程师之路-中级篇之小程序开发-第三章第三节正在加载，loading状态
继前一篇文章，我们已经实现了小程序中的上拉加载和下拉刷新， 如果用户网络较差的情况下，或者服务端返回处理的情况下， 那么我们的页面在这段时间内没有等待提示。 或者服务端返回数据之后，我们的页面又好像突然之间出现的， 这整个过程中的用户体验并不是很好，不理解什么是用户体验的， 那可以换一种方式，就是说整个过程让使用者觉得并不是很舒服。 所以通常在请求发起到请求响应的这个过程中，我们会加入l
2017-09-04 10:25:29
3663
原创 全栈工程师之路-中级篇之小程序开发-第三章第二节小程序下拉刷新，上拉加载
今天就直入主题吧！调试技巧这里讲一个调试的技巧，因为这个页面是我们点击了首页的更多才进入的，并且他需要携带参数。 所以我们在左侧工具里面 注意点击的是图中红色框框标记的位置，这是一个自定义按钮。 写上路劲和参数就可以了，这样每次启动就是直接携带参数的进入这个页面了。这样也不用反复去修改json文件。上拉加载首先我们先编写一下moviemore的页面。 在头部引入搜索按钮，记得在wxs
2017-08-30 13:44:16
993
翻译 像数组一样使用NodeList：一个对象组合的有效用法
场景我是用querySelectorAll()查询了一些标记，并收到了一个NodeList响应。问题节点列表类似于数组。（比如：他们都有一个长度属性，它们都在括号中的索引访问它们的属性或者子元素：NodeList[0]）尝试使用.map,.filter或者.forEach中的任意一个方法。方法各不相同的选项。从循环便利到数组填充还可以使用更简单的es6方法：var elements = [... n
2017-08-29 10:48:39
2030
原创 全栈工程师之路-中级篇之小程序开发-第三章第一节页面跳转及参数传递，跳转到更多页面
继上次教程结束之后，我们的小程序已经完成到如下程度了。 如果你是一个零基础的开发，只要跟着这个教程一步一步完成的，你就能完成这样的界面优美是不是很容易啊。 但是，完成前两章，我们只涉及到页面的编写，很少涉及到页面的功能，那么这一章，我们的主要任务就是编写一些简单的页面逻辑。 我们要实现的是点击上图中的更多，跳转到查看更多页面。 首先我们还是先创建查看更多页面，在json文件中，直接添
2017-08-28 15:20:32
857
原创 全栈工程师之路-中级篇之小程序开发-第二章第七节个人中心
今天我们接着编写个人中心页面。 首先我们编辑上半部分的内容。 部分内容在之前的课程中已经有涉及了， 所以这里有写部分直接上代码咯。 编写页面的基本元素user.wxml <view class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></
2017-08-24 14:57:19
619
原创 全栈工程师之路-中级篇之小程序开发-第二章第六节tabBar详细说明
首先我们新建一个界面，还记得新建界面的快捷方式吗？ 在app.json的pages里面，新增”pages/user/user” 即 "pages":[ "pages/index/index", "pages/logs/logs", "pages/user/user" ], ctrl+s保存。小程序在检测到没有user目录的时候，就会自动创建相关的文件。
2017-08-21 10:58:42
507
原创 全栈工程师之路-中级篇之小程序开发-第二章第五节小程序中的Promise
上一节课最后，我们遇到了一个警告。说我们太过频繁的调用serData了，因为我们这个页面的三部分数据是通过三个接口获取的。所以我们分别在三个接口返回的时候调用了数据绑定。但是过于频繁的调用setData很容易引起性能问题。要理解为什么会引发性能问题，我们要先看一下setData的工作原理。https://mp.weixin.qq.com/debug/wxadoc/dev
2017-08-09 11:37:34
925
原创 全栈工程师之路-中级篇之小程序开发-第二章第四节小程序http请求与请求本地json文件
上一节课，我们已经基本完成了，首页的界面编写。逻辑暂时不理会。但是我们用于展示页面绑定的是我们本地的假数据。接下来我们就来获取真正的数据来展示页面。绑定假数据编写页面算是前段最早做的一件事情吧。特别是在前后端同步开发，联合测试的时候。服务端会先输出接口文档，然后前后端根据接口文档同步开发，最后联合测试。这就需要前段本地编写大量的假数据。如果我们每个页面的假数据的单独
2017-08-07 16:34:23
12553
原创 全栈工程师之路-中级篇之小程序开发-第二章第三节小程序豆瓣评分主页
今天我们来编写整个豆瓣评分的首页界面框架。我们今天主要讲解界面的编写，目的是再一次加强对模板的理解。
2017-08-04 09:41:38
1019
原创 全栈工程师之路-中级篇之小程序开发-第二章第二节小程序电影卡片模板
上一节课，有朋友反映我最后写的操作步骤太琐碎了。其实我只是想表达一下我自己的思想过程，从分析方法到关注点。我觉得这对于新手还是有点作用的。如果你不知道怎么入手解决一个问题，不放跟着我的节奏，进去试试。言归正传，我们接下来编写，电影卡片的模板。还是一样的先分析界面，这个界面是上下结构的，最上方一张图片，中间一行文字，下面一个stars模板（我们上一节课编写的内容）我们
2017-08-03 11:06:20
1247
小程序开发-高仿豆瓣评分
2017-09-06
IONIC 功能全演示
2017-08-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人