首先,引入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'); });

关于sea.js的笔记的更多相关文章

  1. js模块加载框架 sea.js学习笔记

    seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http:/ ...

  2. sea.js模块化编程

    * 为什么要模块化? 解决文件依赖 解决命名冲突 ; var var2 = 2; function fn1(){ } function fn2(){ } return { fn1: fn1, fn2: ...

  3. sea.js模块加载工具

    seajs的使用 seajs是一个jS模块加载器,由淘宝前端架构师玉伯开发,它可以解决命名空间污染,文件依赖的问题.可以在一个js文件中引入另外一个js.require('a.js') 1.安装 np ...

  4. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  6. 解决sea.js引用jQuery提示$ is not a function的问题

    在使用sea.js的如下写法引用jQuery文件时, //main.jsdefine(function(require,exports,module){ var $ = require('jquery ...

  7. js读书笔记

    js读书笔记 基本类型的基本函数总结 1. Boolean() 数据类型 转换为true的值 转换为false的值 Boolean true false String 任何非空字符串 "&q ...

  8. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  9. 模块化开发--sea.js

    当你的网站开发越来越复杂的时候,会经常遇到一下问题吗?1.冲突2.性能3.依赖如果在多人开发或者是复杂的开发过程中会经常遇到这些问 题,就可以用模块化开发来解决.以上问题是如何产生的?1.冲突:如果你 ...

随机推荐

  1. scala学习手记8 - 自适应的默认做法

    scala有一些默认做法,会让代码更简洁.更易读写,下面列出了这样几个特性: 1. 支持脚本.scala支持脚本,因此无须将所有的代码都放到类里.如果脚本可以满足需求,就将代码放到一个脚本里,无须再创 ...

  2. JDBC插入性能优化对比

    今天对Insert进行了性能测试,结果反差很大,平时都是单条插入,虽然性能要求没有那么高,但是突然在项目中,人家给定时间内完成,这就尴尬了. 优化数据库,优化服务器,优化代码,反正通过各种优化提高数据 ...

  3. linux rpm 卸载,简单说明

    平时Linux卸载文件总是遇到卸载不干净,各种依赖什么的,今天又是搞这玩意,就记录下一个比较常规的方法. 一.查询包括某关键字的软件(这里以卸载openoffice为例) 查询包括office的软件 ...

  4. UWP

     东哥对UWP有兴趣么 Shine 2016/4/23 13:37:23 最近好像是重大更新 Shine 2016/4/23 13:37:27 https://blogs.msdn.microsoft ...

  5. Hadoop2.9下运行JAR包时System.out.println的输出日志

    根据博文——Hadoop日志存放路径详解中所述,Container日志包含ApplicationMaster日志和普通Task日志(关于其他类型的日志的详细说明请参考该博文,本文不再赘述) 所以可知, ...

  6. 【Python】函数的参数对应

    我们已经接触过函数(function)的参数(arguments)传递.当时我们根据位置,传递对应的参数.我们将接触更多的参数传递方式. 回忆一下位置传递: def f(a,b,c): return ...

  7. 剑指offer--35.数组中只出现一次的数字

    时间限制:1秒 空间限制:32768K 热度指数:198150 本题知识点: 数组 题目描述 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. class ...

  8. L137

    Uncontacted Tribes at Risk Amid ‘Worrying' Surge in Amazon Deforestation Illegal loggers and militia ...

  9. HTML中的颜色简写

    1.HTML中颜色的五种写法 1)直接用颜色英文名字表示 例如表示背景颜色为白色: 2.通过16进制数表示 例如表示背景颜色为黑色 3).通过RGB方式表示 RGB:是红色(red)绿色(green) ...

  10. macOS 下 Visual Studio Code(VSCODE)安装配置及应用

    Visual Studio Code 重新定义了 Code 编辑. 在任何操作系统上编辑和调试应用程序内置 Git 支持1000 种以上的扩展免费和开源 为什么使用VSCODE? 我们来看看以下功能: ...