系统CSS和JS使用相关说明

商家后台系统下CSS和JS存放位置

• 对商家后台系统进行案例说明

 存放在merchant模块下statics目录下
├── merchant           商家系统模块存放文件夹
│   ├── statics       静态资源存放文件夹
│   │   ├── assets   存储组件
│   │   ├── css      存储系统模块后续增加的css
│   │   ├── ecjia    存储系统模块后续增加的js
│   │   ├── fonts    字体
│   │   ├── img      存储系统模块中使用到的图片
│   │   ├── lib      存储插件
│   │   ├── mh-css   存储商家后台源框架css文件
│   │   ├── mh-js    存储商家后台源框架js文件

JS加载

后台加载js分为两种模式： “预注册加载”，就是先进行注册，然后在使用的时候进行加载即可。 “临时加载”，就是不用进行注册，使用的地方直接进行加载。（app应用模块下使用的场景较多）

预注册加载

例如：需要使用到ecjia-merchant.js文件，如下图所示：

首先需要找到注册文件ecjia_merchant_loader.class.php 的 default_scripts() 方法先进行注册如下图所示：

说明：A:文件路径； B:依赖文件

注册需要调用$scripts->add()方法，该方法具有五个参数如下：

1. 为所注册的名称；
2. 就是相对应的js文件路径；
3. 所依赖的文件，默认array()；
4. 当前文件的版本号，默认false；
5. 加载位置，默认false为头部，1为底部；

例如：

<?php
$scripts->add( 'ecjia-merchant',  'app/merchant/statics/ecjia/ecjia-merchant.js', array('jquery', 'ecjia'),false, false);

此时ecjia-merchant.js文件就注册成功了。

然后就是在使用的地方进行加载，直接用下面该方法调用即可： RC_Script::enqueue_script('所注册的js文件名称');

例如：

<?php
RC_Script::enqueue_script('ecjia-merchant');

然后接下来看一下源代码是否加载成功以及可以看到加载位置，如下图所示：

临时加载

• 无需注册，直接加载

例如：还是需要使用到ecjia-merchant.js文件，如下图所示：

直接用下面该方法调用即可：

<?php
RC_Script::enqueue_script('ecjia-merchant', RC_Uri::admin_url('statics/ecjia/ecjia-merchant.js'),array('jquery', 'ecjia'), false, false);

加载需要RC_Script::enqueue_script()方法，该方法具有五个参数如下：

1. 所注册的名称；
2. 就是相对应的js文件路径；
3. 所依赖的文件，默认array()；
4. 当前文件的版本号，默认false；
5. 加载位置，默认false为头部，1为底部；

然后接下来看一下源代码判断是否加载成功以及可以看到加载位置，如下图所示：

CSS加载

后台加载css分为两种模式： “预注册加载”，就是先进行注册，然后在使用的时候进行加载即可。 “临时加载”，就是不用进行注册，使用的地方直接进行加载。（app应用模块下使用的场景较多）

预注册加载

例如：需要使用到bootstrap.min.css文件，如下图所示：

首先需要找到注册文件ecjia_merchant_loader.class.php 的 default_styles() 方法先进行注册如下图所示：

注册需要$styles->add()方法，该方法具有五个参数如下：

1. 为所注册的名称；
2. 就是相对应的css文件路径；
3. 所依赖的文件，默认array()；
4. 当前文件的版本号，默认false；
5. 加载位置，默认false为头部；

例如：

<?php
$styles->add( 'bootstrap', 'app/merchant/statics/mh-css/bootstrap.min.css', array(), false, false);

此时bootstrap.min.css文件就注册成功了。

然后就是在使用的地方进行加载，直接用下面该方法调用即可： RC_Style::enqueue_style('所注册的css文件名称');

<?php
RC_Style::enqueue_style('bootstrap');

然后接下来看一下源代码是否加载成功,一般情况样式都在头部加载哦，如下图所示：

临时加载

