<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit"> 
  <title>kesion内部js规范</title>
  <link href="/ks_inc/popup/css/kesion.popup.css" rel="stylesheet">
  <style>
	*{margin:0px;padding:0px;word-break: break-all;word-wrap: break-word;}
	li,ul{ list-style:none;}
	body{ font-size: 12px;color:#34495e;font-family:'microsoft yahei ui','microsoft yahei',simsun,sans-serif;}
    button{font-family:'microsoft yahei ui','microsoft yahei',simsun,sans-serif;}
	a{text-decoration:none;color:#34495e;}
	.clear{ clear:both; overflow:hidden;}
	.clearfix{overflow:hidden;_zoom:1;}
	.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
	.container{padding:80px 120px;}
	.blank60{height:60px;}
  	h1{ font-size:30px;margin-top:50px;font-weight:normal;color:#00b38a; position:relative;height:70px; line-height:70px;}
	h1 span{color:#929292; font-size:24px; padding-left:10px;}
	h1 .line{width:60px;height:2px; background:#00b38a; position:absolute;bottom:0;left:0;}
	.f-l{ float:left;}
	.info{ line-height:34px; font-size:14px; padding:20px; margin:30px 0px; background:#f9f9f9;}
	.info h4{ font-size:14px; line-height:34px;}
    .info font{color:#03a37e;}
	.title{ font-size:36px; font-weight:bold;height:36px; line-height:36px;}
	.title em{ font-style:normal; font-size:16px;color:#929292; background:#00b38a; color:#fff;border-radius:4px;border-radius:3px; float:left; padding:0px 20px;}

    .button{width:100px;height:36px;line-height: 36px;border:1px solid #ebebeb;border-bottom:1px solid #dbdbdb; text-align:center;background:#fff;border-radius:3px;margin:20px 0;cursor: pointer; box-shadow: 0 1px 3px #e3e3e3; transition: .3s;}
    .button:hover{background:#f9f9f9;}
    .tips{color:#9ba7b4;margin-left:30px;}

  </style>
    
</head>
<body>
   
<div class="container">

    <div class="title"><span class="f-l">kesion内部js编写规范参考</span> <em>2017.10.23</em></div>

   
    <div class="name"><h1>文件引用<i class="line"></i></h1></div>
    <div class="info">
    	  <h4>创建个共用文件，可命名为utils.js</h4>
        js内容：<br />
        var utils = {<br />
          <div class="tips">//jsConfig 用于配置js文件，这样的做法便于后面管理js路径</div>
          &nbsp; &nbsp; <font>jsConfig</font>:{<br />
            &nbsp; &nbsp; &nbsp; &nbsp; jquery:<font>'/ks_inc/jquery.js'</font>,<br />
            &nbsp; &nbsp; &nbsp; &nbsp; form:<font>'/admin/drag/js/form.js'</font>,<br />
            &nbsp; &nbsp; &nbsp; &nbsp; nicescroll:<font>'/ks_inc/jquery.nicescroll.js'</font>,<br />
            &nbsp; &nbsp; &nbsp; &nbsp; assembly:<font>'/ks_inc/kesion.assembly.js'</font>,<br />
         &nbsp; &nbsp;  },<br />
         &nbsp; &nbsp;  <font>loadJs</font>:function(js){ <br />
         &nbsp; &nbsp;    &nbsp; &nbsp; for(var i in js){ <br />
          &nbsp; &nbsp;     &nbsp; &nbsp; &nbsp; &nbsp; document.write('<<font>script</font> src="'+this.jsConfig[js[i]]+'"><<font>/script</font>>')<br />
              
        &nbsp; &nbsp;     &nbsp; &nbsp; }<br />
       &nbsp; &nbsp;    },<br />
        &nbsp; &nbsp;   <font>page</font>:function(page){<br />
         &nbsp; &nbsp;    &nbsp; &nbsp; page.ready();<br />
          &nbsp; &nbsp;    &nbsp; &nbsp; window.onresize = function(){<br />
          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; page.resize();<br />
         &nbsp; &nbsp;    &nbsp; &nbsp; };<br />
       &nbsp; &nbsp;      &nbsp; &nbsp; return page;<br />
        &nbsp; &nbsp;   }<br />
        };<br />


    </div>

    <div class="name"><h1>页面调用<i class="line"></i></h1></div>
    <div class="info">
        <<font>script</font> src="../utils.js"><<font>/script</font>><br />
        <<font>script</font>>utils.loadJs([<font>'jquery'</font>,<font>'form'</font>,<font>'nicescroll'</font>])<<font>/script</font>>
        <div class="tips" style="margin-left:0px">另起一行使用loadJs方法调用需要加载的js</div>
       
    </div>

    <div class="name"><h1>页面js编写规范<i class="line"></i></h1></div>
    <div class="info">
        <div class="tips" style="margin-left:0px;">直接调用page方法，一开始执行的js写在ready函数，如下：</div>
        <<font>script</font>><br />
          var page = new utils.page({<br />
            &nbsp; &nbsp; &nbsp; &nbsp; <font>variable</font>:{
             &nbsp; &nbsp; &nbsp; &nbsp;  <div class="tips">//这边可放全局变量，当然数组名字由你定</div>
           &nbsp; &nbsp; &nbsp; &nbsp;  },<br />
           &nbsp; &nbsp; &nbsp; &nbsp;  <font>target</font>:{
           &nbsp; &nbsp; &nbsp; &nbsp;    <div class="tips">//这边可放全局对象，当然数组名字由你定义</div>
          &nbsp; &nbsp; &nbsp; &nbsp;   },<br />
           &nbsp; &nbsp; &nbsp; &nbsp;  <font>ready</font>:function(){<br />
           &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; this.demo('文字');
               <div class="tips">&nbsp; &nbsp; &nbsp; &nbsp;//这边放一开始即执行的js，ready为固定函数名称</div>
          &nbsp; &nbsp; &nbsp; &nbsp;   },<br />
           &nbsp; &nbsp; &nbsp; &nbsp;  <font>resize</font>:function(){<br />
           &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; console.log(1);
               <div class="tips">&nbsp; &nbsp; &nbsp; &nbsp;//这边可以放窗口调整执行的js</div>              
          &nbsp; &nbsp; &nbsp; &nbsp;   },<br />
          &nbsp; &nbsp; &nbsp; &nbsp; <font>demo</font>:function(text){<br />
                        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(text)<br />
                    &nbsp; &nbsp; &nbsp; &nbsp; }
          <div class="tips">//下面还可以继续增加函数</div>
        });<br />
        <<font>/script</font>>

    </div>

</div>        

</body>
</html>






