对于fecshop的js和css部分，有个地方不理解

1.css文件一般放到文件的前面，js文件一般放到页面的最后

2.js css是在库包文件里面，然后通过asset发布到web路径下，对于一个产品而言，只能通过这样

3.强烈建议用系统的方式，因为页面中也有一些js，而fecshop为了更快的加载，吧jquery的加载放到最后，因此，view content部分js的加载，也是用的yii的内置函数

fecshop的js css的重写也是基于上面完成的

4最后，只想说，先搞明白事情，在想办法偷懒，别搞混先后主次，多学习好的思想，别总搞一些自以为是的东西

如果不这样，vendor库包里的css js，如何发布到web路径下，这是基于yii的asset发布的方式

喔，谢谢大神

@zhuzhi1 #3楼 昨晚用手机回复的，回复的不完整，下面完整回答一下：

1.为了浏览器快速加载页面，我们一般需要把js放到页面的底部，譬如，你打开fecshop: https://fecshop.appfront.fancyecommerce.com/ ,查看源代码，你会发现在源代码的底部：

<script src="/assets/7428250b/js/jquery-3.0.0.min.js?v=1"></script>
<script src="/assets/7428250b/js/jquery.lazyload.min.js?v=1"></script>
<script src="/assets/7428250b/js/owl.carousel.min.js?v=1"></script>
<script src="/assets/7428250b/js/js.js?v=1"></script>
<script type="text/javascript">  
$(document).ready(function(){
	$("#owl-fecshop").owlCarousel({
		navigation : true,
		slideSpeed : 300,
		paginationSpeed : 400,
		singleItem : true,
		autoPlay:3000,
		lazyLoad:true
      // "singleItem:true" is a shortcut for:
      // items : 1, 
      // itemsDesktop : false,
      // itemsDesktopSmall : false,
      // itemsTablet: false,
      // itemsMobile : false
	});
	
	$("#owl-best-seller").owlCarousel({
		items : 4,
		lazyLoad : true,
		navigation : true,
		scrollPerPage : true,
		pagination:false,
		itemsCustom : false,
        slideSpeed : 900
	});
	$("#owl-featured").owlCarousel({
		items : 4,
		lazyLoad : true,
		navigation : true,
		scrollPerPage : true,
		pagination:false,
		itemsCustom : false,
        slideSpeed : 900
	});
});
</script>

你会发现除了加载的js文件，还有一些页面的js内容（在view文件中直接写的js代码）

这种方式会更好的浏览器加载。

2.这种方式怎么实现的呢？

首先，我们一般吧js放到页面的顶部head，然后在view中写js，也就是js文件在 <div class="content"></div> ， 但是，你看fecshop的js，是紧贴</body>的位置，也就是在body部分的最后位置，这个得益于yii2的asset ，当在view文件中写js代码，譬如： https://github.com/fecshop/yii2_fecshop/blob/master/app/appfront/theme/base/front/cms/home/index.php

在这个文件得底部，你会发现js部分：

<script>
<?php $this->beginBlock('owl_fecshop_slider') ?>  
$(document).ready(function(){
	$("#owl-fecshop").owlCarousel({
		navigation : true,
		slideSpeed : 300,
		paginationSpeed : 400,
		singleItem : true,
		autoPlay:3000,
		lazyLoad:true
      // "singleItem:true" is a shortcut for:
      // items : 1, 
      // itemsDesktop : false,
      // itemsDesktopSmall : false,
      // itemsTablet: false,
      // itemsMobile : false
	});
	
	$("#owl-best-seller").owlCarousel({
		items : 4,
		lazyLoad : true,
		navigation : true,
		scrollPerPage : true,
		pagination:false,
		itemsCustom : false,
        slideSpeed : 900
	});
	$("#owl-featured").owlCarousel({
		items : 4,
		lazyLoad : true,
		navigation : true,
		scrollPerPage : true,
		pagination:false,
		itemsCustom : false,
        slideSpeed : 900
	});
});
<?php $this->endBlock(); ?>  
</script>  
<?php $this->registerJs($this->blocks['owl_fecshop_slider'],\yii\web\View::POS_END);//将编写的js代码注册到页面底部 ?>

但是源代码中，你发现js并没有在<div class="main container"></div>的后面，而是在页面的最底部 ，这就是上面的代码<?php $this->registerJs($this->blocks['owl_fecshop_slider'],\yii\web\View::POS_END);//将编写的js代码注册到页面底部 ?> 来完成的。

