【原创】如何管理你的 Javascript 代码

今天不聊技术的问题,咱们来聊聊在前端开发中如何管理好自己的 Javascript 代码。首先,咱们先来说说一般都有哪些管理方式?我相信 seajsrequirejs 对于前端开发者而言都不陌生,不错它们都是前端代码模块化开发的利器,显然以模块化的方式去管理我们的 Javascript 代码,是很不错的选择。

不过今天咱不谈模块化开发,因为上面的两个工具已经做得很好了,只要到他们的官方网站找到相应的文档资料,认真学习,不需太多时日你也能掌握模块化开发了。今天咱们要谈的是在不依赖模块管理工具的前提下,如何做好自己项目的代码管理。

首先,笔者认为一个独立的 Web 项目,应该有一个顶级的命名空间,而针对这个项目开发的所有附属代码应该尽量都放到该命名空间下。如果项目特别大,咱可以根据业务模块再分二级命名空间,三级命名空间,等等。但是何谓大项目,这个就只能开发者自己去定义了。

然后,仅仅有命名空间还不够,如果你所有的代码都码在一个 js 文件中,那将会是一个悲剧。为什么这么说呢?第一,如果我们有一个 Tip 组件,功能是给指定元素添加标签提示功能,当我们需要在多个页面中使用这个组件时,你就会发现,每个页面都会引用 N 多没用的代码。第二,所有的代码都写在一个文件中,那么你的这个 js 文件,必将是一个庞然大物,几千上万行,调试起来也是相当有难度的。所以,要管好你的 js 代码,请把独立的插件、组件、公共方法,保存到独立的 js 文件中,再用我们上面准备的顶级命名空间把它们聚集到一起来。

再然后,一套合理的编码规范会让你的代码管理事半功倍。普通变量小驼峰,类名大驼峰,常量大写,私有变量加前置下划线,能很好的提高你代码的可读性和可维护性。运算符之间添加空格,代码使用 4(或 2)个空格合理缩进,可以让你的代码整齐有序,清晰易读。代码块严格使用大括号包裹(即便只有一行语句),三元运算符合理使用小括号,会让你的代码整齐,逻辑清晰。统一的组件开发模式,可以让你的代码专业而不失优雅。还有很多很多,就不再往下罗列了,这些规范在很多规范文档中已经写得非常清楚,这里给大家推荐一个个人感觉很不错的 js 规范,感兴趣的朋友还可以找谷姐、度娘勾兑勾兑,学习更多的 js 规范,让自己更专业。当然,所谓“尽信书,则不如无书”,所以,规范仅作参考,并不是严格限定,开发者可以在规范的基础上保留一点点自己的个性,但必须保证风格统一。

最后,咱一起来看一个简单的代码示例,命名空间就以 SEEJS 为例了。

第一步,咱们先把我们的命名空间给弄出来,顺便加一些基础信息:

window.SEEJS = {
    copyright: "CopyRight ? MrZheng",
    version: "1.0.0"
};

第二步,我们来定义一个组件结构:

(function(window, undefined){
    SEEJS.plugins = SEEJS.plugins || {};

    function Tips(cfg) {...}

    Tips.prototype = {
        constructor: Tips,
        init: function() {...}
    };

    SEEJS.plugins.Tips = SEEJS.plugins.Tips || Tips;
})(window);

只为举例,咱就不再多写了。最后,咱给我们的项目提供一些工具方法:

(function(window, undefined){
    var TOOLS = SEEJS.tools || {};

    TOOLS.trim = function(str) {...};
    TOOLS.hexToRgba = function(hex, alpha) {...};

    SEEJS.tools = TOOLS;
})(window);

现在我们在控制台输入 SEEJS,然后敲一下回车,就可以清晰的看到我们的代码结构了:

SEEJS = {
    copyright: "CopyRight ? MrZheng",
    plugins: {
        Tips: function(cfg) {}
    },
    tools: {
        trim: function(str) {},
        hexToRgba: function(hex, alpha) {}
    },
    version: "1.0.0"
}

好了,就到这里了,纯属个人拙见,欢迎交流!!!

作者博客:百码山庄

时间: 2024-10-12 13:17:26

【原创】如何管理你的 Javascript 代码的相关文章

