前言 本篇简单对Dva.js项目的工程结构进行说明，具体的概念，设计，文档，详见Dva.js官网 项目结构 mock属于前后端分离的一种实践，在后端接口未完全实现时，前端可通过mock数据的方式自测。 node_modules项目依赖采用npm管理，所以来包均在此目录。 srcassets项目静态资源目录（图片等） components无状态组件目录。根据react组件化的要求，该目录下
前言 路由是单页应用中十分重要的概念。具体在react中，react-router为我们提供了一套完整的路由机制。 概述 项目history相关文档主页：Histories。文档的讲解十分详细。本文只是通过在实际项目中history的状态变化进行简单小结。以dva应用为例，经过这样的配置后，容器组件可以在props中拿到history对象和相关参数。 表现如上所示，history中包含了一
angular-table使用AngularJs封装Tabs选项卡组件 功能描述 该组件是管理系统中很常用的功能，平台使用者可能会同时使用不同模块的功能，这时候需要打开多个模块，Tabs组件是一种类似浏览器多标签页的效果。可以： 可以在多个模块的页面间进行切换 在某个页面上右键关闭 附带收起侧边栏功能 … 实现 demo源码托管于github，详见Github gcidea/angula
功能描述 该组件是管理系统中很常用的功能，管理系统的典型使用是批量数据的处理，表格展示是最直接的方式。该插件实现： 批量数据的列表展示 每行数据提供操作项（修改，删除等）接口 翻页查询接口 每页显示条数修改 点击表头排序 列表宽度自定义 … 实现 demo源码托管于github，详见Github gcidea/angular-table html结构 承载该表格插件的主要html结
功能 $apply()函数可以从Angular框架的外部让表达式在Angular上下文内部执行。例如，假设你实现了一个setTimeout()或者使用第三方库并且想让事件运行在Angular上下文内部时，就必须使用$apply()。 参数 $apply()函数接受一个可选的参数。这个表达式可选地接受一个字符串或函数，并且是在当前作用域内执行。如果传入一个字符串，$apply()首先会在这个
简介demo基于csv等格式的数据处理结果文件，对数据进行可视化展现。 模块划分 目标区域驻留人数统计 高铁到发站人流量统计 地铁到发站人流量统计 行政区客流量分析 城市职住分布 交互方式及效果呈现 demo源码托管于github，详见Github gcidea/data-visualization 下载完整的文件目录，浏览器（推荐Chrome）打开根目录下index.html即可。五个模块
简介 demo，在web端通过拖拽编排的方式快速定制活动H5页面，初步阶段完成。 交互方式及效果呈现 demo源码托管于github，详见Github gcidea/html5-draggable 使用流程1.拖拽页面布局至手机预览区2.根据不同类型的布局，点击可以编辑不同参数3.布局定制完成后可以向布局中拖拽添加素材4.页面定制完成后可以分享页面（TODO） 改进作为demo，目前还有
前言 本篇仅对拖拽过程中核心几个事件监听的写法进行小结，不涉及页面样式效果的展现。 实现1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818
前言 html5提供了File API，可以很好用于图片上传和本地预览的使用场景。 html结构以下html片段表示了图片上传组件的文档结构，依赖Amaze UI样式框架。123456789101112131415161718192021222324252627282930313233343536<div class="am-g"> <div class="am-for
前言 本篇仅对三级联动和实时搜索的核心给出说明，对于页面设计、整个工程结构等不做说明。 三级联动根据交互操作异步触发获取第一列数据12345678910111213141516171819202122232425262728293031323334353637383940//异步请求第一列数据-可选指标名称 $.ajax({ type: "POST", async:
前言 轮播图组件是一种网站中常见的表现形式。常用于广告位，头条新闻等重要信息的展示而且将图片和信息结合起来，引人注意。轮播图最重要的自然是“轮播”，也就是要让页面中的DOM元素“动”起来。这就自然需要先简单提一下JavaScript的运动框架。 JavaScript运动框架简介 JavaScript运动框架就是指利用js和DOM元素配合，利用js的相关函数以一定的频率操作改变DOM元素的位置
前言 双向选择器是网站中经常使用的一种组件，适合于要求用户输入固定的一个或多个标签内容的场景，这种格式比普通input输入框的交互方式更加友好，而且可以防止因用户输入的随意性而导致的其他多余工作（比如表单验证）甚至错误。 效果 在说具体细节之前，可以先看一下效果，下图中就实现了一个最基本的双向选择器。 注意事项1.以上组件的编写没有基于原生的CSS，而是引入了AmazeUI框架，利用了
前言 本篇记录《JavaScript权威指南》中提供的通用性的DOM结构遍历函数，这是十分常用的场景，可以获取除了Text节点以外的全部文档节点。 实现parent函数 返回元素e的第n层祖先元素，如果不存在则返回null 如果n===0；返回e本身；n===1，返回父节点，以此类推123456function parent(e, n) { if (n === undefin
前言 表单提交是一项常见操作，对于输入内容的合法性必须在前后端都做验证才能保证可靠性。表单验证有很重要的意义，除了防止注入攻击之类的安全问题外，有时如果不能正确的进行验证，可能会使合法的页面渲染受到影响。比如在实际开发中遇到的一种问题，jsp页面使用JSTL库自定义标签渲染后台传来的数据时，需要将这组数据作为参数传入相应点击事件的回调函数，如果参数中一旦也有双引号”，就会导致解析错误—oncl
前言 实现金额数字的每三位打”,”，便于识别金额大小。 实现12345678910111213//s: 希望转换的金额数字；n：希望保留的小数位数function formatMoney(s, n) { n = n > 0 && n <= 20 ? n : 2; //正则/[^\d\.-]/g表示去除传入字符串中非数字，非小数点，非负号以
主要html结构以下html片段表示了重发倒计时组件的文档结构，依赖Amaze UI样式框架。 onclick=”btnSendMsgAgain();return false;”中的return false作用：验证码是位于form表单中的，点击该按钮的作用是发送验证码，而不是提交表单，return false为了彻底阻止元素的默认事件。 123<div class="am-u-sm-