Fork me on GitHub
  2021年10月13日
摘要: Introduction 本文列出了评测网页基本性能的一些指标。这些指标包含了一个网页从加载到呈现到可交互的一个完成的周期,在评价整体性能上有较大的参考意义。本文基本上是google vitial系列文章的总结,这些文档还没有中文翻译,但是你可以对照着本文进行查看。另外我也对它们进行了一些额外的其补 阅读全文
posted @ 2021-10-13 18:03 chen·yan 阅读(54) 评论(0) 推荐(0) 编辑
  2018年8月22日
摘要: State的不可变化带来的麻烦 在用Redux处理深度复杂的数据时会有一些麻烦。由于js的特性,我们知道当对一个对象进行复制时实际上是复制它的引用,除非你对这个对象进行深度复制。Redux要求你每次你返回的都是一个全新的State,而不是去修改它。这就要求我们要对原来的State进行深度复制。这往往 阅读全文
posted @ 2018-08-22 17:29 chen·yan 阅读(868) 评论(0) 推荐(1) 编辑
  2018年5月20日
摘要: 配置文件 在开始我们的第一个界面之前,我们需要把初始的html和config文件配置好。html非常简单,只需要一个div作为最外部的容器包裹着所有界面即可: 接下来我们在construction目录中配置config文件和入口app.js文件 第一个界面 配置完基础文件后我们开始配置我们的第一个配 阅读全文
posted @ 2018-05-20 14:47 chen·yan 阅读(186) 评论(0) 推荐(1) 编辑
摘要: 起因 刚进公司那会儿,接的是一个微信APP应用,SPA是前人搭起来的,用到的技术主要是backbone和zepto。后来那人走了,就卤煮一个人把项目接了下来。项目越是到后面,越发觉了诸多弊端,不停的增加界面和业务使得整个应用看起来臃肿不堪。于是觉得是时候重构了。那时也巧是正好认识requireJS, 阅读全文
posted @ 2018-05-20 14:46 chen·yan 阅读(350) 评论(0) 推荐(1) 编辑
摘要: 目录结构 上面这张图是salut的目录文档,从github上将其下载后直接运行node run和 node json 可以直接启动项目。下面逐个介绍每个目录的存放的文件和作用。 construction 该目录下存放着工程文件,grunt配置文件以及几本requireJS,在此处运行npm inst 阅读全文
posted @ 2018-05-20 14:46 chen·yan 阅读(213) 评论(0) 推荐(0) 编辑
  2016年8月12日
摘要: 前言 卤煮在公司之初接触到的是一个微信APP应用。前端技术采用的是Backbone+zepto等小型JS类库。在项目开发之初,这类中小型的项目采用这两种库可以满足基本的需求。然而,随着迭代的更新和业务的增加,成堆的代码被覆盖到项目中去了,使得这样一种技术架构方式变得异常的臃肿,很多界面变得异常的难以 阅读全文
posted @ 2016-08-12 01:29 chen·yan 阅读(2450) 评论(9) 推荐(13) 编辑
  2016年7月28日
摘要: 前言 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难,适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图,结果可 阅读全文
posted @ 2016-07-28 09:02 chen·yan 阅读(16763) 评论(19) 推荐(21) 编辑
  2016年7月7日
摘要: 前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程。它可以实现自动对js、css、html文件的合并、压缩等一些列操作。Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去下载插件,然后使用它们。关于grunt的使用以及配置,卤煮不打算在此介绍。本篇博文重点要讲的是如何快 阅读全文
posted @ 2016-07-07 16:31 chen·yan 阅读(832) 评论(0) 推荐(3) 编辑
  2016年6月22日
摘要: 前言 web早已经进入了2.0时代了,如今的网页大有往系统应用级别的方向发展的趋势,再也不是以前的简单展示信息的界面了。如今很多webapp已经做到了原生应用的功能,并且运用自身的优势逐步取代之。HTML5也很给力,对多平台,多屏幕设备的良好兼容性使得前端工程师们在各种平台上大显身手。卤煮两年前进公 阅读全文
posted @ 2016-06-22 09:34 chen·yan 阅读(8594) 评论(2) 推荐(3) 编辑
  2016年6月13日
摘要: 前言 本篇博文来自一次公司内部的前端分享,从多个方面讨论了在设计接口时遵循的原则,总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来。很难做到详尽充实,如果有好的建议或者不对的地方,还望不吝赐教斧正。 一、接口的流畅性 好的接口是流畅易懂的, 阅读全文
posted @ 2016-06-13 11:22 chen·yan 阅读(12550) 评论(26) 推荐(60) 编辑
  2016年4月11日
