zoukankan      html  css  js  c++  java
  • 关于sea.js的笔记

    首先,引入sea.js:(注意要直接写在Script标签里,不要写在jquery的页面加载事件里)

    seajs.config({
            base: "./" //seajs的基础路径(组织人事,元数据项目的模块)
                ,
            charset: 'utf-8',
            map: [
                    [/^(.*.(?:css|js|html))(.*)$/i, '$1?v=_VERSION_' + '-' + '1.0']
                ] //加上版本号,清缓存用
                //公共路径
                ,
            paths: {
                
            }
        });
    
        seajs.use(["app.js"]);

    然后在调用其它js的时候这样写:

    define(function(require, exports, module) {
        var sTpl = require("views/company.html");
    
        var VueComponent = Vue.extend({
            template: sTpl,
            data: function() {
                return {
                    class1: "modal fade in",
                    index: 1,
                    rows: 8,
                    next: false,
                    path: gMain.basePath,
                    logo: ''
    
                };
            },
            ready: function() {
                this.getInfo()
            },
            methods: {
                getInfo: function() {
                    var $url = gMain.basePath + 'api/company';
                    var resource = this.$resource($url)
                    resource.get({
                            pIndex: this.index,
                            pRows: this.rows
                        })
                        .then(function(response) {
                            var obj = eval('(' + response.data + ')');
                            if(obj.length == 0) {
                                this.show = true
                                this.next = false
                                this.$set('Complist', obj)
                            } else {
                                this.$set('Complist', obj)
                                if(this.index + 1 > obj[0].counts) {
                                    this.next = false
                                } else
                                    this.next = true
                            }
                        })
                },
                commit: function() {
                    var title = this.title;
                    var formData = new FormData($("#file")[0]);
                    var result;
                    $.ajax({
                        type: 'post',
                        dataType: "json",
                        async: false,
                        contentType: false,
                        processData: false,
                        url: gMain.basePath + "api/Company/PostFile",
                        data: formData,
                        success: function(data) {
                            result = data;
                        }
                    })
                    if(title == "新增") {
                        this.logo = result;
                        this.item.logo = this.logo;
                        var $url = gMain.basePath + 'api/Company/PostCompany';
                        var resource = this.$resource($url)
                        resource.save(this.item)
                            .then(function() {
                                this.getInfo();
                                this.$set('show', false);
                            })
                    }
                    if(title == "编辑") {
                        var b = document.getElementById("ed").src;
                        if(b.length > 100) {
                            this.logo = result;
                            this.item.logo = this.logo;
                        } else {}
                        var $url = gMain.basePath + 'api/Company/PutCompany';
                        var resource = this.$resource($url)
                        resource.update({
                                pId: this.item.company_id
                            }, this.item)
                            .then(function() {
                                this.getInfo();
                                this.$set('show', false);
                            })
                    }
                },
                start: function(company) {
                    var $url = gMain.basePath + 'api/company/PutCompanyStatus';
                    var resource = this.$resource($url)
                    resource.update({
                            pId: '2'
                        }, company)
                        .then(function() {
                            this.getInfo()
                        })
                },
                pause: function(company) {
                    var $url = gMain.basePath + 'api/company/PutCompanyStatus';
                    var resource = this.$resource($url)
                    resource.update({
                            pId: '1'
                        }, company)
                        .then(function() {
                            this.getInfo()
                        })
                },
                loadItem: function(company) {
                    this.$set('title', '编辑');
                    this.$set('item', company)
    
                },
                addItem: function() {
                    this.$set('title', '新增');
                    this.$set('item', {})
                },
                cancle: function() {
                    this.$set('show', false);
                    this.$set('class1', 'modal fade');
                },
                nextpages: function() {
                    this.index = this.index + 1
                    this.getInfo()
                },
                addPic: function(e) {
                    e.preventDefault();
                    $('input[type=file]').trigger('click');
                    return false;
                },
                previewFile: function() {
                    var preview = document.querySelector('a.pict img');
                    var rewrew = document.querySelector('input[type=file]').files[0];
                    var reader = new FileReader();
                    reader.addEventListener("load", function() {
                        preview.src = reader.result;
                    }, false);
                    if(rewrew) {
                        reader.readAsDataURL(rewrew);
                    }
                }
            }
    
        });
    
        module.exports = VueComponent;
    });

    然后注意如果要引入html文件琢模板,需要介入sea-text.js文件。

    附App.js的写法:

    /**
     * Created by zackey on 2016/5/28.
     */
    define(function (require,exports,module) {
        require("components/menu.js"); //导航
        require("components/loading.js"); //导航
    
        // 路由器需要一个根组件。
        var App = Vue.extend({});
    
        // 创建一个路由器实例
        var router = new VueRouter();
    
        // 定义路由规则
        router.map({
            '/': {
                component: function (resolve) {
                    require.async(['modules/Index.js'],resolve);
                }
            },
                '/can': {
                component: function (resolve) {
                    require.async(['modules/can.js'],resolve);
                }
            },
            '/task': {
                component: function (resolve) {
                    require.async(['modules/task.js'],resolve);
                }
            },
            '/bar':{
                component:function(resolve){
                    require.async(['modules/bar.js'],resolve);
                }
            },
            '/foo':{
                component:function(resolve){
                    require.async(['modules/foo.js'],resolve);
                }
            },
            '/tool':{
                component:function(resolve){
                    require.async(['modules/tool.js'],resolve)
                }
            },
            '/datas':{
                component:function(resolve){
                    require.async(['modules/datas.js'],resolve)
                }
            },
            '/users':{
                component:function(resolve){
                    require.async(['modules/users.js'],resolve)
                }
            },
            '/roles':{
                component:function(resolve){
                    require.async(['modules/roles.js'],resolve)
                }
            },
            '/task_list':{
                component:function(resolve){
                    require.async(['modules/task_list.js'],resolve)
                }
            },
            '/task_save':{
                component:function(resolve){
                    require.async(['modules/task_save.js'],resolve)
                }
            },
            '/partner_list':{
                component:function(resolve){
                    require.async(['modules/partner_list.js'],resolve)
                }
            },
            '/wx_menu':{
                component:function(resolve){
                    require.async(['modules/wx_menu.js'],resolve)
                }
            },
            '/company':{
                component:function(resolve){
                    require.async(['modules/company.js'],resolve)
                }
            }
        });
         //启动路由
        // 路由器会创建一个 App 实例,并且挂载到选择符 #app 匹配的元素上。
        router.start(App, '#app');
    
    });
  • 相关阅读:
    java 线程状态和转化
    初学Spring
    unittest --- 单元测试
    Python单例模式的两种实现方式
    python records操作数据库
    数据可视化之——matplotlib基础学习
    python使用list维护成一个队列
    Python将list列表维护成一个栈
    Python使用rsa模块实现非对称加密与解密
    python +OpenCV实现rtmp视频流媒体的播放
  • 原文地址:https://www.cnblogs.com/wpcnblog/p/7047965.html
Copyright © 2011-2022 走看看