前端js的书写规范和高效维护的方案_自我总结使用的方案

简介:   作为程序员,人生最值得幸福的事有几件:解决困扰了很长时间的问题升职加薪找个漂亮又靠谱的对象深得领导的喜欢带领团队冲锋陷阵 ...  哈哈,这些都是梦想,暂时想想就好了。这肯定和我说的东西不符合嘛,大家表多想了。

  作为程序员,人生最值得幸福的事有几件:

  1. 解决困扰了很长时间的问题
  2. 升职加薪
  3. 找个漂亮又靠谱的对象
  4. 深得领导的喜欢
  5. 带领团队冲锋陷阵
  6.  ...

  哈哈,这些都是梦想,暂时想想就好了。这肯定和我说的东西不符合嘛,大家表多想了。下面进入正题把:

  不管你在小公司,创业型公司,ABCD轮的公司,哪怕在bat,再叼一点的就是全球的google,facebook等,我们正常进去都不会让你去单独做一个东西,而是首先的任务就是维护别人的代码,对的,没错,你没听错,维护别人的代码!!!(卧槽,哪个sb写的代码,骂了个蛋........)

  因为我也是程序员,我懂咱们的感受,不管前端后端都一样。对于菜鸟来说,会抱怨一下,哪个大婶写的代码,太牛逼了。我一行没看懂,太牛叉了,这下面怎么写呢;对于稍微有点道道的程序员,会饱含一些谦虚的态度,这边写的不错,那边写的不好,还差一点,要动手改一下,可是又想了想,万一改崩了怎么办,所以一直处在这种纠结状态;最后对于那些牛叉的人,上来就是一句:我草拟大爷,哪个sb写的代码,写的什么刁玩意,这TM还可以这样写,我勒个擦,这边还可以这样,我都跪了,神啊救救我把。

  当然,上面都是描述的我们去维护别人代码,暴露的千姿百态。我想按本心说,谁都不想去维护这样的代码,最然有时候现实都要去维护这样的代码。所以,有时候我们不知不觉也这样,不管后来来维护你代码的人。但是,作为一个负责任的程序员来说,都不应该这样的。所以能有个可以维护的代码,有一些规范,对于公司的代码管理和审核,还有后来的维护者都是一个很好的方式。

  我总结的规范,我也不知道别人知否这样总结过,所以我就先把这套前端js书写的格式和规范书写下来,大家一起参考参考。

  依赖的一些原则和规范:

    • 原子思想,即确认每个function就做一件事
    • 归纳思想,将同一类的操作,全部整合到一起
    • 方便维护,可以便于后来人进行快速维护
    • 方便拓展,即可以根据每个不同的项目进行不同的更改
    • 通用前端设计模式,一些前端可以通用的设计模式

  代码如下:

/**
 * Created by gerry.zhong on 2016/10/11.
 */
(function(window){
    //创建一个独立的对象,注入所有的方法,包括你想抛出去和不想抛出去的
    var tool = {
        AAAA:function(){},
        BBBB:function(){
            console.log("我只想内部使用,不想给别人用");
        }
    };

    /*
    * 该对象承载所有需要抛出去的对象
    *   1.该对象中的方法可以自己写
    *   2.该对象中的方法可以注入(例子中的tempObj.tool.AA)
    *   3.该对象也可以选择性抛出给使用者需要的方法,也可以隐藏(tool.BBBB)
    * */
    var tempObj ={
        //reader为一些初始化需要的操作,有时候会有注册事件等,或者一些预操作
        reader:function(){
        },
        //注入所有的选择器,方便选择器变化,直接修改该对象中的选择器,而不需要全局去更改
        selector:{
            mySelector:"#mySelector",  //原密码
        },
        //注入所有的接口地址,方便接口变化可以进行,快速变更,不需要全局找引用的对象
        interface:{
            loginUrl:"",
        },
        //注入page中所有的事件,统一管理,建议命名规范:事件_命名,例 click_login
        registerEle:{
            click_login:function(){
                //注册单击事件
            }
        },
        //注入所有ajax请求,页面所有请求,将在这里统一管理,建议命名规范:ajax_命名,例 ajax_login
        /*
        * 该请求中有2种方案,看需求使用
        *  1.不公用一个请求方案
        *  2.公用一个请求,但是回调处理不一样
        * */
        ajaxRequest:{
            //不公用一个请求方案
            ajax_login:function(){
                $.post("","",function(data){
                    tempObj.callback.call_login(data);
                });
            },
            //会有多个业务公用这个请求
            ajax_login_T:function(callback){
                //所有接口地址从interface中获取,callback中tempObj.callback中处理
                $.post("","",callback);
            },
        },
        //处理所有回调函数,针对一个请求,处理一个回调
        callback:{
            //不共用请求处理回调
            call_login:function(data){
                //处理回调
            },
            //公用请求处理回调
            call_login_T:function(){
                var temp = function(){

                };
                tempObj.ajaxRequest.ajax_login_T(temp);
            }
        },
        //所有使用的工具类,如果每个项目都单独的unit.js或者common.js等存放一些公共方法的,这里可以不使用
        // PS:这里存放的只是仅针对于这个页面处理的一些tool,一般没必要抛出去,不过看业务而定
        tool:{
            A:function(){
                console.log("我是自己写的方法");
            },
            AA:tool.AAAA,    //这是我想抛出去给别人用的东西
        },
        //临时缓存存放区域,仅针对本页面,如果跨页面请存放cookie或者localstorage等
        //主要解决有时候会使用页面控件display来缓存当前页面的一些数据
        temp:{

        },
        /*
        * 业务使用区域,针对每个特别的业务去串上面所有的一个个原子
        *   因为上面所有的方法,只是做一件事,这边可以根据业务进行串服务,很简单的
        * */
        firm:{

        }
    };
    /*
    * 闭包抛出去的方法
    * */
    var outputObj =function(){
        //首先执行reader方法,初始化一些操作,比如注册事件啥啥啥的
        tempObj.reader();
        /*
        * 抛出给别人使用的对象
        *   想给别人看和使用的东西,可以注入tempObj对象,就像tool中的AA的方式
        *   不想给别人看和使用的东西,就像内部tool对象中的BBBB方法,你内部可以使用,外部是无法引用的
        * */
        return tempObj;
    }

    //抛出你希望抛出去的对象,因为你掌控了所有,哈哈。
    window.gerry = new outputObj();
})(this);

  

