微信小程序的MINA框架,其实是许多前端开发技术的组合。这篇文章中,我们来简单地讨论一下模块化。

1、模块化标准

玩前端的同学大部分都知道模块化的几个标准,CommonJs / AMD / CMD。这里花费一些篇幅简单的介绍一下,比较熟悉的同学可以跳过这一部分的介绍。

(1)CommonJs 
CommonJs主要用于服务器端的一些简单的模块引用,如nodejs:

  1. fs=require('fs');

对它来说,一个单独的文件就是一个模块,一个文件定义一个作用域,变量在文件内部都是私有的。
CommonJs采用了同步加载的方式,把文件加载下来才会执行后面的代码,由于在服务端,文件一般在某个目录下,加载不需要网络,所以这种方式不用考虑网络的成本。
下面讲到的AMD和CMD,主要用在浏览器端。

(2)AMD
Asynchronous Module Definition,异步模块定义,requireJs是最典型的例子。这也是国外目前比较流行的模块化标准。
AMD把一个文件(模块)里需要用到的其它模块,定义在头部刚开始的地方,以告诉浏览器,加载这个模块所需要的其它的依赖,这就把依赖前置并执行。

(3)CMD
Common Module Definition,通用模块加载规范,seaJs是典型的代码,一开始是由淘宝的玉伯开发。
与AMD相反的是,它不会前置去执行当前模块所有的依赖,而是在需要的地方才去引入。
关于AMD与CMD之争由来已久,本文不讨论他们的优劣。还有一个最新的标准,UMD,它想统一几种模块化规范,有兴趣的读者可以去网上了解。

2、微信小程序的模块化

wxml、wxss、js,这三类都可以做模块化。
(1)js的模块化
首先先要了解一点,每个js里定义的变量、函数,只在当前的文件里有效,也就是说每个js文件的作用域只在文件内部。
MINA框架其实也做了挺多模块化的封装和合并等工作,开发的时候,我们可以不用在意自己在用的是什么样的标准,最后怎么被合并,也不用去考虑网络问题,因为MINA也帮我们打好包了,按照微信小程序官方文档给出的例子来使用就行,其它的工作它都帮我们做好了。

js的模块引用语法如下:

  1. // b.js
  2. function yyy() {
  3. // ...
  4. }
  5. module.exports = {
  6. yyy: yyy
  7. }
  1. // a.js
  2. var xxx = require('xxx.js')

这样,在a.js文件里,就可以用xxx.yyy来调用到b.js里定义的方法。这个看起来很简单,不过我们要关注的是怎么去做模块化,而不是这个语法本身。

(2)wxml的模块化
wxml代码里也可以根据界面上不同的部分去分块。从主wxml文件里分出来的文件,可以写成一个模板template。
如何定义一个模板?语法很简单

  1. <template name="myTpl">
  2. ...
  3. </template>

讲到模块化,这里我们就需要把template的定义分开,放到另外的wxml文件里,作为另一个wxml文件。在使用的时候,用import来引入。
假设我们的模板写在一个单独的文件item.wxml里,要在主页面中引入:

  1. <import src="item.wxml"/>
  2. <template is="myTpl" data="{{...data}}"/>

这样就可以把独立的UI模块给拆分出来。上面传入data的时候,注意要用…三个点把data这个object平铺开。

另外,微信还提供了一个include操作。跟import的区别是,import是把相应的一个文件里定义的模板引入进来,让主wxml文件可以用这个模板。而include是直接把相关文件的源码、内容,原封不动的导入进来。
微信的官方说明在这里
使用上,读者可以这样简单地来区分:
用模板时,用import引入模板的定义;
不用模板时,用include直接把文件内容导入进来。
前者(import)可以理解为c语法里的引入头文件;后者可以理解为nginx里的ssi,帮你把一个大文件切分成多个内容块,放到几个小文件里。

(3)wxss的模块化
wxss也支持模块化,用@import来导入其它wxss文件到主wxss文件中。这个用法跟sass或less一样,后面记得加分号:

  1. @import "base.wxss";

3、模块化的几个小建议

对于微信小程序的开发,如果项目大了,代码自然就多,分的文件可能也会比较多,这里提几点建议。
[1]. js共用的模块抽出来,放到一个文件夹里,取名如common,里面可以再按功能去分更细的模块,如网络请求模块common/net.js,工具方法集common/util.js,websocket相关模块,等等。
[2]. 把共用的页面头部、底部,放到page/common/ 里面,记得把js和wxml也放在一起。
[3]. 引用外部的库的话,把它们的文件统一放到 lib/ 目录里。
[4]. 之前文章提到的页面和文件的目录划分,也不用去改。如page/ 目录专门存放页面,一对名字(xxx.wxml和xxx.js)就对应一个页面,如果只是页面的一部分,可以放到page/[page_name]/ 目录里,表示这个页面专门用的模块,但如果是几个页面共享的,可以放在上面第2点提到的page/common/ 里
[5]. 模板放tpl/ 目录里,并按页面来分文件夹放。
[6]. 相关的event handler如果逻辑比较多,可以单独抽出来放到一个文件里。

