Chinaunix首页 | 论坛 | 博客
  • 博客访问: 2040440
  • 博文数量: 162
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 4970
  • 用 户 组: 普通用户
  • 注册时间: 2013-10-23 19:15
  • 认证徽章:
个人简介

等等等等等, 不忘初心,方能始终。技术讨论QQ群:150633458

文章分类

全部博文(162)

文章存档

2018年(10)

2016年(20)

2015年(60)

2014年(41)

2013年(31)

分类: Web开发

2018-02-01 00:34:29

      只要是做过编程的童鞋都知道模块化的思想,这样写出的代码更加简洁明了。模块化的代码让你的思路更加清晰,有利于当前编程,同时还有利于后期的维护。另外,很多有公共作用的代码,理所应当的提炼出来,以提高代码利用率。很多时候一个模块不仅适用于当前的项目,其他项目中同样可以使用的。


一、文件的作用域

JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。通过全局函数 getApp() 可以获取全局的应用实例,如果需要全局的数据可以在 App() 中设置。来看下面的代码

点击(此处)折叠或打开

  1. // app.js
  2. 在app.js中定义全局变量
  3. App({
  4.   globalData: 1
  5. })
  6.   
  7. //weather.js,在这个文件中你可以使用上面定义的全局变量
  8. //首先,获取app实例,使用getApp()方法
  9. var app = getApp()
  10. //接着,你可以使用“.”方法来调用全局变量
  11. app.globalData++
  12. console.log(getApp().globalData)

 

二、使用模块化

可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。需要注意的是:

    1)exports  module.exports 的一个引用,因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口,除非你已经清晰知道这两者的关系。

    2小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。来看下面提供的实例

点击(此处)折叠或打开

  1. // common.js 在这个js文件中定义两个函数,方便在其他js文件中使用
  2. function sayHello(name) {
  3.   console.log(`Hello ${name} !`)
  4. }
  5. function sayGoodbye(name) {
  6.   console.log(`Goodbye ${name} !`)
  7. }
  8. //使用exports语法将上面定义的函数导出
  9. //注意,另外一个js文件看到的是 sayHelloFun,不是sayHello
  10. module.exports.sayHelloFun = sayHello
  11. exports.sayGoodbyeFun = sayGoodbye
  12.   
  13.   
  14. //weather.js 在这个文件中使用上面定义的函数
  15. //实现要使用require语法来引用上面的js文件
  16. //变量common中包含了上面导出的所有的东西
  17. var common = require('common.js')
  18. Page({
  19.   helloMINA: function() {
  20.      //使用”.”语法来调用导出的函数
  21.     common.sayHelloFun('MINA')
  22.   },
  23.   goodbyeMINA: function() {
  24.     common.sayGoodbyeFun('MINA')
  25.   }
  26. })

    注意:require目前不支持绝对路径,你使用相对路径


三、setData

   还记得每一个页面js文件吗,在它的Page中包含了一个data属性,我们说这个data里面放的就是页面的数据,如下:

点击(此处)折叠或打开

  1. Page({
  2.   data: {
  3.     temp: “28摄氏度”,
  4.     array: [{msg: '1'}, {msg: '2'}]
  5.   }
  6. })

    上面的代码很好,但是我们有一个问题,temp值不可能是预先定义好的,你可以看到temp这个key,但是它代表的温度值应该是动态加载的,会时刻发生变化。如何在js文件的其他地方来设置这个temp值呢?

   小程序提供setData方法来动态修改data内部的数据,它可以接收两个参数(ps:我们并不推荐直接使用“=”来赋值

    1object keyvalue 的形式表示将 this.data 中的 key 对应的值改变成 value

    2callback 是一个回调函数,在这次setData对界面渲染完毕后调用。

其中 key 可以非常灵活,以数据路径的形式给出,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义。

    需要注意下面几点

    1直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。

    2单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。

    3)请不要把 data 中任何一项的 value 设为 undefined ,否则这一项将不被设置并可能遗留一些潜在问题。

    4setData是异步执行的

点击(此处)折叠或打开

  1. Page({
  2.   data: {
  3.     text: 'init data',
  4.   },
  5.   //这是一个自定义函数,在这里我们可以修改data的数据
  6.   changeText: function() {
  7.     //
  8.     this.setData({
  9.        //修改text的内容
  10.       text: 'changed data'
  11.       //在data中增加了一个num,它对应的value是1
  12.       num:1
  13.     })
  14.   },
  15. })



四、修改项目

1、之前的代码问题

   我们回顾一下之前的代码,可以看到weather.js文件中有大量的数据,这样让代码非常的不友好。首先,这样写让js文件很乱;其次,在一开始这是key并没有value,是后来动态获取的。
     


   2、提炼data

   我们将data中的数据单独提炼出来,放在另外一个js文件中(weather-data.js)。这里说一下我的习惯:

1)新建文件夹data,所有的数据文件都定义在这里

2)在data文件夹下面创建当前的weather-data.js文件

      

3)修改weather-data.js文件

点击(此处)折叠或打开

  1. //定义一个变量,这个变量包含了我们需要的所有的数据
  2. var allData = {
  3.     title: ["七天预报", "15天预报"],
  4.     weatherData: [{
  5.         date: "1-29",
  6.         image: "/images/sun.png",
  7.         state: "晴",
  8.         temperature: "-11 ~ -1 ℃"
  9.     },
  10.     。。。。
  11.     {
  12.         date: "2-4",
  13.         image: "/images/cloud.png",
  14.         state: "阴",
  15.         temperature: "-19 ~ -5 ℃"
  16.     }]
  17. };
  18.  //将变量导出,名字为allData
  19. //还是那句话,用户看到的是“=”左边的名字
  20. module.exports.allData = allData


现在数据已经成功的提炼出来了,那么记下来就要使用这些数据了

   3、setData


点击(此处)折叠或打开

  1. //使用require语句引入js文件
  2. //wData包含了weather-data.js中定义的所有的变量
  3. var wData = require("../../data/weather-data.js");
  4.   
  5. Page({
  6.   
  7.     /**
  8.      * 页面的初始数据
  9.      */
  10.     data: {
  11.           
  12.     },
  13.   
  14.     /**
  15.      * 生命周期函数--监听页面加载
  16.      */
  17.     onLoad: function (options) {
  18.         //给data中新增一个key→myData,它的value是wData.allData
  19.         //注意,由于wData中不一定是一个变量,因此用“.”方法来调用其中的某一个
  20.         this.setData({ myData: wData.allData});
  21.     },
  22.   
  23. })


阅读(530) | 评论(1) | 转发(0) |
给主人留下些什么吧!~~

拾忆17652075852018-04-09 13:24:00

踩,踩,踩踩,踩,踩踩,踩,踩踩,踩,踩踩,踩,踩踩,踩,踩踩,踩,踩

评论热议
请登录后评论。

登录 注册