学习require.js 和knocout.js 快速上手

最新推荐文章于 2024-01-12 10:09:29 发布

IT_小D

最新推荐文章于 2024-01-12 10:09:29 发布

阅读量1.1k

点赞数

分类专栏：学习笔记文章标签： html ko-js knockout bootstrap

本文链接：https://blog.csdn.net/wuhuixiaoxiao/article/details/67639770

版权

学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

尊重原创，转载请注明出处。源地址：http://blog.csdn.net/wuhuixiaoxiao/article/details/67639770
本人第一次写博客，技术不过关，大家多担待哈！
这次主要是记录最近利用html完成后台管理系统，用到的技术的学习笔记。方便以后来查看。

涉及技术：
require.js knockout.js jQuery.js
bootstrap

使用插件：
Layui. Layer

bootstrap
这个主要是样式，里面的表格系统，有各种各样的样式，可以进行组合，来达到我们需要的
不多作介绍，具体请参考官方文档：http://v3.bootcss.com/getting-started/

Require.js
Require.js 主要解决js文件依赖过多，影响加载速度问题，将js模块化。Require是采用异步方式进行加载。而且使用require可以避免html页面中存在大量js引用标签。
使用方法：

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

                   自己需要的JS         require引导
                   名字可自定义

详细请参考：http://www.requirejs.cn/
注意：
你可以在data-main指向的脚本中设置模板加载选项，然后加载第一个应用模块。.注意：你在main.js中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载，则不能保证它们所依赖的JS已经加载成功。
例如：
我们的app.js, 在这个js文件中，我们首先配置我们需要的js依赖，用require.config（）进行配置。然后再使用require([‘需要的js文件名称’,……], function (‘需要定义使用方法的名称’，…) {})来引用我们需要的模块即可。这样就可以使用了。比如：
app.js 文件

require.config({
  baseUrl: '../../../',
  paths: {
    'jquery': 'plugin/jquery/jquery-1.12.4.min',
    'md5': 'plugin/jquery.md5/jquery.md5'    
  }
})
require(['jquery', 'md5'],function ($){
//你自己的js代码
//导入的js文件需要自定义调用方法的就需要再function中传入参数，比如这里的jQuery

})

当然，这样的js文件在我们用到其他js文件依赖一些css或者其的文件时，需要再require.config下面进行配置，比如map，shim 等等。这些配置的方法请参考官方文档。其中的paths里面，是key:value的形式，key就是后面使用时用力引导的名字，vaule就是js文件位置。我们可以增加baseurl来进行定位。如果没有baseUrl，默认就是当前目录开始的。

高级用法：
有很多时候，我们可能写一个项目的时候，require.config的配置是很多文件都需要使用的，这个时候，我们就想能不能将配置文件踢出去呢，大家一起调用，提高代码重用。不然光是写配置文件都占用了很多代码行。
答案是肯定的，我们可以将requier.config 的部分提出去，建立一个文件require.config.的js文件。然后在我们自己的页面的js文件中这样使用。比如：

 require(['./require.config'], function() {
require(['jquery', 'md5'],function ($){
//你自己的js代码
//导入的js文件需要自定义调用方法的就需要再function中传入参数，比如这里的jQuery

})
 })

好require.js 快速使用就这样差不多了。我们可以开始用了。下面介绍这次使用到另一个强大的js，那就是knockout.js。knockout.js有什么作用呢？既然我们用了它，那它肯定要给我们带来方便才行。毕竟如果用了它，让我们变得更麻烦了，就不符合我们人类的发展规则了。。。

knocout.js
主要是建立视图模型，用来绑定视图。当视图模型数据更新时，自动帮助我们更新视图。这里有参考一篇文章和官方文档：
文章地址：http://www.cnblogs.com/biyesheng/p/6480900.html
官方文档：http://knockoutjs.com/documentation/introduction.html
下面呢，我就说我做为一个小白，在学习了这个之后，我对用法的理解。ko里面主要注意几个点：

