目录(?)[+]
首先要声明一下我的立场,前端是个好东西,我希望我有。但是我之前对于前端确实不太熟悉,最近需要做一个项目,只好赶鸭子上架了。
对于前端还有很多不懂的地方,工期赶得紧,只能先能用再说,没考虑是不是正路子。下面是我最近在工程中所遇到的问题,分享给大家,也是提醒我自己。
对于一位长期从事后端的人来说,JS的运作方式还是给我带来了很多颠覆性认识。
但是其实主要有这么几个方面问题:
无论是有多少函数,什么样的情况下都是单线程在工作,而像回调函数那种,也不过是类似单线程操作系统中的“中断-响应”机制。
js传说是基于对象的,也就是说,任何可操作的主体都是对象,当然也包括js最常见的函数也是对象,应该看过像下面的这种写法:
一个函数同样可以赋给一个变量。另外js的变量都是弱类型的,使用var可以自动转换,这点在字符型与数字型的变量中特别好用,在参数里不用声明其变量类型。那么这样子,所谓的委托,在js就变成了这样子:
这就相当于是一种作用域区分,如果同名的函数放在同一Script块下,会被覆盖掉一个,而如果分开写,则会被解析成2个不同函数。
这时候输出是两次Hello World,而不是Hello Hello World。但是如果像下面这样写的话,就达到了我们预期的效果:
首先我们来看一下赋值函数与定义函数的样子:
可以看到应该长得挺像的,那么他们有什么区别呢?我在做工程的项目中,发现如果是赋值式函数写错了,其实并不影响整个js,而只会影响这一个函数的输出。这是因为,如果是定义式函数,它会在执行前先编译一遍,而赋值式函数,则只会赋值,而并不会对函数本身进行预编译。
js中也有事件,而且确实挺像的,尤其是和C#中的事件特别类似。因为C#中的事件就是委托操作,而Java中大多使用的是监听器来进行,长得不太一样。
js的事件绑定一般就是长这样:
看起来是不是和匿名内部方法一样呢?其实还有另外的事件绑定方法,我们这里就不详细谈了,毕竟我是小白。
bootstrap可谓是不会前端样式的福音,毕竟bootstrap的意思就是自助。但是在学习上虽然可以节省大量学习的成本,但是毕竟是自助,比起专业来讲,还是差上许多,不过已经可以搭建出比较好的前端样式了。
bootstrap的最大特色在于栅格系统,这样可以在布局上省下许多功夫。我曾经就是这样以为,只需要使用class="col-md-x"
就可以很好的来使用,因为一行是12个,每一个控件可以占用指定大小的部分。
但是其实是这样的,所谓的col,其实是column的缩写,既然有列了,当然应该有行了,因此row和col的搭配才能真正运用栅格系统,也就是行和列。但是这两个,都要在.Container中,不然,没有办法自动设置排列和间距。在这点上,我吃了很多苦头。
boostrap的另外一大特色就是丰富的js组件,可以提供一定程度上的动态效果。例如我在工程中用到的折叠样式。折叠样式如下:
这仅仅能展示出最基本的样式,但是如果细心的人可以看到,在第一部分是class="panel-collapse collapse in"
,而第二、第三部分则是class="panel-collapse collapse"
,他们分别对应着两种不同的状态:
class | 意义 |
---|---|
.collapse | 隐藏内容。 |
c.collapse.in | 显示内容。 |
这只是状态,接下来是方法,分别是:Options、Toggle、Show、Hide,但是我目前还不太会用。我只用到了再往下的事件。事件绑定可以解决一个大问题,那就是在初始化的时候,除了展示的面板,其他面板都是被隐藏的,对于里面的元素操作可能会出现问题,例如我遇到了在里面放置echart的时候,没有办法初始化图表,这时候使用了下面的事件绑定,在面板展开后进行重新初始化图表,就解决了这个问题,它总共有4个事件:
class | 意义 |
---|---|
show.bs.collapse | 这个是只要点击就执行,执行完再执行面板展开 |
shown.bs.collapse | 在CSS完成后执行,也就是面板展开后执行。 |
hide.bs.collapse | 这个是只要点击就执行,执行完再折叠面板 |
hidden.bs.collapse | 在CSS完成后执行,也就是面板折叠后再执行。 |
下面给出一个示例:
就是这么简单,当然这也是事件绑定的一种形式,使用的是jQuery的事件绑定,就像下面这样。
说到这,就不得不说这种架构,就是后端如何去控制前端页面,也就是View与Controller的关系。
成熟的话,View是依靠Model生成的,由Controller进行控制。但是通常我们不一定使用MVC架构。最新提出的MVVM(Model-View-ViewModel)架构,则是把M与V中间加一层过渡层,这样C的大部分细节操作从原来的MVP架构中P(Presenter),转移到了VM(ViewModel)中,从而可以使得界面变换更加随意与便捷,为前端开发人员提供了更加自由的开发环境,曾经的P毕竟还是绑定在IView中。二MVVM则彻底把V和P/C分离开来了。
上面说了这么多高大上的话,在我这个并不大的工程中,都用不了,毕竟我自己是小白,那么就选择了最简单的方式,直接用后端来控制前端的输出。
在Aspx中,对于页面前端控件来说,有一些是可以在后端直接获取和运行的,通常的标志就是runat="server"
但是像表格(table)和列表(ol/ul/li)就没有办法进行操作。当然,可以使用数据绑定,这不是嫌太麻烦么,因此就是用了最笨的办法,输出html源码到页面文件中。
Aspx可以定义全局变量,这样前段后端都可以看到这个全局变量,总共需要两步,第一步是在页面中需要输出的部分写下这个变量,如下示例:
这一点和jsp的输出没什么两样,第二步,则是在后端进行数据绑定:
这样就把前端和后端通过一个全局变量联系起来了,当然,你也可以使用Session来进行消息传递,这样就省去了绑定的过程:
后端初始化Session
前端使用Session
上面这两种方法里,变量里都是HTML源码,该是tr、td的就是tr、td。
jQuery是对js的进一步封装,可以解决不同js引擎对于js解析的不同,而且可以简化编码者对于js的操作。尤其是以选择器为代表的一系列操作,极大的简化了dom结点操作。
我之前就有疑问选择器里面的内容有什么区别:
这都是很常见的选取规则,更具体的,大家可以参考一下这里:
jquery选择器参考手册
canvas这个控件有一个非常奇怪的width,当然在代码上是有style里的width,在外面还有一个width,这两个是不同的。style里面的width是画布的宽度,而外面的width是窗口的大小。但是其实还有第三个width,那就是画本身的width,这第三个是canvas本身不能解决的,但是前两个是可以控制的,如果我们要改style里面的width,它是属于Css的,只需要使用如下代码:
但是如果要修改它本身的width,则需要使用下面这个语句:
这两点事不相同的,但是如果是图的宽度不符合条件,那么你需要从图生成的部分开始查起。
Ajax的跨域问题由来已久,也是非常常见的问题,通常来讲,Ajax并不能请求别的网站的请求,那如果需要请求一个外部服务的时候,就产生了跨域问题,那么如何解决这个问题呢?
如果非要使用Ajax,使用jsonp可以解决这个问题,但这需要修改服务端代码,但是如果服务的代码是封装好的,你没有办法或者没有权限修改的时候,这时候就需要Jquery-jsonp插件,这个插件可以解决跨域问题而且不用修改服务端代码。
具体的大家可以看一下jsonp的使用。
Ajax的回调函数也是一个新事物,我们在前面讲过js是单线程的,那么回调函数其实相当于委托事件,当程序执行完毕后,接下来如何处理返回的结果,就是回调函数所要做的事情,Ajax相当于一个发收过程,发送的事件Ajax自动做好了,不用程序员自己处理,但是收的过程需要自己来进行处理。
这和java与C#不同是因为,js一旦进行Ajax操作,就相当于是异步加载,等同于创建了一个线程,那这时候,主程序就失去了对于这个线程的实际控制权,也就是不会知道它什么时候停止,然后再做相应的事情,而回调函数就是主程序派给Ajax请求的一个接收员,等Ajax请求完毕收到返回值的时候,就由接收员来处理接下来的事情。这应该理解了。