superbug / blog Goto Github PK

View Code? Open in Web Editor NEW

2.0 3.0 1.0 580 KB

Github issue based blog.

Home Page: https://github.com/superbug/blog/issues

blog's Introduction

My blog based on github issue.

总结、传播、分享

Thanks GitHub!

文章列表

blog's People

Contributors

Stargazers

Watchers

Forkers

huige555551

blog's Issues

ionic和react native的区别

我对hybrid的理解：

我们想用web技术开发移动app，要解决以下几个问题：

1、最好高大上一些，最好能够封装一个app让用户安装，不要让用户打开浏览器输入网址（区别于响应式）＝＝＝》android和ios都有webview控件允许内嵌一个浏览器打开一个html页面，这个问题解决。

2、最好能够让我写一遍代码，然后所有平台都能够使用（开发、维护成本方面的考量）＝＝＝》cordova可以实现不同平台的编译打包，写一遍代码可以编译出不同终端的版本，这个问题也解决。

3、要让我能够访问设备信息（摄像头、电话簿、陀螺仪。。。）＝＝＝》也是cordova，封装了统一的js接口让我们在js里可以访问native api，这个问题也解决。

ionic基本实现思路

它事实上就是angular + cordova + 一套前端ui控件库，本质上还是手机端webview控件包了个网站。其实不用angular，用backbone、react、ember也一样能够实现，只要搭载一个ui库，类似：ratchet 或 framework7，再配合上cordova也一样能够实现。只是需要折腾一下做下整合。ionic也只是帮我们做了下整合工作，它天生具备angular的mvvm模式帮我们很快地开发单页应用，然后还集成了一套样式组建库，让这个网站看起来像个app，借助cordova获取设备访问及不同平台的打包能力。

其实从这个维度讲，ionic并没有把hybrid的**发挥得很好，从头到尾它除了一个webview，基本没用到手机端的其他控件。hybrid应该是鼓励用适合的方法解决适合的问题：如果你要开发一个 3D 游戏，原生开发方式能够带来更好的游戏体验，如果就是简单的信息展示，表单填写，那么大可在app里嵌入个webview用web技术去解决（当然如果任性得只剩下钱全用navtive的代码去写也无所谓）。

这边有两篇文章验证了以上的观点：

1、BlendUI，让webapp的体验和交互得到质的提升
2、Hybrid sweet spot: Native navigation, web content

react native是怎么做的

其实有一篇文章解释得很清楚：
React Native通信机制详解

它与ionic的区别就在于：ionic是html ＋ css冒充出来的控件，react native调用的真正的native控件。所以这就是体现了既拥有Native的用户体验、又保留React的开发效率--React Native的设计理念。

参考文章：

React Native概述：背景、规划和风险

最后来做个对比：

ionic:

优点：

1、纯web思维，开发速度快，简单方便
2、一次编码，到处运行

缺点：

1、web技术无法解决一切问题，对于比较耗性能的地方无法利用native的思维实现优势互补

react native:

优点：

1、拥有native的用户体验和web的开发效率

缺点：

1、对开发人员要求较高，不是懂点web技术就行的，当官方封装的控件、api无法满足需求时就必然需要懂一些native的东西去扩展。

2、官方说得很隐晦：learn once, write anywhere。人家可没说run anywhere。事实上，从官方的api来看SliderIOS，SwitchIOS..等等这些控件，之后势必会出现SliderAndroid，SwitchAndroid...，也就是很可能针对不同的平台会需要写多套代码。

~~3、发展还不成熟，目前只有ios的实现，android的实现需要等到10月份。~~

所以

目前来看，react native的发展还不够成熟，在没有把握hold住的时候可以观望一段时间再考虑。ionic的话适合快速构建产品原型，一般来讲对性能体验要求不是很强烈的话可以试着用这个搞。

其他相关文章：
聊聊移动端跨平台开发的各种技术

怎样封装自己的jQuery插件

前言

jQuery生态圈有各种各样的插件，极大地方便了前端开发者的开发效率。很多时候你需要一个图表插件、树控件、slide幻灯......诸如此类的插件，你可能会不假思索地打开github，然后就会出来一大堆你想要的jQuery控件，非常省事。然而，面对千奇百怪的业务需求，总有插件无法满足的时候，这时候我们需要写一个维护性高的jQuery插件，所以，下面就说下怎么去封装一个属于自己的jQuery插件。

基本原理

扩展jQuery原型链，像。。。这样：

$.fn.myPlugin = function() {
    console.log('Hello world!');
}

于是乎，所有jQuery对象都拥有了myPlugin方法，在你想要的时候，可以：

$('body').myPlugin();

太简单了，没感觉？来看一个通用的**jQuery插件封装模版**

;(function ($, window, document, undefined) {
    var pluginName = 'pluginName',  //自定义一个插件名称
        defaults = {                //定义插件的默认属性
        };

    function Plugin(element, options) {
        this.element = element;     //缓存element,让原型链上的方法都可以访问

        this.options = $.extend({}, defaults, options);  //默认属性和自定义熟悉合并处理

        this._defaults = defaults;
        this._name = pluginName;

        this.init();  //插件初始化（在里面可以做dom构造，事件绑定等操作）
    }

    Plugin.prototype.init = function() {
    };

    $.fn[pluginName] = function (options) {
        return this.each(function () {
            //将实例化后的插件暂存，避免重复渲染
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
            }
        });
    }

})(jQuery, window, document);

它大概干了以下几件事

实例化插件对象并暂存
解析调用时传过来的参数，根据参数的不同做出不同的响应
初始化（构造方法）
。。。

这就意味着每写一个插件，就必须很无聊地重复地写以上的代码，当然如果只是为了单独写一两个插件，按上面的写法完全可以，也是业界比较推荐的最佳实践。然而，当我们的控件达到一定数量的时候就有必要有更好的组织代码的方式了。

jQuery widget

jquery widget就是一种很好的ui组件库很好的基础，jquery ui就是基于它构建出来的，它是jquery官方维护的一套插件组建方式，比较适合构建大规模的ui组件库。

jQuery widget封装模版

;(function ($, window, document, undefined) {

    //定义插件命名空间
    $.widget('namespace.widgetname', {
        //Options to be used as defaults
        options: {
            someValue: null
        },

        //插件实例化时调用
        _create: function() {

        },

        //插件销毁时调用
        destroy: function() {
            $.Widget.prototype.destroy.call(this);
        },

        //自定义方法
        methodB: function(event) {
            this._trigger('methodA', event, {
                key: value
            });
        },

        //自定义方法
        methodA: function(event) {
            this._trigger('dataChanged', event, {
                key: value
            });
        },

        //调整参数时调用
        _setOption: function(key, value) {
            switch (key) {
                case 'someValue':
                    //this.options.someValue = doSomethingWith(value);
                break;
                default:
                    //this.options[ key ] = value;
                break;
            }
            $.Widget.prototype._setOption.apply(this, arguments);
        }
    });
})(jQuery, window, document);

这样，我们就不用每次机械地去：

定义this.element

this.element = element;

解析options参数

this.options = $.extend({}, defaults, options);

实例化插件对象

if (!$.data(this, 'plugin_' + pluginName)) {
    $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
}

调用初始化｜销毁方法

this.init();

所有这一切都是jquery widget自动帮你搞定的，是不是略high?

参考资源

javascript-patterns
why-use-the-widget-factory
how-to-use-the-widget-factory