【Omi框架学习之旅 - 插件机制之omi-touch 及原理说明】的更多相关文章

Omi框架学习之旅 - 插件机制之omi-finger 及原理说明

以前那篇我写的alloyfinger源码解读那篇帖子,就说过这是一个很好用的手势库,hammer能做的,他都能做到, 而且源码只有350来行代码,很容易看懂. 那么怎么把这么好的库作为omi库的一个插件呢,使dom,用起来更爽,更方便呢? omi自己有个叫插件体系的功能,主要是赋予dom元素一些能力,并且可以和组件的实例产生关联. 这当然棒极了.那怎么实现的呢? 还是先看个demo,看看用起来爽不,爽的话,再看原理也不迟啊. OmiFinger.init(); // 初始化OmiFinger插件…

Omi框架学习之旅 - 插件机制之omi-touch 及原理说明

这个插件也能做好多好多的事,比如上拉下拉加载数据,轮播,等一切和运动有关的特效. 具体看我的allowTouch这篇博客,掌握了其用法,在来看它是怎么和omi结合的.就会很简单. 当然使用起来也比较方便. 老规矩,先看demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>omi-touch</title&…

Omi框架学习之旅 - 插件机制之omi-router及原理说明

先来看看官网的介绍吧:https://github.com/AlloyTeam/omi/tree/master/plugins/omi-router 其实我推荐直接看官网的介绍.我所写的,主要给个人做的笔记.也许看的get不到点吧.所以强烈看官网 文档:https://alloyteam.github.io/omi/website/docs-cn.html github: https://github.com/AlloyTeam/omi 好了,该做笔记了.这次主要记录一下omi-router插件…

Omi框架学习之旅 - 插件机制之omi-transform及原理说明

给omi-transform插件做个笔记,使用起来也很爽. transform.js这个库,一直想写一篇帖子的,可是,数学不好,三维矩阵和二位矩阵理解的不好,所以迟迟没写了, 这也是一个神库,反正我很喜欢,那怎么和omi结合,怎么使用呢? 先看个demo吧. Omi.OmiTransform.init(); // 这个是初始化(源码是这么OmiTransform.init()写,为了方便,自己加了下) class App extends Omi.Component { constructor(d…

Omi框架学习之旅 - 之开篇扯蛋

说实话, 我也不知道Omi是干啥的, 只因此框架是alloyTeam出的, dntzhang写的, 也有其他腾讯大神参与了, 还有一些其他贡献者, 以上我也不太清楚, 当我胡说八嘎. 因其写法有人说好像react, 我个人也比较崇拜dntzhang, 所以就得好好学习omi框架, 以后做项目万一用到呢. 扯了这么多, 其实我对omi的理解也不多, 所以带着学习. 目前我的理解是: omi中一切皆组件,组件可以嵌套, 可以通信. 接下来学习中将有demo, 和demo的疑问,进入源码的学习之路.…

Omi框架学习之旅 - Hello World 及原理说明