如何管理你的 Javascript 代码

今天不聊技术的问题,咱们来聊聊在前端开发中如何管理好自己的 Javascript 代码.首先,咱们先来说说一般都有哪些管理方式?我相信  seajs . requirejs  对于前端开发者而言都不陌生,不错它们都是前端代码模块化开发的利器,显然以模块化的方式去管理我们的 Javascript 代码,是很不错的选择. 不过今天咱不谈模块化开发,因为上面的两个工具已经做得很好了,只要到他们的官方网站找到相应的文档资料,认真学习,不需太多时日你也能掌握模块化开发了.今天咱们要谈的是在不依赖模块管理工

深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点(转)

才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情.具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以

[转] 翻译-高质量JavaScript代码书写基本要点 ---张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1173 原文作者:Stoyan Stefanov原文链接:The Essentials of Writing High Quality JavaScript翻译编辑:张鑫旭 //zxx: 俗不可耐的开场白就免了,直接进入翻译内容(其实是因为本文是在太..太..长了,). 教程相关细节主题:JavaScript最佳实践难度

FineUI(专业版)实现百变通知框(无JavaScript代码)!

曾经,有网友抱怨FineUI中连个通知框都没有,当用户进行某个操作成功时给个右下角的提示很不方便. 强大的设置参数 现在,FineUI(专业版)提供了强大的通知框机制,一个小小的通知框居然有多达 16 种不同的设置,可见威力之强大. 下面通过一张图片来简单概括一下: 1. 模式或者非模式对话框2. 消息图标可显示(消息.警告.问题.错误.成功),也可隐藏3. 正在加载图片可显示隐藏4. 消息正文可自定义5. 对话框标题可自定义6. 关闭图标可显示隐藏7. 标题栏可拖动8. 标题栏可隐藏9. 弹出

60行JavaScript代码俄罗斯方块

教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏 早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式). 我用C写一个功能基本齐全的俄罗斯方块的话,大约需要1000行代码的样子.所以60行乍一看还是很让人吃惊的. 但是读懂了代码之后发现其实整个程序并没有使用什么神秘的技术,只不过是利用一些工具或者JavaScript本身的技巧大大简化了代码. 总结起来主要是以下三点 1.使用eval

7个高性能JavaScript代码高亮插件

本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 Syn

认清Javascript的地位并编写合理的Javascript代码

作为前端程序员,一定要认清javascript的地位,不要被它乱七八糟的特点所迷惑.JavaScript主要是用来操控和重新调整DOM,通过修改DOM结构,从而达到修改页面效果的目的. 要用这个中心思想指导以后的所有js学习,包括它的框架. 所谓合理就是合乎道理.那么合理的javascript代码通常遵循哪些原则?笔者认为至少要遵循以下几点: 有意义的命名 无论选择驼峰命名法还是匈牙利命名法,见名知意是最重要也最基本的一条法则.同时也要避免会产生歧义的命名. 例如 变量“当前时间” var d;

新书《编写可测试的JavaScript代码 》出版,感谢支持

本书介绍 JavaScript专业开发人员必须具备的一个技能是能够编写可测试的代码.不管是创建新应用程序,还是重写遗留代码,本书都将向你展示如何为客户端和服务器编写和维护可测试的JavaScript代码. 从减少代码复杂性的方法,到单元测试.代码覆盖率.调试.以及自动化,您将全面学到如何编写让你和你同事能够轻松修复和维护的JavaScript代码.测试JavaScript代码是一个复杂的过程.本书将在很大程度上帮你简化该过程. 目标读者 本书主要目标受众是那些想成为JavaScript专业开发人

Javascript代码规范

1. 前言 JavaScript一直有着广泛的应用,特别是在浏览器端的行为管理.本文档的目标是使JavaScript代码风格保持一致,容易被理解和被维护. 虽然本文档是针对JavaScript设计的,但是在使用各种JavaScript的预编译语言时(如TypeScript等)时,适用的部分也应尽量遵循本文档的约定. 任何问题或建议,欢迎跟我们讨论 2. 代码风格 2.1. 文件 ·[建议] JavaScript 文件使用无 BOM 的 UTF-8 编码. 解释 UTF-8 编码具有更广泛的适应性