使用gulp 创建一个自动化jquery项目 -- 项目中补充改进版

之前描述过这个框架, 链接在这

整体思路是没有改动的,只是在实际使用的过程中,对一些思路进行了一些调整和完善。最终达到能在项目中正常使用,并且事半功倍对效果。

git上的项目整理源码

gulp处理功能简介

  • 1:可以实现不同模块的引用
  • 2:对es6进行转译
  • 3:对less进行编译
  • 4:编译之后添加版本号,处理缓存
  • 5:自动添加css的前缀

项目最终状态简介

  • 1:项目对标的是vue/react这类的框架,通过jquery+gulp,达到类似的状态。
  • 2:将创建dom这部分提出到createDom.js文件集中处理,并利用es6的转译符${},来达到一个变异js模版的状态。
  • 3:创建一个router对象,并将页面信息配置到对象中,用来配置不同页面的特殊配制信息,如标题等。类似于 vue的router的概念
  • 4:每个模块中直接处理改模块的事件/方法,达到一个统一处理的目的。如titleBar.html中,可以统一处理标题,返回键的操作等
  • 5:通过gulp对less的编译,达到可以使用less的状态
  • 6:通过gulp对创建对文件添加版本信息,用来处理微信缓存对问题。
  • 7:页面编译完成之后,将js/css/html打包出来。图片,第三方插件等不做处理,达到所有内容都在dist文件中的状态

对比剖析

在模版编译方面:

模版编译是这类MVVM框架的亮点,不管是vue模版,还是大名鼎鼎的jsx模版,都让编写者体验了在逻辑中嵌套dom的操作,把最终的拼接处理部分交给了程序。

jquery 编写过程中,如果想预编译,要不停的创建jquery标签对象,然后拼接,append,体验起来甚是麻烦。但是借用es6的`${}`拼接,却可以部分达到jsx的效果,类似于下面这种

createDom.prototype.indexNotice = function(list) {
    let listDom = ''
    list.forEach(item => {
        listDom += `
            <li>
                <a href="${router.goodsList.page}?sortid=${item.column_class_id}">
                    <div class="img">
                        <img src="${ROOT_URI_IMAGE}${item.accessory_path}" alt="">
                    </div>
                    <div class="title">${item.column_title}</div>
                </a>
            </li>
        `
    })
    let dom = `
        <ul>
            ${listDom}
        </ul>
    `
    return dom
}


这种状态下,我既看到正常的dom结构,又可以通过插入变量,整理模版。复用起来也会方便不少。

路由处理

由于jquery的逻辑中没有路由这个概念,我只能自己构造了一个路由的逻辑。创建一个router对象,然后将不同页面页面名称匹配到不同的路由上,然后计算当前是哪个路由页面。

虽然通过这种方式实现的路由比不了把路由放在js缓存中的来的痛快,但是基本能达到在路由中获取不同的配置参数的目的。在跳转页面的时候,也可以通过router对象获取对应的页面信息,达到页面统一管理的目的。

因为切换页面的时候,会重新加载,所有利用js同步加载的特性,可以在初始化的时候,拿到当前对应的是哪个页面。

let router = {
activePage: {
},
index: {
    page: 'index.html',
    name: '商城',
    index: '0',
},
goodsList: {
    page: 'goodsList.html',
    name: '商品分类',
    index: '1',
},
mine: {
    page: 'mine.html',
    name: '个人中心',
    index: '1',
},
shoppingCart: {
    page: 'shoppingCart.html',
    name: '购物车',
    index: '1',
}
}
setActivePage()

// window.location.href = `./${router.confirmOrder.page}`

模块处理

三大框架的另一个优势就是模块化的概念。不同模块被指向了不同的对象,不同对象直接互相隔离,并可以相互引用。

这里jquery就处理不了那么细致了,include中的html文件模块,可以作为引用对象,可以把专属的js写在其中。createDom中的方法,也可以互相作为模块进行引用。

所以,这里虽然满足不了那么细致的操作,但是基本处理还是能够满足的。

less 编译

三大框架带着预编译css语言基本是标配,这里利用gulp,也可以搞出来。用起来会方便很多。

缓存处理

实际使用过程中,在微信端缓存问题很麻烦,这里用gulp加一个版本处理,完美的解决了缓存难以清除的问题。

动态数据绑定---做不到

这个肯定是做不到的。因为模版没有经过解析绑定的过程,也没有虚拟DOM对象做diff判断,所以没办法实现数据双向绑定的操作。但是,jquery的 $().html()等操作,用起来也不费事,可以一定程度上弥补这个空缺。

随机浏览