我纯前端移动端页面是放到fecshop外，有个域名指向它，移动端的实现是在apphtml中重写吗？

fecshop的js 和css 的重写，也是基于这个完成的：

http://www.fecshop.com/doc/fecshop-guide/develop/cn-1.0/guide-fecshop-js-css.html

如果感觉费劲，前期可以先模仿用起来，然后在追究原理。

<?php $this->registerJs($this->blocks['owl_fecshop_slider'],\yii\web\View::POS_END);

这种方式，可以灵活的处理js的位置

另外对于特种浏览器加载js也有支持，譬如：https://github.com/fecshop/yii2_fecshop/blob/master/app/appfront/theme/base/front/layouts/home.php

$jsOptions = [
	# js config 1
	[
		'options' => [
			'position' =>  'POS_END',
		//	'condition'=> 'lt IE 9',  去掉注释后，这个js部分只有ie小于9的才会加载的js文件
		],
		'js'	=>[
			'js/jquery-3.0.0.min.js',
			'js/jquery.lazyload.min.js',
			'js/owl.carousel.min.js',
			'js/js.js',
		],
	],
];

另外对于你下载了一些库包，js在vendor下面的库包里，你如果引用进来了？ 你就可以用这种方式加载进来，然后第一次访问，就会发布到web路径下面，你可以看到链接

<script src="/assets/7428250b/js/jquery-3.0.0.min.js?v=1">

到这里你会有疑问，对于开发环境，我肯定希望每次都把这些js css img文件复制到web路径下，尤其是做模板的时候可以方便的调试，但是对于线上生产环境，我肯定希望每次访问不需要去复制这些文件，因为每次都发布文件到web路径有开销，下面解答这个问题：

打开文件： https://github.com/fecshop/yii2_fecshop_app_advanced/blob/master/appfront/config/main.php

你会看到

 'assetManager' => [
            'forceCopy' => true,
        ],

开发环境：设置为true，每次访问，都会强制copy jscss文件到web路径

线上环境：设置为false，每次访问，不会强制复制。这样不会影响速度

你又会有问题，如果线上我更新了js css文件怎么办？

答：当更新了css和js文件，您需要去@app/web/assets/下面清空里面所有文件和文件夹即可。

http://www.yiichina.com/doc/guide/2.0/structure-assets

@zhuzhi1 #5楼 你说的是cdn之类的吧？

http://www.fecshop.com/doc/fecshop-guide/instructions/cn-1.0/guide-fecshop_assets.html

这一块已经更新了，新版本就加上这个，通过配置的方式搞定就OK了

这是个前后端分离的项目，移动端代码可能不会放到fecshop里

@zhuzhi1 #9楼 VUE之类的吧？那你不应该看appfront，你应该看appserver

对于前后端分离，fecshop只提供api，你看一下这里把：

http://www.fecshop.com/doc/fecshop-guide/develop/cn-1.0/guide-fecshop-server.html

vue demo：http://demo.fancyecommerce.com/#/

@zhuzhi1 #9楼 appfront端针对的是pc，apphtml5端针对的是wap类型，appserver针对的是vue，手机app这类前后端彻底分离的类型。

谢谢大神

是前端页面中用ajax请求接口地址吗？appserver中写接口准备数据？

@Terry #11楼 是前端页面中用ajax请求接口地址吗？appserver中写接口准备数据？

@zhuzhi1 #13楼

appserver 入口 只有api ， 全接口

已经说的很清楚了，自己了解，别继续问这些说的很明白的问题。

@Terry #15楼 好吧。。。。。

@zhuzhi1 #16楼 最不喜欢给你这种类型的人回答问题，自己不去了解，不去看，说的这么明白，还是吧是吧是吧

后面在跟个，好吧好吧。

这么懒，就不要玩fecshop了。不适合

看不很懂啊

可以在模板页面直接用

$this->registerJsFile("@web/js/xxxxx.js")

@zkamisama [#20楼](#comment20)

这是yii2的加载方式，不能这样用，如果这样用，fecshop的多模板机制会被破坏掉

不过对于本地自己开发，可以这样使用加载js文件，但是如果想做第三方库包，就不能这样用了，这样别人使用你的库包无法重写js css文件。