knockoutjs 读源码

Posted 2020-11-02 michelle-phone

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。