这是我这些年,经历很多坑,自己也挖过坑,也填过很多坑,总结出来的东西,大家可以参考参考。反正我在项目中使用起来很方便,不会出现一个请求回调中会出现串了200行代码的玩意。关键是维护起来,很方便,看起来也很爽。

  • 如果修改事件,我就去事件中找我需要的事件,
  • 请求要修改,我就去我的请求中去修改,我要变化的请求,
  • 如果回调变了,我就去回调函数中去处理回调,
  • 选择器和接口,就直接去这2个对象中去修改,不需要全局去变化等

 

最主要的是,我控制了我自己写的所有代码,我想让你看什么,我想让你用什么,你就得听我的,这也是做一些原生插件和框架的思想。对自己的代码负责,控制自己的代码,这才是程序员玩的东西,做代码的主人,而不是被代码玩。

  PS:对于amd和cmd的写法当中也可以使用,最后抛出的对象,可以稍微变一下就好了,我这里只是针对原生写的,大家借鉴这个思想就好了

 

  github地址:https://github.com/GerryIsWarrior/jsSpecification       希望大家帮忙点颗星,这才是我最大的动力

 

目录
相关文章
|
8天前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
29 3
|
16天前
|
前端开发 JavaScript
前端ES5 | js —添加元素方法
前端ES5 | js —添加元素方法
|
13天前
|
Web App开发 前端开发 JavaScript
Web前端项目的跨平台桌面客户端打包方案之——CEF框架
Chromium Embedded Framework (CEF) 是一个基于 Google Chromium 项目的开源 Web 浏览器控件,旨在为第三方应用提供嵌入式浏览器支持。CEF 隔离了底层 Chromium 和 Blink 的复杂性,提供了稳定的产品级 API。它支持 Windows、Linux 和 Mac 平台,不仅限于 C/C++ 接口,还支持多种语言。CEF 功能强大,性能优异,广泛应用于桌面端开发,如 QQ、微信、网易云音乐等。CEF 开源且采用 BSD 授权,商业友好,装机量已超 1 亿。此外,GitHub 项目 CefDetector 可帮助检测电脑中使用 CEF
67 3
|
20天前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
27 1
|
13天前
|
编解码 前端开发 JavaScript
前端移动端适配方案
【9月更文挑战第8天】前端移动端适配方案
37 0
|
20天前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
47 0
|
20天前
|
开发者 C# Android开发
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
59 0
|
20天前
|
开发者 Android开发 iOS开发
Xamarin开发者的神器!揭秘你绝不能错过的插件和工具,让你的开发效率飞跃式提升
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程,保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用介绍 Xamarin.Forms 的基本功能和工作原理。首先配置 Visual Studio 开发环境,然后创建并运行一个包含标题、按钮和消息标签的示例应用,展示如何定义界面布局及处理按钮点击事件。这帮助开发者快速入门 Xamarin.Forms,提高跨平台应用开发效率。
31 0
|
20天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
42 0
|
20天前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
43 0