• 无需注册，直接加载

例如：还是需要使用到bootstrap.min.css文件，如下图所示：

直接用下面该方法调用即可：

<?php
RC_Style::enqueue_style('bootstrap', RC_Uri::admin_url('statics/mh-css/bootstrap.min.css'), array(), false, false);

加载需要RC_Style::enqueue_style()方法，该方法具有五个参数如下：

1. 所注册的名称；
2. 就是相对应的js文件路径；
3. 所依赖的文件，默认array()；
4. 当前文件的版本号，默认false；
5. 加载位置，默认false为头部；

然后接下来看一下源代码是否加载成功以及可以看到加载位置，如下图所示：

对已注册的JS和CSS移除方法

平台后台JS库则为全局，此时如果商家后台不需要加载某一个，已有自己的文件，那可以进行加载移除，之后再进行加载自己所需文件即可

方法如下：

<?php

//js注册移除
$scripts->remove('所注册的js文件名称'); 

//css注册移除
$styles->remove('所注册css文件名称');

框架默认加载

注：商家后台下可以调后台注册的，不是隔离的，后台JS库则为全局哦；

• 框架中往往需要一些默认加载的JS和CSS，所以需要把默认加载的JS和CSS写入到load_default_script_style()该方法中如下图所示：

<?php

// 默认加载JS
RC_Script::enqueue_script('所注册的js文件名称');

// 默认加载CSS
RC_Style::enqueue_style('所注册的css文件名称');

框架默认加载统计表

• 默认加载css统计

序号	注册名	文件路径	依赖文件	版本号	加载位置
1	googleapis-fonts	content/apps/merchant/statics/mh-css/fonts/fonts.googleapis.css	无	无	头部
2	bootstrap	content/apps/merchant/statics/mh-css/bootstrap.min.css	无	无	头部
3	bootstrap-reset	content/apps/merchant/statics/mh-css/bootstrap-reset.css	无	无	头部
4	ecjia-merchant-ui	content/apps/merchant/statics/mh-css/ecjia-merchant.ui.css	array('bootstrap')	无	头部
5	ecjia-mh-font-awesome	content/apps/merchant/statics/mh-css/font-awesome.min.css	无	无	头部
6	ecjia-mh-owl-carousel	content/apps/merchant/statics/mh-css/owl.carousel.css	无	无	头部
7	ecjia-mh-owl-theme	content/apps/merchant/statics/mh-css/owl.theme.css	无	无	头部
8	ecjia-mh-owl-transitions	content/apps/merchant/statics/mh-css/owl.transitions.css	无	无	头部
9	ecjia-mh-table-responsive	content/apps/merchant/statics/mh-css/table-responsive.css	无	无	头部
10	ecjia-mh-jquery-easy-pie-chart	content/apps/merchant/statics/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css	无	无	头部
11	ecjia-mh-function	content/apps/merchant/statics/mh-css/ecjia.function.css	无	无	头部
12	ecjia-mh-page	content/apps/merchant/statics/mh-css/page.css	无	无	头部
13	ecjia-mh-chosen	content/apps/merchant/statics/assets/chosen/chosen.css	无	无	头部

• 默认加载js统计

