【Omi框架学习之旅 - 通过omi-id来实现组件通讯 及原理说明】的更多相关文章

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

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

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框架学习之旅 - 插件机制之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框架学习之旅 - 组件 及原理说明

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

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

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

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

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

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

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

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

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

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

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

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框架学习之旅 - 组件通讯(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…

滴滴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进行优化(重复资源优化.无用资源优化…

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

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

yii框架学习(获取插入后的id)

插入单条数据, 获取插入数据的id. $model->attributes['id']; new  model 添加数据的时候, 需要注意, 如果是想要循环添加多条数据的情况, new model 的操作要写在循环体里, 不小心写在循环体外面, 那么最终插入数据库中的数据将是遍历的最后一条数据. 把new model 操作写在循环体内才能成功插入遍历的全部数据.…

Omi框架Store体系的前世今生

原文链接-https://github.com/AlloyTeam/omi Store 体系 先说说Store系统是干什么的!为什么要造这样一个东西?能够系统架构带来什么? 当我们组件之间,拥有共享的数据的时候,经常需要进行组件通讯.在Omi框架里,父组件传递数据给子组件非常方便: 通过在组件上声明 data-* 或者 :data-* 传递给子节点 通过在组件上声明 data 或者 :data 传递给子节点 (支持复杂数据类型的映射) 声明 group-data 把数组里的data传给一堆组件传…

WCF学习之旅——第一个WCF示例（一）

最近需要用到WCF,所以对WCF进行了解.在实践中学习新知识是最快的,接下来先做了一个简单的WCF服用应用示例. 本文的WCF服务应用功能很简单,却涵盖了一个完整WCF应用的基本结构.希望本文能对那些准备开始学习WCF的初学者提供一些帮助. 在这个例子中,我将实现一个简单的书籍数据查询功能(BookService),即根据书籍ID去查询对应书籍的信息,并显示出来.和传统的分布式通信框架一样,WCF本质上提供一个跨进程.跨机器.跨网络的服务调用.在本例中,客户端和WCF应用服务通过运行在同一台机器…

我的AngularJS 学习之旅

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

180分钟的python学习之旅

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

WCF学习之旅—第三个示例之四（三十）

       上接WCF学习之旅—第三个示例之一(二十七)               WCF学习之旅—第三个示例之二(二十八)              WCF学习之旅—第三个示例之三(二十九)           在上一篇文章中我们创建了WCF服务端应用程序,在这一篇文章中我们来学习如何创建WCF的服务端寄宿程序与客户端调用程序. 关于如何寄宿可以参考以下文章WCF学习之旅—WCF寄宿前的准备(八),WCF学习之旅—WCF服务部署到IIS7.5(九),WCF学习之旅—WCF服务部署到应用程序…

WCF学习之旅—第三个示例之三（二十九）

上接WCF学习之旅—第三个示例之一(二十七) WCF学习之旅—第三个示例之二(二十八) 在上一篇文章中我们创建了实体对象与接口协定,在这一篇文章中我们来学习如何创建WCF的服务端代码.具体步骤见下面. 六.创建项目BookMgr.Service的WCF服务代码 第一步.安装Entity Framework 6.1.3 1)  安装过程同上一篇文章中类似.使用NuGet下载最新版的Entity Framework 6.1.3.在解决方案资源管理器中——>在项目BookMgr.Service上鼠标右…

WCF学习之旅—第三个示例之五（三十一）

   上接WCF学习之旅—第三个示例之一(二十七)               WCF学习之旅—第三个示例之二(二十八)              WCF学习之旅—第三个示例之三(二十九) WCF学习之旅—第三个示例之四(三十) 十.添加保存功能 在此步骤中,将在应用程序中添加书籍的保存功能,涉及两个功能“新增”与“修改”. 在解决方案资源管理器中,选中“FrmBook.cs”文件,在弹出的右键菜单中选择“打开”,或者使用鼠标左键双击. 在FrmBook.cs界面中,使用鼠标双击“保存”按钮与“…

WCF学习之旅—实现支持REST客户端应用（二十四）

WCF学习之旅—实现REST服务(二十二) WCF学习之旅—实现支持REST服务端应用(二十三) 在上二篇文章中简单介绍了一下RestFul与WCF支持RestFul所提供的方法,及创建一个支持REST的WCF服务端程序,本文介绍如何调用上一篇文章介绍的RestFul服务端. 五.Windows客户端调用 为了强调REST的通用性,客户端不用WCF的形式调用服务,而是采用HttpWebResponse通过编程方式直接访问,消息格式我们选XML. 首先,我们使用C#来封装一个RestHelper类…

WCF学习之旅—TCP双工模式（二十一）

WCF学习之旅—请求与答复模式和单向模式(十九) WCF学习之旅—HTTP双工模式(二十) 五.TCP双工模式 上一篇文章中我们学习了HTTP的双工模式,我们今天就学习一下TCP的双工模式. 在一个基于面向服务的分布式环境中,借助一个标准的.平台无关的通信协议,使各个服务通过SOAP Message实现相互之间的交互.这个交互的过程实际上就是信息交换的过程.WCF支持不同形式的信息交换,我们把这称之为信息交换模式(Message Exchange Pattern(简称MEP),下同), 常见的M…

WCF学习之旅—基于Fault Contract 的异常处理（十八）

   WCF学习之旅—WCF中传统的异常处理(十六) WCF学习之旅—基于ServiceDebug的异常处理(十七) 三.基于Fault Contract 的异常处理 第二个示例是通过定制ServiceDebug来获取服务端的异常,但是这种方式只能用于Debug阶段.在我们的WCF应用发布之后,这种获取异常的方式无法在我们的工作环境中使用.我们必须找到一种异常处理方式可以在客户端获取相应的异常提示信息.那就是我们接下来要介绍的基于FaultContract的解决方案.我们知道WCF采用一种基于…

Hadoop学习笔记—18.Sqoop框架学习

一.Sqoop基础:连接关系型数据库与Hadoop的桥梁 1.1 Sqoop的基本概念 Hadoop正成为企业用于大数据分析的最热门选择,但想将你的数据移植过去并不容易.Apache Sqoop正在加紧帮助客户将重要数据从数据库移到Hadoop.随着Hadoop和关系型数据库之间的数据移动渐渐变成一个标准的流程,云管理员们能够利用Sqoop的并行批量数据加载能力来简化这一流程,降低编写自定义数据加载脚本的需求. Apache Sqoop(SQL-to-Hadoop) 项目旨在协助 RDBMS 与…