使用需要引用ko的js文件，这个没啥说的，导进来就好。
然后就是html里的绑定方式。在html中我们有两种方式来进行绑定的建立。
—第一种，在元素中使用data-bind 来进行绑定。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title>ko的使用</title>
    </head>
    <body>
        <div data-bind = ""></div><!--进行绑定-->
    </body>
</html>

—第二种，使用虚拟元素来进行绑定。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title>ko的使用</title>
    </head>

    <body>
        <!--进行绑定-->
        <div data-bind=""></div>

        <!--进行伪标签方式绑定-->
        <!-- ko 绑定的表达式 -->
        <div>       </div>
        <!-- /ko -->
    </body>
</html>

当然，这里只是说了要使用data-bind属性来进行绑定，但是data-bind属性后面的内容怎么写呢？就是按照key：value 的形式写的。

<div data-bind="bindCommand : value"></div>

绑定指令我们随后介绍。value可以是值类型，也可以是变量，当是值类型时，我们需要使用‘’将其引起来，就像这样‘value’。是值类型时，很显然我们绑定的指令它的值就是这个。但是如果是变量呢？它的值是从哪里来的呢？在介绍ko.js开始，我们提到了ko是来帮我们提供自动刷新视图，它需要将视图和视图模型绑定。前面的绑定，很明显是视图。那什么是视图模型呢？

Knockout(以下简称KO)是一个MVVM(Model-View-View Model)框架，这是一种设计用户界面的设计模式，把一个复杂的UI分成三个部分：模型(Model)，视图(View)，视图模型(View Model)。以下解释这三个模型的含义：

模型(Model)：你的应用中存储的数据。这些数据与UI是独立的。我们常向服务器发请求，从而得到数据改变模型存储的数据。

视图模型(View
Model)：代表了数据和UI交互的综合。比如我们正在写一个可编辑的列表，那视图模型可能就是一个对象，这个对象包含了列表中的项的数据和增加或者编辑这些数据的方法，这是一个抽象的模型。

视图(View)：一个可见的，交互的用户界面。它展现了视图模型的状态和信息并随着视图模型的变化而变化。

接下来我们就来看看一个简单完整的例子：

例子：
VM：
var myViewModel = {
personName: ‘Bob’,
personAge: 123 };

V：
The name is < span data-bind=”text: personName”>

激活这个MVVM：
ko.applyBindings(myViewModel);

这样就是把 myViewModel 的 personName 和 span 标签的文字内容绑定，这样span标签内的内容就会显示为‘Bob’。很显然，ko.applyBindings(myViewModel); 就是激活这个绑定。

