码迷,mamicode.com
首页 > Web开发 > 详细

knockoutjs 读源码

时间:2018-05-01 20:31:12      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:orm   function   pac   npm   border   htm   标准   ESS   页面   

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。

 

knockoutjs 读源码

标签:orm   function   pac   npm   border   htm   标准   ESS   页面   

原文地址:https://www.cnblogs.com/michelle-phone/p/8969669.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!