一个项目的开始,特别是丰富多样的前端工程,首先一定要确定好采用的框架和技术点。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 name="viewport" 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 name="format-detection" content="telephone=no">
- <title>
- 通用模板页面
- </title>
- <link rel="stylesheet" type="text/CSS" href="/static/li/li-1.2.0.css">
- </head>
- <body>
- <header>
- </header>
- <article>
- </article>
- <footer>
- </footer>
- </body>
- <script type="text/html" id="registerMainTpl">
- </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>
一个项目的目录结构就像人的骨架一样重要,对于日渐迭代版本越来越多的前端项目,如果没有一个好的目录结构会显得非常臃肿,难以维护,以下这个截图是我现在正使用的目录,也还有需要改进的地方,做一个参考:
将规范规则,文档目录、wiki 链接等说明放在 readme 必读文档里
如果你是使用 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: "/",
- paths: {
- jquery: 'plugin / jquery / jquery - 1.9.0.min',
- artTemplate: 'plugin / template / artTemplate - 3.0',
- },
- shim: {
- bootstrap: {
- deps: ['jquery'],
- exports: '$'
- }
- },
- waitSeconds: 15
- });
用来放置所有公共方法,同样也是每个页面都引用,正如上面定义好的一些常量一样,一个项目的开始,还需要一些方法上的准备工作,如:
- varua = navigator.userAgent.toLowerCase(),
- isWechat = ua.indexOf('micromessenger') != -1;
- if(isWechat){
- ...
- }
- getUrlPar: function(name) {
- var _reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"),
- _regNext = window.location.search.substr(1).match(_reg);
- if (_regNext != null) return decodeURI(_regNext[2]) || '';
- else return'';
- },
通常情况下,后台会在 web.xml 会配置一个 error-page 指向一个错误页面,但是那样都是跳转页面 404 错误还好,其他错误也跳页面其实并不友好,而其他的错误通常是请求中错误,我们只要设置一个 ajax 全局监听即可,下面是代码片段,当然还可以做很多你暂时没有想到的事情
- $(document).on('ajaxError',
- function(e, xhr, options) {
- if (404 == xhr.status) {
- common.404()
- } else if (500 == xhr.status) {
- common.500()
- }
- })
所有公共样式,同样的每个页面都要引用,其中在整个项目样式通用控制起决定性作用,如:
- * {font-family:'Microsoft YaHei';
- }
- body,
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- hr,
- p,
- blockquote,
- dl,
- dt,
- dd,
- ul,
- ol,
- li,
- pre,
- form,
- fieldset,
- legend,
- button,
- input,
- textarea,
- th,
- td {
- margin: 0;
- padding: 0;
- }
- /** 标签样式 start */
- html {
- font - size: 20px;
- }
- body {
- font - size: 16px;
- background - color: #e5e6e7;
- }
- h1 {
- font - size: 2.25rem;
- }
- h2 {
- font - size: 1.975rem;
- }
- h3 {
- font - size: 1.50rem;
- }
- h4 {
- font - size: 1.125rem;
- }
- h5 {
- font - size: 0.875rem;
- }
- h6 {
- font - size: 0.750rem;
- }
- a {
- text - decoration: none; - webkit - tap - highlight - color: transparent;
- }
- em {
- font - style: normal;
- }
- label > *{
- pointer - events: none;
- }
- ul {
- list - style: none;
- }
- button { - webkit - appearance: none;
- border: 0;
- background: 0 0;
- }
这是所有页面的基础样式控制,主要是在字体方面,用 rem 来解决移动开发中多屏适配,如果有 UI 框架引入的时候就要根据实际情况考虑是覆盖基础样式还是被覆盖来决定引入的先后顺序了
- /** 媒体查询 start */
- @media only screen and(min - width: 400px) {
- html {
- font - size: 21.33333333px ! important;
- }
- }@media only screen and(min - width: 414px) {
- html {
- font - size: 22.08px ! important;
- }
- }@media only screen and(min - width: 480px) {
- html {
- font - size: 25.6px ! important;
- }
- }
实际开发中可能有实时刷新和实时编译 sass 这些任务。上面是生产构建的脚本,build 这个任务里面包含了上面 4 点,当然还可以添加 requireJs 优化等等这些...
- E:
- cd \h5\weixin\target
- gulp build
- cd \h5\weixin\target\weixindel \h5\weixin\target\weixin\weixin.war
- cd \h5\weixin\target\weixinjar cvf weixin.war ./
- del \last\code\2017\dnzd\weixin.war
- move weixin.war \last\code\2017\dnzd\
团队协作开发中,成员写代码的意识很重要,一个再完善的开发规范不如有个良好的代码意识的程序员,一个技术再好团队不如一个团队意识强的的团队,当然,改变一个人的开发习惯是比较痛苦的,但是如果你发现这是一个好的规范,那么你需要刮骨疗伤去成长,如果你不能忍受一些条条框框,那么团队也需要更好的程序员。在项目开发协作中,特别是团队组建初期,特别是前后台交互、UI 跟前端对接、产品经理跟开发沟通中,可能会存在很大的意见分歧,可可能有人会说你代码哪里哪里不好、没有注释、不可维护.. 求同存异,尽可能的少去指责他人,因为你看上去乱遭遭的代码,永远相信也是写的人当时深思熟虑后的作品。同时面对别人的说法,你需要更成熟的选择一笑而过,你也应该去采纳别人的建议,沉默中把自己的弱项提高,那就是成长。
做前端的这几年,我从一个 css、js 都不懂的小白也算是历练成了一个老司机,其中的辛酸苦辣只有自己明白。学习的过程的确是痛苦的,但却也是有乐趣在其中的,深有体会,一件事情坚持一直做下去,总会有许多的收获,时间长了,慢慢的你会发现,在很多人心中你已经很厉害了。就像写博客的这一年多,除了我自己收获许多积累许多之外,我还意外收获了 35 个粉丝!最后想说的是,前端是丰富多彩的,你可以融入其中,但不能只停留在这一块领域,你想要更好的发展,你必须多元化发展,比如做一个会 JAVA 后台的前端,做一个偏 UI 的前端,做一个很懂技术的产品经理,这些都将是你的优势,很多企业其实并不需要你会很高深的技术,很多项目其实也用不上多少高深的技术,很多时候,你能实现需求,能做出用户体验好的产品,能再特殊的阶段兼任某个岗位,能做一些别人做不了的事情,你的存在就更有价值!总之在技术上要抓住一个重点,也要发散自己的技术点,走更宽的路,同时技术人也要注重情商的提高..
程序员最重要的是完美实现需求,技术有时候只是工具。
来源: http://www.bubuko.com/infodetail-2032921.html