学习 require.js 和 knocout.js 快速上手。
涉及技术:
require.js knockout.js jQuery.js
bootstrap
使用插件:
Layui. Layer
- <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>
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: http://www.92to.com/bangong/2017/03-31/19742657.html