knockoutjs 读源码

1.整个项目文件分为build,spec,src三个文件夹，package.json,Gruntfile.js

2.由于源文件是以Grunt 打包，要编译源文件输出为knockoutjs.js，根据README.md文件。安装

 
   npm install -g grunt-cli 
 
   npm install 
 
   grunt 
 
 生成的文件保存在 
    build/output/ 文件夹下。

3.源代码带有测试文件，是在spec文件夹下。你可以使用PhantomJS运行测试,PhantomJS(它全面支持web而不需浏览器支持，其快速，原生支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。 PhantomJS 可以用于页面自动化，网络监测，网页截屏，以及无界面测试等).安装之前可以先下载

 
  http://phantomjs.org/download.html 
 

也可以不用phantomjs.直接在浏览器中打开spec/runner.html文件查看测试用例。测试用例是用

 
  jasmine 来编写的测试用例 
 

4.spec 下的 runner.html文件的主函数内容

 1    <script type="text/javascript">
 2           (function() {
 3             var jasmineEnv = jasmine.getEnv();
 4             jasmineEnv.updateInterval = 500;
 5 
 6             var htmlReporter = new jasmine.HtmlReporter();
 7             jasmineEnv.addReporter(htmlReporter);
 8             jasmineEnv.specFilter = htmlReporter.specFilter;
 9 
10             var testlingParam = /[?&]testling=true/.test(location.href);
11             if (testlingParam)
12                 jasmineEnv.addReporter(new jasmine.TapReporter()); // For Testling CI
13             jasmineEnv.execute();
14           })();
15         </script>

通常这是固定的写法。会把测试用例的结果输出在页面中。

5.熟悉Jasmine

　　1.页面需要引用jasmine 这几个文件

 
    <script type="text/javascript" src="lib/jasmine-1.2.0/jasmine.js"></script> 
 
          <script type="text/javascript" src="lib/jasmine-1.2.0/jasmine-html.js"></script> 
 
          <!-- our jasmine extensions --> 
 
          <script type="text/javascript" src="lib/jasmine.extensions.js"></script>

　　2.Jssmine 的测试用例编写

一个文件一个describe,几个测试用例就几个it

 
  describe('A Suit', function() { 
 
    beforeEach 
    (function(){ 
   
  　　　　//执行每个it时执行的代码　　 
 
  　　}); 
 
    afterEach 
    (function(){ 
   
  　　//执行it 结束后执行的代码 
 
  　　}); 
 
  　　it('a test',function(){ 
 
  　　　　expect(''). 
  toEqual(''); // ecpect 断言 
 
  　　}); 
 
  });

6.根据源码提供的测试用例熟悉knockoutjs 的API。

猜你喜欢