zoukankan      html  css  js  c++  java
  • seaJs组建库

    seaJs组建库的使用

     

    原文地址:seaJs学习笔记2 – seaJs组建库的使用

    我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓。

    所以不断的学习将是源源不断。

    最近在学习seaJs和AngualrJs的指令和服务,感觉angularjs实在太强大了,好吧,步入主题,今天在深入了解seaJs的时候发现了一款神器,不过这款神奇貌似没有更新和维护了,但我测试了一下,还是可以用的。

    这款神奇就是SeaJS 组件库 ,Sea.js 是一个适用于 Web 浏览器端的模块加载器。在 Sea.js 里,一切皆是模块,所有模块协同构建成模块系统。

    神器DOC地址:http://panxuepeng.github.io/seajslib/

    下面我们来简单的演示一下如何吧

    首先你要下载本神器:https://github.com/panxuepeng/seajslib/archive/gh-pages.zip

    因为它是基于seaJs,而seaJs是需要nodeJs环境的,并且本神器下载之后是需要用npm进行安装下载相关依赖的库,所以grunt你也是得下载的。

    配置好环境后,执行2步,(比如你解压到seajslib文件夹下):

    1
    2
    3
    1、在命令行窗口进入 seajslib/lib 目录,执行 npm install shelljs。
      
    2、在命令行窗口进入 seajslib/lib 目录,执行 node install.js ,安装 Grunt 相关模块。

      

    然后,你就可以拷贝seajslib下的lib文件夹到你的项目中去使用了。其实你会发现其中包含了很多组建模块,我们也可以把需要的拷贝出来,而不是拷贝整个。

    来个小李子,直接上代码,清晰直接:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta charset="utf-8" />
    <script src="../lib/seajs/src/seajs.js"></script>
    <script src="../lib/jquery/jquery-1.9.1.min.js"></script>
    </head>
    <body>
    <a href="data.txt" data-toggle="dialog">预览(ajax)</a><br/>
    <a href="data.txt" data-toggle="artdialog">请点击我(选择器方式拿到内容)</a>
    <script>
    seajs.use(['dialog/src/dialog', 'artdialog/src/artdialog']);
    </script>
    </body>
    </html>

      

    在上面的例子中,a标签里面的都是指向的一个文件,这就是用ajax异步请求获取data.txt的文件内容,这里我用到了2个组建,dialog,artdialog,在data-toggle中指定需要使用的组建名即可。

    效果图:

    234242

    这款神奇还包含了很多组建,来看看列表:

    22222

    就介绍到这里吧,总会有需要用到它的时候。以此mark!

    ——转载请注明该文章来源:http://www.cnblogs.com/jhmydear/
     
    分类: js/jQuery
  • 相关阅读:
    How to Automate IIS 7 Configuration with .NET
    windows phone 学习
    Redis VS. Memcached
    ROWNUM使用方法
    摘自----聊聊盛大的经验值
    理解Sql语句
    Odp.net 动态创建变量in
    ORACLE PLSQL DEVELOPER 中显示科学计数法
    http error 500.22 internal server error
    Resharper8 visual studio 中文版 快捷键无法使用
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/4684622.html
Copyright © 2011-2022 走看看