发表于: 2017-04-07 21:36:05

1 1152


任务三

今天完成的事情

  1. 1学习有限状态机
  2. 2.利用require.js模拟包的概念,这样就只需要在页面中引入一个script文件就可以了。
  3. 明天计划的事情

  1. 1.完成模态框组件的设计与实现。
  2. 2.滑动条样式的美化。

遇到的问题

1.当我们编写网站时,需要引入不同的js文件,如下面这种

<script src="../jquery/jquery-3.1.1.js"></script>
<script src="judge.js"></script>

这种写法有个问题,在加载的时候,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序,这样不利于我们维护。所以我们可以引人包这个概念,将我们需要引入的函数或者变量放到包里面,需要的时候在导入。因为js没有包这个概念(es6好像有),所以需要我们借助require.js这个文件。

2使用方法

首先在官网上下载最新的require.js,然后在文件中引入

<script src="javascript/require.js" data-main="javascript/main"></script>

date-main是这个页面的js文件,然后进入到main.js文件中,在里面首先设置需要引入的模块的路径:

require.config({
paths: {
"jquery":"jquery-3.1.1"
  }
});

这里拿jquery路径举例,因为默认的文件是js文件,所以我们不需要加上js后缀,否则会报错。

然后开始引入jquery模块

require(['jquery','math'],function ($,math) {
console.log(math.add(1,2));
console.log("模块加载完毕");
});

我们需要编写的代码放在这个function里面就可以了。因为jquery都支持require.js,所以可以直接引用,但是对于我们自己编写的模块,需要按照AMD规范才能被导入。方法对象需要写在define函数中,如下

define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
  };
});



  1. 收获

  2. 1.学会了如何使用require.js来让自己的代码工程化。



返回列表 返回列表
评论

    分享到