欢迎各位兄弟 发布技术文章

这里的技术是共享的

Amaze 学习的比较好的网站 http://amazeui.org/javascript

JS 插件

Amaze UI JS 插件,使用注意事项,以及 JS 插件介绍。

JavaScript


关于前端 JS 模块化

不好意思,我又来捣乱了。不过有些问题还是想和大家讨论一下。

由于一些历史原因,Amaze UI 目前使用 Sea.js 来组织 JS 模块,但用得并不是很顺,比如在依赖提取、文件合并等环节。当然这可能是因为项目结构、以及最终面向用户的原因。

不过还是想看看大家对前端 JS 模块化的选择,也欢迎大家发表自己的看法。

浏览器端 JavaScript 模块化,你们的选择是?

个人倾向于兼容多个标准,把选择权交给用户,比如 FastClick 的写法:

 Copy
if (typeof define == 'function' && typeof define.amd == 'object' && define.amd) {
    // AMD. Register as an anonymous module.
    define(function() {
        'use strict';
        return FastClick;
    });
} else if (typeof module !== 'undefined' && module.exports) {
    module.exports = FastClick.attach;
    module.exports.FastClick = FastClick;
} else {
    window.FastClick = FastClick;
}

建议大家阅读的文章

初级使用

基于 Zepto.js

Amaze UI JavaScript 组件基于 Zepto.js 开发,使用时确保在 Amaze UI 的脚本之前引入了 Zepto.js(1.1.3)。Zepto.js 的更多细节请查看官方文档

由于模块内部指定了 $ = window.Zepto,目前并不支持使用 jQuery 替换 Zepto.js,后续的工作中会增加 jQuery 支持。

组件调用

组件的调用方式和 jQuery 类似,具体细节请查看各个组件的文档。

高级使用

基于 Sea.js

Amaze UI 目前使用 Sea.js 组织、管理模块,使用 Sea.js 的用户可以通过源码查看相关接口。

默认事件接口

Amaze UI 通过特定的 HTML 来绑定默认的事件,多数 JS 组件通过 HTML 标记就可以实现调用。这些默认事件都在amui 命名空间下,用户可以自行关闭。

关闭所有默认事件:

 Copy
$(document).off('.amui');

关闭特定组件的默认事件:

 Copy
$(document).off('.modal.amui');

自定义事件

多数组件都定义了一些自定义事件。

自定义事件命名的方式为 {事件名称}:{组件名称}:amui,用户可以查看组件文档使用这些自定义事件。

 Copy
$('#myAlert').on('close:alert:amui', function() {
  // do something
});
  • 青萍sunny

    挺好的

  • 萝卜斯

    没有提供时间插件么?

  • annezhong

    要开发自己的插件该怎么做,有没有例子?

  • 付强

    我觉得整体效果挺好的,就是一些细节,分页如果做出来就最好了

  • annezhong

    请问,我想做一个vs2013的Form插件,Form内textBox1由左上角定位,其中有动态的1至8个字,每行最多4字,textBox2总是等距的同行跟随前框,内有动态的单行1至8个字。烦请大侠写出代码,emil:1981004231@qq.com 好好学习一下,谢谢!

  • kufuku

    :mrgreen:

  • #云淡然

    关于 JS 模块化,这里小推一下,希望可以纳入考虑范围:
    模块加载器:https://github.com/cloudcome/coolie
    模块构建工具:https://www.npmjs.org/package/coolie
    相关wiki:https://github.com/cloudcome/coolie/wiki

  • 伈薍洳麻
    1. 牟先生
      有没有手机上专用的日期选择组件       
    2. Minwe
      目前没有,会放到下一版中。       

    满足不了么

  • Minwe
    1. 赵博
      请问如何打包JS       

    我们使用的 gulp,https://github.com/allmobilize/amazeui#%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7

  • Minwe
    1. annezhong
      补充一下,要兼顾多种标准就意味着你的模块管理不能使用任何标准,Faskclick的例子是展示的如何将你的接口暴露给用户,他的代码本身并没有使用任何模块规范进行管理。所以如果要把选择权交给用户,你需要做的是放弃cmd,也不要考虑amd,这些模块加载器都支持shim的方式加载传统js模块,我的项目用amd规范,但用jQuery、bootstrap完全没有感觉不顺。当然,放弃这些标准意味着同时要放弃他们带给你的模块管理的便利,这些取舍是要做的。       

    嗯,谢谢!因为内部使用时也需要按需打包,涉及到依赖提取,所以最终选择了按照 CommonJS 规范编写模块。至于最终打包成什么样子,有组够多的工具帮助用户完成。

  • annezhong
    huoliyu

    很不错,希望能有表单验证插件

  • 赵博

    请问如何打包JS

  • annezhong
    webyom

    补充一下,要兼顾多种标准就意味着你的模块管理不能使用任何标准,Faskclick的例子是展示的如何将你的接口暴露给用户,他的代码本身并没有使用任何模块规范进行管理。所以如果要把选择权交给用户,你需要做的是放弃cmd,也不要考虑amd,这些模块加载器都支持shim的方式加载传统js模块,我的项目用amd规范,但用jQuery、bootstrap完全没有感觉不顺。当然,放弃这些标准意味着同时要放弃他们带给你的模块管理的便利,这些取舍是要做的。

  • annezhong
    webyom

    模块化是趋势,放眼全球amd几乎是事实标准,要是我就不纠结,直接amd。

  • Minwe
    1. 冬仔龙行盛世
      一些返回,左右箭头什么的做的有点小,或者可以吧感应区域放大不好点。 [威武]        

    谢谢反馈。

  • Minwe
    1. annezhong
      糯米藕2014年10月15日
      1楼
      App.js 里面怎么添加自定义JS,求给个样例       

    你原来怎么写就怎么写,没什么讲究。

  • annezhong
    糯米藕

    App.js 里面怎么添加自定义JS,求给个样例

  • 冬仔龙行盛世

    一些返回,左右箭头什么的做的有点小,或者可以吧感应区域放大不好点。 [威武]

  • 莫名小晟

    确实希望还是可以考虑一下使用jquery,2.0版本的也挺小的,只要是做pc端web开发zepto的css选择器扩展略逊,但是我试了一下在目前引入zepto之后再引入jquery影响不大,目前能想到的思路就是判断设备,如果是手机设备就不用jquery,选择器部分就得重新考虑了

  • 小逸

    Zepto体积小就觉得没有什么优势了 和jq相比差距还是太多了

  • Minwe
    1. 兜风儿
      用手机浏览的时看不到左侧的菜单,例如:UI 增强 等,这样没法在手机看到各个效果呢       

    手机浏览时右下角有一个三杆的图标,点那个可以打开侧边菜单。

  • 兜风儿

    用手机浏览的时看不到左侧的菜单,例如:UI 增强 等,这样没法在手机看到各个效果呢

  • annezhong
    明空

    为什么不用jquery?jquery2.0版本不兼容ie678,只有80k,为什么不用这个

  • 邱宇

    大JQ真的大?注意版本<1.11.1

  • annezhong
    D
    1. Giuem
      Zepto和jquery区别大吗,不想再学zepto了       

    差不多吧,有一些细节不太,没有学习成本


唯物品评历史

关注"唯物品评历史",跟着泪痕春雨先生,读懂历史,看彻人生

打开隐藏二维码