REDUX源码分析 熟悉React的同学应该对于Redux都比较熟悉，Redux可以对多个组件间的共享数据进行统一管理，解决了组件间数据传递的问题。它的源码实现其实非常简单，接下来我们就来学习一下。 redux源码传送门 [https://github.com/reduxjs/redux/tree/master/src] redux源码分为7个部分 * utils * applyMiddleware * bindActionCreator * combineReducers * compose * createStore * index 下面我们就来分别分析这几部分的代码： 1. INDEX 这是redux的入口文件。

需求分析 最近在 H5 开发与 APP 客户端工程师的联调过程中， 经常需要实现一些常用的移动端事件封装成接口提供给客户端，例如用户的单击 tap 事件、双击事件、长按事件以及拖动事件。但由于浏览器默认只提供了 touchstart 、 touchmove 、 touchend 三个原生事件，在实际的开发过程中，我们常用的解决方案便是通过监听 touchstart 和 touchend 事件配合定时器来实现我们的自定义移动端事件，为了实现常用自定义事件的复用，我们对其进行了封装，并提供方便用户使用的工具函数，这也是我们实现 mt-events [https://github.com/jerryOnlyZRJ/mobile-events] 的初衷。 mt-events [https://github.com/jerryOnlyZRJ/mobile-events] 全名是 Mobile Terminal Events。最初我们对这个库的定位是希望封装一些常用的移动端事件来方便用户进行更为便捷的移动端开发，例如双击事件、长按事件、滑动事件等等。后来，随着项目的迭代，mt-events

动画管理相关源码 lottie为全局变量，主要有一个loadAnimation的方法，来加载和解析json，播放动画。 var animationManager = function (function(root, factory) { root.lottie = factory(root) }(window, function(window) { function loadAnimation() { return animationManager.loadAnimation(params); } })); 由上面的代码可以看出来，每次调用lottie.laodAnimation，其实是去调用animationManager的loadAnimation方法。 var animationManager = (function(){ functionloadAnimation(params){ ar animItem = new AnimationItem(); // 新建对象

动画JSON文件制作及导出规范 使用该方案制作动画时，有些动画效果lottie-web暂不支持，有些则会影响json文件的大小。 下面这些效果，lottie暂不支持： 1. 描边动效不支持，因为这个属性会导致lottie性能问题，所以后来lottie去掉了对该属性的支持。 遵循下面的方案，会使json文件减小： 1. 尽量减少图层个数。每个图层都会导出成相应的json数据，图层减少能从很大程度上减小json大小。 2. 尽可能所有的图层都是在AE里面画出来的，而不是从其他软件引入的。如果是其他软件引入的，很可能导致描述这个图形的json部分变得很大。 P.S. 该内容暂时还没有总结完善，稍后会补齐

项目中使用LOTTIE-WEB的流程 第一步 新建 src/assets/lottie/ 文件夹，并将 bodymovin_light.min.js 文件 [https://cdnjs.com/libraries/bodymovin] 和设计师给的动画json文件统一放到 src/assets/lottie/ 文件夹中。 另外，请更新 @tencent/im-webpack-common ，因为需要把 src/assets/lottie/ 中的json文件打包成单独的文件。如果项目的webpack配置在项目内，需要自行进行配置或者联系payton。 第二步 在需要使用lottie的页面中，在其 index.html 中引入 bodymovin.js 。示例如下: {% block preloadScript%}<scriptsrc="../../assets/lottie/bodymovin.min.js"async></script>{% endblock %} 第三步

背景 企鹅辅导是一款处于快速上升期的产品，目前在快速迭代中。作为一款K12青少年教育产品软件，动画对于吸引其用户注意力和提高用户体验有着重要的作用。特别是在目前开放了小学教育内容之后，动画能力的丰富和完善更是迫在眉睫。 目前辅导的动画较少，实现方式一般是： 1. 前端实现svg动画（实现成本较高、维护成本高、容易有买家秀/卖家秀区别、客户端不能复用）； 2. 设计师切gif（文件较大、容易有锯齿）； 3. png序列帧（文件较大、容易有锯齿）； 目前的动画实现方案有着各自的问题，导致目前企鹅辅导的动画并不是很多。同样的问题，也存在于腾讯课堂产品中。 所以，目前迫切的需要寻找一种更加简单、高效、性能高的动画方案。经过调研发现airbnb目前有一套动画——lottie值得研究和应用。 LOTTIE简介 Lottie is a mobile library for Web, and iOS that parses Adobe After Effects

因为我一直比较关注 Web 领域的设计趋势, 很早之前就听很说了 Lottie 这个项目, 但是一直没时间和机会去尝试, 最近终于有时间机会于是尝试了一把, 在这里分享一下。 一. INTRO TO LOTTIE Lottie 是 Airbnb 开源的一个支持 Web、Android、iOS 以及 ReactNative等平台的动画库，它可以结合 AE 和 Bodymovin 来快速实现跨平台动画。 其实对于普通的动效和简单动画, 使用原生代码实现已经足够, Lottie 是为了 复杂动画 而生的, 下面来看几个 Lottie 实现的几个动画例子: [https://raw.githubusercontent.com/HuQingyang/lottie-demo/master/pic/1%20VYA3Hx-eO7qDCr0ONlIlhQ.gif] 这种复杂的动画, 如果需要手写代码来实现, 将会很繁琐且效率低下, 这正是 Lottie 大展身手的地方。

本文作者：IMWeb 黎清龙 原文出处： IMWeb社区 未经同意，禁止转载 小程序开发问题笔记 最近从0开始，开发了【企鹅速算检查】小程序，在开发过程中遇到一堆的问(巨)题(坑)，这里记录下来分享给大家。 背景 【企鹅速算检查】小程序主要功能是拍照，然后把图片通过人工智能识别出算术题，并判断正误，最后展示结果给到用户。 因此，这个小程序主要使用到的核心功能有：拍照， canvas 。 为什么要用到 canvas 呢？主要是因为结果的图片是通过原图和批改结果信息合成出来的，这个合成需要在小程序处理。 下面是结果页面的一个例子： 项目使用 wepy 开发框架进行开发。 问题记录 WEPY 的 PAGE 实例不会被销毁 页面在加载的时候就会创建 wepy 的 page 实例对象，在页面离开，已经调用了 onUnload 的情况下，wepy 的 page

NGUI简介 这是一个GUI的排版显示引擎和跨平台的GUI应用程序开发框架，基于NodeJS/OpenGL，这也是第一个在移动端Android/iOS融合NodeJS的前端GUI项目，至此JavaScript成为了真正意义上前后端通吃的语言。 Ngui的目标：在此基础上开发GUI应用程序可拥有开发WEB应用般简单与速度同时兼顾Native应用程序的性能与体验。 * 开源跨平台移动项目Ngui【简介】 * 开源跨平台移动项目Ngui【入门】 * 开源跨平台移动项目Ngui【视图与布局系统】 * 开源跨平台移动项目Ngui【Action动作系统】

迷你版 迷你版即0.3.0版。 0.2.0版没加新功能，只增加eadme内容和修正package.json上的一些错误。 0.3.0同样没加新功能，但是却是非常重要的。 这个版本国际化默认只支持英文和中文。初始化是英文。如果想支持全部118种语言，需要引入 nowjs.locale.js [https://github.com/hongmaoxiao/now/tree/master/dist/nowjs.locale.js] 或者压缩版 nowjs.locale.min.js [https://github.com/hongmaoxiao/now/tree/master/dist/nowjs.min.locale.js] 。 版本大小比较 ~/learn/ljs/now master ❯ ll -h dist | grep js$ -rw-rw-r-- 1 mao mao 66K 12月 500:37 nowjs.js -rw-rw-r-- 1 mao mao 355K 12月 500:37 nowjs.locale.js

NGUI简介 这是一个GUI的排版显示引擎和跨平台的GUI应用程序开发框架，基于NodeJS/OpenGL，这也是第一个在移动端Android/iOS融合NodeJS的前端GUI项目，至此JavaScript成为了真正意义上前后端通吃的语言。 Ngui的目标：在此基础上开发GUI应用程序可拥有开发WEB应用般简单与速度同时兼顾Native应用程序的性能与体验。 * 开源跨平台移动项目Ngui【简介】

NGUI简介 这是一个GUI的排版显示引擎和跨平台的GUI应用程序开发框架，基于NodeJS/OpenGL，这也是第一个在移动端Android/iOS融合NodeJS的前端GUI项目，至此JavaScript成为了真正意义上前后端通吃的语言。 Ngui的目标：在此基础上开发GUI应用程序可拥有开发WEB应用般简单与速度同时兼顾Native应用程序的性能与体验。 * 开源跨平台移动项目Ngui【简介】