文档章节

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

Mr.Zheng
 Mr.Zheng
发布于 2015/03/13 20:57
字数 1187
阅读 233
收藏 28

今天不聊技术的问题,咱们来聊聊在前端开发中如何管理好自己的 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"
}

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

作者博客:百码山庄

© 著作权归作者所有

共有 人打赏支持
Mr.Zheng
粉丝 53
博文 22
码字总数 38792
作品 0
杭州
网页/平面设计
私信 提问
加载中

评论(3)

chworld
chworld
这个组件方法是怎么定义的?在哪可以学?
thinkgood
thinkgood
学习,非常感谢
ForJustice
ForJustice
good
通过延缓执行 JavaScript 提升网页加载速度

简介 延缓执行 JavaScript 是一个能有效提高网页加载速度以及提升用户阅读体验质量的途径。从实际经验来看,将我们的网站从经济实惠的 VPS 迁移到 Softlayer(美国著名的一个数据中心)独立服...

坦诚相待
2012/04/12
2.2K
11
使用Kotlin:让Android与JS交互的详解

先来说说什么是JS交互: 说的俗一点就是通过我们项目中的控件来调用HTML里的JS代码,也可以通过JS来调用项目中的代码。 Android与JS之间的桥梁就是WebView了,我们是通过WebView来实现他们的...

富江___
2018/06/11
0
0
【原创】百度的手写输入法

最近百度不是跟汉王合作出了个手写输入法,还是云的,只要是云的都拿来借用一下。 所以搞了两个研究: 第一:如何在自己网站加入此输入法? 解决: 网上有一片通过修改JS文件能引入手写输入的...

xu81.com
2010/10/19
1K
7
Android原生代码调用H5 Web网页中的Javascript函数方法

版权声明:本文为Zhang Phil原创文章,请不要转载! https://blog.csdn.net/zhangphil/article/details/86014787 Android原生代码调用H5 Web网页中的Javascript函数方法 重点是使用Android W...

zhangphil
01/09
0
0
高效 JavaScript 单元测试(转自IBM dev)

自动化 JavaScript 代码跨浏览器测试 Hazem Saleh, 高级软件工程师, IBM 简介: 能在一个浏览器上运行的 JavaScript 并不一定能在其他浏览器上运行。如果没有对代码进行单元测试,那么在决定...

Sam_yi
2011/12/02
335
0

没有更多内容

加载失败,请刷新页面

加载更多

移植Modbus到STM32F103(2):移植FreeModbus到usart3并运行示例代码

FreeModbus是Modbus的一个被广泛移植的实现。其源码在github,最新版是1.6。 FreeModbus支持Modbus功能码里的0x01~0x06,0x0F~0x11和0x17,对一些功能比如异常诊断和读事件计数等功能码并没有...

Konstantine
今天
3
0
浅谈神经网络(神经网络篇)

背景 之前写过浅谈神经网络基础篇,简单介绍下机器学习这块内容,用于扫盲。本文正式将神经网络,这部分是深度学习的基础。了解完可以掌握强大的机器学习的方法,也可以更好的了解深度学习。...

Uknowzheng
今天
3
0
移动硬盘变为RAW格式后的修复

在Mac上使用自己的移动硬盘结果文件系统格式变为RAW; 在自己windows笔记本上使用chkdsk H: /F进行修复,修复日志如下: C:\Users\mengzhang6>chkdsk H: /F文件系统的类型是 NTFS。卷标是 do...

晨猫
今天
3
0
10 Git —— 标签管理

10 Git —— 标签管理 本节内容: 命令git tag <tagname>用于新建一个标签,默认为HEAD,也可以指定一个commit id;命令git tag -a <tagname> -m "blablabla..."可以指定标签信息;命令git......

lwenhao
今天
3
0
小程序设置垂直居中,水平居中

如果子容器中的view需要居中的话,那需要在父容器中设置居中 水平居中: display: flex; flex-direction: column; align-items: center; 垂直居中 display: flex;align-items: cen...

淘幻幻
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部