Skip to content

Latest commit

 

History

History
91 lines (81 loc) · 3.07 KB

README.md

File metadata and controls

91 lines (81 loc) · 3.07 KB

MagicComponents.js

  • 作为后端开发, 为了偷懒(不想使用依赖过多的轮子和各种复杂的前端构件), 于是对快速生产前端Demo进行了一些套路总结
  • 建议后浪前往使用 react / Vue, 更容易找工作, 且工资更高
  • 依赖 jQuery , 兼容 Bootstrap , 需要操纵 DOM
  • 原则: 简单易用, 即取即用, 容易扩展
  • why magic? 仅仅因为起名废
  • GITHUB: https://github.com/dodoru/MagicComponents.js

Components

  • magic-ajax : 支持chrome, firefox, IE 等
  • magic-utils : 支持chrome, firefox, IE 等
  • magic-router: 支持chrome, firefox, IE 等
  • magic-form : 支持chrome, firefox, IE 等 (required: magic-[ajax.utils])
  • magic-select: 支持chrome/firefox, 不支持IE (required: jQuery, ES6{let``})
  • magic-storage: 支持chrome/firefox, 不支持IE (required: ES6{let``})

Samples

Ajax动态提交表单 ".magic-auto-form"

  • Usage
<script src="//cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script src="./static/magic_ajax.js"></script>
<script src="./static/magic_form.js"></script>
  • magicUploadFiles: 上传多个文件
    • .magic-input-file
    • .magic-submit-file
    • :eg:
    <div class="magic-auto-form">
        <input class="magic-input-file"
               data-key="image"
               type="file"
               multiple>
        <button class="magic-submit-file"
                data-path="/api/upload/images"
                data-callback="console.log">
                上传图片
        </button>
    </div>
    <script>bindMagicSubmitForm()</script>
  • magicForm: 自动提交表单
    • .magic-input
    • .magic-submit
    • :eg:
    <div class="magic-auto-form">
        <input class="magic-input" data-key="name">
        <button class="magic-submit"
                data-path="/$api-MagicForm"
                data-method="post"
                data-callback="console.log">
                submit
        </button>
    </div>
    <script>bindMagicUploadFiles()</script>
  • magicHref:
    • .magic-submit-href
    • :eg:
    <div class="magic-auto-form">
        <h3> 模拟点击动态超链接 </h3>
        <input class="magic-input oval" data-key="id" placeholder="u动态跳转当前页ser_id">
        <button class="magic-submit-href btn-red"
                data-path="/$api-redirectPath">
            访问链接
        </button>
    </div>
    <script>bindMagicHref()</script>

Changes