• 这次讲的是把React和Knockout结合使用的示例,两个框架各有所长,也有不同的特点和特色,这次把他们结合起来,似乎有些胆大妄为,然而有时候就是容易遇到一些奇怪的需求。使得我们不得不去出一些奇招。然而这样真的...

    这次讲的是把React和Knockout结合使用的示例,两个框架各有所长,也有不同的特点和特色,这次把他们结合起来,似乎有些胆大妄为,然而有时候就是容易遇到一些奇怪的需求。使得我们不得不去出一些奇招。然而这样真的很奇怪吗?实际上并不是这样子,使用react创建控件,再使用knockout构建MVVM框架,开发流程可以变得有条不絮,易于扩展维护,同时可实现代码重用,减少开发的工作量。

    1.要构建React-Knockout MVVM框架我们首先需要下载React和knockout的JS库

       React:http://facebook.github.io/react/

       Knockout:http://knockoutjs.com/

    2.下载完成后将react和knockout库文件导入到工程里,我在工程量建了framework文件夹来放置这些框架文件。

    3. 要使React和knockout融合,需要做一个特别的处理,在framework文件夹里新建一个knockoutReact.js文件,并向其添加如下代码。

    var KnockoutMixin = {
    
        updateKnockout:function() {
            this.__koTrigger(!this.__koTrigger());
        },
    
        componentDidMount:function() {
            this.__koTrigger = ko.observable(true);
            this.__koModel = ko.computed(function () {
                this.__koTrigger(); // subscribe to changes of this...
    
                return {
                    props: this.props,
                    state: this.state
                };
            }, this);
    
            ko.applyBindings(this.__koModel, this.getDOMNode());
        },
    
        componentWillUnmount:function() {
            ko.cleanNode(this.getDOMNode());
        },
    
        componentDidUpdate:function() {
            this.updateKnockout();
        }
    };
    
    var reactHandler = ko.bindingHandlers.react = {
        render: function ( el, Component, props ) {
            React.render(
                React.createElement(Component,props),
                el
            );
        },
    
        init: function ( el, valueAccessor, allBindingsAccessor, viewModel, bindingContext ) {
            var options = valueAccessor();
            var Component = ko.unwrap(options.component || options.$);
            var props = ko.toJS(options.props || viewModel);
    
            reactHandler.render(el, Component, props);
    
            return { controlsDescendantBindings: true };
        },
    
        update: function ( el, valueAccessor, allBindingsAccessor, viewModel, bindingContext ) {
            var options = valueAccessor();
            var Component = ko.unwrap(options.component || options.$);
            var props = ko.toJS(options.props || viewModel);
    
            reactHandler.render(el, Component, props);
    
            return { controlsDescendantBindings: true };
        }
    };

    这片代码中第一段的作用是在react文件里添加knockout绑定机制,第二段代码作用则是实现在UI中直接绑定UI元素来创建一个控件,例如使用<div data-bind="react: { $: CustomTextBox, props: $data }><div>就可以直接在html里创建一个CustomTextBox控件了

    4. 下面我们来创建一个控件login,并将其放置在文件夹controls中,文件名称为login.jsx

    /**
     * data bind datas
     *      1. username 用户名
     *      2. password 密码
     *      3. loginCommand 登录事件
     */
    
    var UserLogin = React.createClass({
        mixins: [ KnockoutMixin ],
    
        getDefaultProps:function(){
            return {
                labelUsername:  "Username",
                labelPassword:  "Password",           
            };
        },
    
        render: function(){
            return <div style={{marginTop: 20, marginLeft: 20}}>
                        <div>
                            <label>{this.props.labelUsername}</label>
                            <input type="text" style={{marginLeft: 20}}
                                   data-bind="value: props.username"/>
                        </div>
                        <div style={{marginTop: 10}}>
                            <label>{this.props.labelPassword}</label>
                            <input type="text" style={{marginLeft: 20}}
                                   data-bind="value: props.password"/>
                        </div>
                        <div style={{marginTop: 20, marginLeft: 150}}>  
                            <button data-bind="click: props.loginCommand"
                                    style={{width:100}}>Login</button>  
                        </div>  
                   </div>;
        },
    });

    控件里用户名username,密码password,登录操作loginCommand是适应knockout data-bind绑定的,这个控件会被引用在某个view中然后绑定到viewmodel中,viewmodel的数据改变后,控件UI也会跟随改变,具体会是什么样子,请继续跟随下面的步骤。

    5.在view文件夹里创建一个登录界面login.html。在这个页面里,使用了data-bind react:来创建我们上一个步骤的登录控件,并在后面的js代码中新建了一个viewmodel并将其绑定至UI中。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title id="title">Login</title>
    
    	<script type="text/javascript" src="../framework/react.js"></script>
    	<script type="text/javascript" src="../framework/knockout-v3.3.0.js"></script>
    	<script type="text/javascript" src="../framework/JSXTransformer.js"></script>
    	<script type="text/javascript" src="../framework/knockoutReact.js"></script>
    
    	<script type="text/jsx" src="../controls/login.jsx"></script>
    
    	<script type="text/javascript" src="../viewmodel/loginViewModel.js"></script>
    </head>
    <body style="background:lightblue">
    	<div style="margin-left:30px">
    		<button data-bind="click: viewModel.fillInfo">Fill username and password</button>
    		<button data-bind="click: viewModel.clear">Clear</button>
    	</div>
    
    	<div data-bind="react: { $: UserLogin,
    					 	  	 props: {
    					 	  	 			 username : username,
    					 	  	 			 password : password,
    					 	  	 			 loginCommand : viewModel.startLogin.bind($data)
    					 	  	 	    }
    					 	    }">
    	<div>
    </body>
    
    <script type="text/jsx">
    	var viewModel = new loginViewModel();
    
        ko.applyBindings(loginViewModel);
    </script>
    
    </html>
    


    绑定的元素有

                   username : username, 控件的username绑定了View Model的username
                   password : password, 控件的password绑定了View Model的password
                   loginCommand : viewModel.startLogin.bind($data) 控件的loginCommand绑定了View Model的startLogin方法

    6.新建一个viewmodel的文件夹并向其添加loginViewModel.js,这是login view的viewmodel文件了,处理了login view里所需要的逻辑。

    var loginViewModel = (function () {
        function loginViewModel() {
            this.username = ko.observable();
            this.password = ko.observable();
        }
    
        /**
         * 登录操作
         */
        loginViewModel.prototype.startLogin = function () {
        	var name = this.username();
        	var secure = this.password();
    
            alert("Username: " + name + "\nPassword: " + secure);
        }
    
        /**
         * 填充用户名和密码
         */
        loginViewModel.prototype.fillInfo = function () {
            this.username("YLD");
            this.password("123");
        }
    
        /**
         * 清空用户名和密码
         */
        loginViewModel.prototype.clear = function () {
            this.username("");
            this.password("");
        }
    
        return loginViewModel;
    })();


    7.工程创建实现完成,现在运行下吧。我这里使用的是google chrome浏览器,然后要此工程在浏览器里运作成功,还必须做一个特别的处理。右击chrome浏览器快捷方式,打开属性。在目标后面添加 --disable-web-security

    工程运行效果如下

    源代码下载地址:http://download.csdn.net/detail/leyyang/9022673

    展开全文
  • React-intl简要介绍 React-intl是FormatJS的一部分,内置实现Date/Number/Time的国际格式化; 可以自定义映射关系,完成值对之间的替换(这是这篇文章的主要内容); 通过获取浏览器的language来设置显示中文...

    React-intl简要介绍

    • React-intl是FormatJS的一部分,内置实现Date/Number/Time的国际格式化
    • 可以自定义映射关系,完成值对之间的替换(这是这篇文章的主要内容);
    • 通过获取浏览器的language来设置显示中文/英文(通过自定义映射,而非自动全文转换);
    • 常用于实现静态内容,如按钮文字,公司名称的转换;

    React框架结合国际化所需要的依赖包

    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-env": "^1.1.8",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "copy-webpack-plugin": "^4.0.1",
    "html-webpack-plugin": "^2.26.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-intl": "^2.2.3",
    "webpack": "^2.2.0",
    "webpack-del-plugin": "0.0.1",
    "webpack-dev-server": "^1.16.2",
    "webpack-notifier": "^1.5.0"

    自定义国际型格式化例子

    index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    //'react-intl'中引入addLocaleData,IntlProvider,FormattedMessage三个格式化组件;
    import {addLocaleData,IntlProvider,FormattedMessage} from 'react-intl';
    /*
    *引入与navigator.languages[0]所对应的语言;
    *如果没有引入对应的语言,会使用默认的“en”;
    *导致FormattedMessage的映射不会成功;
    */
    import zh from 'react-intl/locale-data/zh';
    import en from 'react-intl/locale-data/en';
    /*
    *引入自定义的映射表;
    *通过与FormattedMessage的id值来当索引映射返回值;
    */
    import zh_CN from './locale/zh_CN';
    import en_US from './locale/en_US';
    import App from './components/app';
    /*
    *messages是render()时IntlProvider组件所传的props,属性名固定:messages;
    *messages返回值为映射表,比如:'react-intl/locale-data/zh'&&'./locale/zh_CN';
    */
    let messages = {};
    messages["en-US"] = en_US;
    messages["zh-CN"] = zh_CN;
    /*
    *获取浏览器设置的语言;
    *按我demo中的设置,返回["zh-CN", "zh", "en-US", "en"],排序与语言设置顺序一直;
    */
    const languages = navigator.languages;
    const currentLang = languages[0];
    console.log("languages: ", languages);
    console.log("language: ", currentLang);
    // 载入语言数据;
    //载入一个addLocaleData(zh);
    //载入多个;
    addLocaleData([...zh,...en]);
    
    ReactDOM.render(
        // IntlProvider为'react-intl'指定的包裹组件名;
        <IntlProvider locale={currentLang} messages={messages[currentLang]}>
            <App />
        </IntlProvider>,
        document.body
    )
    
    /*
    浏览器languages大全:
    "af", "sq", "ar-SA", "ar-IQ", "ar-EG", "ar-LY", "ar-DZ", "ar-MA", "ar-TN", "ar-OM",
        "ar-YE", "ar-SY", "ar-JO", "ar-LB", "ar-KW", "ar-AE", "ar-BH", "ar-QA", "eu", "bg",
        "be", "ca", "zh-TW", "zh-CN", "zh-HK", "zh-SG", "hr", "cs", "da", "nl", "nl-BE", "en",
        "en-US", "en-EG", "en-AU", "en-GB", "en-CA", "en-NZ", "en-IE", "en-ZA", "en-JM",
        "en-BZ", "en-TT", "et", "fo", "fa", "fi", "fr", "fr-BE", "fr-CA", "fr-CH", "fr-LU",
        "gd", "gd-IE", "de", "de-CH", "de-AT", "de-LU", "de-LI", "el", "he", "hi", "hu",
        "is", "id", "it", "it-CH", "ja", "ko", "lv", "lt", "mk", "mt", "no", "pl",
        "pt-BR", "pt", "rm", "ro", "ro-MO", "ru", "ru-MI", "sz", "sr", "sk", "sl", "sb",
        "es", "es-AR", "es-GT", "es-CR", "es-PA", "es-DO", "es-MX", "es-VE", "es-CO",
        "es-PE", "es-EC", "es-CL", "es-UY", "es-PY", "es-BO", "es-SV", "es-HN", "es-NI",
    "es-PR", "sx", "sv", "sv-FI", "th", "ts", "tn", "tr", "uk", "ur", "ve", "vi", "xh",
    "ji", "zu"];*/

    app.js

     /*
        基本用法:
        import React, {Component} from 'react';
        import {FormattedMessage} from 'react-intl';
    
        class App extends Component {
            constructor(props) {
                super(props);
            }
            render() {
    
                /* 
                *FormattedMessage组件中的信息parser后显示以<span>包裹的文本;
                *可以通过tagName指定其它标签包裹;
                *以id属性的值"hello"为索引——索引到自定义的映射表'./locale/zh_CN'中去;
                *messages['hello']——messages为父组件IntlProvider的props的messages属性;
                *若没有上述的返回值,则显示defaultMessage的值"React Intl Translations Example";
                */
                /*
                *FormattedMessage添加子元素或ReactElement;
                *  <FormattedMessage id="hello">
                *      {(formattedValue)=>(
                *          <em>{formattedValue}</em>
                *      )}
                *  </FormattedMessage>
                */
                return (
                    <div>
                        <h1>
                            <div>
                                <FormattedMessage
                                    id="hello"
                                    defaultMessage="React Intl Translations Example"
                                />
                            </div>
                        </h1>
    
                        <h4>
                            <FormattedMessage
                                tagName = 'p'
                                id='superHello'
                                defaultMessage="Locales:北京"
                                values={{
                                    someone:'zxdobest'
                                }}
                            />
                        </h4>
                        <h2>
                            <FormattedMessage id="hello">
                                {(formattedValue)=>(
                                    <em>{formattedValue}</em>
                                )}
                            </FormattedMessage>
                        </h2>
                    </div>
                );
            }
        }
    
        export default App;
        */
    
    
    //
    输出HTML块结构;
    import React from 'react';
    import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
    
    const ChildComponent = ({ intl }) => {
        //传入的{intl}名称不可更改;
        console.log(React.PropTypes)
        const getMessage = intl.messages;
        return(
            <section>
                {/*
                    *通过intl.messages获取映射属性的方法;
                    * 可以和任意内容(如:HTML标签)组合;
                    * */}
                <a>{getMessage.hello}</a>
                {/*通过FormattedMessage格式化,可以传入参数{values}*/}
                <FormattedMessage
                    tagName = 'p'
                    id='superHello'
                    defaultMessage="Locales:北京"
                    values={{
                        someone:'zxdobest'
                    }}
                />
                {/*
                   *这种结构,类同于intl.messages.superHello可以和其它内容任意组合;
                   *能且仅能获取superHello的映射;
                   * 目前尚未找到如果在第一种方法中传入values;
                */}
                <FormattedMessage id="superHello" values={{
                    someone:'mihuartuanr'
                }}>
                    {(formattedValue)=>(
                        <p>{formattedValue}</p>
                    )}
                </FormattedMessage>
            </section>
        );
    }
    
    ChildComponent.propTypes = {
        intl: intlShape.isRequired
    }
    
    export default injectIntl(ChildComponent);

    参考文章:
    React-intl Internationaliztion API

    展开全文
  • React-intl

    2017-10-12 13:56:54
    React-intl的应用依赖于Internationaliztion API,这些APIs现代浏览器和NodeJS(>0.12)内涵; 对于老版浏览器需要搭建一些环境; React-intl简要介绍 React-intl是FormatJS的一部分,内置实现Date/...

    API应用环境

    • React-intl的应用依赖于Internationaliztion API,这些APIs现代浏览器和NodeJS(>0.12)内涵;

    • 对于老版浏览器需要搭建一些环境

    React-intl简要介绍

    • React-intl是FormatJS的一部分,内置实现Date/Number/Time的国际格式化;

    • 可以自定义映射关系,完成值对之间的替换(这是这篇文章的主要内容);

    • 通过获取浏览器的language来设置显示中文/英文(通过自定义映射,而非自动全文转换);

    • 常用于实现静态内容,如按钮文字,公司名称的转换;

    React框架结合国际化所需要的依赖包

    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-env": "^1.1.8",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "copy-webpack-plugin": "^4.0.1",
    "html-webpack-plugin": "^2.26.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-intl": "^2.2.3",
    "webpack": "^2.2.0",
    "webpack-del-plugin": "0.0.1",
    "webpack-dev-server": "^1.16.2",
    "webpack-notifier": "^1.5.0"
    

    React-intl格式化语法

    该部分有详细的介绍,因此忽略

    自定义国际型格式化

    重点部分:该项目demo单一功能(internationalization) demo中每一部分都有详细的讲解

    • 不知道这个功能是很蹩脚,还是蹩脚,网上的例子几乎没有,官网的例子……我已经无言了,建议不要看官网了*

    index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    // 从'react-intl'中引入addLocaleData,IntlProvider,FormattedMessage三个格式化组件;
    import {addLocaleData,IntlProvider,FormattedMessage} from 'react-intl';
    /*
    *引入与navigator.languages[0]所对应的语言;
    *如果没有引入对应的语言,会使用默认的“en”;
    *导致FormattedMessage的映射不会成功;
    */
    import zh from 'react-intl/locale-data/zh';
    import en from 'react-intl/locale-data/en';
    /*
    *引入自定义的映射表;
    *通过与FormattedMessage的id值来当索引映射返回值;
    */
    import zh_CN from './locale/zh_CN';
    import en_US from './locale/en_US';
    import App from './components/app';
    /*
    *messages是render()时IntlProvider组件所传的props,属性名固定:messages;
    *messages返回值为映射表,比如:'react-intl/locale-data/zh'&&'./locale/zh_CN';
    */
    let messages = {};
    messages["en-US"] = en_US;
    messages["zh-CN"] = zh_CN;
    /*
    *获取浏览器设置的语言;
    *按我demo中的设置,返回["zh-CN", "zh", "en-US", "en"],排序与语言设置顺序一直;
    */
    const languages = navigator.languages;
    const currentLang = languages[0];
    console.log("languages: ", languages);
    console.log("language: ", currentLang);
    // 载入语言数据;
    //载入一个addLocaleData(zh);
    //载入多个;
    addLocaleData([...zh,...en]);
    
    ReactDOM.render(
        // IntlProvider为'react-intl'指定的包裹组件名;
        <IntlProvider locale={currentLang} messages={messages[currentLang]}>
            <App />
        </IntlProvider>,
        document.body
    )
    
    /*
    浏览器languages大全:
    "af", "sq", "ar-SA", "ar-IQ", "ar-EG", "ar-LY", "ar-DZ", "ar-MA", "ar-TN", "ar-OM",
        "ar-YE", "ar-SY", "ar-JO", "ar-LB", "ar-KW", "ar-AE", "ar-BH", "ar-QA", "eu", "bg",
        "be", "ca", "zh-TW", "zh-CN", "zh-HK", "zh-SG", "hr", "cs", "da", "nl", "nl-BE", "en",
        "en-US", "en-EG", "en-AU", "en-GB", "en-CA", "en-NZ", "en-IE", "en-ZA", "en-JM",
        "en-BZ", "en-TT", "et", "fo", "fa", "fi", "fr", "fr-BE", "fr-CA", "fr-CH", "fr-LU",
        "gd", "gd-IE", "de", "de-CH", "de-AT", "de-LU", "de-LI", "el", "he", "hi", "hu",
        "is", "id", "it", "it-CH", "ja", "ko", "lv", "lt", "mk", "mt", "no", "pl",
        "pt-BR", "pt", "rm", "ro", "ro-MO", "ru", "ru-MI", "sz", "sr", "sk", "sl", "sb",
        "es", "es-AR", "es-GT", "es-CR", "es-PA", "es-DO", "es-MX", "es-VE", "es-CO",
        "es-PE", "es-EC", "es-CL", "es-UY", "es-PY", "es-BO", "es-SV", "es-HN", "es-NI",
    "es-PR", "sx", "sv", "sv-FI", "th", "ts", "tn", "tr", "uk", "ur", "ve", "vi", "xh",
    "ji", "zu"];*/

    app.js

        /*
        基本用法:
        import React, {Component} from 'react';
        import {FormattedMessage} from 'react-intl';
        
        class App extends Component {
            constructor(props) {
                super(props);
            }
            render() {
        
                /* 
                *FormattedMessage组件中的信息parser后显示以<span>包裹的文本;
                *可以通过tagName指定其它标签包裹;
                *以id属性的值"hello"为索引——索引到自定义的映射表'./locale/zh_CN'中去;
                *messages['hello']——messages为父组件IntlProvider的props的messages属性;
                *若没有上述的返回值,则显示defaultMessage的值"React Intl Translations Example";
                */
                /*
                *FormattedMessage添加子元素或ReactElement;
                *  <FormattedMessage id="hello">
                *      {(formattedValue)=>(
                *          <em>{formattedValue}</em>
                *      )}
                *  </FormattedMessage>
                */
                return (
                    <div>
                        <h1>
                            <div>
                                <FormattedMessage
                                    id="hello"
                                    defaultMessage="React Intl Translations Example"
                                />
                            </div>
                        </h1>
        
                        <h4>
                            <FormattedMessage
                                tagName = 'p'
                                id='superHello'
                                defaultMessage="Locales:北京"
                                values={{
                                    someone:'zxdobest'
                                }}
                            />
                        </h4>
                        <h2>
                            <FormattedMessage id="hello">
                                {(formattedValue)=>(
                                    <em>{formattedValue}</em>
                                )}
                            </FormattedMessage>
                        </h2>
                    </div>
                );
            }
        }
        
        export default App;
        */
    
    
    //
    输出HTML块结构;
    import React from 'react';
    import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
    
    const ChildComponent = ({ intl }) => {
        //传入的{intl}名称不可更改;
        console.log(React.PropTypes)
        const getMessage = intl.messages;
        return(
            <section>
                {/*
                    *通过intl.messages获取映射属性的方法;
                    * 可以和任意内容(如:HTML标签)组合;
                    * */}
                <a>{getMessage.hello}</a>
                {/*通过FormattedMessage格式化,可以传入参数{values}*/}
                <FormattedMessage
                    tagName = 'p'
                    id='superHello'
                    defaultMessage="Locales:北京"
                    values={{
                        someone:'zxdobest'
                    }}
                />
                {/*
                   *这种结构,类同于intl.messages.superHello可以和其它内容任意组合;
                   *能且仅能获取superHello的映射;
                   * 目前尚未找到如果在第一种方法中传入values;
                */}
                <FormattedMessage id="superHello" values={{
                    someone:'mihuartuanr'
                }}>
                    {(formattedValue)=>(
                        <p>{formattedValue}</p>
                    )}
                </FormattedMessage>
            </section>
        );
    }
    
    ChildComponent.propTypes = {
        intl: intlShape.isRequired
    }
    
    export default injectIntl(ChildComponent);
    

    常见问题

    1. [React Intl] Missing locale data for locale: "zh-CN". Using default locale: "en" as fallback.

    • 要引入所设locale的语言库import enLocaleData from 'react-intl/locale-data/zh'该文件为react-intl包自动下载——还有一个好处:在我们引入另一个自定义的映射时,依旧可以使用react-intl原有的数字/时间等数据的国际格式化;

      • 添加指定语言库addLocaleData(enLocaleData);

    1. 设置&获取浏览器的locale

      • chrome:

      • js获取浏览器语言设置:

        let languages = navigator.languages;
        console.log("languages: ", languages);
        //=>languages: ["zh-CN", "zh", "en-US", "en"]

    demo使用方法

    • 安装有nodejs和webpack环境;

    • 克隆或下载下来的文件夹进行npm init -y

    • 安装依赖npm install

    • 通过npm run start利用本地服务器查看

    • 打开浏览器localhost:3000查看页面

    参考文档

    1. Format.JS

    2. github/yahoo/react-intl

    3. NPM/react-intl

    4. Internationalization in React

    5. Segmentfault/webFunc

    展开全文
  • 前端JavaScript多语言加载器,前端部署好各个语言的json或txt语言包,可结合vue等使用。 多语言,不就从浏览器navigator.language里拿信息么,前端也可以。借此做一个前端语言包加载器。 demo示例 <div id="app_...
        

    multi-lang-js

    前端JavaScript多语言加载器,前端部署好各个语言的json或txt语言包,可结合vue等使用。

    多语言,不就从浏览器navigator.language里拿信息么,前端也可以。借此做一个前端语言包加载器。

    demo示例

        <div id="app_lang">
            <h1>{{ langContent.title }}</h1>
            <h1>{{ langContent.name1 }}</h1>
            <h1>{{ langContent.name2 }}</h1>
            <h1>{{ langContent.name3 }}</h1>
        </div>
    <script src="js/vue.min.js"></script>
    <script src="js/multi-lang.js"></script>
    <script>
    var vue_app = new Vue({
            el: '#app_lang',
            data: {
                    langContent: {
                        //
                    }
            }
    })
    var multiLang = new MultiLang() // 1:
    //2:import multiLang from 'multi-lang-js';
    //or
    //3:var multiLang = require('multi-lang-js');
    multiLang.init({
        path: 'css/',
        name: {
            'en': 'lang_en.txt',
            'cn': 'lang_cn.txt',
            'tw': 'lang_cn.txt',
            'th': 'lang_th.txt',
            'vn': 'lang_vn.txt',
            'ru': 'lang_ru.txt',
            'ko': 'lang_ko.txt'
        },
        callback: function (data, langName) {
            vue_app.langContent = data
            if (langName === 'en') {
                //某个语言你需要再特殊处理的话
            }
        }
    })
    </script>

    初始化multiLang.init()

    参数名 类型 说明
    path str 翻译文本的相对路径,这里我把所有翻译文本放到css文件夹下
    dataType str 值为 txt 或者json。可忽略此参数,默认为json,值为txt时,则返回的是txt文本
    name obj 各个语言对应加载的翻译文本,属性名不可改,对应的文本名字可以改
    callback fun 回调的第一个参数是加载到的json(或者文本)数据,第二个数据是当前客户端的语言名字

    设置语言multiLang.setLang(langname,callback)

    如果你觉得multiLang.setLang 使用麻烦,也可以:localStorage.lang=langname,这种写法

    注意:设置语言,会让全站语言都立马改动,demo可参考github上的页面。
    开多个页签试试 https://diyao.github.io/multi...

    参数名 类型 说明
    langname str 必须设置,你要设置的语言名
    callback function 可选的回调函数

    测试

    初始化判断当前是何种语言的逻辑:先查浏览器地址栏lang 参数,其次查 localStorage.lang的值,最后看浏览器语言

    所以为了测试预览,你可以在地址后带入参数,lang=en(你想要的语言 ru、ko、th等)。

    https://diyao.github.io/multi...

    说明

    如果你配置的name中,没有(比如当前埃及用户访问),则默认会加载英文的显示。

    前端多语言加载器的特点

    切换语言,不用刷新页面,语言包biu的一下就替换了。某个页签切换语言,全站其他页签biu的一下,全都换了

    npm install multi-lang-js
    

    https://www.npmjs.com/package...

    展开全文
  • 通过选择合适的JavaScript框架来更好适配你的...JavaScript框架,比如Angular.js,Ember.js,或者React.js,能提供很好的代码框架,并且保持代码的组织性,从而使得你的app更具灵活性与可扩展性,开发过程更加容易。

       前言:通过选择合适的JavaScript框架来更好适配你的项目需求,这有利于提高你的开发能力与web apps的竞争力。然后,你可以为基于JavaScript的应用或者网站想个极佳的主意。选择合适框架应该对你项目的成功有显著效果。它可以推到你及时完成项目,并且有助于你将来维护代码。JavaScript框架,比如Angular.js,Ember.js,或者React.js,能提供很好的代码框架,并且保持代码的组织性,从而使得你的app更具灵活性与可扩展性,开发过程更加容易。

       JavaScript场景的波动

          Web开发变化速度非常快。几乎每个月都有一个JavaScript框架诞生,并且已存在的框架也在频繁更新。这些框架和开源代码一样,世界各大社区可以对它们进行完善。到后来,比较每个框架的优点与不同点,变成一件非常不容易的事情。

          Angular Vs React Vs Ember.Deep Dive

          许多开发者都对JavaScript框架有着困惑,因为框架外表与功能差异很大。下面,让我们来比较三大广泛应用于web的流行JavaScript框架的优点:AngularJs、ReactJs和EmberJs。

          框架概览

    框架 AngularJS  ReactJS EmberJS
    概述 主要的 JavaScript MVW 框架 主要用于构建用户界面,但不仅限于此的 JavaScript 库 一个用于创建复杂 Web 应用程序的框架
    创立 2009 由 Miško Hevery 创立 2013 年由 Jordan Walke 创立,开源 2007 年由 Yehuda Katz 创立,名为 SproutCore,2011 年被 Facebook 收购,更名为 EmberJS
    主页 https://angularjs.org/ https://reactjs.net/ http://emberjs.com/
    Github https://github.com/angular/angular.js https://github.com/facebook/react https://github.com/emberjs/ember.js
    错误报告 https://github.com/angular/angular.js/issues https://github.com/facebook/react/issues
    授权 MIT MIT BSD-3-Clause
    使用该技术的知名网站 Youtube, Vevo, Freelancer, Istockphoto, Weather, Sky Store Facebook, Instagram, Khan Academy, New York Times, Airbnb, Flipkart, Sony Lifelog Apple Music, Yahoo!, LinkedIn, TinderBox, Netflix, Groupon
    理想用途 建立调试活跃和互动的 Web 应用程序 数据变化频繁的大型 Web 应用程序 动态 SPA(Scratch Pad Area,暂存区)

    AngularJS.框架中的王者

    Angular.js是一个应用模型-视图-控制器(MVC)结构(Angular 1)的开源web应用框架,模型-视图-视图模型(MVVM)结构(Angular 2),版权归谷歌所有。它是以上最老的三大框架命名。因此,他拥有最庞大的社区。Angular.js通过径向扩展HTML功能,解决了开发SPA的问题(单页应用)。框架的突出特点是快速启动与运行你的app。


    AngularJs 的优缺点

    优点:

    • 自定义文档对象模型(DOM)元素的创建

    • 明确的UI设计与替换。

    • 当在一个HTML文档创建输入属性时,会为每个渲染属性创建独立的数据绑定。在发生变化需要重渲染之前,Angula先检测r页面的每一个明确属性。

    • 依赖注解。

    • 简单路径。

    • 代码容易测试。

    • 框架支持HTML语法扩展,直接创建可复用的组件。

    • 稳健的模板生成方案。在HTML属性使用绑定表达式来驱动模板功能。Angular的模板引擎拥有一个深度理解的DOM,它的优越结构模板减少了创建生成页面所需的代码量。

    • 数据模型对于小规模数据的使用有所限制,其目的为了使得代码简单容易测试。

    • 快速渲染静态列表。

    • 良好的代码复用(Angular库)。

    缺点:

    • API指令的复杂度高。

    • 对于有元素相互调用的页面,Angular速度变得很慢。

    • 初始设计变得慢起来。

    • 由于大量DOM元素,影响性能。

    • 复杂的第三方集成。

    • 曲折的学习路线。

    • 域容易使用,但是难以调试。

    • 路径具有局限性。

    提示:Angular 2 的功能与上述有所不同。Angular 2 没有沿用Angular 1 的设计,它彻底重写了。该框架两个版本有翻天覆地的变化,在开发商之间引起很大的争议。

    ReactJS. 领域中的新生代

    ReactJS是一个开源库,利用其惊人的渲染性能来构建持久的用户接口,由Facebook推出与发布。React在模型视图控制器结构中专注“V”层。React首次发布之后,它迅速达到顶峰。它的出现是为了解决其他JavaScript框架的共同问题——渲染大数据集合的效率。


    ReactJS 的优缺点

    优点:

    • 接口设计与学习API容易。

    • 与其他JavaScript框架相比,具有显著性能。

    • 更新速度快。React创建一个新的虚拟DOM,利用最近数据与比较上个版本的差异提供完善修复机制,创建一个最小的更新列表构成真正的DOM使其同步,而不是每次发生变化都进行重复渲染。

    • 服务端渲染允许创建同构/通用的web apps。

    • 容易导入组件,虽然有一些依赖。

    • 更好的代码复用。

    • 方便JavaScript的调试。

    • 在提高复杂组件性能方面,Angular与React难分高低。

    • 基于层次的全系组件。

    • JSX,一个JavaScript扩展语法,允许引用HTML与使用HTML标签语法来渲染子组件。

    • React Native 库。

    缺点:

    • 它不是完整框架,它是一个库。

    • 非常传统的视图层。

    • Flux结构是开发者使用过的一个与众不同的范例。

    • 大量开发者不喜欢JSX。

    • 曲折学习路线。

    • 集成React到传统MVC框架,犹如铁轨一样需要一些特定配置。


    EmberJS. 挑起重担

    EmberJS 是一个开源的JavaScript框架,用以创建单页客户端web应用,使用模型-视图-控制器(MVC)模式。该框架提供通用数据绑定,基于网址驱动的方法用于构建不同应用,重点放在可扩展性上。

    在2007年,Ember起源于SproutCore。在2011年,它被Facebook收购,重命名为Ember。它从本地框架例如苹果的Cocoa使用轻量灵敏性中,结合了成熟概念。


    EmberJS 的优缺点

    优点:

    • 约定优于配置。Ember.js支持跟随命名约定于自动生成代码,而不是在你的应用不同路径提供详细配置,专款专用的情况下,不遵守公共约定。

    • 客户端渲染,在视图层之外扩展web应用结构。

    • 支持URL。

    • Ember的对象模型有利于键值对的观察。

    • 嵌套的UIs。

    • 最小化DOM。

    • 在庞大应用生态系统运行良好。

    • 很好地集成java与强大数据层。

    • 完全成熟模板机制(处理板模板引擎构建基于流行的Mustache模板引擎),减少了代码编写。它并不知道什么是DOM,而是直接依赖文本操作,构建动态的HTML文档。

    • 使用观察者来观察内容的变化,只需要重新渲染改变的部分。

    • 使用配件避免“脏检查”。

    • 更快的启动时间与固有的稳定性。

    • 性能专注。

    • 友好的文档API接口。

    缺点:

    • Ember.js在控制等级上缺乏组件复用。

    • 有许多再也不用的过时内容与例子。

    • 曲折学习曲线。

    • 处理板有大量<脚本>标签会污染DOM,它被用作标志,保持模板与您的模型同步更新。

    • 它的典型用法会很繁琐。

    • Ember的对象模型安装后体积过度膨胀与调试时调用栈。

    • 框架中最具争议的并且是最笨重的。

    • 对于小项目有点大材小用。

    • 测试手段似乎是模糊的,不够完整。


    清楚你的需求并且选择最有前途的框架

    到底哪个框架适合你,取决于对你的应用程序需求评估与框架性能的匹配度。这需要深入剖析每个框架的优势与不足,它们如何应用于不同场合。所有框架有许多共同点:它们都是开源的,拥有发布版本证书,也是使用MVC设计模式来创建SPAs。它们都有视图,事件,数据模块与路径。但是,不同JavaScript框架能更好地适合不同类型的应用程序。

          假如你正在决定创建一个web app,Angular,React和Ember是最安全的,也提供长期支持并且活跃的社区。另外,最近Angular是三者中最流行的(框架)。你可以把它当做一站式服务商店来使用。大企业倾向选择它作为框架。Ember则是提供框架中工具齐全的最佳解决方案,所以你不必花费反复查询与合并库。由于Ember需要花很长时间来学习,它比较适合长期的项目。React是以上框架中最轻量级的。它在这方面做得尤为出色:渲染UI组件。许多场合甚至把它应用于上述的框架。假如你需要逐步改善存在的代码,它将是一个合适的选择。

    如你所见,没有绝对的王者。对于特定工程,一些框架比其他更加适合。从几个角度检查你的项目,包括:成熟度、大小、依赖、互相操作性与特征等等。联系专业的web开发公司来构建完美的网站架构和网站设计,以达到最适合你的业务需求。


    原文地址:https://dzone.com/articles/comparison-of-js-frameworks-angularjs-vs-reactjs-v

    展开全文
  • 在前后端分离开发项目时,经常会有前后端进度不一致,可能前端界面开发已经完成,就等接口了,如果等接口出来再联调的话时间可能会来不及。 这个时候,前端就可以根据制定好的接口规范和接口文档...npm install ko...
  • 原文;... 我们在早些时候已经对比过 Flutter 和 React Native 了,这篇文章就来对比一下 Flutter 与 Kotlin 吧。 曾经有一段时间,跨平台开发就是 " 使用 React Native 和 Flutter 构建应用 " 的代名...但是现在,Ko.
  • IT 常用词汇(一)

    2017-08-21 19:39:14
    1, amend [ə’mend] vt. 修改;改善,改进 vi. 改正,改善;改过自新 n. (Amend)人名;(德、英)阿门德 2, bearer [‘bɛrɚ] n. 持票人;[建] 承木;[机] 托架;送信人;搬运工人 ...v....adj....4
  • knockout + easyui = koeasyui

    2019-07-30 13:24:49
    虽然现在都是vue、ng、react的时代。但easyui(也就是jquery为基础)还是占有一席之地的。因为他对后端开发者太友好了,太熟悉不过了。要让一个后端开发者来理解vue或者是react的VNode、状态器、组件等,都是有那么...
  • 一、背景 Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。...结合当前的node比较火的三大框架,Expre...
  • knockout easyui = koeasyui

    2019-10-12 15:14:26
    在做后台管理系统的同学们,是否有用easyui的经历。虽然现在都是vue、ng、react的时代。但easyui(也就是jquery为基础)还是占有一席之地的。因为他对后端开发者太友好了,太...
  • (给前端大全加星标,提升前端技能)作者:苏格团队https://juejin.im/post/5cbd30e7e51d456e803516ba背景由于业务的需要,笔者最近...
  • 作者:苏格团队链接:https://juejin.im/post/5cbd30e7e51d456e803516ba(点击尾部阅读原文前往)背景由于业务的需要,笔者最近需要...
  • 去除数组中所有重复元素http://www.cnblogs.com/AndyCf/p/5207123.html //去除数组中重复元素 var arr = [0,2,3,1,5,5,8,8,2,1,10,10,43,43]; var json = {}; for (var i = 0; i if (!json[arr[i]]) { ...
  • 概述自从Android系统在手机上应用开始,在移动端 Native App 和 Web App之间的战争似乎就没有停止过,Web App 及其各种变体向Native App 发起了无数次的冲锋,但...随着轻应用、Hybrid App 、React Native、Weex已经微
  • MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录 认清Android框架 MVC,MVP和MVVM 三层架构 将整个业务应用划分为:界面层(User Interface layer, ...
  • 进入2020年,Android生态也发生了不少变化,从一个多年Android经验者的角度分析Android的开发现状,不喜勿碰。 Kotlin Kotlin已经成为Android开发的官方语言,Android的新的文档和Sample代码都开始转向...KTX是Ko...
  • Flutter 是什么 ? Flutter是谷歌的推出的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在...(blog.csdn.net/sk719887916…) 我一直对ko...
1 2 3
收藏数 47
精华内容 18
热门标签
关键字:

ko react 结合