js-fn-module

解决普通建站页面js代码混乱的问题，js执行代码越多会越乱。

像vue一样去写我们普通的前端代码，各种this的应用，便于页面功能模块的整理修改，以及相互调用，数据修改。

先来一段vue代码压压惊

下面代码可以看到this的妙用，this的调用很频繁，created会自动执行，methods之中定义的函数可以直接用this拿到data的数据，data可以直接调用插件的方法。

export default {
    data() {
        return {
            query: this.$route.query,//调用vue-router插件的方法
            loading: true,
            data: {
                list: []
            }
        }
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            console.log(this.query)
        }
    },
    components: {}
}

普通js实现上面的方式去写代码

首先要解决this指向的问题，感兴趣的可以去看源代码，下面直接说明用法

var page = Page({
    data: function () {
        return {
            t: +new Date(),
            num:this.add(2,4)
        }
    },
    ready: function () {
        this.time('first');
        document.getElementById('third').innerHTML = this.num;
    },
    load: function () {
        this.time('second');
    },
    methods: {
        time: function (id) {
            var t = +new Date();
            document.getElementById(id).innerHTML = t - this.t + 'ms'
        }
    }
})

props

name 名称	type 类型	default 默认值	describe 描述
data	Function		静态参数，必须return一个obj，可以直接调用插件方法
ready	Function		document.ready之后执行的方法
load	Function		window.onload之后执行的方法
methods	Object		注册方法,方法之间可以互相调用

this默认方法

name 名称	type 类型	default 默认值	describe 描述
extend	Function		和jquery,angular的extend类似

添加插件方法

再引入js-fn-module.js之后就可以注册插件。在页面调用之前引入，这样就可以愉快的使用插件了。

APP.prototype.add = function (a, b) {
    if (a && b) {
        return a + b;
    } else {
        return 0;
    }
}

书写插件项目启动方式

git clone 本项目之后可以启动项目，查看源代码，更去了解原理

• clone 项目

  $ git clone https://github.com/codingdogs/js-fn-module.git

• 下载npm依赖包

  $ npm i

• 创建server，打开本地调试

  $ npm start