摘要: 最近在做新项目的时候自己利用一点业余时间写了一个简单的js模块加载器。后来因为用了webpack就没有考虑把它放到项目里面去,也没有继续更新它了。模块加载器开源的有很多,一般来说seaJS和reqiureJS都能满足基本需求。本篇博文主要分享一下卤煮写这个加载器的一些想法和思路,作为学习的记录。 j 阅读全文
posted @ 2016-04-11 10:02 chen·yan 阅读(942) 评论(1) 推荐(2) 编辑
  2016年3月7日
摘要: 卤煮在大概一年前写过backbone的源码分析,里面讲的是对一些backbone框架的方法的讲解。这几天重新看了几遍backbone的源码,才发现之前对于它的理解不够深入,只关注了它的一些部分的细节和实现技巧。忽略了它的设计思想,而卤煮认为,一套库或者框架最值得借鉴的地方正好是它的设计思想。也巧,最 阅读全文
posted @ 2016-03-07 14:20 chen·yan 阅读(770) 评论(0) 推荐(0) 编辑
  2016年3月4日
摘要: 在测试环境下开发完成代表着你离正式上线的目标不远了。接下来本章就主要谈一谈把测试环境的公众号升级为正式的公众号。 服务器和域名 目前为止我们只是在自己的电脑上完成了测试环境。真实的线上环境当然需要自己购买服务器和域名了。卤煮买的是阿里云的ecs云服务器,配置是单核1G内存,硬盘是40g。对于卤煮这样 阅读全文
posted @ 2016-03-04 08:53 chen·yan 阅读(2746) 评论(4) 推荐(4) 编辑
  2016年3月3日
摘要: 微信的网页授权指的是在微信公众号中访问第三方网页时获取用户地理、个人等信息的权限。对于开发了自己的网页app应用时,获取个人的信息非常重要。上篇博客讲到了注册时可以获取用户的信息,很多人会问为什么还需要网页授权这种方式去获取呢,直接从数据库中读取不就可以了吗?这样的做的原因是服务器会话时间终究是有限 阅读全文
posted @ 2016-03-03 08:44 chen·yan 阅读(5906) 评论(7) 推荐(3) 编辑
  2016年3月2日