学什么东西都从hello world开始, 我也不知道为啥. 恩,先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. hello world - demo: class Hello extends Omi.Component { // 1. Hello类先继承Component类 constructor(str, data) { // 2. Hello类构造函数的参数和个数随便传,但是必须要有个数据对象data(其实可以是对象或者传undefined,因为其还有第二个参数,不传u…

Omi框架学习之旅 - 获取DOM节点 及原理说明

虽然绝大部分情况下,开发者不需要去查找获取DOM,但是还是有需要获取DOM的场景,所以Omi提供了方便获取DOM节点的方式. 这是官网的话,但是我一直都需要获取dom,对dom操作,所以omi提供的获取dom的方式对我来说还是比较重要的. 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. class Hello extends Omi.Component { constructor(data) { super(data); } style() { return ` h1…

Omi框架学习之旅 - 生命周期 及原理说明

生命周期 name avatars company constructor 构造函数 new的时候 install 初始化安装,这可以拿到用户传进的data进行处理 实例化 installed 安装完成,HTML已经插入页面之后执行 实例化 uninstall 卸载组件.执行remove方法会触发该事件 销毁时 beforeUpdate 更新前 存在期 afterUpdate 更新后 存在期 示意图 以上是官网的,看着让人还是挺明白的.但是我还是喜欢用我的理解解说一把. 生命周期指一个对象的生老…

Omi框架学习之旅 - 通过omi-id来实现组件通讯 及原理说明

这个demo是通过omi-id来获取子类的实例,然后更改data属性,之后updata一下就好了. 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. class Hello extends Omi.Component { constructor(data) { super(data); } style() { return ` h1 { cursor: pointer; } `; } handleClick(target, click) { console.log(ta…

Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明

组件通讯不是讲完了吗(上帝模式还没讲哈),怎么又多了种方式啊. 你484傻,多一种选择不好吗? 其实这个不属于组件通讯啦,只是当父组件实例安装和渲染完毕后,可以执行installed这个方法(默认是空函数,是Component中的原型方法),也就是生命周期中的一种.然后在这该方法中, 给子类的data赋值,然后update(),这种方式野蛮好玩的. 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. class Hello extends Omi.Component {…

Omi框架学习之旅 - 组件通讯(group-data通讯) 及原理说明

childrenData的方式可以批量传递数据给组件,但是有很多场景下data的来源不一定非要都从childrenData来, childrenData是个数组,会和组件的顺序一一对应,这就给不同传递方式的data必须全部集中的childrenData中, 非常不方便.group-data专门为解决上面的痛点而生,专门是为了给一组组件批量传递data. 这是官网的原话,一般官网的专业话语,我听着很是变扭,请容忍我用大白话说一说(说的不对,欢迎指出). group-data也是通讯中的一种, 他的…

Omi框架学习之旅 - 组件通讯(data通讯) 及原理说明

接着上一篇的data-*通讯,这篇写data通讯. data通讯主要为了复杂的数据通讯. 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. class Hello extends Omi.Component { constructor(data) { super(data); } style() { return ` h1 { cursor: pointer; } `; } handleClick(target, click) { console.log(target.…

Omi框架学习之旅 - 组件通讯(data-*通讯) 及原理说明

上一篇文章说了omi中的组件,以及组件如何使用及嵌套. 那omi中的组件是怎么通讯的呢? 其实omi提供的通讯方式比较丰富,各有千秋,各有各的场景用途.所以按需使用即可. 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. class Hello extends Omi.Component { constructor(data) { super(data); } style() { return ` h1 { cursor: pointer; } `; } handleC…

Omi框架学习之旅 - 组件 及原理说明

hello world demo看完后其实基本的写法就会了. 但是omi中的组件是神马鬼?其实我也不知道组件是啥. 百度百科是这么说的: 是对数据和方法的简单封装.es6中,一个类其实也可以做到对方法和数据的封装.然后new出来的实例共享原型上的方法,至于属性最好不要共享啦, 如果需要共享,自己写静态属性,或者Object.assign到原型上去.这里有点扯远了. 我的理解是一个组件就是一个类,至于组件嵌套,其实就是父类和子类,无非就是挂载到对应的属性下 (父类会主动帮我们自动的new 子类(被…

滴滴Booster移动APP质量优化框架 学习之旅

推荐阅读: 滴滴Booster移动App质量优化框架-学习之旅 一 Android 模块Api化演练 不一样视角的Glide剖析(一) 一.Booster简介 Booster是滴滴最近开源一个的移动应用质量优化框架项目,专门为移动应用而设计的简单易用.轻量级.功能强大且可扩展的质量优化工具包,其通过动态发现和加载机制提供可扩展的能力.不过目前优化的功能点不过. Booster 主要由 Transformer 和 Task 组成,Transformer 主要用于对字节码进行扫描或修改(取决于 Tr…

滴滴Booster移动APP质量优化框架 学习之旅 三

推荐阅读: 滴滴Booster移动App质量优化框架-学习之旅 一 Android 模块Api化演练 不一样视角的Glide剖析(一) 滴滴Booster移动App质量优化框架-学习之旅 二对重复资源优化和无用资源优化进行了讨论.这里对不可编译无用assets资源优化进行讨论. 先看微信Matrix-ApkChecker是怎样检索对无用assets资源.ApkCheckers是针对 android 安装包的分析检测工具,反汇编apk包中dex文件,在内存生产smali相关数据,检索  const…

滴滴Booster移动APP质量优化框架 学习之旅 二

推荐阅读: 滴滴Booster移动App质量优化框架-学习之旅 一 Android 模块Api化演练 不一样视角的Glide剖析(一) 续写滴滴Booster移动APP质量优化框架学习之旅,上篇文章分析内置的transform:booster-transform-shrink booster-transform-shared-preferences,今天分析booster-task-compression以及定制task对资源索引文件resource.asrc进行优化(重复资源优化.无用资源优化…

WordPress 插件机制的简单用法和原理（Hook 钩子）

WordPress 的插件机制实际上只的就是这个 Hook 了,它中文被翻译成钩子,允许你参与 WordPress 核心的运行,是一个非常棒的东西,下面我们来详细了解一下它. PS:本文只是简单的总结一下,更多用法还是要参考文中给出的函数. 钩子分类 钩子分为两种,一种叫做动作(action),还有一种叫做过滤器(filter).这两种钩子实现原理基本一样,后边会讲到,使用上的区别在于过滤器有返回值,而动作没有. 动作的理念是让你在一种情况或者一个特别的位置执行一些函数,比如发送一封邮件等:过滤…

Go 框架学习之旅 ① 深入解析 net/http 启动服务的层级逻辑

Web Server. net/http 标准库怎么学. 库函数. 结构定义. 结构函数. 思维导图解析HTTP服务端. 层级逻辑. 创建框架的Server结构. OSI参考模型. TCP/IP五层模型…

Spring学习之旅（六）Spring AOP工作原理初探

AOP(Aspect-Oriented  Programming,面向切面编程)是Spring提供的关键技术之一. AOP基于IoC,是对OOP(Object-Oriented Programming,面向对象编程)的有效补充. 利用一种“横切”的技术,剖解封装的对象内部,并将那些影响了多个类的公共行为封装到一个可重用模块,并将其命名为Aspect(切面,也称方面). AOP的核心思想就是“将应用程序中的业务逻辑与对其提供支持的通用服务功能进行分离,而业务逻辑与通用服务功能之间通过配置信息,实现…

[转]仿World Wind构造自己的C#版插件框架——WW插件机制精简改造

很久没自己写东西啦,早该好好总结一下啦!一个大师说过“一个问题不应该被解决两次!”,除了一个好脑筋,再就是要坚持总结. 最近需要搞个系统的插件式框架,我参照World Wind的插件方式构建了个插件框架,可以参照<WorldWind学习系列五:插件加载过程全解析>,下面与大家分享一下. 初始化时,加载前面两个插件,可以动态加载KeyBoarderLoader,如下图: 该插件框架是WW插件框架的精简改造版,非常适用于插件式系统开发,也希望帮助大家学习一下WW的插件加载机制. 缺陷在于:未实现事…

微信开发学习日记（八）：7步看懂weiphp插件机制，核心目标是响应微信请求

又经过了几个小时的梳理.回顾,截至目前,终于对weiphp这个框架的机制搞明白了些.想要完全明白,自然还需要大把的时间.第1步:   配置微信公众号,http://weiphp.jiutianniao.com/ ... .html  从上面这个配置可以看出,微信请求呗weiphp的入口文件index.php接收了,可能会被/home/weixin/index/这个action响应.第2步:   index.php入口文件,校验了是否是微信请求.   /** * 微信接入验证 * 在入口进行验证而…

Java学习之旅开篇：运行机制及环境搭建

在写这篇博客之前,我想对自己进行简单概括:我从事软件开发工作已经三年多了,并且一直在从事.NET相关项目的开发.为什么突然间想学习Java呢?有以下几个原因: 1. 开发程序三年多来,已经对.NET相关体系完成了基本掌握,但是还不是炉火纯青的那种,我不想一直忙碌的奔跑,想停下来看看Java这位与.NET势均力敌的"大腕"的精妙之处,比较两者之间各自的优势与应用领域,以便为以后软件架构师(主要在扩展知识体系而非语言)做一定准备: 2. Java更加需要注重个人思维解决问题,而.NET却提…

kubernetes CSI 插件机制学习笔记

前言 最近在极客时间订阅了kubernetes的专栏,这篇文章是想记录一下自己学习 CSI 插件机制 (container-storage-interface) 的过程,加深一下记忆. 准备工作 老师用的是 csi-digitalocean,还会用到 CSI 的 proto 文件,这是 git 地址container-storage-interface/spec, 在开始本文之前可以先把这两个 repo 下载下来. csi-digitalocean,这个是主要分析的代码,需要放到 GOPATH…

jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件

jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuery操作元素的属性与样式jQuery框架学习第五天:事件与事件对象jQuery框架学习第六天:jQuery中的Ajax应用jQuery框架学习第七天:jQuery动画–jQuery让页面动起来! jQuery框架学习第八天:ASP.NET jQuery实施方案jQuery框架学习第九天:jQuery工…

Qt5的插件机制（1）--Qt 框架中的插件载入机制概述

概述 Qt的源代码中通过 Q<pluginType>Factory.Q<pluginType>Plugin 和 Q<pluginType> 这三个类实现了Qt的插件载入机制, 这个机制可用于载入特定种类的插件. 比方通过 QPlatformIntegrationFactory\QPlatformIntegrationPlugin\QPlatformIntegration 三个类能够实现平台类QPA插件(PlatformIntegration)的载入,通过QPlatfor…

winform插件机制学习

这两天在看自定义控件,原来有太多知识没有掌握.今天看到插件机制,心里突然一亮,这个东西听了不少次,就是不知道是啥回事.这次有幸书里包含一个案例,我就跟着它一步步来.终于知道是什么回事了.这个应该在软件开发中非常多见.只是当时不理解罢了. 开始 新建一个winform项目CustomControls在窗体上放一个button按钮 窗体代码 using System;using System.Collections.Generic;using System.ComponentModel;using…

我的angularjs源码学习之旅2——依赖注入

依赖注入起源于实现控制反转的典型框架Spring框架,用来削减计算机程序的耦合问题.简单来说,在定义方法的时候,方法所依赖的对象就被隐性的注入到该方法中,在方法中可以直接使用,而不需要在执行该函数的时候再参数中添加这些依赖对象. 理解很简单,我们以一个例子说明 var $name = "chua",$age = 26; function myInfo($name,$age){ alert($name + ":" + $age ); }; //普通情况下应该执行 my…

我的AngularJS 学习之旅

我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例   很早之前就听朋友说起AngularJs,但由于各种原因,一直没去研究.最近正好有同事也对这个框架比较感兴趣,大家一起讨论,于是终于“名正言顺”地开始研究了. 本文的目的是记录一下自己这两周的学习点滴,算是学习笔记吧,如果对初学的朋友有一点帮助,那也算是一件好事.嘿嘿 1.Angular的 起源 关于Angul…

180分钟的python学习之旅

最近在很多地方都可以看到Python的身影,尤其在人工智能等科学领域,其丰富的科学计算等方面类库无比强大.很多身边的哥们也提到Python非常的简洁方便,比如用Django搭建一个见得网站只需要半天时间即可,因此也吸引了我不小的兴趣.之前相亲认识过一个姑娘是做绿色环保建筑设计行业的,提过她们的建筑物的建模也是使用Python,虽然被女神给拒绝了,但学习还是势在必行的,加油. 这部分只涉及python比较基础的知识,如复杂的面向对象.多线程.通信等知识会放在之后的深入学习中介绍,因此整个学习过程也…