尊重原创,转载请注明出处。源地址: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>
运行效果:
大家有没有觉得有什么不对呢?如果有,恭喜你,说明你想的比较全面。那就是,上面的这个例子的视图模型,是一个对象,而这个对象的值是写死的。这样如果们的值有变化了,我们应该怎么办呢?我们直接给它重新赋值?你可以去试试,但是我很明确的高诉你,你就算是赋值了,但是视图里面的值也不会变的。那这又是怎么回事呢?说到这里,就得讲讲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>
运行结果:
上面的代码好可以链式写: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