头部背景图片
吉水于人的笔记 |
吉水于人的笔记 |

使用yaf-cg新建一个项目

2019-04-19

前言

我这边用yaf框架进行开发,对于第一次使用该框架新建项目的童鞋会有些迷茫,所以这次总结一下,也因为自己很久没有php语言了,其实也有一些忘了,这次趁有一个简单的系统的需求,我想还是用php来写,所以重新温故一下。

vue内部运行机制源码分析——模版编译

2019-04-14

模版编译流程

vue源码中虚拟dom构建过程经历了template编译成AST语法树->转换为render函数,最终返回一个VNode。

compile编译过程分为parseoptimizegenerate三个阶段,最终得到render function

  • parse:用正则表达式的方式解析template模版的指令、class、style等数据,形成AST(abstract syntax tree,抽象语法树),是源代码的抽象语法结构的树状表现形式。
  • optimize:此步骤主要是优化性能,标记static静态节点,当update更新界面时,会有一个patch的过程,diff算法会直接跳过该静态节点,从而减少比较的过程,优化patch的性能。
  • generate:将AST转化为render function字符串的过程,得到的结果是render字符串及staticRenderFns字符串。

vue内部运行机制源码分析——初始化和挂载

2019-04-13

vue全局运行机制

vue的内部流程分为5个步骤:

  1. 进行初始化和挂载:init及mount
  2. 模版编译:compile,编译成渲染函数render function
  3. 进行响应式依赖收集:render function => getter、setter => watcher 进行 update => patch 的过程以及使用队列异步更新的策略
  4. 依赖收集的同时产生Virtal DOM ,render function 被转为VNode节点
  5. 通过diff算法进行patch更新视图

博客拆分几篇文章进行归纳,本章讲解一下初始化和挂载。

地图出图/打印

2019-04-09

地图打印输出作为webgis较为常用的一个模块,由于其实现过程和参数较为复杂,对其功能的调整和扩展,通常是前端开发中一个较为头疼的事情 。本文将结合项目经验介绍前端实现地图导出三个主要途径的实现过程及注意事项。功能有限,内容不全面,如有错误和不足请指出。

视频播放进度记录

2019-04-02

前言

微信小程序提供一个video组件支持视频播放,开发者文档上可以看到,该组件提供了很多可选属性,具体的可查阅微信小程序开发文档。

微信小程序的上拉加载功能

2019-04-02

前言

这段时间一直在弄智荟那个微信小程序,发现,很多地方的列表加载都需要用到上拉加载更多这个功能,一开始,看了官方文档觉得蛮简单的,但是在实际写的过程中还是踩了一点的坑,所以就在这做一个简单的总结。

搭建一个weex项目

2019-03-18

搭建一个weex项目

有了跨平台开发之后,我产生了浓烈的兴趣,一直想做app类的开发,但是不想去学客户端开发,正好,有了这样的一个机会,尝试着新建一个项目,学习一下。

arcgis api + webpack前端工程化开发

2019-03-18

前言

公司里的项目都涉及到地图方面到开发,使用到是Arcgis api for js框架,目前Arcgis api for js采用到是dojo框架开发,内部采用AMD加载方式和模块管理机制。项目内的组件利用dojo的widget进行开发,其中dojo的模块使用require([])按需加载。本来使用dojo开发一张图系统就可以,但是这种模式开发,不免让我们错失了许多的MVVM模式开发带来的优势。

  • 无法使用ES6
  • 没有部署模块热加载功能,代码存在缓存,常常需要清除缓存后手动进行刷新加载
  • 没有采用eslint代码规范工具,无法统一代码的风格
  • 部署的时候,必须手动修改版本信息,才能达到清除缓存的效果
  • 代码上传时没有经过压缩,导致首屏加载时间较长
  • 跨组件之通信过多采用dojo/Topic,window变量,容易引起命名冲突,不好管理
  • 没有采用CSS预加载器(less,sass,stylus…),写css比较费力,难以复用和管理

js异步编程总结

2019-03-18

前言

Javascript是单线程的,而实现异步编程就显得及其重要。在ES6以前,我们要实现异步编程可通过:(1)回调事件;(2)事件监听(订阅/发布);(3)Promise对象。ES6中提供了Generator函数(协程coroutine)。ES7中使用了async和await实现。

http请求

2019-03-18

http请求

老生常谈的http请求,简单来说就是几个步骤:域名解析->发起TCP的3次握手->建立TCP连接后发起http请求->服务器响应请求,浏览器得到代码->浏览器解析代码,并请求html代码中的资源(js、css等)->浏览器对页面进行渲染呈现给用户。