ko.applyBindings(），可以传入两个参数，
第一个参数：传递绑定的视图模型。
第二个参数：决定DOM中哪部分发生绑定的解析。要求是一个元素对象。如果不传入这个参数，那将把视图模型作用域整个DOM上。

介绍了绑定的方式，就该介绍我们怎么来实现绑定了，下面先介绍常用的绑定指令：
引用http://www.cnblogs.com/biyesheng/p/6480900.html的内容,并根据自己的理解加以修改调整

—-控制文本和外观的指令

visible
控制绑定元素的显示隐藏，如果绑定的值转换成布尔值为真则显示，否则display: none。这里说下，visible的控制范围，是包含自身和子元素的，并且是隐藏而非不存在。
text
控制绑定元素内部的文本内容，接收一个字符串的值作为绑定值，如果不是字符串会调用绑定的值的toString()方法。(如果绑定一个函数则会执行并取返回值)
html
控制元素内部的HTML文本，换句话说，通过这个指令可以直接向标签内写入HTML。传参要求为字符串，若非字符串将调用toString()方法转换成字符串。(如果绑定一个函数则会执行并取返回值)
css
控制元素的class属性，传入的值要求为字符串或者对象(或对象字面量)，为字符串时将直接应用到元素的class
<div data-bind="css: 'myclass' "></div>
会直接应用给div标签应用myclass样式；也可以这样写：
<div data-bind="css: profitStatus"> Profit Information</div>
这样会使div应用profitStatus的值的样式，如果profitStatus绑定的是值的话，如果profitStatus绑定的是函数，则是返回值。
为对象时，对象的key为class，value为true则添加class，否则不添加。(如果绑定一个函数则会执行并取返回值)，比如
<div data-bind = "css: {'myclass' : 1 }"></div>
这里因为value为1，所以是true，所以会应用myclass样式。这样写的用法可以用来更改一些状态，比如表格的单双行叉色样式
<tr data-bind="css: {'odd': $index() % 2 === 1, 'even': $index() % 2 === 0}">
当然还有其他活用方式，这个就需要大家自行发挥了，总之能比较简洁的方式达到我们意想不到的效果。
style
控制元素的内联式样式，要求传入一个对象，对象的key为驼峰形式的样式名，值为样式的值。(如果绑定一个函数则会执行并取返回值)。这里要强调一下驼峰命名形式，因为在css样式表中，我们是使用的“-”来给单词进行间隔，这里不能使用“-”。比如：
<div data-bind = "style: { font-weight: someValue }"></div>
上面这样写是错误的！
正确写法应该这样：
<div data-bind = "style: { fontWeight: someValue }"></div>
attr
控制元素的属性，要求传入一个对象，对象的key为属性名，值为属性的值。

—-控制文档流的指令

foreach
通过遍历数组数据生成DOM结构。将传递的数组的每项数据应用到绑定元素的内部内容里，并根据传入的数据重复生成相同的子节点。这个指令灵活多变，因为会有上下文的改变，后面介绍，更推荐看文章头部给出的官方文档。
if
控制绑定元素内的DOM节点是否生成，与visible指令类似，但是visible指令是通过CSS来控制节点的显隐，而if直接决定是否产生子节点。要求传入一个布尔型的值，为真则生成子节点，否则不生成子节点。可以和foreach一样，在一个KO虚拟元素上进行指令绑定。
注意: if 和 visible 的控制范围有所不同，visible是从自身开始包含子节点，而if 是从子节点开始，不含自身。 那么这样，我们在使用if的时候，想要控制自身的加载或不加载要做怎么做呢？有两个办法：
（1）控制父元素
这个是不是说了等于没说呢？呵呵，有些时候不好加父元素怎么办呢？那么就看第二种方式
（2）使用虚拟元素进行绑定 具体使用场景我就不举例子了，我们在各种奇葩需求中，肯定会有用到的时候，记住！
ifnot
作用和if指令一样，只是传入的布尔值为false时生成子节点，否则不生成。和if: !value等价。作用范围也和if一样。
with
在绑定元素的内部创建新的绑定上下文(下方有介绍)。要求传入一个对象作为内部的绑定上下文。
component
在绑定元素内部注入指定的组件，并可传入指定的参数给组件。组件是KO的另一个功能模块，将在下方补充说明里介绍。使用组件，可以提高代码的复用性。

—-表单控件相关的指令

click
当绑定元素被点击时，执行传入的回调函数。回调函数可以是视图模型里的某个方法，也可以是某个对象的方法，如果是某个对象的方法，就这么调用：someObj.someFunc。值得注意的是，在回调函数中，KO会传入第一个参数为绑定上下文中的$data，第二个参数为事件对象。如果还想传入更多参数，可以使用函数字面量或者bind()方法，具体请参考click绑定。另外，click绑定默认是阻止点击事件的默认行为的，比如点击一个绑定了click指令的< a>标签，并不会发生跳转，想要不阻止默认行为，在回调函数里return true;即可。click绑定默认也是发生事件冒泡的，如果想阻止冒泡，那么应该这样传递值data-bind=”click: myHandler, clickBubble: false”
event
为指定事件绑定回调函数。要求传入一个对象(对象字面量更好)，对象的key为事件名称，value为对应的回调函数。如果想传递更多的参数，用函数字面量是一个不错的办法。此外还可以类似myFunc.bind($root)。事件绑定
submit
为< form>标签绑定submit事件的回调函数。默认传入form元素给回调函数。
enable
控制绑定的标签是否有效。这个指令在< input>, < select>, < textarea>标签上可以产生作用。需要传入一个布尔值或者一个表达式，如果不是布尔值，则会转换成布尔值。
disable
与enable类似，只是逻辑值相反。
value
控制绑定元素的value值，在< input>, < textarea>, < select>标签上有作用。需要传入一个字符串，如果不是字符串，将会转换成字符串。此外还可以传递一些其它的配置项，比如valueUpdate的回调函数等。详见value绑定
textInput
与value指令类似，但是textInput提供双向的数据绑定，意思即value指令只会将绑定的值付给绑定元素的value，但是当输入框的值发生变化时，视图模型的值不能同步更新。这时就需要用textInput指令，实现数据的双向绑定。
hasFocus
控制绑定元素的focus状态。为true则绑定元素处于focus状态。这也是一个双向绑定的指令。
checked
控制绑定元素的checked状态，对于radio, checkbox有效。传入的参数如果为布尔值，则true为选中状态，false不选中。如果传入一个数组，则根据当前绑定元素的value和数组进行匹配，如果存在于数组中则为选中状态，否则就是没选中。还可以参考文档看其它配置项。
options
绑定在< select>标签上，生成select标签内的options，要求传入一个数组。还可以参考文档看其它配置项。
<select data-bind="options: availableCountries,
                      optionsText: 'countryName',
                      value: selectedCountry,
                     optionsCaption: 'Choose...'"></select>
options:绑定的选择项，数组，数组内部可以是值，也可以是对象
optionsText:绑定的是选项显示的文本（可选）
value:选中的值（可选）
optionsCaption：默认展示的提示文本（可选）
selectedOptions
绑定在< select>标签上，决定被选中的option。要求传入一个数组。
uniqueName
一般不会用到，为绑定的标签添加独一无二的name属性，传入的值为true就添加。

好了，常用的绑定指令介绍到这里就差不多了。常用的大概就是这些，其他的还是那句话，请参考官方文档
上面我们提到了一个简单的例子，这个例子的完整写法是这样的：

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>ko的使用</title>
    </head>
    <body>
        <!--进行绑定-->
        <div> The name is <span data-bind="text: personName"></span> </div>
        <!--虚拟元素绑定-->
        <div>The age is
            <!-- ko text: personAge -->
            <span></span>
            <!-- /ko -->    
        </div>          
        <script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
        <script type="text/javascript" src="js/knockout-3.4.1.js" ></script>
        <script type="application/javascript">          
            var myViewModel = { personName: 'Bob',personAge: 12 }; 
            ko.applyBindings(myViewModel);          
        </script>
    </body>
</html>

运行效果：
The name is Bob The age is 12

大家有没有觉得有什么不对呢？如果有，恭喜你，说明你想的比较全面。那就是，上面的这个例子的视图模型，是一个对象，而这个对象的值是写死的。这样如果们的值有变化了，我们应该怎么办呢？我们直接给它重新赋值？你可以去试试，但是我很明确的高诉你，你就算是赋值了，但是视图里面的值也不会变的。那这又是怎么回事呢？说到这里，就得讲讲ko.js 的数据观测属性了。
ko.observable(’ ‘) / ko.observableArray([ ]) / ko.computed(fn) /ko.pureComputed()
我们先不说这个，先来用一下看看效果，代码如下：

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>ko的使用</title>
    </head>
    <body>
        <!--进行绑定-->
        <div> The name is <span data-bind="text: personName"></span> </div>
        <!--虚拟元素绑定-->
        <div>The age is
            <!-- ko text: personAge -->
            <span></span>
            <!-- /ko -->    
        </div>          
        <script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
        <script type="text/javascript" src="js/knockout-3.4.1.js" ></script>
        <script type="application/javascript">          
            var myViewModel = { personName: ko.observable('Bob'),personAge: ko.observable(12) }; 
            ko.applyBindings(myViewModel);          
        </script>
    </body>
</html>

你猜效果如何，没错，和上一个一毛一样。那我们这是干嘛呢？脑子进水了? 当然没有，因为我们还没有改动。我们再来改动一下看看。代码如下：

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>ko的使用</title>
    </head>
    <body>
        <!--进行绑定-->
        <div> The name is <span data-bind="text: personName"></span> </div>
        <!--虚拟元素绑定-->
        <div>The age is
            <!-- ko text: personAge -->
            <span></span>
            <!-- /ko -->    
        </div>          
        <script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
        <script type="text/javascript" src="js/knockout-3.4.1.js" ></script>
        <script type="application/javascript">          
            var myViewModel = { personName: ko.observable('Bob'),personAge: ko.observable(12) }; 
            ko.applyBindings(myViewModel);  

            myViewModel.personName("Jake");
            myViewModel.personAge(22);
        </script>
    </body>
</html>

运行结果：
The name is Jake The age is 22

上面的代码好可以链式写：myViewModel.personName(‘name’).personAge(10)
没错，这就是我们用 ko.observable(’ ‘)的原因，使用了它，就相当于建立了一个观测台在myViewModel.personName上，当它自身的值发生变动时，就会通知和它建立绑定的元素，进行更新。这样就不用我们去重新设置元素的值了。

ko.observableArray() 就不多说了，它的作用和ko.observable()一样，只是后者用于观测数组类型的。

ko.computed(fn) /ko.pureComputed() 如果需要得到一个基于已有的可被观测属性计算得出的属性，那可以使用ko.computed()方法得到一个计算属性，这个计算属性会在所依赖的属性更新时，自动更新自己的值。如果只是简单的计算并返回可被观测属性就得到计算属性，那么使用ko.pureComputed()方法会比较好，可以提升性能。

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>ko的使用</title>
    </head>
    <body>
        <!--进行绑定-->
        <div> The name is <span data-bind="text: fullName"></span> </div>
        <!--虚拟元素绑定-->
        <div>The age is
            <!-- ko text: personAge -->
            <span></span>
            <!-- /ko -->    
        </div>          
        <script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
        <script type="text/javascript" src="js/knockout-3.4.1.js" ></script>
        <script type="application/javascript">          
            function MyViewModel(){ 
                var self = this;
                self.firstName= ko.observable('Bob');
                self.lastName=ko.observable('Smith');
                self.personAge= ko.observable(12);
                self.fullName = ko.pureComputed(function () {
                return self.firstName() + ' ' + self.lastName()
            }, self)};              
            var myViewModel = new MyViewModel();
            ko.applyBindings(myViewModel);  
        </script>
    </body>
</html>

这里写发和之前不一样了，对吧。没错，也可以这样写，这样声明为构造函数。再实例化，再应用绑定即可。

ko.pureComputed(function () {}, this);

说明下ko.pureComputed(）的参数，第一个参数就不说了，就是用来计算值的。第二个参数传递的当前指向，这样写会立即执行前面的function

说到了参数，我们前面提到，ko有很多绑定指令，是绑定的事件。在绑定事件的时候，ko会默认给我们传3个参数，1个型参，2个实参。形参是传递的当前的上下文，也就是this的指向，实参传递的是当前的对象和当前的事件。如果我们要自己传递参数，参数应该怎么传递呢？我们需要用到.bind($data,parma。。。) ，一般情况下我们不需要改变第一个参数，第二个开始就是我们要传递的参数。在function中接受的时候，是这样的

function(parma … ,object,event){。。。}
function 内部的this是我们传递过来的$data，parma….开始，依次对应我们传递过来的参数，最后两个参数分别是传递它默认的实参。

我们直接上代码：

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>ko的使用</title>
    </head>
    <body>
        <!--进行绑定-->
        <div> The name is <span data-bind="text: fullName"></span> </div>
        <!--虚拟元素绑定-->
        <div>The age is
            <!-- ko text: personAge -->
            <span></span>
            <!-- /ko -->    
        </div>  
        <button data-bind = "click:btnClicked.bind($data,'parma')">按钮</button>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
        <script type="text/javascript" src="js/knockout-3.4.1.js" ></script>
        <script type="application/javascript">          
            function MyViewModel(){ 
                var self = this;
                self.firstName= ko.observable('Bob');
                self.lastName=ko.observable('Smith');
                self.personAge= ko.observable(12);
                self.fullName = ko.computed(function () {
                    return self.firstName() + ' ' + self.lastName()
                }, self);
            }

            myViewModel.prototype.btnClicked = function(parma,object,event){

            }
            var myViewModel = new MyViewModel();
            ko.applyBindings(myViewModel);  
        </script>
    </body>
</html>

这里还要补充说明一些：

我们使用了绑定之后，存在一个绑定上下文，绑定上下文含有一些变量：

$parent

：即当前绑定上下文的上一层视图模型。对于最顶层的视图模型来说，比如上面例子中的myViewModel，$parent为undefined。

$parents

：所有祖先视图模型构成的数组， $parents[0]为父视图模型(等同于$ parent)，$parents[1]为”爷爷视图模型”，依此类推……直至到达最顶层的视图模型。

$root

：最顶层的视图模型，就是传给ko.applyBindings()方法的参数。等同于 $parents[$ parents.length - 1]

$data

：当前视图模型的数据，比如上面示例中的foreach循环中绑定的name，也可以用$data.name取到。

$component

：组件模版内调用，得到组件模版对应的视图模型。
绑定上下文中还有许多其它的内部变量，请参看binding-context 获得详细说明。

foreach 指令的绑定上下文变化：
如下面的代码，带码中，tbody标签绑定的是foreach: data，此时，tbody内部的标签的绑定上下文是obj这个二维数组，并且对其遍历，而tr标签绑定的foreach:$data指向的就是obj的某一个值[1,1,1,1]或者[2,2,2,2]，所以tr内部的标签绑定的上下文是obj的一个值,并对值进行遍历，所以，td标签绑定的 text:$ data是这个值中的一个值1或则2

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title>ko的使用</title>
    </head>
    <body>
        <table>
            <tbody data-bind = "foreach: data">
                <tr data-bind = "foreach: $data">
                    <td data-bind = "text:$data"></td>
                </tr>
            </tbody>
        </table>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
        <script type="text/javascript" src="js/knockout-3.4.1.js" ></script>
        <script type="application/javascript">  
            var obj =[[1,1,1,1],[2,2,2,2]];
            function MyViewModel(){ 
                var self = this;
                self.data= ko.observableArray(obj);
            }
            var myViewModel = new MyViewModel();
            ko.applyBindings(myViewModel);  
        </script>
    </body>
</html>

暂时就到这里。以后有新的内容再进行补充说明。

第一次写博客，哈哈，还不会写。请大家多担待，欢迎指正错误。
尊重原创，转载请注明出处。源地址：http://blog.csdn.net/wuhuixiaoxiao/article/details/67639770

IT_小D

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
学习require.js 和knocout.js 快速上手

尊重原创，转载请注明出处。源地址：http://blog.csdn.net/wuhuixiaoxiao/article/details/67639770 本人第一次写博客，技术不过关，大家多担待哈！这次主要是记录最近利用html完成后台管理系统，用到的技术的学习笔记。方便以后来查看。涉及技术： require.js knockout.js jQuery.js bootstrap使用插件
复制链接

扫一扫