单页开发web app项目中使用的技术点总结

首先项目中需要的技术依赖于业务,所以先说下业务概述

1.业务概述

个人用户在线申请房源

2.技术分解

2.1 项目布局结构

2.2 开发环境

2.2.1安装NodeJS环境

@echo off
rem ======= 如何安装handlebars编译器 =======
rem 1.到https://nodejs.org/下载并安装nodejs
rem 2.打开cmd并定位到项目目录
rem 3.执行npm install handlebars -g命令
rem 4.执行npm install grunt-cli -g命令
rem 5.执行npm install命令
rem 6.执行grunt watch命令
rem ========================================

grunt watch

2.2.2 每次开发之前打开预编译监视
        打开Cmd窗口(以管理员的权限),执行下面命令:grunt watch
        目的:自动将模板编译生成js脚本(生成到release文件夹),用于页面展现

2.3 总体思路采用mobilebone.js-mobile移动web APP单页切换骨架

以下是js说明:

2.3.1 js:存储核心js文件,包括项目业务js文件

js\biapi.js :api数据通信(jsonp跨域)

js\biui.js: Handlebars.js(js模板引擎)

js\bifile.js:上传文件

js\birouter.js:路由

js\dispatcher.js:js配置文件

------------------------------------

第三方引用:

lib:jquery.min.js:JavaScript 库

lib\md5.min.js:md5加密

lib\fastclick.min.js:大家可能都知道的,在移动设备上,click具有较长时间的延迟,用户在操作的时候总会有点怪怪的不顺畅的感觉

lib\mobilebone.min.js:mobilebone.js-mobile移动web APP单页切换骨架

lib\LAB.min.js:LABjs里的动态加载脚本文件

2.3.2.templates:存储页面模板文件,由node自动编译为js生成到release目录下;

2.3.3.release:生成后的js文件,用于页面展现

时间: 2024-10-10 17:18:51

单页开发web app项目中使用的技术点总结的相关文章

通过Web Api 和 Angular.js 构建单页面的web 程序

在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的页面,比如说:用户通过一个连接导航到一个页面,会发送一个请求到服务器端,接下来服务器将会发送一个新的页面给浏览器. 但是在单页面应用程序中,整个页面只是在浏览器一开始请求的时候才会加载,接下来的请求,下来的交互请求都是通过ajax 来完成的,这就意味着只有部分的页面会更新,并不需要去加载整个的页面,这就减少了对用户操作的响应时间,从而使用户有一个更流畅的体验.但是在传统

利用JQuery Mobile开发web app

什么是web app web app 是基于web的应用程序,是针对移动设备优化后的web站点,它具有 开发成本低——采用web开发技术,不需要考虑跨平台以及底层适配问题: 升级简单——不需要通知用户,在服务端更新文件即可: 维护方便——本质是站点,所以维护方式于web站点相同 等优点.开发web app使用的技术:前端 html5 + css + JavaScript / 后端 php | java | .net. 随着 html5 的发展,我们能使用越来越多的功能,比如:地理定位.本地数据储

慕课网实战—《用组件方式开发 Web App全站 》笔记二

运用HTML5.CSS3.JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! <用组件方式开发 Web App全站 > 项目JS类开发 静态页思路验证 jQuery全屏滚动插件fullPage.js ??使用参考:Fullpage入门指南 组件切换,入场,出场动画 ???? DOM事件循环传播-无限循环 ??使用return false;或者triggerHander()方法阻止事件向上传播. 相关代码 HTML <body&

慕课网实战—《用组件方式开发 Web App全站 》笔记七-饼图和环图组件开发

运用HTML5.CSS3.JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! <用组件方式开发 Web App全站 > 饼图开发(绘制饼图准备) 饼图实现原理 饼图开发(绘制饼图) 代码 /* 饼图组件对象 */ var H5ComponentPie =function ( name, cfg ) { var component = new H5ComponentBase( name ,cfg ); // 绘制网格线 - 背景层 v

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基础作出了一些说明,建议在阅读本文前首先阅读前文,这里 Kayo 再引用前文的重要内容. “jQuery Mobile 在基于本地事件上,创建了一系列的自定义事件,大部分事件是基于触摸设备的使用情况开发的,当然这些事件对于桌面环境也会有适当的处理,开发者可以使用 bind() 函数绑定到需要的页面对象中. 值得

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 页面事件与 deferred

在系列的上一篇文章<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解>中,Kayo 介绍了除页面事件外的其他 jQuery Mobile 事件,而页面事件由于事件数较多,并且涉及 jQuery 中一个比较复杂的对象 deferred ,因此在本文中单独说明.jQuery Mobile 页面事件使用分为页面加载事件 (Page load events),页面跳转事件 (Page change events),页面显示/隐藏事件 (

CK2059-组件方式开发web app全站

随笔背景:在很多时候,很多入门不久的朋友都会问我:我是从其他语言转到程序开发的,有没有一些基础性的资料给我们学习学习呢,你的框架感觉一下太大了,希望有个循序渐进的教程或者视频来学习就好了.对于学习有困难不知道如何提升自己可以加扣:1225462853进行交流得到帮助,获取学习资料. 下载地址:http://pan.baidu.com/s/1jI05TPW HTML5+组件式开发 让全站移动开发更简单! 运用HTML5.CSS3.JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带

慕课网实战—《用组件方式开发 Web App全站 》笔记五-折线图组件开发

运用HTML5.CSS3.JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! <用组件方式开发 Web App全站 > 折现图绘制大致步骤 折线图画布 JavaScript CSS 折线图绘制网格线 // 水平网格线 100份 -> 10份 var step = 10; ctx.beginPath(); ctx.lineWidth = 1; ctx.strokeStyle = '#AAAAAA'; window.ctx = c

慕课网实战—《用组件方式开发 Web App全站 》笔记四-柱状图组件开发

运用HTML5.CSS3.JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! <用组件方式开发 Web App全站 > 柱图开发思路 水平柱图开发(HTML的DOM搭建) ???? ???? 水平柱图开发(CSS样式编写) /* 柱状组件样式 */ .h5_component_bar{ } .h5_component_bar .line{ height: 15px; font-size: 12px; line-height: 15p