4、组件

MINA框架给我们提供了很多小组件,它们是视图层的基本组成单元,功能相对比较独立,而且组件风格跟微信保持得比较一致,各自有各自的特有的属性,当然也可以自定义属性(如data-xxx)。这里有所有组件的介绍。

微信小程序开发•模块化的更多相关文章

  1. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  2. 微信小程序开发工具测评

    1月9日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下 ...

  3. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  4. 《腾讯游戏人生》微信小程序开发总结

    为打通游戏人生擂台赛与线下商家的O2O衔接,同时响应时下日臻火热的微信小程序,项目团队决定也开发一款针对性的微信小程序,以此方便商家在我们平台入驻并进行擂台赛事的创建和奖励的核销,进一步推广擂台赛的玩 ...

  5. 微信小程序开发实践

    目录 项目是否适合移植到小程序上? 概要介绍 实践得到的经验 规则 小程序不支持的 新特性 小窍门 会话管理 进阶 项目是否适合移植到小程序上? 小程序由于微信提供了一些组件,在微信中的一些体验确实不 ...

  6. 微信小程序开发:学习笔记[5]——JavaScript脚本

    微信小程序开发:学习笔记[5]——JavaScript脚本 快速开始 介绍 小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来 ...

  7. 我们的微信小程序开发

    基于微信小程序的系统开发准备工作 腾讯推出微信小程序也有一段时间了,在各种行业里面也都掀起一阵阵的热潮,很多APP应用被简化为小程序的功能迅速推出,同时也根据小程序的特性推出各种独具匠心的应用,相对传 ...

  8. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  9. 微信小程序开发日记——高仿知乎日报(下)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

随机推荐

  1. JVM内存管理概述与android内存泄露分析

    一.内存划分 将内存划分为六大部分,分别是PC寄存器.JAVA虚拟机栈.JAVA堆.方法区.运行时常量池以及本地方法栈. 1.PC寄存器(线程独有):全称是程序计数寄存器,它记载着每一个线程当前运行的 ...

  2. 微信公众平台开发,API接入与推送事件(1)

    博客好久没有更新了,今天说说微信开发.微信开发的好多初学者都会又这样的迷惑,微信开发到底是什么?其实微信开发本质我和我们的网站开发没有太大的区别.我们常说的微信开发也就是公众号开,微信公众号分为三个类 ...

  3. 如何用Word编辑参考文献------这是引用一位大师的

    如何用Word编辑参考文献修改文献是一件非常痛苦的事情,虽然现在也有很多软件可以编排参考文献,其实word本身就可以. 采用合适的编辑方法会方便地做到整齐,规范,自动排序和交叉引用.1.以尾注的方式插 ...

  4. Java基础学习笔记二十四 MySQL安装图解

    .MYSQL的安装 1.打开下载的mysql安装文件mysql-5.5.27-win32.zip,双击解压缩,运行“setup.exe”. 2.选择安装类型,有“Typical(默认)”.“Compl ...

  5. Java连接mysql——Establishing SSL connection without server's identity verification is not recommended.

    Establishing SSL connection without server's identity verification is not recommended. 出现这个错误的原因是因为m ...

  6. oc中protocol、category和继承的区别

    OC中protocol.category和继承的区别以前还是有点迷糊,面试的时候说的有点混乱,现在结合一些资料总结一下. 利用继承,多态是一个很好的保持"对扩展开放.对更改封闭"( ...

  7. OSI七层协议模型、TCP/IP四层模型学习笔记

    1. OSI七层和TCP/IP四层的关系 1.1 OSI引入了服务.接口.协议.分层的概念,TCP/IP借鉴了OSI的这些概念建立TCP/IP模型. 1.2 OSI先有模型,后有协议,先有标准,后进行 ...

  8. Centos6.7下面配置vim及其插件

    Vim是在vi的基础上升级而来的,比vi更强大,提供代码补全,编译功能 [4]vim Vim是从 vi 发展出来的一个文本编辑器.代码补完.编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用 ...

  9. mybatis的mapper接口代理使用的三个规范

    1.什么是mapper代理接口方式? MyBatis之mapper代理方式.mapper代理使用的是JDK的动态代理策略 2.使用mapper代理方式有什么好处 使用这种方式可以不用写接口的实现类,免 ...

  10. tomca配置文件自动还原问题的解决 server.xml content.xml 等

    当我们在处理中文乱码或是配置数据源时,我们要修改Tomcat下的server.xml和content.xml文件. 但是当我们修改完后重启Tomcat服务器时发现xml文件又被还原了,修改无效果. 为 ...