序号	注册名	文件路径	依赖文件	版本号	加载位置
1	jquery	content/apps/merchant/statics/mh-js/jquery-1.11.1.min.js	无	无	头部
2	bootstrap	content/apps/merchant/statics/mh-js/bootstrap.min.js	无	无	头部
3	jquery-pjax	content/system/statics/js/jquery.js	无	2.1.0	头部
4	ecjia-mh-jquery-customSelect	content/apps/merchant/statics/mh-js/jquery.customSelect.min.js	array('jquery')	无	底部（1）
5	ecjia-mh-jquery-dcjqaccordion	content/apps/merchant/statics/mh-js/jquery.dcjqaccordion.2.7.min.js	array('jquery')	无	底部（1）
6	ecjia-mh-jquery-nicescroll	content/apps/merchant/statics/mh-js/jquery.nicescroll.js	array('jquery')	无	底部（1）
7	ecjia-mh-jquery-scrollTo	content/apps/merchant/statics/mh-js/jquery.scrollTo.min.js	array('jquery')	无	底部（1）
8	ecjia-mh-jquery-sparkline	content/apps/merchant/statics/mh-js/jquery.sparkline.js	array('jquery')	无	底部（1）
9	ecjia-mh-jquery-stepy	content/apps/merchant/statics/mh-js/jquery.stepy.js	array('jquery')	无	底部（1）
10	ecjia-mh-jquery-tagsinput	content/apps/merchant/statics/mh-js/jquery.tagsinput.js	array('jquery')	无	底部（1）
11	ecjia-mh-jquery-validate	content/apps/merchant/statics/mh-js/jquery.validate.min.js	array('jquery')	无	底部（1）
12	ecjia-mh-jquery-easy-pie-chart	content/apps/merchant/statics/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js	array('jquery')	无	底部（1）
13	ecjia-mh-jquery-actual	content/apps/merchant/statics/mh-js/jquery-actual.min.js	array('jquery')	无	底部（1）
14	ecjia-mh-jquery-migrate	content/apps/merchant/statics/mh-js/jquery-migrate.min.js	array('jquery')	无	底部（1）
15	ecjia-mh-jquery-quicksearch	content/apps/merchant/statics/mh-js/jquery.quicksearch.js	array('jquery')	无	底部（1）
16	ecjia-mh-morris-script	content/apps/merchant/statics/assets/morris.js-0.4.3/morris.min.js	无	无	底部（1）
17	ecjia-mh-owl-carousel	content/apps/merchant/statics/mh-js/owl.carousel.js	无	无	底部（1）
18	ecjia-mh-respond	content/apps/merchant/statics/mh-js/respond.min.js	无	无	底部（1）
19	ecjia-mh-slider	content/apps/merchant/statics/assets/slider/js/bootstrap-slider.js'	无	无	底部（1）
20	ecjia-mh-sparkline-chart	content/apps/merchant/statics/mh-js/sparkline-chart.js	无	无	底部（1）
21	ecjia-mh-themes	content/apps/merchant/statics/mh-js/themes.js'	无	无	底部（1）
22	ecjia-mh-xchart	content/apps/merchant/statics/mh-js/themes.js'	无	无	底部（1）
23	ecjia-mh-chosen-jquery	content/apps/merchant/statics/assets/chosen/chosen.jquery.min.js	无	无	底部（1）
24	ecjia-mh-chart	content/apps/merchant/statics/assets/Chart/Chart.min.js	无	无	底部（1）
25	jquery-cookie	content/system/statics/js/jquery-cookie.min.js	array('jquery')	无	底部（1）
26	js-json	content/system/statics/js/json2.js	无	无	底部（1）
27	nicescroll	content/system/statics/lib/nicescroll/jquery.nicescroll.js	array('jquery')	无	底部（1）
28	jquery-ui-totop	content/system/statics/js/ui/jquery-ui-totop.min.js	array('jquery-ui')	无	底部（1）
29	ecjia-merchant	content/apps/merchant/statics/ecjia/ecjia-merchant.js	array('jquery', 'ecjia')	无	头部
30	ecjia-merchant-ui	content/apps/merchant/statics/ecjia/ecjia-merchant-ui.js	array('jquery', 'ecjia')	无	头部

特殊场景处理

框架中那些默认加载的js和css并不是所有页面都需要，例如登录页面，还未进入到我们框架中自然不需要那些多余的加载，所以我们只要进行相对应的移除即可。

• 首先找到商家后台的登录方法，如下图所示：

罗列出不需要加载的css和js放到一个数组中进行禁止记载。

<?php

//移除css加载
RC_Style::dequeue_style(array()); 

//移除js加载
RC_Style::dequeue_script(array());