最近在学习yii2的项目，在跟着老师学习的时候，发现自己平时写的JS代码和老师写的代码是完全不一样的。自己写的是流水线式的，搬砖式的代码。那里需要就写在那里，这样导致一个问题就是一旦业务需求要改变，那么就得全部改写，工作量是很大的，只能是消耗更多的体力。
我们不多说，我们先来感受一下面向对象组织代码是什么样子的。
代码片段1
代码片段2
代码片段3
代码片段4
从上面我们可以看到，代码的组织方式是很有条例的，一进来声明account_set_ops，提供了两个方式一个是初始化操作init()方法，第二个就是事件绑定方法eventBind()方法，主要是给元素提供事件绑定。 最后在页面加载完成后调用init方法，绑定事件。
最让我眼前一亮的，也是解决我很多困扰的一个问题，就是前端生成访问链接的问题。这里老师封装了一个方法buildWebUrl()，封装在common.js文件中，我们截取一下部分代码看一下。
common_ops部分代码
现在我提供访问后台的链接是使用框架中的方法动态生成的，问题在于页面不干净纯粹，需要模板引擎才可以操作，这在一定程度上增加了难度。但是老师这里的做法就是把它封装起来，通过一个方法来动态的生成访问链接，不依靠框架自身的功能来实现，尤其不依靠模板引擎，即便后台不是PHP也可以正常访问。不同的模块我们可以建立属于自己的common.js，当然也可以整个项目使用一个common.js，也是不是不可以，这看你的项目怎么组织的问题。
同样的道理，还可以封装第三方插件，我们知道我们的项目是随时变化的，使用什么方案也是不定的，如果直接在项目中使用这些插件，如果想更换的话难度太大，如果把这些插件在此封装，改变就容易很多了。比如这里我们封装了layer.alert()的弹窗在common_ops.alert()中，如果layer弹窗效果不好，我们还可以迅速更换。这太方便了。具体方法的实现我们封装好了，也不可以看layer文档，看自己封装的方法就可以了。
自己现在是做不到这样的程度，也写不了这么好的代码，我觉得原因如下。第一对JS不熟悉，基本的语法都有困难；第二对Jquery也是不熟悉，只知道一些简单的选择器和方法，其他比较深入的知识就不知道了；第三对ES6是完全不熟悉的，是什么东西都不知道，只知道和JS关系深厚。还有就是对前端误解太深，JS也没什么的。我记得我去年接触一次小程序的JS，我对JS有了全新的认识，真的，好的应用前端是非常牛的，至少可以拯救后台糟糕的问题。
对此我有一个简单的计划，就是每天学习一点JS，从基础的了解，然后就是es6，慢慢来，一下子学习到老师这种程度还真的有点受不了，让我慢慢的来学。还有我曾以为我对ajax也知道一些，但是今天遇到一个问题我就直接蒙圈了，这个问题是。
Ajax
默认的jqery中的ajax是异步请求，也就说这里的代码没有执行完，可以继续往下执行。但是我要求是ajax执行完后才可以往下执行（官方解释：同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行），我是不知道原来还有async这个属性，设置为false表示就是同步了。我的天啊，我对Ajax误会得有多深啊，先心疼一会ajax。
JS真的很重要，没有比这更重要的，如果有，那仅可以排第二。
网友评论