前端项目从0到1的感悟 - liliangel_H5之家 - 中国HTML5教程资源分享第一站

前端项目从0到1的感悟

去年6月份左右，加入了一个创业公司，很幸运做了一个从零开始的项目，前端工程由我一手搭建起来，并不断迭代功能到现在，有许多的感悟心得，在这里写点总结

确定框架、技术点

一个项目的开始，特别是丰富多样的前端工程，首先一定要确定好采用的框架和技术点。2016年vue.js如火如荼，webpack强势崛起，但是是否就可直接拿到项目中搞起呢？答案是否定的，一个新的技术如果自己或团队中成员都还在学习摸索的过程，是肯定不能在生产环境中使用的，更何况这是个创业的团队，没有成熟完整的前端团队。所以我当时还是走老套路，jquery为核心，fastclick辅助，requireJs按需加载，arttemplate做模板渲染，核心UI类库使用jqueryWeUI，加上sass预编译样式文件，gulp打包构建，（后台是微服务架构，maven构建，springMVC+mybatis，此工程为h5前置工程）这样一来就基本上满足条件，可以开工了。

开发工具

不同的开发工具可能在展示格式上有一定的差别，所以一个团队最好还是能统一的开发工具。后台一般使用eclipse，前端我推荐使用sublime，以及相关的插件：

开发规范，命名规则

既然是多个人同时开发，肯定会有一些代码风格上的异同，然而为了方便后期维护，必需制定一些相关的规范。如：

开发规范 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <meta content="telephone=no" > <title>通用模板页面</title> <link type="text/css" href="/static/li/li-1.2.0.css"> </head> <body> <header></header> <article></article> <footer></footer> </body> <script type="text/html"> </script> <script src="../static/component/requirejs/require.min.js"></script> <script type="text/javascript"> var script = document.createElement("script"), head = document.head || document.getElementsByTagName('head')[0]; script.type = "text/javascript"; script.src = '/config.js?ver=' + (new Date()).getTime(); head.appendChild(script); script.onload = script.onreadystatechange = function(){ require( [ 'jquery', 'fastclick', 'artTemplate', 'li',//自己封装的js类库，包括head里面引用的li-1.2.0.css 'common',//公共js，存放一些公用的方法 ], function($,FastClick,template){ FastClick.attach(document.body); var $body = $('body'), $header = $('header'), $article = $('article'); var registMain = { h5: function(){ this.renderHtml(); this.renderComponent(); this.watch(); }, //全局属性 options: { }, //渲染模板的数据 data: { }, //渲染html renderHtml: function(){ }, //渲染组件 renderComponent: function(){ }, //事件监听 watch: function(){ var self = this; } } dn.init(function(){ registMain.h5(); }) }) } </script> </html>

命名

目录结构

一个项目的目录结构就像人的骨架一样重要，对于日渐迭代版本越来越多的前端项目，如果没有一个好的目录结构会显得非常臃肿，难以维护，以下这个截图是我现在正使用的目录，也还有需要改进的地方，做一个参考：

定义readme.md

将规范规则，文档目录、wiki链接等说明放在readme必读文档里

定义config.js

如果你是使用requirejs的项目，肯定有个config.js文件，这个文件每个页面都会引用，并且是在页面加载js的开始同步引用。官方说法是这个页面放js文件的key-value形式配置呢，而我习惯再js配置之前再定一个window对象的项目唯一子对象，再将项目一些常用的常量也定义好，以及请求状态码、url汇总，这样极有利于后续维护，如：

//项目的全局唯一对象 window.li = { version: 20170301,//当前版本号，打包时用gulp自动变更 errorTips: '哎哟，网络好像有点问题了..',//无网络提示 timeout: 1000*60*60*24*20,//登录失效暂时为20天 _MOBILE: 'http://h5.liliangel.cn/base/mobile',//跳转手机页面 _ROOT: 'http://www.liliangel.cn',//测试域名地址 _XHR: '/rest/',//ajax请求前缀 _CORS: '/cors/',//跨域请求前缀 _STATIC: 'http://static.liliangel.cn',//静态资源域名 _WX: 'http://h5.liliangel.cn/'//微信h5服务器地址 } //所有请求状态码 li.code = { SUCCESS: 600, //成功 PHONE_EXIST: 603 //手机号码已经存在 } //所有请求url li.api = { sendMessage: 'wechat/sendMessage' //发送消息url } //静态资源配置 require.config({ urlArgs: "v=" + li.version, baseUrl : "http://www.cnblogs.com/", paths: { jquery:'plugin/jquery/jquery-1.9.0.min', artTemplate: 'plugin/template/artTemplate-3.0', }, shim: { bootstrap: { deps: ['jquery'], exports: '$' } }, waitSeconds: 15 }); 定义common.js

用来放置所有公共方法，同样也是每个页面都引用，正如上面定义好的一些常量一样，一个项目的开始，还需要一些方法上的准备工作，如：

后退
通常情况下，你可能会觉得window.history.go(-1)就可以了，但是如果你的页面同时也要用在混合app里时，就需要考虑一些和原生端交互的问题，跳转页面也是一样，通常情况下需要保留当前webview重新打开一个webview，所以尽量将后退和跳转页面封装一个通用的方法，方便后期添加修改。

判断当前浏览器厂家
h5最多的可能就是判断是否是微信浏览器了

var ua = navigator.userAgent.toLowerCase(), isWechat = ua.indexOf('micromessenger') != -1; if(isWechat){ ... }