系统CSS和JS使用相关说明

来自ECJiaWiki
跳转至: 导航搜索

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

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

JS加载

后台加载js分为两种模式:

  1. “预注册加载”,就是先进行注册,然后在使用的时候进行加载即可。
  2. “临时加载”,就是不用进行注册,使用的地方直接进行加载。(app应用模块下使用的场景较多)

预注册加载

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

系统CSS和JS使用相关说明 01.png

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

系统CSS和JS使用相关说明 02.png

说明: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');

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

系统CSS和JS使用相关说明 03.png

临时加载

  • 无需注册,直接加载

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

系统CSS和JS使用相关说明 01.png

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

<?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和JS使用相关说明 03.png

CSS加载

后台加载css分为两种模式:

  1. “预注册加载”,就是先进行注册,然后在使用的时候进行加载即可。
  2. “临时加载”,就是不用进行注册,使用的地方直接进行加载。(app应用模块下使用的场景较多)

预注册加载

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

系统CSS和JS使用相关说明 04.png

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

系统CSS和JS使用相关说明 05.png

注册需要$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');

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

系统CSS和JS使用相关说明 06.png

临时加载

  • 无需注册,直接加载

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

系统CSS和JS使用相关说明 04.png

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

<?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为头部;

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

系统CSS和JS使用相关说明 06.png

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

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

方法如下:

<?php

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

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

框架默认加载

注:商家后台下可以调后台注册的,不是隔离的,后台JS库则为全局哦;

  • 框架中往往需要一些默认加载的JS和CSS,所以需要把默认加载的JS和CSS写入到load_default_script_style()该方法中如下图所示:
系统CSS和JS使用相关说明 07.png
<?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使用相关说明 08.png

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

<?php

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

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