代码规范
<h3>注释</h3>
<p>页面设计、页面制作填写具体公司名称,创建:填写页面创建的时间。</p>
<p>禁止注释中出现制作者的个人信息,如姓名、QQ号、邮箱等。</p>
<p>合理的注释有助于后期维护。</p>
<p>较长的的HTML文件,请在板块之间加入注释,使得结构更清晰:</p>
<pre><code class="language-html">...
<!-- 活动板块 开始 -->
<div class="part-act">
...
</div>
<!-- 活动板块 结束 -->
...</code></pre>
<p>如果是需要和后台开发联调的自定义函数。请注明函数的调用方式,包括函数的用途、参数类型等。</p>
<pre><code class="language-javascript">// 转盘初始化
// 参数1:是奖品的个数,数字类型
// 参数2:用来旋转的圆盘元素,可为dom元素 或 选择器字符串
var panel=new PanelLotery({
length:8,
el:'#ltpanel'
});</code></pre>
<h3>命名</h3>
<h4>样式命名</h4>
<ol>
<li>
<p>class、id都需小写</p>
</li>
<li>
<p>命名使用英文,禁止使用特殊字符</p>
</li>
<li>
<p>样式名不能包含<code>ad</code>、<code>guanggao</code>、<code>ads</code>、<code>gg</code>是广告含义的关键词,避免元素被网页拓展、插件屏蔽</p>
</li>
<li>
<p>名称间隔使用<code>-</code>符号</p>
</li>
<li>
<p>涉及数据、交互等需要联调的部分,禁止通过id选择器定义样式,以免开发过程中id名变化,引起页局错乱</p>
</li>
<li>
<p>类名命名需要语义化,参考下面的示例:</p>
<pre><code class="language-css">.wrap{} //外层容器
.mod-box{} //模块容器
.btn-start{} //开始
.btn-download-ios{} //ios下载
.btn-download-andriod{} //安卓下载
.btn-head-nav1{} //头部导航链接1
.btn-news-more{} //更多新闻
.btn-play{} //播放视频
.btn-ico{} //按钮ico
.btn-lottery{} //开始抽奖
.side-nav{} //侧栏导航
.side-nav-btn1{} //侧栏导航-链接1
.btn-more{} //更多</code></pre>
</li>
</ol>
<h4>图片命名</h4>
<ol>
<li>
<p>图片名称必须小写,禁止使用特殊字符、中文</p>
</li>
<li>
<p>使用英文或拼音缩写,禁止特殊字符</p>
</li>
<li>
<p>名称间隔使用<code>-</code>符号</p>
</li>
<li>
<p>命名需要能体现图片的大概用途</p>
<p>常用示例:</p>
<pre><code>bg.jpg //背景图片
mod-bg.jpg //模块背景
sprites.png //精灵图
btn-start.png //开始按钮
ico-play.png //修饰性图片</code></pre>
</li>
<li>禁止文件名和实际图片内容不符。反面例子:图片名为'weixin-qrcode',图片内容却是头像。</li>
</ol>
<h4>文件命名</h4>
<ul>
<li>
<h5>项目命名</h5>
</li>
</ul>
<p>全部采用小写方式, 以下划线分隔。</p>
<p>例:<code>my_project_name</code></p>
<ul>
<li>
<h5>目录命名</h5>
</li>
</ul>
<p>参照项目命名规则;</p>
<p>有复数结构时,要采用复数命名法。</p>
<p>例:<code>pages</code>, <code>assets</code>, <code>directives</code>, <code>components</code>, <code>mixins</code>, <code>utils</code></p>
<ul>
<li>
<h5>js文件命名</h5>
</li>
</ul>
<p>参照项目命名规则。</p>
<p>例:<code>account_model.js</code></p>
<ul>
<li>
<h5><code>CSS</code>,<code>less</code>文件命名</h5>
</li>
</ul>
<p>参照项目命名规则。</p>
<p>例:<code>retina_sprites.less</code></p>
<ul>
<li>
<h5>组件<code>Component</code>命名</h5>
</li>
</ul>
<p>所有组件名字需要首字母大写,然后驼峰格式</p>
<p>例:<code>CalendarList.vue</code></p>