摘要: 微信公众号有个规则,一旦开启了开发者模式,其他的常规功能就都必须通过接口调用完成。比如说自定义菜单功能,必须通过发送post请求的方式生成。本章就通过关注到取消关注的整个过程来谈一谈nodejs是怎么样与微信交互的。这些功能的入口就是你在测试公众号里面填写的URL(以下用/login/wechat代 阅读全文
posted @ 2016-03-02 09:04 chen·yan 阅读(3209) 评论(11) 推荐(1) 编辑
  2016年3月1日
摘要: 由于卤煮本人是做前端开发的,所以在做公众号过程中基本上没有遇到前端问题,在这方面花的时间是最少的。加上用了mui框架(纯css界面)和自己积累的代码,很快地开发出了界面来。接着是后台开发。卤煮选的是nodejs,作为中小型的项目开发,nodejs是前端开发人员的首选。然后是选了一些开发包,帮助快速上 阅读全文
posted @ 2016-03-01 08:35 chen·yan 阅读(4983) 评论(5) 推荐(4) 编辑
  2016年2月29日
摘要: 前言 大概是一个月前,自己用业余时间做了一个微信公众号。微信开发,尤其是对后台不熟悉的人来说显得尤其困难。首先要克服的是后台语言(nodejs)的一些不熟悉困难,其次,也是最大的一点困难是在跟微信交互过程。借助各种工具和几位朋友的帮助,总算把各种困难解决,并且在自己计划的时间内建立起来公众号。第一次 阅读全文
posted @ 2016-02-29 08:51 chen·yan 阅读(5468) 评论(19) 推荐(7) 编辑
  2016年1月11日
摘要: 在做项目中经常会遇到使用动画的情况。以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果。虽然后者解决了刷新频率和移动频率同步的问题,但是因为js频繁地操作dom带来的额外开销和复杂的计算公式使得大多数开发者对用... 阅读全文
posted @ 2016-01-11 09:48 chen·yan 阅读(1975) 评论(2) 推荐(2) 编辑
  2015年12月29日
摘要: 最近在做了一个自己的项目。两个人合作的,所以需要用到版本管理工具。本来打算学一下自己搭建svn的,后来朋友推荐我用git,免费,流行,好用,逼格。所以就学习了一下。发现这个git与已经使用惯了的svn真是有点不一样。在学习中自己也做了一些记录,大概概括了几本常用命令。在这里贴出来,也希望更多人去积极... 阅读全文
posted @ 2015-12-29 19:56 chen·yan 阅读(340) 评论(0) 推荐(0) 编辑
  2015年10月30日
摘要: 手机开发webapp的同学一定遇到过这样问题,如何为丑极了的手机元素应用自定义的样式。首先,要弄清楚为什么要定义手机原生控件的样式,就需要看看手机的那些原生框样式的丑陋摸样:android:ios:无奈的选择看完了这些丑陋的界面元素,我们就可以理解当我们把他们暴露在产品同学的眼中时,那种层层的杀气了... 阅读全文
posted @ 2015-10-30 07:44 chen·yan 阅读(2038) 评论(3) 推荐(0) 编辑
  2015年10月21日
摘要: 国庆回来,很久没写博客了。一来是自己毫无时间,二是最近开发任务特别紧,三是节后综合症,脑子一片空白没有找到写作的原材料。今天,在加完班回来的22点,忙里偷闲,分享一下最近学到的一个小知识点如题。标题的灵感来自于暴雪的一款卡牌游戏:炉石传说中的一张卡牌的上场台词,觉得很契合本篇博客要表达的含义,身材小... 阅读全文
posted @ 2015-10-21 08:52 chen·yan 阅读(4665) 评论(18) 推荐(21) 编辑
  2015年9月21日
摘要: 事件起因事情是这样的:产品上线发布,突然出现了问题。运营Gg过来反应,当场给露珠演示,运营同事的手机是iphone,bug确实是存在的。奇怪的是露珠用了其他iphone手机(借别人的,露珠的是吊死安卓机),却没有发现这个问题。仔细询问,同事说他最近刚刚升级的ios9,于是问题最初定位在操作系统上。接... 阅读全文
posted @ 2015-09-21 08:45 chen·yan 阅读(1659) 评论(1) 推荐(0) 编辑
  2015年9月11日
摘要: 前言露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的强拼硬凑来达到设计需求,在各个屏幕上显示效果友好,弹性的伸缩元素,简洁易维护的代码。只可惜,这位老兄有... 阅读全文
posted @ 2015-09-11 10:23 chen·yan 阅读(2839) 评论(2) 推荐(1) 编辑
  2015年8月26日
摘要: 前言 一个多月前,卤煮读了一篇翻译过来的外国人写的技术博客。此君在博客中将js中的类(构造)继承和原型继承做了一些比较,并且得出了结论:建议诸位在开发是用原型继承。文中提到了各种原型继承的优点,详细的露珠不一一说明介绍了。这篇文章的名字是为什么原型继承很重要,有兴趣的同学可以去看,此文有些深度,值... 阅读全文
posted @ 2015-08-26 11:00 chen·yan 阅读(6672) 评论(1) 推荐(5) 编辑
  2015年8月7日
摘要: 做移动开发大多数的时候跟手机界面打交道,也就是说你只能在电脑上开发写代码,最终效果是确是在另外一个终端看到的。虽然各种浏览器为开发者提供了很多模拟手机设备的功能,这些功能总体来说基本可以满足我们对于调试移动设备的需求,比如露珠在之前向诸位介绍的手机开发者模式。但是模拟毕竟是模拟,它不能真正做到... 阅读全文
posted @ 2015-08-07 16:15 chen·yan 阅读(4320) 评论(2) 推荐(0) 编辑
  2015年7月13日
摘要: 本篇是Chrome开发者工具的结尾篇,最后为大家介绍几款功能强大的插件。在chrome商店里面有很多插件,没事建议大家去逛逛。不过需要FQ,所以诸位请自备神器。一、皮肤插件 首先是大家期盼已久,翘首以盼的皮肤插件。这款插件叫DevTools Theme: Zero Dark Matrix.在商店... 阅读全文
posted @ 2015-07-13 08:56 chen·yan 阅读(10903) 评论(16) 推荐(17) 编辑
  2015年7月6日
摘要: 前面介绍了Chrome开发者工具的大部分内容工具,现在介绍最后两块功能Audits和Console面板。一、Audits Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是网络加载性能,另一类是界面性能。首先开下它的主界面。 Audits面板的网络优化建议参照的是... 阅读全文
posted @ 2015-07-06 14:30 chen·yan 阅读(10515) 评论(1) 推荐(6) 编辑
  2015年7月2日
摘要: 前言 Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本。它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版本来说简单,但是里面的数据确很多,很杂,要弄懂它们需要花费一些时间。尤其是在内存快照中的各种庞杂的数据。在这... 阅读全文
posted @ 2015-07-02 09:51 chen·yan 阅读(11549) 评论(4) 推荐(13) 编辑
  2015年6月25日
摘要: 卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements、Network、Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需要这几个面板功能就可以了(再加上console面板这个万精油)。它们的作用大多数情况下是帮助你进... 阅读全文
posted @ 2015-06-25 09:49 chen·yan 阅读(16332) 评论(10) 推荐(17) 编辑
  2015年6月23日
摘要: 上篇向大家介绍完了基础功能篇,这次分享的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是我最常用到的Chrome功能面板,也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题,在审视一遍自己的代码而一无所获之后,我首先就会打开Sour... 阅读全文
posted @ 2015-06-23 08:44 chen·yan 阅读(23977) 评论(12) 推荐(37) 编辑