前端命名规范

最新推荐文章于 2024-08-07 10:02:43 发布

想成为二师兄的臭猴子

最新推荐文章于 2024-08-07 10:02:43 发布

阅读量127

点赞数

本文链接：https://blog.csdn.net/weixin_42542331/article/details/83022391

版权

js代码要写在js文件中，在html的<body></body>最末尾的位置引入(主要)
规范明细
99%的js代码应该写在外部的javascript文件中，在html文档标签之前引入以提高页面性能。

<!DOCTYPE html>
<html>
    <head>
        <title>这是示范页面</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="css/base.css" type="text/css" rel="stylesheet"/>
    </head>
    <body id="body">
        <div id="ads-c1"></div>
        ...
        ...
        /*****************JS文件放置在</body>标签之前位置*******************/
        <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
        /*****************JS文件放置在</body>标签之前位置*******************/
    </body>
</html>

<head>部分

<head>
		<!--文档类型声明`统一为HTML5声明类型，`编码`统一为UTF-8。-->
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!--模块的名称-->
		<title>xxx</title>
		<!--   非特殊情况下CSS样式文件外链至HEAD之间，JAVASCRIPT文件外链至页面底部。-->
		<link href="${pageContext.request.contextPath}/css/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
			#tableSort {
				width: 100%;
			}
		</style>
	</head>

<body>部分

		1、<!--HTML属性应当按照以下给出的顺序依次排列，来确保代码的易读性。（框架部分样式遵循bootstrap样式）-->
		<!--class，id 、 name，data-*，src、for、 type、 href，title、alt，aria-*、 role-->

		<!--例：-->
		<form class="form-inline  has-float-label" id="query" name="Model" method="post" action="#">
			<input class="form-control" id="opro" name="opro" type="text">
		</form>

	2、<!--点击事件的命名按照数据库中的命名方法写-->

	3、<!--模态框：遵循 新增 ，添加的顺序 （内部样式遵循bootstrap样式）

		新增：id="addUserModal" ，formid id="addUserForm" onclick="add()"确定 onclick="resetModal()"取消 
		修改：id="editModal"， formid id="update" onclick="editInfo()"修改 onclick="resetModal()"取消

	4、<!--含有描述性表单元素（INPUT，TEXTAREA）添加LABEL。-->

		<p>
			<label for="test">测试</label>
			<input type="text" id="test" />
		</p>

	5、引入`JAVASCRIPT`库文件，文件名须包含库名称及版本号及是否为压缩版。
						jQuery-1.8.3.min.js
	   引入`JAVASCRIPT`插件, 文件名格式为库名称+`.`+插件名称。
						jQuery.cookie.js
	   <script src="lib/jquery/jquery-2.1.1.min.js"></script>

	6、	<!--javaScript书写规范-->
		<!--页面的全局函数写在js的最前面，后面按照body中的事件依次书写-->

	6.1、常量名
				全部大写并单词间用下划线分隔；如：CSS_BTN_CLOSE、TXT_LOADING

	6.2、对象的属性或方法名
				小驼峰式（little camel-case）
				示例：init、bindEvent、updatePosition
				示例：Dialog.prototype = {
							init: function () {},
							updatePosition: function () 
						}
	6.3类名（构造器）
				小驼峰式但首字母大写 
					如：Current、DefaultConfig 
	6.4函数名 
				小驼峰式 
					如：current()、defaultConfig() 
	6.5变量名 
				小驼峰式 
					如：current、defaultConfig 
	6.6私有变量名 
				小驼峰式但需要用_开头 
					如：_current、_defaultConfig

	6.7代码格式。
			"()"前后需要跟空格
			"="前后需要跟空格
			","后面需要跟空格
			JSON对象需格式化对象参数
			if、while、for、do语句的执行体用"{}"括起来
		"格式如下。
			if (a==1) {
				//代码
			};

    7.为了避免和`JSLint`的检验机制冲突，“.”或“+”这类操作符放在行尾。
		TEMPL_SONGLIST.replace('{TABLE}', da['results']).
			replace('{PREV_NUM}', prev).
			replace('{NEXT_NUM}', next).
			replace('{CURRENT_NUM}', current).
			replace('{TOTAL_NUM}', da.page_total);