此处将为大家介绍关于JavaScript代码优化和部署——“可维护性”的注意要点的详细内容,并且为您解答有关编写可维护的javascript的相关问题,此外,我们还将为您介绍关于C++最佳实践|4.可
此处将为大家介绍关于JavaScript 代码优化和部署——“可维护性”的注意要点的详细内容,并且为您解答有关编写可维护的javascript的相关问题,此外,我们还将为您介绍关于C++最佳实践 | 4. 可维护性、JavaScript BOM——“location 对象”的注意要点、JavaScript BOM——“navigator 对象”的注意要点、JavaScript BOM——“screen 对象”和“history 对象”的注意要点的有用信息。
本文目录一览:- JavaScript 代码优化和部署——“可维护性”的注意要点(编写可维护的javascript)
- C++最佳实践 | 4. 可维护性
- JavaScript BOM——“location 对象”的注意要点
- JavaScript BOM——“navigator 对象”的注意要点
- JavaScript BOM——“screen 对象”和“history 对象”的注意要点
JavaScript 代码优化和部署——“可维护性”的注意要点(编写可维护的javascript)
代码约定
可读性
以下地方需要进行注释:
函数和方法:注释参数代表什么,是否有返回值;
大段代码:描述任务的注释;
复杂的算法;
Hack
变量和函数命名
变量用名词;
-
函数名用动词开头:getName()等;
返回布尔值类型的函数用isEnable()等;
合乎逻辑不用担心太长;
变量类型透明化
方法一:初始化,如下:()推荐)
var isFound = false; //boolean
var name = ""; //String
var num = 0; //Number
var person = null; //Object
方法二:匈牙利标记法
var bIsFound; //boolean
var sName; //String
var nNum; //Number
var oPerson; //Object
方法三:使用类型注释
var bIsFound /*boolean*/ = false;
var sName /*string*/ = "";
var nNum /*number*/ = 0;
var oPerson /*object*/ = null;
松散耦合
HTML/JavaScript
应该通过引用外部文件和使用DOM附加行为来包含js代码
CSS/JavaScript
应该通过动态更改样式的类(className)而非特定样式来实现
编程习惯
尊重对象所有权
不要修改和编辑不属于你的对象,以及js原生类型对象
避免全局量
尽量避免全局变量和函数:
var name = "";
function setName(value) {
name = value;
}
function sayName() {
console.log(name);
}
上面的代码应该包含在一个对象中:
var setPersonName = {
name: "",
setName: function (value) {
this.name = value;
},
sayName: function () {
console.log(this.name);
}
};
setPersonName.setName("Oli");
setPersonName.sayName(); //Oli
使用命名空间
使用多个命名空间,其中的内容互不干扰:
//全局对象
var Wrox = {};
//一个命名空间
Wrox.ProAjax = {};
Wrox.ProAjax.EventUtil = {};
Wrox.ProAjax.CookieUtil = {};
//另一个命名空间
Wrox.ProJS = {};
Wrox.ProJS.EventUtil = {};
Wrox.ProJS.CookieUtil = {};
避免与null比较
当看到了与null比较的代码,应该用以下技术替换:
引用类型,用instanceof等;
基本类型,用typeof等;
使用常量
(略)
C++最佳实践 | 4. 可维护性
本系列是开源书C++ Best Practises的中文版,全书从工具、代码风格、安全性、可维护性、可移植性、多线程、性能、正确性等角度全面介绍了现代C++项目的最佳实践。本文是该系列的第四篇。
可维护性
避免使用编译宏
宏在编译之前被预处理器所替换,从而使得调试非常困难,因为调试器无法知道源代码来自哪里。
// Bad Idea
#define PI 3.14159;
// Good Idea
namespace my_project {
class Constants {
public:
// if the above macro would be expanded, then the following line would be:
// static const double 3.14159 = 3.14159;
// which leads to a compile-time error. Sometimes such errors are hard to understand.
static constexpr double PI = 3.14159;
};
}
避免使用布尔值作为函数参数
在阅读代码时,布尔值无法提供任何额外含义。可以创建一个名称更有意义的独立函数,或者传递含义更明确的枚举值。
参考 http://mortoray.com/2015/06/15/get-rid-of-those-boolean-funct... 了解更多信息。
避免使用裸循环
了解和理解现有C++标准算法,并付诸实践。
- 参考cppreference
- 观看C++ Seasoning
将对[]
的调用看作是一种潜在的代码坏味道,表明没有在需要的地方使用合适的算法。
永远不要使用有副作用的assert
// Bad Idea
assert(set_value(something));
// Better Idea
[[maybe_unused]] const auto success = set_value(something);
assert(success);
在release版本中assert()
将会被删除,从而造成set_value
无法被调用。
虽然第二个版本更丑,但总比第一个错误版本好一点。
正确使用“override”和“final”
这些关键字使其他开发人员可以清楚知道虚函数可以被如何使用,如果虚函数的签名发生了变化,就可以捕获潜在错误,并有可能向编译器提示可以执行哪些优化(参考: How does the compiler benefit from C++''s new final keyword?)。
你好,我是俞凡,在Motorola做过研发,现在在Mavenir做技术工作,对通信、网络、后端架构、云原生、DevOps、CICD、区块链、AI等技术始终保持着浓厚的兴趣,平时喜欢阅读、思考,相信持续学习、终身成长,欢迎一起交流学习。 \
微信公众号:DeepNoMind
本文由mdnice多平台发布
JavaScript BOM——“location 对象”的注意要点
location 对象基本介绍
location 是最有用的 BOM 对象之一,它提供了与当前窗口中加载的文档有关的信息。还提供了一些导航功能。下面是 location 对象的所有属性:
假设当前的 URL 是: http://example.com:1234/test.htm#part2:
hash 设置或返回从井号 (#) 开始的 URL(锚)。//#part2
host 设置或返回主机名和当前 URL 的端口号。//example.com:1234
hostname 设置或返回当前 URL 的主机名。//example.com
href 设置或返回完整的 URL。//http://example.com:1234/test.htm#part2:
pathname 设置或返回当前 URL 的路径部分。///test/test.htm
port 设置或返回当前 URL 的端口号。//1234
protocol 设置或返回当前 URL 的协议。//http:
假设当前的 URL 是: http://www.w3school.com.cn/tiy/t.asp?f=hdom_loc_search
search 设置或返回从问号 (?) 开始的 URL(查询部分)。//?f=hdom_loc_search
位置操作
assign()
方法
为其传递一个 URL,如:
location.assign("http://www.baidu.com");
这样就可以立即打开新 URL 并在浏览器的历史纪录中生成一条记录。也可以用 location.href 和 window.location 设置为一个 URL 的值。
另外,也可以修改 location 对象的其他属性来改变 URL。这样会在浏览器的历史纪录中生成一条新的记录。
replace()
方法
虽然会导致浏览器位置的改变,但不回在历史纪录中生成新的记录。并且用户不能返回到值钱的页面。如:
setTimeout(function(){
location.replace("http://www.baidu.com");
}, 3000)
上面的代码,三秒钟之后跳转到新的页面。
reload()
方法
重新加载,接收一个可选参数,如下:
location.reload(); //可能从缓存中加载
location.reload(true); //从服务器重新加载
如:
setTimeout(reloading, 5000);
function reloading(){
location.reload(true);
}
每五秒钟刷新一次页面。
JavaScript BOM——“navigator 对象”的注意要点
navigator 简单介绍
下面是存在于所有浏览器中的属性和方法(注释:没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象。):
属性:
appCodeName 返回浏览器的代码名。
appMinorVersion 返回浏览器的次级版本。
appName 返回浏览器的名称。
appVersion 返回浏览器的平台和版本信息。
browserLanguage 返回当前浏览器的语言。
cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass 返回浏览器系统的 CPU 等级。
onLine 返回指明系统是否处于脱机模式的布尔值。
platform 返回运行浏览器的操作系统平台。
systemLanguage 返回 OS 使用的默认语言。
userAgent 返回由客户机发送服务器的 user-agent 头部的值。
userLanguage 返回 OS 的自然语言设置。
方法:
javaEnabled() 规定浏览器是否启用 Java。
taintEnabled() 规定浏览器是否启用数据污点 (data tainting)。
如:
console.log(window.navigator);
/*
[Log] Navigator (repetition.html, line 14)
appCodeName: "Mozilla"
appName: "Netscape"
appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/600.8.9 (KHTML, like Gecko) (Coda, like Safari)"
cookieEnabled: true
geolocation: Geolocation
language: "zh-cn"
mimeTypes: MimeTypeArray
onLine: true
platform: "MacIntel"
plugins: PluginArray
product: "Gecko"
productSub: "20030107"
userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/600.8.9 (KHTML, like Gecko) (Coda, like Safari)"
vendor: "Apple Computer, Inc."
vendorSub: ""
__proto__: NavigatorPrototype
*/
具体检测显示网页的浏览器类型将在下一章节讨论。
检测插件
function hasPlugin(name){
name = name.toLowerCase();
for (var i = 0; i < navigator.plugins.length; i ++){
if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
return true;
}
}
return false;
}
上述代码在 IE 中无效。
function hasIEPlugin(name){
try{
new ActiveXObject(name);
return true;
}catch(ex){
return false;
}
}
上述代码用来检测 IE 中的插件,但标识符不同,如 Flash 一般为 ShockwaveFlash.ShockwaveFlash。
通用代码如下(如检测Flash):
function hasPlugin(name){
name = name.toLowerCase();
for (var i = 0; i < navigator.plugins.length; i ++){
if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
return true;
}
}
return false;
}
function hasIEPlugin(name){
try{
new ActiveXObject(name);
return true;
}catch(ex){
return false;
}
}
function hasFlash(){
var result = hasPlugin("Flash");
if (!result){
result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
}
return result;
}
console.log(hasFlash()) //true
注册处理程序
Firefox 2 为 navigator 对象新增了 registerContentHandler()
和registerProtocolHandler()
(这两个方法是在 HTML5 中定义的,相关内容以后讨论)
registerContentHandler()
接收三个参数:要处理的 MIME 类型,可以处理该 MIME 类型的页面 URL 以及应用程序的名称。如:
navigator.registerContentHandler("application/rss+xml","http://www.somereader.com?feed=%s","Some Reader");
// 其中的 %s 表示 RSS 源 URL,由系统自动插入。
registerProtocolHandler()
接收三个参数:要处理的协议(mailto 或 ftp),处理该协议的页面的 URL 和应用程序的名称。如:
navigator.registerProtocolHandler("mailto","http://www.somemailclient.com?cmd=&s","Some Mail Client");
JavaScript BOM——“screen 对象”和“history 对象”的注意要点
screen 对象
用处不大,screen 对象基本上只涌来表明客户端的能力:
availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
height 返回显示屏幕的高度。
width 返回显示器屏幕的宽度。
bufferDepth 设置或返回调色板的比特深度。
colorDepth 返回目标设备或缓冲器上的调色板的比特深度。
deviceXDPI 返回显示屏幕的每英寸水平点数。
deviceYDPI 返回显示屏幕的每英寸垂直点数。
logicalXDPI 返回显示屏幕每英寸的水平方向的常规点数。
logicalYDPI 返回显示屏幕每英寸的垂直方向的常规点数。
fontSmoothingEnabled 返回用户是否在显示控制面板中启用了字体平滑。
pixelDepth 返回显示屏幕的颜色分辨率(比特每像素)。
updateInterval 设置或返回屏幕的刷新率。
history 对象
可以通过 history 对象借由用户访问过的页面列表,在不知道实际 URL 的情况下实现后退和前进。
go()
方法
接收一个参数,表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转,正数表示向前跳转。如:
history.go(-1); //后退一页
history.go(1); //前进一页
history.go(3); //前进三页
也可以传递给该参数一个字符串,如:
history.go("baidu.com"); //跳转到最近的 baidu.com 页面
back()
和forward()
方法
这两个方法可以模仿浏览器的后退和前进按钮如:
history.back(); //后退一页
length
属性
该属性保存着历史纪录的数量。对于加载的第一个页面而言,history.length 为0,通过下面的代码可以测试该属性的值,可以确定用户是否一开始就打开了你的页面:
if (history.length == 0){
//第一个页面
}
history 对象虽然不常用,但在创建自定义的“后退”和“前进”的按钮,以及检测当前页面是不是用户历史纪录中的第一个页面时,还是必须使用它的。
关于JavaScript 代码优化和部署——“可维护性”的注意要点和编写可维护的javascript的介绍已经告一段落,感谢您的耐心阅读,如果想了解更多关于C++最佳实践 | 4. 可维护性、JavaScript BOM——“location 对象”的注意要点、JavaScript BOM——“navigator 对象”的注意要点、JavaScript BOM——“screen 对象”和“history 对象”的注意要点的相关信息,请在本站寻找。
本文标签: